uni

2024-07-10 15:49| 来源: 网络整理| 查看: 265

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

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

更新数据非 APP、H5 环境不支持 export default { data() { return { option: { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] } } }, onLoad() { }, methods: { changeOption() { const data = this.option.series[0].data // 随机更新示例数据 data.forEach((item, index) => { data.splice(index, 1, Math.random() * 40) }) }, onViewClick(options) { console.log(options) } } } let myChart export default { mounted() { if (typeof window.echarts === 'function') { this.initEcharts() } else { // 动态引入较大类库避免影响页面展示 const script = document.createElement('script') // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算 script.src = 'static/echarts.js' script.onload = this.initEcharts.bind(this) document.head.appendChild(script) } }, methods: { initEcharts() { myChart = echarts.init(document.getElementById('echarts')) // 观测更新的数据在 view 层可以直接访问到 myChart.setOption(this.option) }, updateEcharts(newValue, oldValue, ownerInstance, instance) { // 监听 service 层数据变更 myChart.setOption(newValue) }, onClick(event, ownerInstance) { // 调用 service 层的方法 ownerInstance.callMethod('onViewClick', { test: 'test' }) } } } .content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .echarts { margin-top: 100px; width: 100%; height: 300px; }

由于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的方式进行数据更新。

更新数据非 APP、H5 环境不支持

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个，未出现问题；

项目成果简单展示：

【本文地址】

公司简介

联系我们