read_opc/reado-app/components/ecahrts/demo.vue

<template>
	<view>
		<view @click="echarts.onClick" :change:prop="echarts.updateEcharts" id="echarts" class="echarts">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onLoad() {},
		methods: {
			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.min.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				myChart = echarts.init(document.getElementById('echarts'))
				// 观测更新的数据在 view 层可以直接访问到
				var data1 = [];
				var data2 = [];
				var data3 = [];
				var random = function(max) {
					return (Math.random() * max).toFixed(3);
				};
				for (var i = 0; i < 500; i++) {
					data1.push([random(15), random(10), random(1)]);
					data2.push([random(10), random(10), random(1)]);
					data3.push([random(15), random(10), random(1)]);
				}
				let option = {
					animation: false,
					legend: {
						data: ['scatter', 'scatter2', 'scatter3']
					},
					tooltip: {},
					xAxis: {
						type: 'value',
						min: 'dataMin',
						max: 'dataMax',
						splitLine: {
							show: true
						},
						axisLabel: {
							interval: 60, // 自定义显示X轴坐标显示间隔
							textStyle: {
								color: '#626262',
								fontSize: '10',
							},
							formatter:(value, index)=> {
								console.log(value)
							    return value + 'kg';
							}
						}
					},
					yAxis: {
						type: 'value',
						min: 'dataMin',
						max: 'dataMax',
						splitLine: {
							show: true
						}
					},
					dataZoom: [{
							type: 'slider',
							show: true,
							xAxisIndex: [0],
							start: 1,
							end: 35
						},
						{
							type: 'slider',
							show: true,
							yAxisIndex: [0],
							left: '93%',
							start: 29,
							end: 36
						},
						{
							type: 'inside',
							xAxisIndex: [0],
							start: 1,
							end: 35
						},
						{
							type: 'inside',
							yAxisIndex: [0],
							start: 29,
							end: 36
						}
					],
					series: [{
							name: 'scatter',
							type: 'scatter',
							itemStyle: {
								normal: {
									opacity: 0.8
								}
							},
							symbolSize: function(val) {
								return val[2] * 40;
							},
							data: data1
						},
						{
							name: 'scatter2',
							type: 'scatter',
							itemStyle: {
								normal: {
									opacity: 0.8
								}
							},
							symbolSize: function(val) {
								return val[2] * 40;
							},
							data: data2
						},
						{
							name: 'scatter3',
							type: 'scatter',
							itemStyle: {
								normal: {
									opacity: 0.8
								}
							},
							symbolSize: function(val) {
								return val[2] * 40;
							},
							data: data3
						}
					]
				}
				myChart.setOption(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>