echarts折线面积图点击任意位置触发页面跳转

向天再借五百根

于 2024-08-01 10:11:58 发布

阅读量206

点赞数 1

文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/weixin_47300932/article/details/140839378

版权

堆叠面积图

接口返回的数据格式(不是上图中展示的数据)
		"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": ""
            }
        ]
数据处理：
// N.add() 为引入的依赖，防止浮点数计算
		let rightParam = {
            Xaxis: [], // x坐标轴上的类目名称
            highRisk: [], // 高
            middleRisk: [], // 中
            lowRisk: [] // 低
          }
		this.monthRiskCountVos.forEach(item => {
            let highYindex = item.highRisk // ‘高’的y轴坐标值
            let midYindex = N.add(item.highRisk,item.middleRisk) // 堆叠后的‘中’的y轴坐标值
            let lowYindex = N.add(midYindex,item.lowRisk) // ‘低’的y轴坐标值
            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]; // 点击处的x轴坐标
       	let yIndex = Math.ceil(charts.convertFromPixel({seriesIndex:1},pointInPixel)[1]); // 点击处的y轴坐标，向上取整
	    let ops = charts.getOption(); // 获取图表数据
  		let month = ops.xAxis[0].data[xIndex] // 获取点击的x轴对应日期
        // 获取对应x轴的数据
        let clickData = _this.monthRiskCountVos.find(item => item.yearMonth === month)
        // 用点击的y轴坐标yIndex和 clickData中的Yindex对比，确定点击的高中低
        let risklevelName = ''
        for(let key in clickData) {
        	// 需要点击为0的数据也触发就改为yIndex >= 0
	        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
            }
    	}