echarts中解决警告 There is a chart instance already initialized on the dom.

主要代码

	// 基于准备好的dom，初始化echarts实例
	this.myChart = echarts.init(document.getElementById(this.elId));

	watch: {
			xAxis: {
				handler(newValue, oldValue) {
					this.myChart.setOption({
						xAxis: {
							data: this.xAxis,
							type: "category",
							axisTick: { show: false },
							axisLabel: {
								fontSize: 12
							}
						}
					});
				},
				deep: true //深度监听
			},
		}

完整代码

	drawLine() {
			// 基于准备好的dom，初始化echarts实例
			this.myChart = echarts.init(document.getElementById(this.elId));
			// 绘制图表
			let series = this.series.map((value, key) => {
				return {
					name: this.legend[key],
					type: "line",
					barGap: 0,
					data: value,
					smooth: true,
					showSymbol: this.showsymbol,
					areaStyle: {
						color: this.color[key]
					}
				};
			});
			this.myChart.setOption({
				color: COLOR_INFO,
				tooltip: {
					trigger: "axis",
					axisPointer: {
						type: "shadow"
					},
					formatter: params => {
						let params0 = params[0],
							params1 = params[1];
						return `
                         <div style="border:0;color:#fff;text-align: left;width:100px">
                          <span style="padding-bottom='5px'">${params[0].axisValue}: <span style="color: ${COLOR_INFO[0]};">${params0.data}</span>/<span style="color: ${COLOR_INFO[1]};">${params1.data}</span></span>
                     </div>`;
					},
					backgroundColor: "rgba(12,69,147,0.80)",
					borderColor: "rgba(12,69,147,0.80)",
					borderWidth: 0
				},
				legend: {
					show: false,
					data: this.legend
				},
				xAxis: {
					data: this.xAxis,
					type: "category",
					axisTick: { show: false },
					axisLabel: {
						fontSize: 12
					}
				},
				yAxis: {
					type: "value",
					show: true,
					axisLine: {
						show: true // 是否显示坐标轴轴线。
					},
					axisTick: {
						show: true // 是否显示坐标刻度
					},
					splitNumber: 3,
					splitLine: {
						show: true,
						lineStyle: {
							type: "dashed",
							color: "#113d5e"
						}
					},
					axisLabel: {
						fontSize: 12
					}
				},
				series: series,
				grid: {
					left: this.left,
					x: 20,
					y: 10,
					x2: 18,
					y2: 20
				}
			});
		}

	watch: {
		xAxis: {
			handler(newValue, oldValue) {
				this.myChart.setOption({
					xAxis: {
						data: this.xAxis,
						type: "category",
						axisTick: { show: false },
						axisLabel: {
							fontSize: 12
						}
					}
				});
			},
			deep: true //深度监听
		},
		series: {
			handler(newValue, oldValue) {
				let series = this.series.map((value, key) => {
					return {
						name: this.legend[key],
						type: "line",
						barGap: 0,
						data: value,
						smooth: true,
						showSymbol: this.showsymbol,
						areaStyle: {
							color: this.color[key]
						}
					};
				});
				this.myChart.setOption({
					series: series
				});
			},
			deep: true //深度监听
		}
	}

链接: https://blog.csdn.net/qq_26477073/article/details/84568668.