一：首先，我們需要在項(xiàng)目中引入echars

npm install echarts -S

二：在項(xiàng)目的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: {
    //這里選擇一個(gè)我們要監(jiān)聽的傳遞到組件中的一個(gè)值，從而去執(zhí)行this.drawPie()去達(dá)到更新數(shù)據(jù)
    columnList: {
      handler(newVal) {
        this.drawPie()
      },
      deep: true
    }
  },
  computed: {
    //我們將options作為一個(gè)對(duì)象，是為了在初始化和數(shù)據(jù)變化時(shí)，直接使用this.myChart.setOption(this.options)即可實(shí)現(xiàn)圖表重新更新
    options() {
      return {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            label: {
              show: true
            }
          }
        },
        grid: {
          left: "8%",
          top: "22%",
          right: "6%",
          bottom: "16%"
        },
        legend: {
          data: ["預(yù)收", "押金"],
          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: "預(yù)收",
          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() {
    //這里增加一個(gè)nextTick，防止圖表初始化異常
    this.$nextTick(() => {
      this.drawPie()
    })
  },
  methods: {
    chartResize() {
      this.myChart.resize()
    },
    drawPie() {
      //注意：因?yàn)閑charts不能自動(dòng)雙向綁定，所以需要重新調(diào)用drawPie方法來重新向options賦值及重執(zhí)行繪制
      //調(diào)用setOption時(shí)，echarts不會(huì)刪除重繪，而是以動(dòng)畫效果方式重加載
      this.options.xAxis.data = this.columnList;
      this.options.series[0].data = this.advanceData;
      this.options.series[1].data = this.depositData;
      //我們?cè)谶^去使用echarts都是用id來標(biāo)識(shí)容器，這里需要直接將當(dāng)前組件作為標(biāo)識(shí)，避免使用id造成id重復(fù)，否則會(huì)出現(xiàn)同一個(gè)頁面不能多次使用的問題
      this.myChart = echarts.init(this.$el, 'macarons')
      this.myChart.setOption(this.options);
    }
  }
}
</script>

<style>
</style>

其中color、columnList、advanceData、depositData為我們傳遞的值。

代碼為自己當(dāng)前項(xiàng)目的源碼，也優(yōu)化不少，在使用中目前沒有任何問題，在這里分享給大家。
如果有什么優(yōu)化的地方，歡迎留言。