一：首先，我们需要在项目中引入echars

npm install echarts -S

二：在项目的mian.js文件中引入
1）全局引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

2）局部引入

<template>
  <div style="width:500px;height:200px;"></div>
</template>
<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
  name: 'verticalBar',
  props: {
    color: {
      type: Array,
      default: () => []
    },
    columnList: {
      type: Array,
      default: () => []
    },
    advanceData: {
      type: Array,
      default: () => []
    },
    depositData: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {

    }
  },
  watch: {
    //这里选择一个我们要监听的传递到组件中的一个值，从而去执行this.drawPie()去达到更新数据
    columnList: {
      handler(newVal) {
        this.drawPie()
      },
      deep: true
    }
  },
  computed: {
    //我们将options作为一个对象，是为了在初始化和数据变化时，直接使用this.myChart.setOption(this.options)即可实现图表重新更新
    options() {
      return {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            label: {
              show: true
            }
          }
        },
        grid: {
          left: "8%",
          top: "22%",
          right: "6%",
          bottom: "16%"
        },
        legend: {
          data: ["预收", "押金"],
          top: "2%",
          icon: 'circle',
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            color: "#1FC3CE",
            fontSize: 14
          }
        },
        xAxis: {
          data: this.columnList,
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: "rgba(51,181,194,.4)",
              width: 1
            }
          },
          axisTick: {
            show: false, //隐藏X轴刻度
            alignWithLabel: true
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#33b5c2", //X轴文字颜色
              fontSize: 14
            },
            interval: 0,
            rotate: 0
          }
        },
        yAxis: [{
          type: "value",
          name: "(单位：万)",
          nameTextStyle: {
            color: "#33b5c2",
            fontSize: 14
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: "rgba(51,181,194,.4)"
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#33b5c2",
              fontSize: 14
            }
          }
        }
        ],
        series: [{
          name: "预收",
          type: "bar",
          barWidth: 14,
          itemStyle: {
            normal: {
              barBorderRadius: [7, 7, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: "#00ebd6"
              },
              {
                offset: 1,
                color: "#01a3f8"
              }
              ]
              )
            }
          },
          data: this.advanceData
        },
        {
          name: "押金",
          type: "bar",
          barWidth: 14,
          itemStyle: {
            normal: {
              barBorderRadius: [7, 7, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: "#f8d278"
              },
              {
                offset: 1,
                color: "#ef7c1f"
              }
              ])
            }
          },
          data: this.depositData
        }]
      }
    }
  },
  mounted() {
    //这里增加一个nextTick，防止图表初始化异常
    this.$nextTick(() => {
      this.drawPie()
    })
  },
  methods: {
    chartResize() {
      this.myChart.resize()
    },
    drawPie() {
      //注意：因为echarts不能自动双向绑定，所以需要重新调用drawPie方法来重新向options赋值及重执行绘制
      //调用setOption时，echarts不会删除重绘，而是以动画效果方式重加载
      this.options.xAxis.data = this.columnList;
      this.options.series[0].data = this.advanceData;
      this.options.series[1].data = this.depositData;
      //我们在过去使用echarts都是用id来标识容器，这里需要直接将当前组件作为标识，避免使用id造成id重复，否则会出现同一个页面不能多次使用的问题
      this.myChart = echarts.init(this.$el, 'macarons')
      this.myChart.setOption(this.options);
    }
  }
}
</script>

<style>
</style>

其中color、columnList、advanceData、depositData为我们传递的值。

代码为自己当前项目的源码，也优化不少，在使用中目前没有任何问题，在这里分享给大家。
如果有什么优化的地方，欢迎留言。