在Vue中使用highCharts繪製3d餅圖

highcharts是國外知名基於javascript的圖表庫。因爲中文官網的vue中使用highcharts配置繁瑣而且須要引入jquery做爲依賴，因此棄用。
接下來，給各位夥伴簡要的講敘下highcharts在vue中的使用和配置方法。

首先使用 npm在你的項目中安裝vue-highcharts

npm install vue-highcharts --save

因爲vue-highcharts依賴於highcharts，咱們還須要安裝後者

npm install highcharts --save

安裝完成後，進入項目main.js進行配置：

import highcharts from 'highcharts'
import VueHighCharts from 'vue-highcharts'

引入以上兩項以後，由於咱們須要使用3d圖表，還須要引入：

import highcharts3d from 'highcharts/highcharts-3d'

調用3d圖表：

highcharts3d(highcharts)

OK，到此爲止已經在vue中配置好highcharts,接下來根據API繪製一份3d餅圖
新建一個餅圖的組件：

<template>
<div class="container">
    <div :id="id" :option="option"></div>
</div>
</template>
<script>
import HighCharts from 'highcharts'
export default {
    props: {
        id: {
            type: String
        },
            //option 是圖表的配置數據
        option: {
            type: Object
        }
    },
    mounted() {
        HighCharts.chart(this.id, this.option)
    }
}
</script>

<style scoped>
/* 容器 */    
.container {
width: 1000px;
height: 550px;
}
</style>

在須要使用餅圖的頁面裏配置option數據

<template>
    <div class="charts">
        <pie :id="id" :option="option"></pie>
    </div>
</template>

<script>
import Bing from '../components/Bing'
export default {
    components: {
        pie,
    },
    data() {
        return {
            id: 'test',
            option: {
                chart: {
                    type: 'pie',//餅圖
                     options3d: {
                         enabled: true,//使用3d功能
                         alpha: 60,//延y軸向內的傾斜角度
                         beta: 0,   
                     }
                },
                title: {
                    text: '測試用'//圖表的標題文字
                },
                subtitle: {
                    text: ''//副標題文字
                },

            plotOptions: {
                pie: {
                    allowPointSelect: true,//每一個扇塊可否選中
                    cursor: 'pointer',//鼠標指針
                    depth: 35,//餅圖的厚度
                    dataLabels: {
                        enabled: true,//是否顯示餅圖的線形tip
                    }
                }
            },
                series: [
                {
                    type: 'pie',
                    name: '測試用1',//統一的前置詞,非必須
                    data: [
                        ['測試1',12],//模塊名和所佔比，也能夠{name: '測試1',y: 12}
                        ['測試2',23],
                        ['測試3',19],
                        ['測試4',29]
                    ]
                 }
                ]
            }
        }
    },

}
</script>

<style scoped>

</style>

看下效果。

更多的配置說明能夠到中文官網查看 https://www.hcharts.cn/
歡迎討論，須要git demo的能夠留言，see you。