vue3用echarts的例子

在Vue3中使用Echarts的示例代码如下：

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

<script>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

export default {
  name: 'App',
  setup() {
    const chartRef = ref(null);

    onMounted(() => {
      const myChart = echarts.init(chartRef.value);
      const option = {
        title: {
          text: '柱状图示例',
          left: 'center',
        },
        xAxis: {
          type: 'category',
          data: ['A', 'B', 'C', 'D', 'E'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [100, 80, 120, 90, 110],
            type: 'bar',
          },
        ],
      };

      myChart.setOption(option);
    });

    return {
      chartRef,
    };
  },
};
</script>

<style>
#app {
  text-align: center;
}
</style>

在这个示例代码中，我们在Vue3的`setup`函数中使用了`onMounted`钩子函数，在Vue组件挂载后执行初始化Echarts的操作。通过引入`echarts`库，我们可以在`ref`中存储一个对chart DOM元素的引用，并在`onMounted`中使用`echarts.init`方法初始化图表。然后，我们可以通过配置`option`对象来定义图表的样式和数据，最后使用`myChart.setOption`方法将配置应用到图表中。这个例子展示了一个简单的柱状图示例，x轴表示类别，y轴表示数值。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [在Vue中使用echarts的实例代码（3种图）](https://download.csdn.net/download/weixin_38527987/12777003)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue中使用echarts的例子](https://blog.csdn.net/weixin_42464106/article/details/127552998)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]