uni-app APP端Echarts 使用与踩坑总结

场景：在项目APP上一版本图表需求中，使用了官方插件市场中的秋雨uCharts组件，使用起来比较方便，其配置参数文档，对每一项文案进行了说明；但随着本期项目APP这边的图表需求变得复杂，秋雨uCharts无法满足当下的需求，因而将项目中两个页面的图表组件，均替换成ECharts。替换过程中，遇到了很多问题，在此记录一下。（注：本文章基于折线图进行讲解，部分特殊图表存在区别）

集成：集成可以参考uni-app官网demo，这边我直接贴一下demo页面的代码，方便寻找：

由于Echarts需要renderjs，因而需要新开一个

页面主script，如下图：

Echarts的script，其中，echarts.js的位置根据实际情况来，如下图：

 在集成完成后，是Echarts option配置，Echarts官方配置文档，option配置参照官网一个个查阅就行，略微繁琐；这第一次使用，我对这密密麻麻的参数也头皮发麻，多查几次就了解了；我列举一下主要的几个配置参数：title(图表标题)、legend(图例)、grid(网格)、xAxis(x轴配置)、yAxis(y轴配置)、series(图表数据源配置)。

接下来就是uni-app APP端各种踩坑、填坑、各种问题总结，主要是在实现项目需求过程中所发现的：

1.uni-app  APP端图表数据赋值问题：

        由于Echart引入APP需要使用renderjs，在APP端需要将Echart相关初始化方法放于新的script标签中，并且主script与ECharts script 数据不互通。在主script data中定义option，option与ECharts容器view 的 prop参数进行绑定，change:prop属性绑定ECharts script中的updateEcharts()方法，进行option数据改变监听，如下代码块。操作option数据，就能实现图表数据更新。这边其实demo中已经给的挺详细，是我自己草率疏忽了，那天纠结了一上午。。。。。。。。。

        其数据更新原理是，当改变option数据时，ECharts script 中的updateEcharts()方法能监听到数据更新，将更新后的newValue(新option数据)，通过myChart.setOption()方法进行数据赋值渲染。

        目前在项目开发中发现，深层次option参数赋值（目前项目中最多是3层的情况），监听方法也能触发。若出现深层次赋值监听方法不触发的情况，则需要通过深拷贝后，整体赋值option的方式进行数据更新。

2.图表数据、线条存在缓存问题：

        项目图表有折线数据筛选功能，问题场景：默认进入页面四条折线，修改series数据为三条折线后，还是展示4条折线，本该消失的折线没有去除。这里要引入Echarts的两个方法：myChart.clear()移除画布中所有元素，myChart.setOption(newValue, true)，第二个参数为true时，不保留原来的数据；false保留原数据，与新数据合并。日常使用在更新数据是用第二个方法就行，下代码块是我项目中的更新逻辑。

updateEcharts(newValue, oldValue, ownerInstance, instance) {
        // 监听 service 层数据变更
        if (newValue.series.length == 0) {
          //画布全部清除，包括坐标轴等
          myChart.clear()
        } else {
           //true不保留原来的数据，false保留原数据
          myChart.setOption(newValue, true)
        }
      },

        

3.多y轴情况下，图例监听事件失效，不会返回图例选中状态：

        因项目需要，为了能展示所有折线图的趋势，需要多y轴进行实现；在单y轴情况下，因为各个曲线量程不一，部分折线趋近于一条直线。

        需求中一项交互逻辑需要与图例状态进行关联，最开始通过Echarts api event下的图例状态监听事件：'legendselectchanged'，对图例选中状态进行监听。但在切换到多y轴后，发现图例监听事件失效了，无奈之下，只能自定义图例组件，并对页面中Echarts数据处理逻辑进行重构。使用自定义图例的好处是，点击灵敏度有很大提升。下面放一下监听事件的写法(本人项目中已移除)，监听事件应放在initEcharts()初始化方法中：

myChart.on('legendselectchanged', (params)=> {
          console.log(params)
         });

4.多y轴情况下，yAxis.show = false情况下，y轴存在占位问题，如下图这种情况：

        多y轴情况下，每条series数据通过yAxisIndex绑定，例如我有4条折线，yAxisIndex通过循环自增，分别赋值为0，1，2，3，并且yAxis数组也为4个。我在项目中，多y轴的处理逻辑：网络请求获取数据后，记录一条有数据的y轴索引作为基准y轴。当多条折线都展示时，展示基准y轴；当只有一条折线展示时，展示与yAxisIndex对应的y轴，y轴始终只有一条展示，且多折线展示是，y轴数值是不准的(没办法需求要这样子)。

        排查：打印最终赋值的option配置数据，放到Echarts官网进行反向排查，直接专攻yAxis的配置。在多次尝试排查后发现，y轴yAxis.show = false，的情况下，它的坐标刻度axisLabel的占位居然还在，最后各条y轴加上对的yAxis. axisLabel.show = false 参数配置后，终于解决了该问题。这个设定即奇怪又恶心，很难想到y轴都消失了，刻度的占位还在。

5.y轴：脱离 0 值比例、上下两边各留白20%：

配置项：yAxis. scale: true、yAxis.boundaryGap: ['20%', '20%']，参数详细解释见官网：yAxis。

6.Echarts渲染过程中，在动画开启、每条曲线数据量大，等条件下，可能会偶现绘制结果线条混乱的情况，如下测试之前提bug给我时的截图：

        解决方法有以下几种：

        1.关闭动画animation，可以尝试一下 ，option.animation = false。这个方法我没尝试过，不一定有效，公司前端大佬项目是关闭动画的，并且没出现过绘制紊乱的情况，但浏览器和手机新能也有区别。

        2.减少折线数据点位，最开始的时候后端单条折线最多返回400条数据，目前减少到200个，未出现问题；

项目成果简单展示：