先把代码贴上来把,数据可能不合逻辑,但计算的结果都是正确的。
图表容器:
<div id="container"></div>
var chart = Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: '未回款金额-距网签时间占比分析'
},
xAxis: {
categories: [
'回款负责人1', '回款负责人2', '回款负责人3', '回款负责人4', '回款负责人5'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: '降雨量 (mm)'
}
},
tooltip: {
// head + 每个 point + footer 拼接成完整的 table
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
borderWidth: 0,
dataLabels:{
enabled:true,
color: "#000",
formatter:function () {
a = this.y/this.total*100;
return this.y + "<br>" + a.toFixed(1) + "%"
}
}
// colorByPoint: true
}
},
series: [{
name: '90天以内',
data: [
{
y: 49.9, total: 200
}, {
y: 71.5, total: 200
}, {
y: 106.4, total: 200
}, {
y: 129.2, total: 200
}, {
y: 144.0, total: 200
}]
}, {
name: '180-365天',
data: [{
y: 83.6, total: 200
}, {
y: 78.8, total: 200
}, {
y: 98.5, total: 200
}, {
y: 93.4, total: 200
}, {
y: 106.0, total: 200
}]
}, {
name: '90-180天',
data: [{
y: 48.9, total: 200
}, {
y: 38.8, total: 200
}, {
y: 39.3, total: 200
}, {
y: 41.4, total: 200
}, {
y: 47.0, total: 200
}]
}, {
name: '365天以上',
data: [{
y: 42.4, total: 200
}, {
y: 33.2, total: 200
}, {
y: 34.5, total: 200
}, {
y: 39.7, total: 200
}, {
y: 52.6, total: 200
}]
}]
});
其实使用hicharts实现这个效果并不算困难,难的地方在于hicharts图表库有很多的api,需要一个熟悉的过程,再就是使用前先理清了图表库中的几个概念,就是坐标轴(x轴,y轴)、数据列、数据、标签、图例等等众多的专属名次,如果不清楚的,就直接从官网(https://api.hcharts.cn/highcharts)api上看下吧,有注释的,先搞清了一些基本的名次,再实现效果,就有章可循,简单多了。