echarts柱状图 vue

### 实现 Vue 中 ECharts 柱状图

为了在 Vue 项目中集成并创建 ECharts 的柱状图，需先安装 `echarts` 和 `vue-echarts` 组件库。通过 npm 或 yarn 安装依赖包[^1]。

#### 安装依赖

npm install echarts vue-echarts --save

或

yarn add echarts vue-echarts

完成上述操作之后，在组件文件内引入必要的模块，并初始化图表对象：

#### 初始化图表对象

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

export default {
  setup() {
    const chartContainer = ref(null);
    
    onMounted(() => {
      let myChart = echarts.init(chartContainer.value); // 使用刚指定的配置项和数据显示图表。
      
      let option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }]
      };

      myChart.setOption(option);
    });

    return {
      chartContainer,
    };
  }
}

此代码片段展示了如何定义数据序列以及坐标轴的信息来构建简单的柱形图。

对于模板部分，则只需提供一个容器用于容纳图表即可：

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

以上就是关于怎样利用 Vue 结合 ECharts 来制作基础版条形统计图的方法介绍。