echarts柱状图 vue2

对于Vue2和Echarts柱状图的结合，你可以按照以下步骤进行操作：

1. 首先，确保你已经安装了Vue2和Echarts。你可以使用npm或yarn来安装它们：

npm install vue@2.6.14
npm install echarts@4.9.0

或者

yarn add vue@2.6.14
yarn add echarts@4.9.0

2. 在你的Vue组件中，引入Vue和Echarts：

import Vue from 'vue'
import echarts from 'echarts'

3. 在Vue的生命周期钩子中，创建一个Echarts实例，并绘制柱状图：

export default {
  mounted() {
    // 创建Echarts实例
    const chart = echarts.init(this.$refs.chart)

    // 定义柱状图的配置项
    const options = {
      xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [10, 20, 30, 40, 50],
        type: 'bar'
      }]
    }

    // 使用配置项绘制柱状图
    chart.setOption(options)
  }
}

4. 在模板中，使用ref属性将DOM元素与Echarts实例关联起来：

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

以上就是在Vue2中使用Echarts绘制柱状图的基本步骤。你可以根据自己的需求调整配置项和样式，进行更多的定制化操作。