[Echarts使用]:bug记录

2023-12-27 17:36:09
问题1:?z / z2 / zlevel of displayable is invalid, which may cause unexpected errors

// 在series 选项中设置zlevel、z 属性即可解决
let option: echarts.EChartsCoreOption = {
		...,
		series: {
			name: data.name,
			type: "line",
			smooth: true,
			showSymbol: false,
			data: data.list,
			zlevel: 1,
            z: 1
		}
	};

问题2:There is a chart instance already initialized on the dom.

// 初始化echarts实例时检查是否已经存在 即可解决
<template>
	<div ref="lineChartRef" class="line-chart" style="width:100%;height:300px"></div>
</template>
<script lang="ts" setup>
import { ref, nextTick } from "vue";
import echarts from "@/plugin/echarts";
import { useEcharts } from "@/hooks/useEcharts";

const lineChartRef = ref<HTMLElement>();
let myChart: echarts.ECharts | undefined;
const renderLineChart = async (data: { [key: string]: any }) => {
	await nextTick();
	// 查看echart实例是否存在
	myChart = echarts.getInstanceByDom(lineChartRef.value as HTMLElement);
	if (!myChart) {
		myChart = echarts.init(lineChartRef.value as HTMLElement);
	}
	let option: echarts.EChartsCoreOption = {
		// ...这里忽略配置
	};
	useEcharts(myChart, option);
};

defineExpose({
	renderLineChart
});
</script>

问题3:Unable to preventDefault inside passive event listener invocation.

// 通过劫持addEventListener事件,将passive改成true就可以解决Unable to preventDefault inside passive event listener invocation报错
(function () {
	if (typeof EventTarget !== "undefined") {
		let originalFunc = EventTarget.prototype.addEventListener; // 先存储原来的事件
		EventTarget.prototype.addEventListener = function (type, fn, capture) {
			if (typeof capture !== "boolean") {
				capture = capture || {};
				capture.passive = false; // 这句是关键的
			}
			originalFunc.call(this, type, fn, capture);
		};
	}
})();

文章来源:https://blog.csdn.net/weixin_45313351/article/details/135247908
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。