1

reado-app/components/ecahrts/demo.vue

@@ -0,0 +1,183 @@
+<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>