精彩评论
国瑞个人博客：多谢夸奖，博主自建主题，地址为huangguorui.cn，欢迎鉴赏！
评：Smile_Blog主题简介在线工具：
不错的主题，非常适合技术类博客。
评：Smile_Blog主题简介- 国瑞个人博客：
眉清目秀哇，咋地啊，对我网站感兴趣？
评：博主参加专升本去了 - 国瑞个人博客：
眉清目秀哇
评：博主参加专升本去了 小傻瓜：
啊哈
评：博主参加专升本去了- 国瑞个人博客：
考完了，都炸了
评：博主参加专升本去了
web前端开发博客
专注web前端发展
web前端开发博客
专注web前端发展
2019年03月08日 作者: 国瑞个人博客 488次浏览
在开发可视化分析或者大数据展示的时候，经常会用到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 } } }, |
点击快速分享：
以上就是国瑞前端个人博客带来的是《ECharts常用代码及说明整理》，感谢您的观看！
如果没有特殊的说明，本文即为国瑞前端博客原创(www.huanggr.cn)，欢迎读者转载并保留本站版权！https://www.huanggr.cn/1325.html
「专业前端博客，如果觉得我的文章对您有用，请帮助本站成长」
谢谢你请我吃鸡腿*^_^*
支付宝
微信
上一篇：vue程序化的事件监听器
相关文章：国瑞个人博客: https://www.huanggr.cn/，我们关注Web前端开发技术，web前端开发,移动前端开发，前端资讯，同时分享前端资源和工具等，期待你的参与,了解更多..
博主独立研发主题：
国瑞个人博客：多谢夸奖，博主自建主题，地址为huangguorui.cn，欢迎鉴赏！
评：Smile_Blog主题简介在线工具：不错的主题，非常适合技术类博客。
评：Smile_Blog主题简介国瑞个人博客：眉清目秀哇，咋地啊，对我网站感兴趣？
评：博主参加专升本去了国瑞个人博客：眉清目秀哇
评：博主参加专升本去了小傻瓜：啊哈
评：博主参加专升本去了国瑞个人博客：考完了，都炸了
评：博主参加专升本去了
不错不错，来看看。。
@妙文屋欢迎来访