vue2 echarts条形统计图

### 实现 Vue 2 和 ECharts 条形统计图

为了在 Vue 2 中成功集成并展示 ECharts 的条形统计图表，需遵循特定步骤来配置环境以及编写组件逻辑。

#### 安装依赖库
确保已进入目标项目的根目录下执行命令完成 ECharts 库的安装[^1]：

npm install echarts --save

#### 配置全局变量
为了让整个应用程序都能访问到 `echarts` 对象，在入口文件 `main.js` 中做如下设置[^2]:

import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;

此操作使得任何地方都可以通过 `this.$echarts` 访问该对象而无需单独导入。

#### 构建 BarChart 组件
创建一个新的单文件组件用于承载条形图实例化过程及样式定义。以下是完整的模板结构和脚本部分：

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

<script>
export default {
  name: "BarChart",
  mounted() {
    const barChart = this.$echarts.init(this.$refs.barChart);
    
    let option;

    option = {
      title: {
        text: '某地区蒸发量和降水量',
        subtext: '纯属虚构'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['蒸发量', '降水量']
      },
      xAxis: {
        type: 'category',
        data: ["1月", "2月", "3月", "4月", "5月", "6月"]
      },
      yAxis: {},
      series: [
        {
          name: '蒸发量',
          type: 'bar',
          data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7]
        },
        {
          name: '降水量',
          type: 'bar',
          data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7]
        }
      ]
    };

    barChart.setOption(option);

    window.addEventListener('resize', function () { barChart.resize(); });
  },
  beforeDestroy(){
    if (!this.chart) {
      return;
    }
    window.removeEventListener('resize', this.chart.resize);
  }
}
</script>

<style scoped>
/* 自定义样式 */
</style>

上述代码片段展示了如何初始化一个简单的双轴条形图，并设置了基本的数据集与视觉效果选项。注意监听窗口大小变化事件以便响应式调整图表尺寸。