vue2 使用echarts 双柱状图

在 Vue 2 中使用 ECharts 绘制双柱状图的步骤如下：

1. 首先，安装 ECharts：

   npm install echarts

2. 在 Vue 组件中引入 ECharts 和主题文件：

   import echarts from 'echarts'
   import 'echarts/theme/macarons.js'

3. 在 Vue 组件的 `mounted` 钩子函数中初始化图表并绘制双柱状图：

   mounted() {
     // 初始化图表
     this.chart = echarts.init(this.$refs.chart, 'macarons');
     
     // 设置图表配置项
     const options = {
       title: {
         text: '双柱状图示例'
       },
       legend: {
         data: ['柱状图1', '柱状图2']
       },
       xAxis: {
         data: ['类别1', '类别2', '类别3', '类别4', '类别5']
       },
       yAxis: {},
       series: [
         {
           name: '柱状图1',
           type: 'bar',
           data: [10, 20, 30, 40, 50]
         },
         {
           name: '柱状图2',
           type: 'bar',
           data: [20, 30, 40, 50, 60]
         }
       ]
     };
     
     // 渲染图表
     this.chart.setOption(options);
   }

4. 在 Vue 模板中添加一个容器元素来展示图表：

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

这样，你就可以在 Vue 2 中使用 ECharts 绘制双柱状图了。记得在适当的时候销毁图表实例，以释放资源：

beforeDestroy() {
  if (this.chart) {
    this.chart.dispose();
    this.chart = null;
  }
}