echarts清除图标信息、echarts添加点击事件、echarts动态改变大小

<template>
	<div>
		<div id="myChart" style="width: 100%;height: 90vh;"></div>
	</div>
</template>


<script>
	export default {
		data() {
			return {
				option_column: {
					backgroundColor: '#0f375f',
					title: [{
							text: "各渠道投诉占比",
							x: '2%',
							y: '1%',
							textStyle: {
								color: "#fff",
								fontSize: "14"
							}
						},
						{
							text: "投诉原因TOP10",
							x: '40%',
							y: '1%',
							textStyle: {
								color: "#fff",
								fontSize: "14"
							}
						},
						{
							text: "各级别投诉占比",
							x: '2%',
							y: '50%',
							textStyle: {
								color: "#fff",
								fontSize: "14"
							}
						},
					],
					grid: [{
						x: '50%',
						y: '7%',
						width: '45%',
						height: '90%'
					}, ],
					tooltip: {
						formatter: '{b} ({c})'
					},
					xAxis: [{
						gridIndex: 0,
						axisTick: {
							show: false
						},
						axisLabel: {
							show: false
						},
						splitLine: {
							show: false
						},
						axisLine: {
							show: false
						}
					}, ],
					yAxis: [{
						gridIndex: 0,
						interval: 0,
						data: ['原因1', '原因2', '原因3', '原因4', '原因5', '原因6', '原因7', '原因8', '原因9', '原因10'].reverse(),
						axisTick: {
							show: false
						},
						axisLabel: {
							show: true
						},
						splitLine: {
							show: false
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: "#6173a3"
							}
						},
					}],
					series: [{
							name: '各渠道投诉占比',
							type: 'pie',
							radius: '30%',
							selectedMode: 'single',
							center: ['22%', '25%'],
							color: ['#86c9f4', '#4da8ec', '#3a91d2', '#005fa6', '#315f97'],
							data: [{
									value: 335,
									name: '客服电话'
								},
								{
									value: 310,
									name: '奥迪官网'
								},
								{
									value: 234,
									name: '媒体曝光'
								},
								{
									value: 135,
									name: '质检总局'
								},
								{
									value: 105,
									name: '其他'
								},
							],
							labelLine: {
								normal: {
									show: false
								}
							},
							itemStyle: {
								normal: {
									label: {
										show: true,
										formatter: '{b} \n ({d}%)',
										textStyle: {
											color: '#B1B9D3'
										}
									}
								},
							},
						},
						{
							name: '各级别投诉占比',
							type: 'pie',
							radius: '30%',
							selectedMode: 'single',
							center: ['22%', '75%'],
							color: ['#86c9f4', '#4da8ec', '#3a91d2', '#005fa6', '#315f97'],
							labelLine: {
								normal: {
									show: false
								}
							},
							data: [{
									value: 335,
									name: 'A级'
								},
								{
									value: 310,
									name: 'B级'
								},
								{
									value: 234,
									name: 'C级'
								},
								{
									value: 135,
									name: 'D级'
								},
							],
							itemStyle: {
								normal: {
									label: {
										show: true,
										formatter: '{b} \n ({d}%)',
										textStyle: {
											color: '#B1B9D3'
										}
									}
								},
							},
						},
						{
							name: '投诉原因TOP10',
							type: 'bar',
							xAxisIndex: 0,
							yAxisIndex: 0,
							selectedMode: 'single',
							barWidth: '45%',
							itemStyle: {
								normal: {
									color: '#86c9f4'
								}
							},
							label: {
								normal: {
									show: true,
									position: "right",
									textStyle: {
										color: "#9EA7C4"
									}
								}
							},
							data: [389, 259, 262, 324, 232, 176, 196, 214, 133, 370].sort(),
						},
					]
				}
			};
		},
		watch: {

		},
		mounted() {
			this.showEcharts()
		},
		methods: {
			showEcharts() {
				// 基于准备好的dom，初始化echarts实例
				let myChart = this.$echarts.init(document.getElementById('myChart'))
				// 清除上次记录
				myChart.clear()
				
				// 绘制图表
				myChart.setOption(this.option_column);
				
				// 添加点击事件
				myChart.on("click",this.chartClick)
				
				// 浏览器缩放时动态改变大小
				window.onresize = myChart.resize
				// 或者触发什么事件时刷新图的大小
                // let myChart = this.$echarts.init(document.getElementById('myChart'))
                // myChart.resize()
			},
			chartClick(p){
				// 点击图元回调方法
			}
		}
	}
</script>