第1种:在onMounted中肯定是绑定了,此时divNode.value是一个实际的DOM元素了。 第2种:与它同一级的DOM元素已经渲染完成(其实也是在onMounted) 使用useTemplateRef正常渲染图表 <template></template>import*asechartsfrom'echarts'import{ onMounted, useTemplateRef }from'vue'letchartDom =null//存储的是 ECharts ...
第1种:在onMounted中肯定是绑定了,此时divNode.value是一个实际的DOM元素了。 第2种:与它同一级的DOM元素已经渲染完成(其实也是在onMounted) 使用useTemplateRef正常渲染图表 <template> </template> import * as echarts from 'echarts' import { onMounted, useTemplateRef } from 'vue' let chartDom =...
if (!dom.value || echarts.getInstanceByDom(dom.value)) return; chartInstance = echarts.init(dom.value, null, echartsInitOpts); }; /** 获取图表实例 */ const getChartInstance = () => chartInstance; onMounted(() => { initChart(); }); return { getChartInstance, }; }; 注意,这里...
if(!chartRef.value)return; // 校验 Dom 节点上是否已经挂载了 ECharts 实例,只有未挂载时才初始化 chartInstance.value = echarts.getInstanceByDom(chartRef.value); if(!chartInstance.value) { chartInstance.value = echarts.init( chartRef.value, props.theme, { renderer:"canvas"} ); draw(); }...
setOption(option); } }); watch(chartData, (newData) => { if (chartRef.value) { const chart = echarts.getInstanceByDom(chartRef.value); if (chart) { chart.setOption({ series: [{ data: newData }], }); } } }); 这样,你就可以在Vue 3项目中成功使用ECharts绘制饼图了。
chartInstance.value = echarts.getInstanceByDom(chartRef.value); if (!chartInstance.value) { chartInstance.value = markRaw( echarts.init(chartRef.value, props.theme, { renderer: 'canvas', }) ); // 绑定鼠标事件: if (props.onMouseover) { ...
echarts.getInstanceByDom(chartDom).dispose(); } var myChart = echarts.init(chartDom); var option = { title: { text: "用户数量", subtext: "用户性别比例", left: "center", }, tooltip: { trigger: "item", }, legend: { orient: "vertical", ...
getInstanceByDom(chartRef.value); if (!chartInstance.value) { chartInstance.value = markRaw( echarts.init(chartRef.value, props.theme, { renderer: props.renderer }) ); chartInstance.value.on("click", handleClick); draw(); } }; const resize = () => { if (chartInstance.value && ...
Vue 中使用 Echarts 的话,可以使用百度官方维护的vue-echarts。 Demo 您遇到的问题可以再实例化之前先判断是否存在实例,存在则调用 dispose 销毁实例。 伪代码: // 取得Dom let main = this.$refs.MyCharts; let existInstance = echarts.getInstanceByDom(main); if (existInstance) { if (true) { echart...
// 校验 Dom 节点上是否已经挂载了 ECharts 实例,只有未挂载时才初始化 chartInstance.value = echarts.getInstanceByDom(chartRef.value); if (!chartInstance.value) { chartInstance.value = echarts.init( chartRef.value, props.theme, { renderer: "canvas" } ...