Vue 中使用 Highcharts 餅狀圖

Highcharts 和 Echarts 就像是 Office 和 WPS 的關系。

不過這也是暫時的，相信Echarts會做得更好，誰說國産的東西比不過外國。

重點是：Echarts免費，Highcharts用于商業用途時還需要授權，個人用時雖然免費，但會在圖表上顯示logo，有潔癖的話就隻能繞道了。

一，highchars的導入與搭建

npm install highcharts 
           

二，components下的commons公共目錄下建立一個chart.vue檔案，用于搭建chart元件的架子

<template>
    <div class="x-bar">
        <div :id="id" :option="option"></div>
    </div>
</template>
<script>
    import HighCharts from 'highcharts'
    export default {
        // 驗證類型
        props: {
            id: {
                type: String
            },
            option: {
                type: Object
            }
        },
        mounted() {
            // 靜态資料，随頁面打開自動建立
            // HighCharts.chart(this.id,this.option)
        }
        methods: {
            // 動态資料，當資料加載完畢再執行建立
            me(){
                HighCharts.chart(this.id,this.option)
            }
        }
    }
</script>
           

三，chart架子搭好後，開始建立chart-options目錄，裡面建立一個options.js用來存放模拟的chart資料

let $back = $("#myBack");
let Options = function() {

    this.pie= {
        chart: {
            type: 'pie',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: ''
        },
        tooltip: {
            headerFormat: '{series.name}<br>',
            pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                },
                showInLegend: true,
                events: {
                    click: function(e) {
                        // alert($back.val())
                        // alert(e.point.url);
                        // window.open(e.point.url);
                        // location.href = e.point.url;
                    }
                }
            },
        },
        series: [{
            name: '',
            colorByPoint: true,
            // 動态接收資料
            data: []
        }]
    }
};

Options.prototype.funcc = function (op) {
    if(op.pie != null){
        // 複制對象
        this.pie = Object.assign(this.pie, op.pie)
    }
}

export default new Options();
           

四，引用chart元件

<template>
    <div class="pie">
        <div id="pie1">
            <x-chart ref="XChart1" :id="id1" :option="option1"></x-chart>
        </div>
        <div id="pie2">
            <x-chart ref="XChart2" :id="id2" :option="option2"></x-chart>
        </div>
    </div>
</template>
 
<script>
// 導入chart元件
import XChart from 'components/chart.vue'
// 導入定義好的chart模型
import options from './chart-options/options'
export default {
  data() {
    let option = options.bar
    return {
      id1: 'pie1',
      option1: null,
      id2: 'pie2',
      option2: null,
    }
  },
  components: {XChart}，
  methods: {
    // 餅圖1
    chartPie1(){
        return new Promise((resolve, reject) => {
           options.funcc({
              pie: {
                 title: {
                  text: '餅圖1name'
              },
              series: [{
                  name: '情況占比',
                  // p1,p2,p3,p4,p5為百分占比
                  data: [
                      ['A', p1],
                      ['B',   p2],
                      ['C',   p3],
                      {
                         name: 'D',
                         y: p4,
                         url:'',
                         sliced: true, // 突出顯示這個點（扇區），用于強調。
                         selected: true
                     },
                     ['E',    p5],
                  ]
               }]
             }});
          let option1 = options.pie;
          this.option1 = option1;
          resolve();
       }).then(resp => {
          // 執行建立餅圖
          this.$refs.XChart1.me();
       })
    }, 
  }
}
</script>