簡單小案例。

一 安裝 ECharts 依賴。 npm install --save echarts 

二 在頁面上引入 ECharts。import echarts from 'echarts'

頁面程式碼：

<template>
  <!--為echarts準備一個具備大小的容器dom-->
  <div id="main" style="width: 1409px;height: 600px;"></div>
</template>

<script>
  import echarts from 'echarts'
    export default {
      name: '',
      data () {
        return {
          charts: '',
          dataAxis: ['點', '擊', '柱', '子', '或', '者', '兩', '指', '在', '觸', '屏', '上', '滑', '動', '能', '夠', '自', '動', '縮', '放'],
          data: [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220],
          yMax: 500,
          dataShadow: [],
          option: undefined
        }
      },
      methods:{
        loadEcharts () {
          this.charts = echarts.init(document.getElementById('main'))
          for (var i = 0; i < this.data.length; i++){
            this.dataShadow.push(this.yMax)
          }
          this.option = {
            title: {
              text: '特性示例：漸變色 陰影 點選縮放',
              subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
            },
            xAxis: {
              data: this.dataAxis,
              axisLabel: {
                  inside: true,
                  textStyle: {
                      color: '#fff'
                  }
              },
              axisTick: {
                  show: false
              },
              axisLine: {
                  show: false
              },
              z: 10
            },
            yAxis: {
              axisLine: {
                  show: false
              },
              axisTick: {
                  show: false
              },
              axisLabel: {
                  textStyle: {
                      color: '#999'
                  }
              }
            },
            dataZoom: [
              {
                type: 'inside'
              }
            ],
            series: [
              { // For shadow
                type: 'bar',
                itemStyle: {
                    normal: {color: 'rgba(0,0,0,0.05)'}
                },
                barGap:'-100%',
                barCategoryGap:'40%',
                data: this.dataShadow,
                animation: false
              },
              {
                type: 'bar',
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [
                        {offset: 0, color: '#83bff6'},
                        {offset: 0.5, color: '#188df0'},
                        {offset: 1, color: '#188df0'}
                      ]
                    )
                  },
                  emphasis: {
                    color: new echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [
                        {offset: 0, color: '#2378f7'},
                        {offset: 0.7, color: '#2378f7'},
                        {offset: 1, color: '#83bff6'}
                      ]
                    )
                  }
                },
                data: this.data
              }
            ]
          }
          this.charts.setOption(this.option)
        }
      },
    //呼叫
      mounted(){
        this.$nextTick(function() {
            this.loadEcharts()
        })

       let that = this;  
       let myChart = echarts.init(document.getElementById('main'))

        // Enable data zoom when user click bar.
        var zoomSize = 6;
        myChart.on('click', function (params) {
            myChart.dispatchAction({
                type: 'dataZoom',
                startValue: that.dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
                endValue: that.dataAxis[Math.min(params.dataIndex + zoomSize / 2, that.data.length - 1)]
            });
        });
      }
    }
</script>
<style scoped>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
</style>
 

效果如圖：

總結：

    這個圖我是在 echarts 官網（ECharts 案列連結）上隨便找了一個圖。程式碼也沒有改什麼，比較重要部分，標紅。

以下為 ECharts 官網上案例提供的程式碼。

var dataAxis = ['點', '擊', '柱', '子', '或', '者', '兩', '指', '在', '觸', '屏', '上', '滑', '動', '能', '夠', '自', '動', '縮', '放'];
var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
var yMax = 500;
var dataShadow = [];

粉紅色部分，在 vue data 裡初始化定義。

橙色部分，在 vue methods 裡寫方法封裝。（注意：當中引用初始化定義的值）

    this.charts = echarts.init(document.getElementById('main'))   // 初始化 echarts

    this.charts.setOption(this.option) // 設定 echarts

藍色部分，在 vue mounted 裡繫結 echarts 中的事件。