echart+vue获取真实接口后上线需要额外注意的事项-渲染不出或者渲染其它未打开图标-图标串联

每个echart的图标都是一个canvas,依托于父级的dom元素，比如<div ref="canva1">

var myChart = echarts.init(this.$refs.canva1);

当我们多个图表命名一致的时候，就会出现这种问题了。

比如几个图表，所有dom元素都是共用的，<div ref="canva1"> 渲染的也都是var myChart = echarts.init(this.$refs.canva1);

这个时候图表就不会显示出来，只会显示最后一个。

如果存在多个图表，一定要注意图标的渲染名字不能够重叠，在原生开发中一般当场就会暴露这种问题。

vue因为是组件化的，在本地是不容易发现这种问题的。当打包上线以后，div不再有局域性，重叠立即发生，图表就会立即出问题

这种问题还出现在地图绘制上。

所以一定要养成习惯，每个canvas所依托的父级元素都分别命名就可以避免这种问题。

 

比如：

有三个图表

那就依托三个组件内每个组件都分别命名

componet canva1.canva2,canva3

<div ref="canva1"><div ref="canva2"><div ref="canva3">

var myChart = echarts.init(this.$refs.canva1);

var myChart = echarts.init(this.$refs.canva2);

var myChart = echarts.init(this.$refs.canva3);

这样即可