在开发可视化分析或者大数据展示的时候，经常会用到echarts图表，有许多经常会用的参数，这里给大家列举一下，以方便在需要的时候直接使用即可，大家也可以在前端开发栏目下面查看更多的知识技巧！
1 | <div id="main" style="width:400px;height:400px"></div> |
1 | var myChart = echarts.init(document.getElementById('main')) |
1 | myChart.setOption(option); |
PS:建议3、4、5步用函数封装起来，这样图表多的时候也好找些。
1 2 3 4 5 6 7 | myChart(); function myChart(){ var myChart = echarts.init(document.getElementById('main')) option ={...} myChart.setOption(option); } |
有时候我们X轴的文字会很长，多个的话就会挤到一起，这时候我们需要这样设置，在xAxis对象里加：
1 2 3 4 | axisLabel:{ interval:0, //横轴信息全部显示 rotate:-30, // -30度角倾斜显示 } |
1 2 3 4 | textStyle:{ //图例文字的样式 color:'#fff', fontSize:12 } |
1 2 3 4 5 | itemStyle:{ normal:{ color:'#ceee61' } }, |
1 2 3 4 5 6 | axisLabel: { show: true, textStyle: { color: '#fff' } } |
1 2 3 4 5 | grid:[ { x: '2%', y: '2%', width: '80%', height: '80%' } ], |
设置图表背景颜色(和title、tooltip等同级)
backgroundColor: ['#02204a'],
设置饼图数据在圈内
在series数组里设置，注意，label和data数组统计，不要把label放在itemStyle里面。
1 2 3 4 5 6 7 8 9 10 11 12 | label: { normal: { position: 'inner', formatter: '{b} : {c} ({d}%)', textStyle: { color: '#fff', fontWeight: 'bold', fontSize: 14 } } }, |
「梦想一旦被付诸行动，就会变得神圣，如果觉得我的文章对您有用，请帮助本站成长」
上一篇：vue程序化的事件监听器
最新评论
国瑞个人博客: https://www.huanggr.cn/，我们关注Web前端开发技术，web前端开发,移动前端开发，前端资讯，同时分享前端资源和工具等，期待你的参与,了解更多..
博主独立研发主题：
没咋研究，emmm
评：web前端绘制八卦图_超简单教程这个是太极阴阳鱼，不是八卦图。
评：web前端绘制八卦图_超简单教程
后会有期（1年前 (2020-08-14)）文章不错
评：宝塔系统面板无法正常显示我采用该方法解决了才发布的教程
评：iview-admin点击路由报错vue-router.esm.js?8c4f:2007 Uncaught (in promise) NavigationDuplicated {_name: "Navi网站被攻击了，有些源码文件损坏了
评：前端搜索框下方保留搜索记录
12（2年前 (2020-03-11)）为什么我的foreach会报错 Error in v-on handler: "TypeE...
评：iview中多选框单选实现方法
不错不错，来看看。。
@妙文屋欢迎来访