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

<template>
	<view class="content">
		<!-- #ifdef APP-PLUS || H5 -->
		<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" ref="chartId" :id="chartId" class="echarts"></view>
		<!-- #endif -->
	</view>
</template>

<script>
	import echarts from '../../static/echarts.js'
	let app = getApp();

	export default {
		props: {
			chartId: String,
			dataList: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				data1: [],
				themeColor: null,
				fuzhuColor: null,
				themeColor50: null,
				themeColor25: null,
				fuzhuColor50: null,
				fuzhuColor15: null,
				option: {
					tooltip: {
						trigger: 'item',
						// formatter: '{a} <br/>{b} : {c} ({d}%)'
						// formatter: '{a} {b} :({d}%)'
						// trigger: 'item',
						align: 'auto'
					},
					color: [],
					series: {
						name: '',
						type: 'pie',
						radius: ['52%', '70%'],
						center: ['50%', '50%'],
						data: [],
						itemStyle: {
							normal: {
								// color: function(e) {
								// 	var colorList = [this.themeColor, this.fuzhuColor, this.themeColor25, this.themeColor50]
								// 	return colorList[e.dataIndex]
								// },
								label: {
									// formatter: function(e) {
									// 	return "" + e.name + "\n\n{d|" + e.des + "}"
									// },
									formatter: null,
									rich: {
										d: {
											fontSize: 14,
											color: "#000000"
										}
									}
								}
							},
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.0)'
								}
							}
						}
						// emphasis: {
						// 	itemStyle: {
						// 		shadowBlur: 10,
						// 		shadowOffsetX: 0,
						// 		shadowColor: 'rgba(0, 0, 0, 0.5)'
						// 	}
						// }
					}
				},


			}
		},

		mounted() {
			this.themeColor = app.globalData.themeColor
			this.themeColor50 = app.globalData.themeColor50
			this.themeColor25 = app.globalData.themeColor25
			this.fuzhuColor = app.globalData.fuzhuColor
			this.fuzhuColor50 = app.globalData.fuzhuColor50
			this.fuzhuColor15 = app.globalData.fuzhuColor15

			this.getDataAction()
		},

		methods: {
			getDataAction() {

				// this.dataList = [{
				// 		name: '户型',
				// 		value: 460,
				// 		color: this.themeColor
				// 	},
				// 	{
				// 		name: '周边配置',
				// 		value: 280,
				// 		color: this.fuzhuColor
				// 	},
				// 	{
				// 		name: '智能化',
				// 		value: 120,
				// 		color: this.themeColor25
				// 	},
				// 	{
				// 		name: '面积',
				// 		value: 210,
				// 		color: this.themeColor50
				// 	}
				// ]

				this.data1 = this.dataList || []
				this.option.series.itemStyle.normal.color = null

				this.data1.forEach((item, index) => {
					item['color'] = ''
					item.name = item.name + item.des
					if (index == 0) {
						item.color = this.themeColor
					} else if (index == 1) {
						item.color = this.fuzhuColor
					} else if (index == 2) {
						item.color = this.themeColor50
					} else {
						item.color = this.themeColor25
					}
				})
				var tempData = this.data1
				var self = this
				this.option.series.data = tempData
				this.option.color = [this.themeColor, this.fuzhuColor, this.themeColor50, this.themeColor25]
				// this.option.series.itemStyle.normal.color = function(e) {
				// 	// console.log('color打印：', self.data1[e.dataIndex].color)
				// 	return self.data1[e.dataIndex].color
				// }
				// uni.showModal({
				// 	content: JSON.stringify(this.data1)
				// })
				// this.option.series.itemStyle.normal.label.formatter = function(e) {
				// 	// console.log('e：', e)
				// 	var obj = self.data1[e.dataIndex]
				// 	return "" + obj.name + "\n\n{d|" + (obj.value).toFixed(2) + "}"
				// }
				// this.chengjiaoNum = this.dataInfo.dealRateScore
				// this.yixiangNum = this.dataInfo.yxScore
				// this.bakongNum = this.dataInfo.bkScore
				// this.option.series[0].data[0].value = [this.chengjiaoNum, this.yixiangNum, this.bakongNum]
				// console.log('决策要素数据刷新', this.data1)
			},
			onViewClick(options) {
				// console.log(options)
			}
		},
		watch: {
			chartId: {
				handler(e) {
					// this.getDataAction()
				},
				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() {
				// console.log("initEcharts -> this.$refs", this.$refs.chartId.$el.id)
				myChart = echarts.init(document.getElementById(this.$refs.chartId.$el.id))
				// 观测更新的数据在 view 层可以直接访问到
				if (myChart) myChart.setOption(this.option)
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				if (myChart) myChart.setOption(newValue)
			},
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				ownerInstance.callMethod('onViewClick', {
					test: 'test'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100%;
		position: relative;
		font-size: 60rpx;
		font-family: DIN Alternate;
		font-weight: bold;

		.echarts {
			width: 100%;
			height: 100%;
		}
	}
</style>