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

最新推荐文章于 2024-05-21 19:26:31 发布

TheFlashArrow

最新推荐文章于 2024-05-21 19:26:31 发布

阅读量1.2w

点赞数 12

分类专栏： uni-app 文章标签： uni-app android ios

本文链接：https://blog.csdn.net/qq_37565670/article/details/118085702

版权

uni-app 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

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

<template>
	<view class="content">
		<!-- #ifdef APP-PLUS || H5 -->
		<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>
		<button @click="changeOption">更新数据</button>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS || H5 -->
		<view>非 APP、H5 环境不支持</view>
		<!-- #endif -->
	</view>
</template>

<script>
	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)
			}
		}
	}
</script>

<script module="echarts" lang="renderjs">
	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'
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.echarts {
		margin-top: 100px;
		width: 100%;
		height: 300px;
	}
</style>

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

<template>
	<view class="content">
		<!-- #ifdef APP-PLUS || H5 -->
		<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>
		<button @click="changeOption">更新数据</button>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS || H5 -->
		<view>非 APP、H5 环境不支持</view>
		<!-- #endif -->
	</view>
</template>

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轴都消失了，刻度的占位还在。