1.相关插件(本节最主要插件是no-data-to-display.js,没它就不会显示提示文字
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
2.html
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
3.正式js代码
//创建渐变色
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
// 构建图表
var chart1 = Highcharts.chart('container1',{
title: {
text: '寿命达到率分析'
},
credits: {//去掉右下角水印链接
enabled: false
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
legend: {
//layout: 'vertical', //图例布局:竖直方向排列
backgroundColor: '#fff', //图例背景颜色
borderRadius: '50', //图例背景边框圆角
maxHeight: 200, // 最大高度
lineHeight: 200, // 行高
padding: 0, //内边距
itemMarginTop: 10, //图例每行举上高度
squareSymbol: true,
x: 0, //x,y设置图例位置
y: 0,
align: 'left', //居左显示
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
},
connectorColor: 'silver'
}
}
},
series: [{
showInLegend : false,//是否显示图例
type: 'pie',
name: '图表1',
data: data1
}],
//从这里开始是没有数据提示相关代码
lang: {
noData: "没有数据哦!"
},
noData: {
style: {
fontWeight: 'bold',
fontSize: '15px',
color: '#303030'
}
}
});