echarts常用方法(一)
目前,项目中涉及到图表的,使用echarts的频率较多,因为UI设计一般不会考虑到是否能实现的问题,他们专注的只是显示的效果。所以作为前端开发,要对echarts进行不同程度的改造,组合,甚至重写等。接下来会根据我目前的接触到的问题,进行一个循序渐进的总结。因为echart版本的升级等问题,虽说会兼容低版本,但是部分写法依旧在新版本的效果与老版本有区别。以下方法大家只作为参考,版本的不兼容导致写法不同的话,只能靠大家发现。
1.x轴文本换行、调整旋转角度、文本不同颜色
axisLabel: { interval: '0', rotate: 45, textStyle: { fontSize: 10, color:"#666666" color:function (xdata) { return xdata.indexOf('时')<=-1 ? '#E87731' : '#F2F2F2'; } }, formatter: function (value, index) { var arr = value.split(' '); return arr[0]+'\n'+arr[1]; } }
2.柱状图渐变+不同色
if(params.dataIndex > 6){ return new echarts.graphic.LinearGradient(0, 0, 0, 1,[ {offset:0,color:colorList[1][0]}, {offset:1,color:colorList[1][1]} ]) }else{ return new echarts.graphic.LinearGradient(0, 0, 0, 1,[ {offset:0,color:colorList[0][0]}, {offset:1,color:colorList[0][1]} ]) }
3.对没有y轴线,只显示label标签的样式
yAxis: [ { type: 'category', axisTick : {show: false}, axisLine: { lineStyle:{ color:'#527877', opacity:0 } }, axisLabel: { color:'#527877' }, data: ['榆林市','安康市','宝鸡市','商洛市','铜川市','咸阳市','西安市'] }, ]
opacity:0
4.后台报错
如果报错为,该节点已经创建过dom,则需要先销毁再加载chart
echarts.dispose(chartView);
chartView是chart容器的ID