uniapp在<script module="echarts" lang="renderjs">标签中获取dom对象
时间: 2023-12-22 16:03:09 浏览: 110
好的,下面是一个在 `script module="echarts" lang="renderjs"` 标签中获取 DOM 对象的 Uniapp 案例:
```html
<template>
<view class="container">
<ec-canvas ref="myChart" @init="initChart" canvas-id="myChart" />
<button @click="getDom">Get DOM Object</button>
</view>
</template>
<script>
import { ECharts } from '@/components/ec-canvas/echarts';
export default {
methods: {
initChart(canvas, width, height) {
const chart = ECharts.init(canvas, null, {
width,
height,
});
chart.setOption({
// ECharts 配置项
});
this.chart = chart;
},
getDom() {
const { myChart } = this.$refs;
const dom = myChart.$el.firstElementChild;
console.log(dom); // 输出获取到的 DOM 对象
},
},
};
</script>
```
在上面的代码中,我们使用了 `ec-canvas` 组件来绘制 ECharts 图表,并在 `initChart` 方法中初始化了图表。然后,在 `getDom` 方法中,我们通过 `$refs` 获取到了 `myChart` 对象,并使用 `myChart.$el.firstElementChild` 获取了该组件中的第一个子元素,即图表的 DOM 对象。最后,我们将获取到的 DOM 对象输出到控制台中。
需要注意的是,使用 `ec-canvas` 组件绘制图表时,需要在 `canvas-id` 属性中指定一个唯一的 ID,而且需要在 `init` 事件中初始化图表。同时,我们使用了 `ECharts.init` 方法来初始化图表,返回的 `chart` 对象包含了很多有用的方法。在本例中,我们将 `chart` 对象保存在了组件实例中,以便后续的操作。
阅读全文