1.安裝highchart依賴並導入
import Highcharts from 'highcharts'
import HighchartsNoData from 'highcharts-no-data-to-display'
import HighchartsMore from 'highcharts-more'
HighchartsNoData(Highcharts);//導入hightchart
HighchartsMore(Highcharts);
2.使用highchart
Highcharts.chart('HighChartid', {//id => 類似<div id="HighChartid"></div>
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
colors: [
"#21c393", //不合格
"#4879df", // 合格
"#fad567", // 良好
"#f44a36", //優秀
],
}
},
series: [{
type: 'pie',
name: '佔比',
data: dataArr//爲要處理的格式,對應官網api的格式填寫即可
}]
});