vue2.0 自定義 餅狀圖 （Echarts）組件

1.自定義  圖表  組件

Echarts.vue

<!-- 自定義 echart 組件 -->
<template>
  <div>
    <!-- echart表格 -->
    <div id="myChart" :style="echartStyle"></div>
  </div>
</template>

<script>
  export default {
    props: {
      // 樣式
      echartStyle: {
        type: Object,
        default(){
          return {}
        }
      },
      // 標題文本
      titleText: {
        type: String,
        default: ''
      },
      // 提示框鍵名
      tooltipFormatter: {
        type: String,
        default: ''
      },
      // 扇形區域名稱
      opinion: {
        type: Array,
        default(){
          return []
        }
      },
      // 提示框標題
      seriesName: {
        type: String,
        default: ''
      },
      // 扇形區域數據
      opinionData: {
        type: Array,
        default(){
          return []
        }
      },
    },
    data(){
      return {
        //
      }
    },
    mounted(){
      this.$nextTick(function() {
        this.drawPie('myChart')
      })
    },
    methods: {
      // 監聽扇形圖點擊
      eConsole(param) {
        // 向父組件傳值
        this.$emit("currentEchartData",param.name);
      },
      // 繪制餅狀圖
      drawPie(id){
        this.charts = this.$echarts.init(document.getElementById(id));
        this.charts.on("click", this.eConsole);
        this.charts.setOption({
          title: {
            text: this.titleText, // 標題文本
            left: 'center'
          },
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/> " + this.tooltipFormatter + ":{c}"
          },
          legend: {
            bottom: 20,
            left: 'center',
            data: this.opinion // 扇形區域名稱
          },
          series : [
            {
              name:this.seriesName,  // 提示框標題
              type: 'pie',
              radius : '65%',
              center: ['50%', '50%'],
              selectedMode: 'single',
              data:this.opinionData, // 扇形區域數據
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  #myChart{
    width: 100%;
  }
</style>

　　

2.頁面調用

Diagram.vue

<!-- 圖表 -->
<template>
  <div>
    <!-- 標題欄 -->
    <mt-header title="圖表">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <!-- 內容 -->
    <m-echarts
      :echartStyle="s"
      :titleText="a"
      :tooltipFormatter="b"
      :opinion="c"
      :seriesName="d"
      :opinionData="e"
      v-on:currentEchartData="getEchartData"
    ></m-echarts>
  </div>
</template>

<script>
  import mEcharts from '../components/Echarts'

  export default {
    name: 'Diagram',
    components: {
      mEcharts
    },
    data(){
      return {
        a:'水果銷售統計',
        b:'銷售數量',
        c:['香蕉','蘋果','橘子'],
        d:'銷售統計',
        e:[
            {value:3, name:'香蕉'},
            {value:3, name:'蘋果'},
            {value:3, name:'橘子'}
          ],
        s: {
          height: ''
        }
      }
    },
    created(){
      // 獲取屏幕高度
      this.s.height = document.documentElement.clientHeight - 44 + 'px';
    },
    methods: {
      getEchartData(val){
        console.log(val);
      }
    }
  }
</script>

<style lang="less" scoped>
  //
</style>

　　

3.效果圖