Echarts相关问题及解决方案

1.echarts图表hover的时候变为pointer

解决方案： 在外层加一个div。

<div class="chart-card">
    <div ref="chart"></div>
</div>

.chart-item > div > canvas:hover {
    cursor: pointer;
}

刚开始，我以为series-line.cursor这个就能解决问题，而实际上，只有在hover到折线图的折点的时候鼠标的样式才是pointer。

2.echarts图表渲染不出来问题

解决方案： setTimeout
在切换路由的时候，由于echarts的渲染速度问题，为获取到高度就开始渲染图表，所以出现了渲染失败的问题

3.echarts缩放问题

问题： 使用dataZoom对echarts进行缩放，自己存储缩放信息，点击还原后，再点击缩放，获取的横坐标的值有问题 解决方案：

     let startValue = this.firstScreenInstance.getModel().option.dataZoom[0].startValue;
    let endValue = this.firstScreenInstance.getModel().option.dataZoom[0].endValue;
    let start = this.firstScreenInstance.getModel().option.xAxis[0].data[startValue];
    let end = this.firstScreenInstance.getModel().option.xAxis[0].data[endValue];

使用这种方法来获取截取的头和尾的value就不会出现上述问题

4.显示最大最小坐标

xAxis.axisLabel.showMaxLabel: true
xAxis.axisLabel.showMinLabel: true

5.如何在xaxis type为'value'的时候限制横坐标显示个数

问题描述： 在连续横轴上限制横坐标的显示个数。
错误解决方案： 首先考虑的是【xAxis.splitNumber】，官方文档上说【坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整】，如果你的数值太大，而splitNumber设置的太小，最后显示效果讲不如你所愿，所以我又设置了一个属性【xAxis.max】，初次实现的时候是正确的，最后max动态加载的时候，页面效果还是不如我所愿。
最终解决方案： 设置xAxis.max和xAxis.interval

如果你的数值太大，而splitNumber设置的太小，最后显示效果讲不如你所愿

interval: null, //设置间隔 最大值去除以你想要的间隔数
max: null, //设置最大值

6.markArea中设置坐标点遇到的坑点

markArea中的坐标点y轴的值在最大值上不能超过本y轴的最大值，最小值无限制。