echart不同报错情况解决思路

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:{}, } ]

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容