vue2使用echarts

要在Vue2中使用Echarts，你需要先安装Echarts和vue-echarts：

npm install echarts vue-echarts

接着，在你的Vue组件中引入vue-echarts：

import VueECharts from 'vue-echarts'

// 引入 ECharts 主模块，提供生成图表的基础功能
import echarts from 'echarts/lib/echarts'

// 引入柱状图等组件
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'

export default {
  components: {
    'vue-echarts': VueECharts
  },
  data () {
    return {
      chartData: {
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ['product', '2015', '2016', '2017'],
            ['Matcha Latte', 43.3, 85.8, 93.7],
            ['Milk Tea', 83.1, 73.4, 55.1],
            ['Cheese Cocoa', 86.4, 65.2, 82.5],
            ['Walnut Brownie', 72.4, 53.9, 39.1]
          ]
        },
        xAxis: {type: 'category'},
        yAxis: {},
        series: [
          {type: 'bar'},
          {type: 'bar'},
          {type: 'bar'}
        ]
      }
    }
  },
  mounted () {
    this.$refs.chart.resize()
  },
  methods: {
    getOption () {
      return this.chartData
    }
  }
}

在模板中使用：

<template>
  <div>
    <vue-echarts ref="chart" :option="getOption()" :auto-resize="true" style="width: 100%; height: 600px;"></vue-echarts>
  </div>
</template>

这是一个简单的例子，你可以根据你的需要自定义Echarts图表。