uniapp echarts ucharts 图表问题

最近项目需要用到图表统计数据，

uniapp 提供的方法有两种：一种是简单一些的ucharts图表，在uniapp的插件市场可以找到，方法简单，可以在线配置，然后吧对应的配置项复制下来即可使用，但是整体是一个简化版echarts，功能并不齐全，本次项目使用的是另外一种 echarts，直接把示例页面代码复制进来。

本篇主要是讲解 各部分代码的实际作用，以便使用出现问题时能更简单的找到问题所在。

<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>

示例代码中主要内容分为三块，view，普通的script  ，视图层的script(module="echarts"   lang="renderjs")

1.三块内容的简单了解。

view 的三个 属性和方法  第一个echarts.onclick 这个的意思是 module="echarts" 的script 中 onclick 方法    第二个prop="option"  是绑定在普通script中的option的数据  第三个 :change:prop="echarts.updateEcharts"  是绑定数据更新时 触发 module="echarts" 的script 中 updateEcharts方法

普通script changeOption 这个可以写一些请求动态数据的方法  onViewClick 配合module="echarts" 的script 中的onclick 方法使用  相当于是onclick方法的回调 

视图层的script(module="echarts"   lang="renderjs")  

mounted 页面初始化完成后会调用内部写的代码。 initEcharts，updateEcharts，onClick  分别对应  初始化图表 更新图表数据 点击图表的方法。

2.echarts的渲染过程（重要，主要bug可以参考渲染过程能解决）

页面加载完成后，调用了初始化图表，这时图表已经按照option创建，只不过如果是动态数据一开始是空数据不显示内容，这时在调用api请求后端数据获取并赋值给option，这时虽然赋值但其实并未直接改变图表，然后触发:change:prop="echarts.updateEcharts"  在视图层中通过setoption实际更新了图表。

3.注意事项

    ①：echarts一定要写css给容器一个高度，否则无法显示图表。

    ②：无论是上边的onclick changeoptions 还是updateecharts等等  这些都是为了举例说明更好的理解写的名称，并不是固定的，可以按照项目需求自行变更。

    ③：多图表时建议updateecharts分开绑定，即如下代码，点击方法可以根据需求写，不需要可以去除。更新方法必须存在。

<view @click="echarts.onClick" :prop="option1" :change:prop="echarts.updateEcharts1" id="echarts1" class="echarts"></view>
<view @click="echarts.onClick" :prop="option2" :change:prop="echarts.updateEcharts2" id="echarts2" class="echarts"></view>


initEcharts() {
	myChart1 = echarts.init(document.getElementById('echarts1'))
	myChart2 = echarts.init(document.getElementById('echarts2'))
	// 观测更新的数据在 view 层可以直接访问到
    myChart1.setOption(this.option1)
	myChart2.setOption(this.option2)
},
updateEcharts1(newValue, oldValue, ownerInstance, instance) {
	// 监听 service 层数据变更
	myChart1.setOption(newValue)
},
updateEcharts2(newValue, oldValue, ownerInstance, instance) {
	// 监听 service 层数据变更
	myChart2.setOption(newValue)
},

 

以上，希望本篇文章可以帮助到你，如果方便就点个赞吧。