Homestay_gongzhonghao/components/echarts/dingdanzhuangtai.vue

<template>
	<view>
		<div class="chart1" ref="chart1"></div>
	</view>
</template>
 
<script>
	import echarts from "echarts";
	export default {
		props: {
			// dinglength:{
			// 	type: String,
			// 	// 定义是否必须传
			// 	required: false,
			// 	// 定义默认值
			// 	default: 0
			// },
			dingzhuang:{
				type: Array,
				// 定义是否必须传
				required: false,
				// 定义默认值
				default: []
			},
			dingnum:{
				type: Array,
				// 定义是否必须传
				required: false,
				// 定义默认值
				default: []
			},
		},
		watch:{
			// dinglength: {
			// 	immediate: true,
			// 	handler(value) {
			// 	  this.dinglength = value
			// 	  this.getEchartData1()
			// 	}
			//  },
		   dingzhuang: {
				immediate: true,
				handler(value) {
				  this.dingzhuang = value
				  this.getEchartData1()
				}
			},
		},
		mounted() {
			this.getEchartData1()
		},
		data() {
			return {
			}
		},
 
		methods: {
			// 折线图
			getEchartData1() {
			  const chart1 = this.$refs.chart1;
			  var option = null;
			  const myChart = this.$echarts.init(chart1);
			  option = {
				  tooltip: {
					trigger: 'item'
				  },
				  color:['rgb(0, 157, 255)','rgb(34, 228, 255)','rgb(59, 255, 208)','rgb(4, 227, 138)',
				  'rgb(157, 255, 134)','rgb(254, 229, 136)','rgb(254, 168, 68)','rgb(254, 112, 68)'],
				  legend: {
					top: 'bottom',
					bottom:-10
				  },
				  series: [
					{
					  name: 'Access From',
					  type: 'pie',
					  radius: '50%',
					  center: ['50%', '40%'],
					  data: [
						{ value: this.dingnum[0], name: this.dingzhuang[0] },
						{ value: this.dingnum[1], name: this.dingzhuang[1] },
						{ value: this.dingnum[2], name: this.dingzhuang[2] },
						{ value: this.dingnum[3], name: this.dingzhuang[3] },
						{ value: this.dingnum[4], name: this.dingzhuang[4] },
						{ value: this.dingnum[5], name: this.dingzhuang[5] },
						{ value: this.dingnum[6], name: this.dingzhuang[6] },
						{ value: this.dingnum[7], name: this.dingzhuang[7] },
						{ value: this.dingnum[8], name: this.dingzhuang[8] }
					  ],
					  emphasis: {
						itemStyle: {
						  shadowBlur: 10,
						  shadowOffsetX: 0,
						  shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					  }
					}
				  ]
			  };
			  myChart.setOption(option);
			  window.addEventListener("resize", function () {
				myChart.resize();
			  });
			  this.$on("hook:destroyed", () => {
				window.removeEventListener("resize", function () {
				  chart1.resize();
				});
			  });
			  return option;
			},
			  
		},
 
	}
</script>
<style>
	.chart1 {
		width: 100%;
		height: 100%;
		display: block;
	}
</style>