huanggr
在开发可视化分析或者大数据展示的时候，经常会用到echarts图表，有许多经常会用的参数，这里给大家列举一下，以方便在需要的时候直接使用即可，大家也可以在前端开发栏目下面查看更多的知识技巧！
1.引入echarts.js这个网上下一个或者用cdn。
2.html加一个放图表的容器
1 | <div id="main" style="width:400px;height:400px"></div> |
3.找到这个标签
1 | var myChart = echarts.init(document.getElementById('main')) |
4.放入需要的option数据(一般直接在echarts官网选好了复制即可)
5.为echarts对象加载数据
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轴内容全部显示
有时候我们X轴的文字会很长，多个的话就会挤到一起，这时候我们需要这样设置，在xAxis对象里加：
1 2 3 4 | axisLabel:{ interval:0, //横轴信息全部显示 rotate:-30, // -30度角倾斜显示 } |
图表图例字体颜色，大小， 在legend对象里加：
1 2 3 4 | textStyle:{ //图例文字的样式 color:'#fff', fontSize:12 } |
图表数据颜色，在series对象里加
1 2 3 4 5 | itemStyle:{ normal:{ color:'#ceee61' } }, |
图表字体颜色设置（在xAxis或yAxis里加）
1 2 3 4 5 6 | axisLabel: { show: true, textStyle: { color: '#fff' } } |
调整图表在div中的大小和位置
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 } } }, |
不错不错，来看看。。
欢迎来访