在Vue3中使用 ECharts

试了好久ref一直报错，最后还是靠AI解决的，亲测有效。

在Vue 3中使用 ECharts，您可以按照以下步骤进行操作：

1. 安装 ECharts：首先，您需要安装 ECharts 库。您可以通过 npm 或 yarn 安装 echarts：

 

```bash

npm install echarts

```

 

2. 创建一个 Vue 组件来显示 ECharts 图表。以下是一个简单的例子：

 

```html

<template>

  <div ref="chart" style="width: 600px; height: 400px;"></div>

</template>

 

<script>

import { defineComponent, ref, onMounted } from 'vue';

import * as echarts from 'echarts';

 

export default defineComponent({

  setup() {

    const chart = ref(null);

 

    onMounted(() => {

      const myChart = echarts.init(chart.value);

      myChart.setOption({

        title: {

          text: '示例图表'

        },

        xAxis: {

          type: 'category',

          data: ['A', 'B', 'C', 'D', 'E']

        },

        yAxis: {

          type: ''

        },

        series: [{

          data: [10, 20, 15, 25, 30],

          type: 'bar'

        }]

      });

    });

 

    return {

      chart

    };

  }

});

</script>

```

 

在这个例子中，我们创建了一个简单的柱状图。我们使用 Vue 3 的 `ref` 来引用图表的 DOM 元素，并在`onMounted`生命周期中初始化 ECharts 图表。

 

3.模板中使用该组件：

 

```html

<template>

  <div>

    <MyEcharts />

  </div>

template>

 

<script>

import MyEcharts from './MyEcharts';

 

export default {

  components: {

    MyEcharts

  }

</script>