vue2使用echarts统计图完整代码

以下是使用 Vue2 和 ECharts 绘制柱状图的完整代码示例：

<template>
  <div class="echarts-demo">
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'EchartsDemo',
  data () {
    return {
      chartData: {
        categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    }
  },
  mounted () {
    this.initChart()
  },
  methods: {
    initChart () {
      const chartContainer = this.$refs.chart
      const chart = echarts.init(chartContainer)
      chart.setOption({
        title: {
          text: 'Weekly Sales Report'
        },
        tooltip: {},
        xAxis: {
          data: this.chartData.categories
        },
        yAxis: {},
        series: [{
          name: 'Sales',
          type: 'bar',
          data: this.chartData.data
        }]
      })
    }
  }
}
</script>

<style>
.chart {
  height: 400px;
}
</style>

在这个示例中，我们定义了一个 `chartData` 对象，其中包含了需要绘制的图表数据。在 `mounted` 钩子函数中，我们调用了 `initChart` 方法，该方法使用 `echarts.init` 函数创建了一个图表实例并将其绑定到页面中的 `chart` DOM 元素上。然后，我们使用 `chart.setOption` 方法设置了图表的标题、提示信息、X 轴和 Y 轴的标签以及数据系列。最后，我们在 CSS 样式中为图表容器指定了一个高度。

使用这个示例代码，你可以在 Vue2 中很容易地绘制出一张 ECharts 柱状图。