需求：实现多个动态图表
示例
准备工作
需要提前引入所需要的css，js等插件文件，可参考Highcharts官网实例
/*
*boardBuildingInCommunityMap为接口返回的数据
* buildFeeArr[i] = [] 为重要步骤，清空每个图表中重复的数组
* buildFeeArr[i].push(buildFeeObj) 给每条数据假如不同的动态数据
* buildFee(buildFeeArr, boardBuildingInCommunityMap, feeItemIdStr)根据需要想图表中传入所需的数据， 完成调用
*/
if (boardBuildingInCommunityMap.length > 0) {
for (var i = 0; i < boardBuildingInCommunityMap.length; i++) {
buildFeeArr[i] = []
if (boardBuildingInCommunityMap[i].feeItemMap && boardBuildingInCommunityMap[i].feeItemMap.length > 0) {
for (var j = 0; j < boardBuildingInCommunityMap[i].feeItemMap.length; j++) {
var buildFeeObj = {}
buildFeeObj.feeItemId = boardBuildingInCommunityMap[i].feeItemMap[j].feeItemId
buildFeeObj.amount = Number(boardBuildingInCommunityMap[i].feeItemMap[j].amount)
buildFeeObj.name = boardBuildingInCommunityMap[i].feeItemMap[j].feeItemName
buildFeeObj.y = Number(boardBuildingInCommunityMap[i].feeItemMap[j].historyAmount)
buildFeeObj.z = Number(boardBuildingInCommunityMap[i].feeItemMap[j].currentAmount)
buildFeeObj.houseNum = boardBuildingInCommunityMap[i].houseNum
buildFeeObj.boardFee = boardBuildingInCommunityMap[i].boardFee
buildFeeObj.buildingName = boardBuildingInCommunityMap[i].buildingName
buildFeeObj.buildingId = boardBuildingInCommunityMap[i].buildingId
buildFeeArr[i].push(buildFeeObj)
// console.log("v=============buildFeeArr", buildFeeArr)
}
}
}
}
buildFee(buildFeeArr, boardBuildingInCommunityMap, feeItemIdStr)
图表渲染
/*
* series: [{
minPointSize: 8,
innerSize: '20%',
zMin: 0,
name: 'countries',
data: buildFeeArr[i] 直接渲染没个图表对应的数据
}]
* $(containerClass).highcharts 实例渲染图表
*/
function buildFee(buildFeeArr, boardBuildingInCommunityMap, feeItemIdStr) {
var buildFeeHtml = ""; //图表3 html
// console.log("buildFeeArr==========", buildFeeArr)
for (let i = 0; i < boardBuildingInCommunityMap.length; i++) {
buildFeeHtml = ` <div class="unitOweBox-eveBox">
<div class="unitOweBox-eve">
<div class="unitOweBox-sum">
欠费户数<span class="unitOweBox-houseNum">${boardBuildingInCommunityMap[i].houseNum ? boardBuildingInCommunityMap[i].houseNum : 0}</span>
总欠费<span class="unitOweBox-boardFee">${boardBuildingInCommunityMap[i].boardFee ? boardBuildingInCommunityMap[i].boardFee : 0}</span>
<span class="detailBuildBtn" data-buildingId="${boardBuildingInCommunityMap[i].buildingId}">详情
</span>
</div>
<div>
<div id="buildFeeContainer${i}" style="height:230px;"></div>
</div>
</div>
<div class="unitOweBox-eveUnit">
${boardBuildingInCommunityMap[i].buildingName}
</div>
</div>`
$(".unitOweBox").append(buildFeeHtml)
if (boardBuildingInCommunityMap[i].feeItemMap && boardBuildingInCommunityMap[i].feeItemMap.length > 0) {
var containerClass = '#buildFeeContainer' + i.toString()
$(containerClass).highcharts({
credits: {
enabled: false
},
exporting: {
enabled: false
},
chart: {
type: 'variablepie'
},
title: {
text: ''
},
tooltip: {
headerFormat: '',
pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b><br/>' +
'历史欠费 <b>{point.y}</b><br/>' +
'本期应缴 <b>{point.z}</b><br/>'
},
series: [{
minPointSize: 8,
innerSize: '20%',
zMin: 0,
name: 'countries',
data: buildFeeArr[i]
}]
});
} else {
$("#buildFeeContainer" + i).html("<div class='unitOweBox-noNum'>暂无数据</div>")
}
$(".detailBuildBtn").click(function () {
$("#detailBuildBox .detailBuildBox-dialog").show()
let feeItemIdStrArr = feeItemIdStr.split(",")
let buildingidDetail = $(this).attr("data-buildingId")
detailBuildBoxClick(feeItemIdStrArr, buildingidDetail)
});
$("#detailBuildBox .detailBuildBox-dialog .closeBtn").click(function () {
$("#detailBuildBox .detailBuildBox-dialog").hide()
})
}
}
数据格式如下
