vue3,使用echarts画简单的柱状图

Vue3结合ECharts可以创建动态交互式的图表，以下是使用ECharts在Vue组件中绘制简单柱状图的基本步骤：

1. 首先，在项目中安装ECharts依赖：

   npm install echarts@latest

2. 引入并配置ECharts到Vue组件中：

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

<script setup>
import ECharts from 'echarts';

const chartRef = ref(null);
let data = [
  { name: '销量1', value: 50 },
  { name: '销量2', value: 70 },
  { name: '销量3', value: 90 },
  // 更多数据...
];

function initChart() {
  const chartInstance = ECharts.init(chartRef.value);
  
  const option = {
    xAxis: {
      type: 'category',
      data: data.map(item => item.name)
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: '销售数据',
      type: 'bar',
      data: data.map(item => item.value)
    }]
  };
  
  chartInstance.setOption(option);
}

onMounted(() => {
  initChart();
});
</script>

在这个例子中，我们首先初始化了一个ECharts实例，并设置了X轴和Y轴的数据。`series`部分定义了柱状图的系列，其中包含名称和数值。