共 2 条评论关于"ECharts常用代码及说明整理"
最新评论
在开发可视化分析或者大数据展示的时候,经常会用到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程序化的事件监听器
最新评论
免费领取学习资料和视频
收到了,你这个网址无法访问呀
评:react中调用 setState 之后发生了什么大佬,都联系不到你人, 那个友链能帮忙换一下不 原 共享博客 http:/...
评:react中调用 setState 之后发生了什么没咋研究,emmm
评:web前端绘制八卦图_超简单教程这个是太极阴阳鱼,不是八卦图。
评:web前端绘制八卦图_超简单教程文章不错
评:宝塔系统面板无法正常显示我采用该方法解决了才发布的教程
评:iview-admin点击路由报错vue-router.esm.js?8c4f:2007 Uncaught (in promise) NavigationDuplicated {_name: "Navi
不错不错,来看看。。
@妙文屋欢迎来访