关于eacharts在使用出现的问题
1.立体柱状图的展示问题
图表使用的是pictorialBar做的立体柱状图
具体的结构是
series: [
{
name: "成交量",
type: "bar",
barWidth: 10,
barGap: 0,
},
{
name: "成交量",
type: "bar",
barWidth: 10,
},
{
name: "成交量",
tooltip: {
show: false,
},
type: "pictorialBar",
symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z",
symbolSize: ["20", "7"],
symbolOffset: ["-10", "-4"],
symbolRotate: -16,
symbolPosition: "end",
z: 3,
},
];
出现的问题：
鼠标悬浮在图表上，柱状图图表的左侧会出现与柱状图颜色一样的不规则的大矩形。
原因：
使用pictorialBar这种方式做的柱状图，y轴的值不能是0，否则就会出现上述的异常问题
解决方案：
-
后台数据改成，如果数据是0,则返回null
-
前端通过将数组转成字符串后，通过replace将null全部改为0.5
let newValue = JSON.stringify( value ).replace( /null/g ,0.5)
- 在tooltip中的formatter中，将0.5展示为0再 return 展示
tooltip:{
formatter:(parame)=>{
if(parame.vaue==0.5) return 0
return parame.value
}
}
后台返回null而不是直接返回0.5是因为后台的变量类型是lang型，不能返回小数
前端将null转成0.5，又在tooltip中提示值为0的原因是：
-
如果值为0立体柱状图会出现显示异常的问题
-
这个柱状图统计的数据肯定是整数，不可能出现小数，所以用0.5来标志0
3. 如果不经过null-->0.5-->0这样的转换，后台返回null时，柱状图是不显示的，所以给了一个0.5这样一个小值，能够让其展示为0的效果
这样处理也有一个小问题，如果所有的返回数据都是0，这样最终就会显示成都是高0.55的柱状图，此时可以根据数据一般的y轴值，给定一个yAxis的max值，这个max值要跟0.5相差的比较多，或者将0.5再变小。这样就会解决掉上述的问题
2. echarts配置封装问题--互相影响
页面同时六个图表，需要将echarts配置封装一下，避免代码的冗余，这里了有个注意事项 封装的每一个特性，都应该作为一个方法的返回值，如下：
const grid = (top = 20, left = 50, bottom = 50, right = 20, color = "#fff") => {
return {
borderWidth: 0,
top,
left,
right,
bottom,
textStyle: {
color,
},
};
};
这样做的好处：
- 配置不是固定的，可以传值不同的参数
- echarts实例之间不会互相影响，如果只是定义一个配置对象导出， 在不同echarts实例中都使用这个配置对象，echarts初始化后的实例会显示异常： （其中就遇到了，a.悬浮到canvas上，echarts canvas背景色直接就变成了红色的，鼠标离开，红色背景色消失 b.不同的echarts折线图，后台返的数据也不同，但是最终图表显示相同的数据） 所以，封装的时候将配置都放在函数中进行返回，这样整洁安全可维护性也高
3. 组件v-show 导致canvas不能沾满父元素
当组件使用v-show进行控制时，内部的echarts实例渲染时，取不到正确的外层容器高宽，渲染异常。 代码中采用的是将v-show改成v-if，也可以放在this.$nextTick中，或者setTimeout，但是这种方式还没 有尝试
4. 数据过大与echarts游离dom造成内存越来越高的问题
echarts数据的堆叠方式：
说明：后台接口返回数据，前端接到数据后，携带者数据的最后一项的时间戳进行下一次请求，接到数据后，在之前返回的数据的基础上push新数据。 一个页面有6个图表，每个图表最终会有180个数据点
问题：浏览器内存持续升高
解决：
1.echarts实例不要放在data中，每个图表对应的数据也不要放在data中
因为vue会对遍历对象的每一层，6个eharts对象的嵌套层太多了，而且也没必要对echarts实例进行响应式监测，把实例对象放到data之外，减少内存消耗。数组数据也是这样，因为频繁的涉及到数据的push，而且数组的数据量比较较大，并且不需要响应式的渲染，因为每次都是通过api重新渲染图表，所以也把数组放到data外面
2.把echarts实例和数组对象放到data外面之后，发现内存还是一直在涨
原因：页面销毁后，在data外面定义的echarts实例对象与数组对象都没有被销毁， 导致游离dom持续增加，并且数组占用的浏览器内存也在持续升高。所以在组件destory的时候要将实例对象与数组都置位null
浏览器的内存升高主要是通过chorme浏览器的Memory面板中使用Heap snapshot这个内存快照功能， 生成了快照后，可以看到当前占用的内存总量大小，点击详情能够看到当前页面中Echarts实例的个数，如果随着页面的跳转，Echarts的实例越来越多，就是在页面离开前没有将Echarts实例置空，出现了游离dom
