echarts柱状图 vue2 代码示例

当使用Vue2和Echarts来实现柱状图时，你可以按照以下步骤进行操作：

1. 首先，确保你已经安装了Vue2和Echarts的相关依赖包。你可以通过npm或者yarn来安装它们。

2. 在Vue组件中引入Echarts，并创建一个柱状图的容器。你可以在template中添加一个div元素作为容器，给它一个id，例如"chart-container"。

3. 在Vue组件的script标签中，引入Echarts并初始化柱状图。你可以使用mounted钩子函数来确保DOM元素已经加载完毕后再进行初始化。

下面是一个简单的示例代码：

<template>
  <div id="chart-container" style="width: 600px; height: 400px;"></div>
</template>

<script>
import echarts from 'echarts';

export default {
  mounted() {
    // 初始化echarts实例
    const chart = echarts.init(document.getElementById('chart-container'));

    // 定义柱状图的配置项和数据
    const option = {
      title: {
        text: '柱状图示例'
      },
      xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [10, 20, 30, 40, 50],
        type: 'bar'
      }]
    };

    // 使用配置项和数据绘制柱状图
    chart.setOption(option);
  }
};
</script>

这个示例中，我们创建了一个id为"chart-container"的div元素作为柱状图的容器，并设置了宽度和高度。在mounted钩子函数中，我们使用echarts.init方法初始化了一个echarts实例，并传入了容器的DOM元素。然后，我们定义了柱状图的配置项和数据，包括标题、x轴和y轴的数据以及柱状图的类型和数据。最后，我们使用chart.setOption方法将配置项和数据应用到柱状图中。