问题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);
};
}
})();