Homestay_gongzhonghao/components/echarts/xingbiezhanbi.vue

<template>
	<view>
		<div class="chart1" ref="chart1"></div>
	</view>
</template>
 
<script>
	import echarts from "echarts";
	export default {
		props: {
			// beforeFan:{
			// 	type: Array,
			// 	// 定义是否必须传
			// 	required: false,
			// 	// 定义默认值
			// 	default: []
			// },
		},
		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'
				    },
				    legend: {
				      top: '5%',
				      left: 'center'
				    },
					color:['rgb(0, 157, 255)','rgb(34, 228, 255)'],
				    series: [
				      {
				        name: 'Access From',
				        type: 'pie',
				        radius: ['50%', '70%'],
				        avoidLabelOverlap: false,
				        label: {
							show: true,
							// formatter(param) {
							//   return param.name + ' (' + param.percent * 2 + '%)';
							// }
						  },
				        emphasis: {
				          label: {
				            show: true,
				            fontSize: 40,
				            fontWeight: 'bold'
				          }
				        },
				        labelLine: {
				          show: true
				        },
				        data: [
				          { value: 1048, name: '男' },
				          { value: 735, name: '女' }
				        ]
				      }
				    ]
			  };
			  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>