echart是4.0的版本,前端框架使用的是react
1.使用this.refs.chart.paint()
时报错cannot read property 'paint' of undefined
this.refs.chart.paint()
用于重绘echarts图表,此报错需要检查执行到对应的代码块时有没有图表存在
有时可以考虑变更函数执行顺序来解决,或者是其他合适的方式(问题不难,只是经常忘记怎么解决,因此记录)
2.绑定监听事件遇到的问题
使用window.onresize=function(){}
,绑定多个echart图,只有最后一个图表会触发监听事件,如果是监听一个图表不会受影响
改为使用window.addEventListener('resize',()=>{})
即可解决
3.echarts饼状图自适应的问题
搜索了一下,使用官方文档中给出的resize方法可以解决大多数图表自适应问题。但是不久前遇到饼状图时不起作用,大小不随页面缩放而变化,始终保持不变(补充:react框架,不确定是不是版本问题,使用的是ecahrts4的版本)
随后使用了比较笨的方式来解决的,js获取当前窗口的大小,然后把控制饼状图大小的属性radius和位置属性center存在state中,窗口变小后使用setState({})改变两者的大小和位置,使得屏幕变小后饼图和图例不是挤在一堆
解决办法:将echarts饼状图的高度改为视口高度vh就可以自适应了
4.柱状图颜色渐变
把color的位置换一下放在itemStyle外面,解决了。(也可以使用echarts内置的渐变色生成器echarts.graphic.LinearGradient
)
series:[ color:{ // color 的 x,y,x1,y1 分别表示四个方向。 type:'linear', // 线性渐变 x:1, // x : 从左向右 1 ——> 0 y:0, // y:从上向下 1 ——> 0 x2:0, // x2:从右向左 1 ——> 0 y2:0, // y2:从下向上 1 ——> 0 colorStops:[ { offset:0, // offset:坐标为0处的颜色 color:'' }, { offset:0, // offset:坐标为1处的颜色 color:'' }, ] }, itemStyle:{ normal:{}, } ]