Highcharts是一個用javascript編寫的一個圖表庫，與echarts有諸多相同和不同之處。在此，不一一介紹echarts與highcharts的異同。今天，用highcharts製作了一個基礎餅圖。雖然官方有程式碼示例。但是我還是認為，不光要實現效果，還要深入研究，知道每個標籤的含義可以提升我們寫程式碼的速度和水平。
首先貼出程式碼：

$("#div1").highcharts({
            chart: {//關於圖表區和圖形區的引數及一般圖表通用引數。
                backgroundColor: '#EDEDED'//設定餅圖的背景顏色
            },
            title: {//餅圖示題
 

                text: "一次裝置型別",//標題文字
                style: {//標題樣式
                    fontSize: 16,//字型大小
                    color: '#000',//字型顏色為黑色
                    fontWeight: 'bold',//標題加粗
                    fontFamily: '黑體'// 主標題文字顏色
                }
            },
            tooltip: {//資料提示框
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
 
//格式化回撥函式，當滑鼠移入時，顯示該區域的名字及佔比
            },
            exporting: {//此處是不顯示右上角匯出工具按鈕
                enabled:false
            },
           /* colors:['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3'],//自定義顏色陣列。如果不定義則顯示官方預設的顏色*/
            plotOptions: {//資料列配置
                pie: {//餅圖
                    allowPointSelect: true,//是否允許選中點。可選true或者false
 

                    cursor: 'pointer',//游標形狀為手型
                    dataLabels: {//資料標籤
                        enabled: true,//是否顯示資料標籤
                        style:{//資料標籤樣式
                            fontSize: 12,//字型大小
                            color: '#000',//字型顏色
                            fontWeight: 'normal',//字型加粗樣式
                            fontFamily: '微軟雅黑'//字型
                        },
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %'//資料標籤如何顯示
                    }
                }
            },
            series: [{//資料列
                type: 'pie',//圖表型別
                name: '佔比',
                data: [["主變",123],["變壓器",68],["線路",1568],["母線",168],["其他",1568]]//資料
            }]
        });

至此，一個基礎的餅圖就完成了。官方手冊對於各個配置項都介紹的比較詳細，多看手冊，多動手。肯定會將highcharts運用的如魚得水。
程式碼執行結果：