h5-elab-open-ownerUnion/components/charts/homeChartItem.vue

<template>
	<view class="content">
		<!-- #ifdef APP-PLUS || H5 -->
		<view class="title" 
		:style="`background-color: ${isYellow ? fuzhuColor50 : themeColor25};`">
			{{title}}
		</view>
		<view class="count">
			{{count}}
		</view>
		<!-- <view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" ref="chartId" :id="chartId" class="echarts"></view> -->
		<view :prop="option" :change:prop="echarts.updateEcharts" ref="chartId" :id="chartId" class="echarts" v-show="fuzhuColor50!=null && dataList.length > 0"></view>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS || H5 -->
		<view>非 APP、H5 环境不支持</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import echarts from '../../static/echarts.js'
	
	export default {
		props: {
			chartId: String,
			title: String,
			count: Number,
			dataList: Array,
			// dataList: {
			// 	type: Array,
			// 	default:()=> {
			// 		return [1, 2, 1, 1]
			// 	}
			// },
			isYellow: Boolean,
			themeColor25: String,
			fuzhuColor50: String,
		},
		data() {
			return {
				option: {
					xAxis: {
						show: false,
						type: 'category',
						// boundaryGap: false
						boundaryGap: ['20%', '20%']
					},
					yAxis: {
						show: false,
						type: 'value',
						boundaryGap: ['70%', '70%']
						// boundaryGap: false
					},
					series: [
						{
							type: 'line',
							smooth: 0.5,
							symbol: 'none',
							lineStyle: {
								color: null,
								// opacity: 0.6,
								width: 3
							},
							data: []
						}
					]
				}
			}
		},
		
		created() {
			// this.option.series[0].data = []
		},
		
		methods: {
			getDataAction() {
				this.option.series[0].data = this.dataList
				// // console.log('图表数据打印：', this.chartId, this.dataList)
				this.option.series[0].lineStyle.color = this.isYellow ? this.fuzhuColor50 : this.themeColor25
				// // console.log('数据刷新', this.option.series)
			},
			clickAction() {
				// // console.log("clickAction -> this.pageName", this.pageName)
				this.$emit('homeChartItemAction', this.title)
			},
			changeOption() {
				const data = this.option.series[0].data
				// 随机更新示例数据
				data.forEach((item, index) => {
					data.splice(index, 1, Math.random() * 40)
				})
			},
			onViewClick(options) {
				// console.log(options)
			}
		},
		watch: {
			chartId: {
				handler(e1, e2) {
					if (e1 != e2) {
						this.getDataAction()
					}
				},
				immediate: true
			},
			dataList: {
				handler(e1, e2) {
					var e1Str = JSON.stringify(e1)
					var e2Str = JSON.stringify(e2)
					if (e1Str && e1Str != e2Str) {
						this.getDataAction()
					}
				},
				deep: true,
				immediate: true
			},
			themeColor25: {
				handler(e) {
					if (e) {
						this.option.series[0].lineStyle.color = this.isYellow ? this.fuzhuColor50 : this.themeColor25
					}
				},
				immediate: true
			}
		}
		
	}
</script>

<script module="echarts" lang="renderjs">
	let myChart
	export default {
		// props: {
			// chartId: String
		// },
		created() {
			this.initAction()
		},
		mounted() {
			// this.initAction()
		},
		methods: {
			initAction() {
				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)
				}
			},
			initEcharts() {
				// console.log("initEcharts -> this.$refs", this.$refs.chartId.$el.id)
				if (document.getElementById(this.$refs.chartId.$el.id)) {
					myChart = echarts.init(document.getElementById(this.$refs.chartId.$el.id))
					// 观测更新的数据在 view 层可以直接访问到
					if (myChart) {
						myChart.setOption(this.option)
					}
					else {
						// // console.log("无chart11111 -> this.$refs", this.$refs.chartId.$el.id)
						this.initAction()
					}
				}
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				if (myChart) {
					// 监听 service 层数据变更
					myChart.setOption(newValue)
				}
				else {
					// // console.log("无chart11111 -> this.$refs", this.$refs.chartId.$el.id)
					this.initAction()
				}
			},
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				ownerInstance.callMethod('onViewClick', {
					test: 'test'
				})
			}
		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: 100%;
	}
	
	.title {
		font-size: 32rpx;
		font-family: Verdana;
		text-align: center;
		width: 176rpx;
		margin-left: calc((100% - 176rpx) / 2);
		line-height: 46rpx;
		/* background-color: #E1F4F4; */
		color: rgba(0, 0, 0, 0.65);
		margin-top: 28rpx;
		margin-left: 20rpx;
		border-radius: 8rpx;
	}
	
	.count {
		width: 100%;
		margin-top: 24rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		font-family: Verdana;
		font-size: 40rpx;
		color: rgba(32, 38, 56, 1);
	}
	
	.echarts {
		margin-top: 10rpx;
		width: 100%;
		height: 80rpx;
	}
</style>