首先看下效果

获取 ECharts

你可以通过以下几种方式获取 Apache EChartsTM。

从 Apache ECharts 官网下载界面 获取官方源码包后构建。

在 ECharts 的 GitHub 获取。

通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”

通过 jsDelivr 等 CDN 引入

引入 ECharts

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器

<template>
  <div id="myCharts" ref="myCharts" style="width:1200px;height:800px" />
</template>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码

import echarts from 'echarts'
// Vue.prototype.$echarts = echarts
export default {
  data() {
    return {
      myChart: null
    }
  },

<script>
import echarts from 'echarts'
// Vue.prototype.$echarts = echarts
export default {
  data() {
    return {
      myChart: null
    }
  },
  mounted() {
    this.getMyEcharts()
  },
  methods: {
    getMyEcharts() {
    // 指定图表的配置项和数据
      const option = {
        title: {
          text: '深圳月最低生活费组成（单位:元）',
          subtext: '百度一下你就知道',
          sublink: 'http:/www.baidu.com'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function(params) {
            let masikai = ''
            for (let i = 0; i < params.length; i++) {
              masikai += params[i].name + '<br/>' + params[i].seriesName + ' : ' + params[i].value
            }
            return masikai
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          splitLine: { show: false },
          data: ['总费用', '房租', '水电费', '交通费', '伙食费', '日用品数']
        },
        toolbox: {
          feature: {
            saveAsImage: {},
            dataView: {
              optionToContent: function(opt) {
                var newArray = []
                var axisData = opt.xAxis[0].data
                var series = opt.series
                var tdHeaders = '<td style="padding: 5px 15px;background-color:rgb(204,204,204);"></td>' // 表头
                var tdFooters = '<td style="padding: 5px 15px;">合计</td>' // 结尾
                // var trLeft = '<td>合计</td>'
                axisData.forEach(function(item) {
                  tdHeaders += '<td style="padding: 5px 15px;background-color:rgb(204,204,204);">' + item + '</td>' // 组装表头
                })
                // 结尾合计的计算
                for (var g = 0; g < series.length; g++) {
                  series[g].data.forEach(function(value, index) {
                    if (newArray[index] === undefined || newArray[index] === null) {
                      newArray[index] = 0
                    }
                    newArray[index] += Number(value)
                  })
                }
                newArray.forEach((item, index, arr) => {
                  tdFooters += '<td style="padding: 5px 15px;">' + item + '</td>' // 组装结尾
                })

                var table = `
                  <div class="table-responsive">
                  <table class="table table-bordered table-striped table-hover" border style="text-align:center;cellpadding:1;border-collapse:collapse; cellspacing:1;width:100%;">
                  <tbody>
                  <tr> 
                    ${tdHeaders}
                    <td style="background-color:rgb(204,204,204);">合计</td>
                  </tr>
                  `
                var tdBodys = '' // 数据
                for (let i = 0; i < series.length; i++) {
                  // 右边的合计
                  let totalPrice = 0
                  for (let j = 0; j < axisData.length; j++) {
                    totalPrice += series[i].data[j]
                    tdBodys += '<td style="padding: 5px 15px">' + series[i].data[j] + '</td>' // 组装表数据
                  }
                  tdBodys += '<td style="padding: 5px 15px;">' + totalPrice + '</td>'
                  table += '<tr><td style="padding: 5px 15px">' + series[i].name + '</td>' + tdBodys + '</tr>'
                  tdBodys = ''
                }

                var table2 = table += tdFooters
                table2 += '</tbody></table></div>'
                return table2
              }
            },
            magicType: {
              type: ['line', 'bar', 'stack', 'tiled']
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [

          {
            name: '怀底三区',
            type: 'bar',

            label: {
              show: true,
              position: 'inside'
            },
            data: [200, 1700, 1400, 1200, 300, 0]
          },
          {
            name: '怀底一区',
            type: 'bar',
            backgroundStyle: {
              color: 'green',
              borderColor: 'orange',
              shadowColor: 'blue'
            },
            label: {
              show: true,
              position: 'inside'
            },
            data: [2500, 1200, 500, 500, 800, 200]
          },
          {
            name: '怀底一区',
            type: 'bar',
            backgroundStyle: {
              color: 'green',
              borderColor: 'orange',
              shadowColor: 'blue'
            },
            label: {
              show: true,
              position: 'inside'
            },
            data: [2500, 1200, 500, 500, 800, 200]
          },
          {
            name: '怀底一区',
            type: 'bar',
            label: {
              show: true,
              position: 'inside'
            },
            data: [2500, 1500, 500, 500, 800, 200]
          }
        ]
      }
      // 基于准备好的dom，初始化echarts实例
      // 使用刚指定的配置项和数据显示图表。
      this.myChart = echarts.init(this.$refs.myCharts)
      this.myChart.setOption(option)
    }
  }
}
</script>