Echarts鼠标放到指定位置,提示框数据改变

这篇博客探讨了如何使用JavaScript处理ECharts图表的数据,特别是通过`filterSeries`函数来过滤和设置系列名称。同时,展示了如何自定义ECharts的tooltip,包括设置触发类型、格式化内容和处理多数据项的显示。内容涉及到数据操作和ECharts组件的高级用法。
摘要由CSDN通过智能技术生成
    let report7Arr = [ //查询条件
        {
            name:'2月',
            value:6.70,
        },
    ]
    //方法
    function filterSeries(arr,array,name1,name2){
        array.map((item)=>{
            if(arr[1].value == item.value && arr[1].name == item.name){
                arr[0].seriesName = name1
                arr[1].seriesName = name2
            }
        })
        return arr
    }

//echarts里面
  tooltip: {
                trigger: 'axis',
                // formatter: "{a} <br/>{b} : {c}",
                axisPointer: { // 坐标轴指示器,坐标轴触发有效
                    type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
                },
                // formatter: "{a0}  : {c0}%<br>{a1}  : {c1} %"
                formatter: function(params, v) {
                    var str = "";
                    for (var i = 0; i < params.length; i++) {
                        var y = 2020
                        i == 0 ? y = 2020 : y = 2021;
                        filterSeries(params,report7Arr,'名字1','名字2')
                        if (params[i].seriesName !== "") {
                            str +=
                                params[i].seriesName +
                                params[i].name +
                                ":" +
                                params[i].value +
                                '%' +
                                "<br/>";

                        }
                    }
                    return str;

                },
            },
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值