Homestay_gongzhonghao/components/echarts/minsutongji.vue

<template>
	<view>
		<div class="chart1" ref="chart"></div>
	</view>
</template>
 
<script>
	import echarts from "echarts";
	export default {
		props: {
			xianmin:{
				type: Array,
				// 定义是否必须传
				required: false,
				// 定义默认值
				default: []
			},
			hotelnum:{
				type: Array,
				// 定义是否必须传
				required: false,
				// 定义默认值
				default: []
			},
		},
		mounted() {
			this.getEchartData()
		},
		watch:{
		   hotelnum: {
				immediate: true,
				handler(value) {
				  this.hotelnum = value
				  this.getEchartData()
				}
			},
		},
		data() {
			return {
			}
		},
 
		methods: {
			// 折线图
			getEchartData() {
			  const chart = this.$refs.chart;
			  var option = null;
			  const myChart = this.$echarts.init(chart);
			  option = {
				  legend: {},
				  color:'rgba(9, 101, 98, 1)',
				  grid: {
				      left: '3%',
				      right: '4%',
				      bottom: '34%',
				      containLabel: true
				    },
				    xAxis: {
				      type: 'value'
				    },
				    yAxis: {
				      type: 'category',
				      data: this.xianmin
				    },
				    series: [
				      {
				        name: '数量',
				        type: 'bar',
				        stack: 'total',
				        label: {
				          show: true
				        },
				        emphasis: {
				          focus: 'series'
				        },
				        data: this.hotelnum
				      },
				    ]
			  };
			  myChart.setOption(option);
			  window.addEventListener("resize", function () {
				myChart.resize();
			  });
			  this.$on("hook:destroyed", () => {
				window.removeEventListener("resize", function () {
				  chart.resize();
				});
			  });
			  return option;
			},
			  
		},
 
	}
</script>
<style>
	.chart1 {
		width: 100%;
		height: 115%;
		display: block;
	}
</style>