基於vue2定義本身的圖表echart組件

先安裝echarts cnpm i echarts -S,而後定義父組件

<template>
  <div>
       <echarts :option="echartOpion"></echarts>
  </div>
</template>
<script>
  import echarts from './echarts.vue' // 引入子組件
  export default {
    data() {
      return {
        // 傳給子組件的值，這裏以柱狀圖的參數爲例，能夠參考官網 http://www.echartsjs.com/examples/
        echartOpion: {
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 座標軸指示器，座標軸觸發有效
              type: 'shadow' // 默認爲直線，可選爲：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }],
          yAxis: [{
            type: 'value'
          }],
          series: [{
            name: '直接訪問',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
          }]
        },
        cloneOption: null
      }
    },
    components: {
      echarts //導入組件
    },
    mounted() {
    }
  }
</script>

而後是子組件

<template>
  <div>
     <div style="height:500px;width:500px" ref="myEchart">
  </div>
  </div>
</template>
<script>
  import echarts from 'echarts'
  export default {
    data() {
      return {
        chart: null
      }
    },
    props: {
      // 圖表的數據是否遠程請求
      mapdata: {
        type: String,
        default: ''
      },
      // 直接從父組件獲取
      option: Object
    },
    watch: {
      // 監聽父組件傳過來的option值
      option(val) {
        if(this.chart) {
          // 是否存在數據，存在則設置值不然清空
          // 這裏的setOption()和clear()方法爲echart提供的方法，可參照http://www.echartsjs.com/api.html#echarts
          this.option ? this.chart.setOption(val) : this.chart.clear();
        }
      }
    },
    methods: {
      initChart() {
        // 初始化
        this.chart = echarts.init(this.$refs.myEchart);
        // 把配置和數據放這裏
        this.chart.setOption(this.option);
      }
    },
    mounted() {
      // 在這裏上面定義了一個mapdata,若是存在則發送請求後設置值，方法同樣
      this.initChart();
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose();// 銷燬
      this.chart = null;
    }
  }
</script>

這樣就能夠引入echart了，不過這裏有一個問題就是不一樣的圖配置不同，並且咱們肯不少地方都用到，因此咱們要把配置也就是option裏面的東西提出來做爲公共的部分，這裏以柱狀圖的配置爲例：先新建一個options.js文件，文件代碼以下：

export default {
  data() {
    return {
      // 暴露出公共配置
      barOption: {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 座標軸指示器，座標軸觸發有效
            type: 'shadow' // 默認爲直線，可選爲：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: '直接訪問',
          type: 'bar',
          barWidth: '60%',
          data: [10, 52, 200, 334, 390, 330, 220]
        }]
      }
    }
  },
  methods: {
    // 深度拷貝對象或者數組
    clone(obj) {
      return JSON.parse(JSON.stringify(obj));
    }
  }
}

這時候只須要在須要的地方引入這個配置就能夠，父文件修改以下

<template>
  <div>
       <echarts :option="echartOpion"></echarts>
  </div>
</template>
<script>
  import echarts from './echarts.vue' // 引入子組件
  import chartsOps from './options.js' // 公共配置文件
  export default {
    mixins: [chartsOps], // 這裏mixins的做用比直接引入組件的好處是能夠直接調用組件裏面的方法和屬性
    data() {
      return {
        // 傳給子組件的值，這裏以柱狀圖的參數爲例，能夠參考官網 http://www.echartsjs.com/examples/
        echartOpion: {}
      }
    },
    components: {
      echarts
    },
    mounted() {
      // 將配置拷貝一份出來賦值給echartOpion,這時候能夠隨意修改echartOpion裏面的屬性，賦值爲本身的數據：
     // 如this.echartOpion.xAxis = xxx
      this.echartOpion = this.clone(this.barOption);
    }
  }
</script>

這裏只是介紹了柱狀圖的配置，其餘的如熱力圖，餅圖等配置同樣方法，能夠將全部配置寫在一個文件也能夠每種圖寫一個文件好區分，我的愛好，以上