Vue3 Echarts 示例：创建简单柱状图

<template>
  <div>
    <div ref='chart' style='height: 400px;'></div>
  </div>
</template>
<script>
import {ref, onMounted} from 'vue';
import * as echarts from 'echarts';

export default {
  setup() {
    const chart = ref(null);

    onMounted(() => {
      const myChart = echarts.init(chart.value);

      const option = {
        title: {
          text: 'Echarts demo'
        },
        tooltip: {},
        legend: {
          data:['销量']
        },
        xAxis: {
          data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      };

      myChart.setOption(option);
    });

    return { chart };
  }
}
</script>
<p>该示例创建了一个简单的柱状图，并在 Vue3 中使用 Echarts 进行渲染。在 setup 函数中，我们使用 ref 来创建一个指向 chart DOM 元素的引用，并在 onMounted 钩子函数中，初始化 Echarts 图表并设置选项。最后，我们将 chart 引用返回以便在模板中使用。</p>