![堆叠面积图](https://i-blog.csdnimg.cn/direct/d204edcca5ea4e10a5d7261f098d62a8.png)
接口返回的数据格式(不是上图中展示的数据)
"monthRiskCountVos": [
{
"yearMonth": "2024-03",
"startDate": "2024-03-01",
"endDate": "2024-03-31",
"highRisk": 0,
"middleRisk": 0,
"lowRisk": 0,
"noRisk": ""
},
{
"yearMonth": "2024-04",
"startDate": "2024-04-01",
"endDate": "2024-04-30",
"highRisk": 0,
"middleRisk": 0,
"lowRisk": 0,
"noRisk": ""
},
{
"yearMonth": "2024-05",
"startDate": "2024-05-01",
"endDate": "2024-05-31",
"highRisk": 6,
"middleRisk": 0,
"lowRisk": 0,
"noRisk": ""
},
{
"yearMonth": "2024-06",
"startDate": "2024-06-01",
"endDate": "2024-06-30",
"highRisk": 8,
"middleRisk": 0,
"lowRisk": 0,
"noRisk": ""
},
{
"yearMonth": "2024-07",
"startDate": "2024-07-01",
"endDate": "2024-07-31",
"highRisk": 0,
"middleRisk": 0,
"lowRisk": 0,
"noRisk": ""
},
{
"yearMonth": "2024-08",
"startDate": "2024-08-01",
"endDate": "2024-08-31",
"highRisk": 0,
"middleRisk": 0,
"lowRisk": 0,
"noRisk": ""
}
]
数据处理:
let rightParam = {
Xaxis: [],
highRisk: [],
middleRisk: [],
lowRisk: []
}
this.monthRiskCountVos.forEach(item => {
let highYindex = item.highRisk
let midYindex = N.add(item.highRisk,item.middleRisk)
let lowYindex = N.add(midYindex,item.lowRisk)
item.highYindex = highYindex
item.midYindex = midYindex
item.lowYindex = lowYindex
Param.Xaxis.push(item.yearMonth)
Param.highRisk.push(item.highRisk)
Param.middleRisk.push(item.middleRisk)
Param.lowRisk.push(item.lowRisk)
})
let _this = this
let charts = echarts.init(this.$refs['chart'])
charts.getZr().on('click', function (params) {
const pointInPixel = [params.offsetX,params.offsetY]
let xIndex = charts.convertFromPixel({seriesIndex:0},pointInPixel)[0];
let yIndex = Math.ceil(charts.convertFromPixel({seriesIndex:1},pointInPixel)[1]);
let ops = charts.getOption();
let month = ops.xAxis[0].data[xIndex]
let clickData = _this.monthRiskCountVos.find(item => item.yearMonth === month)
let risklevelName = ''
for(let key in clickData) {
if(yIndex > 0 && yIndex <= clickData.highYindex) {
risklevelName = '高'
} else if (yIndex > clickData.highYindex && yIndex <= clickData.midYindex) {
risklevelName = '中'
} else if (yIndex > clickData.midYindex && yIndex <= clickData.lowYindex) {
risklevelName = '低'
} else {
return
}
}