h5-elab-open-ownerUnion/components/charts/daskSubCharts/yaoyueChart.vue

<template>
	<view class="content">
		<!-- #ifdef APP-PLUS || H5 -->
		<view class="title" 
		:style="`background-color: ${isYellow ? fuzhuColor50 : themeColor50};`">
			{{title}}
		</view>
		<view class="count">
			{{count}}
		</view>
		<view :prop="option" :change:prop="echarts.updateEcharts" id="yaoyueChart" 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: {
			title: String,
			count: Number,
			dataList: {
				type: Array,
				default: () => {
					return []
				}
			},
			isYellow: Boolean,
			themeColor50: String,
			fuzhuColor50: String,
		},
		data() {
			return {
				option: {
					grid: {
						left: '10%',
						right: '10%',
						top: '0%',
						bottom: '10%',
						containLabel: false
					},
					xAxis: {
						show: false,
						type: 'category',
						boundaryGap: ['20%', '20%']
					},
					yAxis: {
						show: false,
						type: 'value',
						boundaryGap: ['70%', '70%']
					},
					series: [
						{
							type: 'line',
							smooth: 0.5,
							symbol: 'none',
							lineStyle: {
								color: null,
								width: 3
							},
							data: []
						}
					]
				}
			}
		},
		
		created() {
			// this.option.series[0].data = []
		},
		
		methods: {
			getDataAction() {
				this.option.series[0].data = this.dataList
				this.option.series[0].lineStyle.color = this.isYellow ? this.fuzhuColor50 : this.themeColor50
				// console.log('数据刷新', this.option.series)
			},
		},
		watch: {
			dataList: {
				handler(e1, e2) {
					var e1Str = JSON.stringify(e1)
					var e2Str = JSON.stringify(e2)
					if (e1Str && e1Str != e2Str) {
						this.getDataAction()
					}
				},
				deep: true,
				immediate: true
			},
			themeColor50: {
				handler(e) {
					if (e) {
						this.option.series[0].lineStyle.color = this.isYellow ? this.fuzhuColor50 : this.themeColor50
					}
				},
				immediate: true
			}
		}
		
	}
</script>

<script module="echarts" lang="renderjs">
	let myChart
	export default {
		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() {
				myChart = echarts.init(document.getElementById("yaoyueChart"))
				// 观测更新的数据在 view 层可以直接访问到
				myChart.setOption(this.option)
			},
			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>