echarts画图时tooltip.formatter参数params不会更新(转载)

echarts画图时tooltip.formatter参数params不会更新

解决方案: setOption时默认是合并, 如果要全部重新加载 要写成 setOption({},true),这样就可以了。

只写成这样setOption({}),没有true 也默认合并这次和上次的数据,而不是更新。

 

来源:https://blog.csdn.net/u010682330/article/details/80446886

案例一:

首先说明我的目的:为了让地图漂亮些,不同的地图区域显示不同的颜色。

由于待绘制的地图二级地市数量不确定,需要通过解析获取到的数据来确定,因此我在

series的itemStyle中采用了函数来进行传递数值。
itemStyle: {
    //normal 是图形在默认状态下的样式;
normal: {
        //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
color: function (params) {
            console.log(params);
            //  var colorList = ['#0080BD', '#987ECA', '#FC954E', '#009E92', '#FEB134', '#00E47B', '#277BA2', '#8AAE92', '#B0DEDB', '#00A294'];//十个柱子颜色
return childColorList[params.dataIndex];
        }
    },
    //emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
emphasis: {
        show: true,
        areaColor: "#a7efe9",
    }
},
现在的问题是 itemStyle
中的参数params不会随着数据的变化来发生变化。我在每次用户点击第一级省直辖市时,显示对应的省直辖市二级下辖地市,
但地图切换过来啦,对应的数据始终没有更新,params也没有更新。

问题排查: setOption时默认是合并, 如果要全部重新加载 要写成 setOption({},true),这样就可以了。

完整代码如下:

 

function initEcharts(subName, subText) {
    var child = echarts.init(document.getElementById('subChart'));
    child.setOption({
        tooltip: {
            // 显示策略,可选为:true(显示) | false(隐藏)
show: true,
            //展示图例--多条提示标题解决单位中文英文展示
trigger: 'item',
            formatter: function (params, title) {
                //console.log(params);
return "地市数据";
            },
            // tooltip主体内容显示策略,只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为false
showContent: true,
            // 显示延迟,添加显示延迟可以避免频繁切换,特别是在详情内容需要异步获取的场景,单位ms
showDelay: 0,
            // 隐藏延迟,单位ms
hideDelay: 0,
            // 动画变换时长,单位s,如果你希望tooltip的跟随实时响应,showDelay设置为0是关键,同时transitionDuration0也会有交互体验上的差别。
transitionDuration: 0,
            // 鼠标是否可进入详情气泡中,默认为false,如需详情内交互,如添加链接,按钮,可设置为true//enterable: false,
            // 提示背景颜色,默认为透明度为0.7的黑色
backgroundColor: '#ffffff',
            borderColor: '#987ECA',
            borderWidth: 1,
            // 提示内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css
padding: 15,
            // 提示边框圆角,单位px,默认为4
borderRadius: 10,
            // 提示边框线宽,单位px,默认为0(无边框)
borderWidth: 2,
            // 文本样式,默认为白色字体
textStyle: {
                // 颜色
color: '#333333',
                // 水平对齐方式,可选为:'left' | 'right' | 'center'
align: 'left',
                // 垂直对齐方式,可选为:'top' | 'bottom' | 'middle'
baseline: 'bottom',
                // 字体系列
fontFamily: 'Arial, Microsoft YaHei, sans-serif',
                // 字号 ,单位px
                // fontSize: 20,
                // 样式,可选为:'normal' | 'italic' | 'oblique'
fontStyle: 'normal',
                // 粗细,可选为:'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
fontWeight: 'normal'
            },
        },


        series: [{
            type: 'map',
            //这里是'china',及因为js中注册的名字,如果是上海市,则该出需pName 指的是'shanghai'
textStyle: {
                align: "center",
                baseline: "middle"
            },
            top: 130,
            mapType: subText,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            //地图区域的多边形 图形样式,有 normal  emphasis 两个状态
itemStyle: {
                //normal 是图形在默认状态下的样式;
normal: {
                    //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
color: function (params) {
                        console.log(params);
                        //  var colorList = ['#0080BD', '#987ECA', '#FC954E', '#009E92', '#FEB134', '#00E47B', '#277BA2', '#8AAE92', '#B0DEDB', '#00A294'];//十个柱子颜色
return childColorList[params.dataIndex];
                    }
                },
                //emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
emphasis: {
                    show: true,
                    areaColor: "#a7efe9",
                }
            },
        }]
    }, true);
}

//案例二:
改变全局变量级别Level,可切换柱状图,但共享一个对象,变化的只是图例和数据。
注意这里初始化放在方法外面(echarts.init),对应柱状图数量不确定的情况是不适用的。
将option1单独提出,结构更清晰。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
//面积变化柱状图
var chart_EcologicalTypeAreaChange_line = echarts.init(document.getElementById('ecologicalTypeAreaChangeLine'));
function EcologicalTypeAreaChangeLineAJAX(RegionSelect, PreData) {
    var url = "@Url.Action("LandscapeBar")";
    if (RegionSelect) {
        $.post(url, { RegionName: RegionSelect, Pre: PreData, level: Level }, function (result) {
            //console.log("----LandscapeBar-----");
            //console.log(result);
            var info = LandspaceBarSeriesData( result);
            var seriesData = info.seriesData;
            var legendData = info.legendData;
            var colorData = info.colorData;
           
            // console.log(seriesData);             
            // console.log(info);
 
            var option1={
                title: {
                    text: RegionSelect+'面积变化统计图',
                    left: "center",
                },
                legend: {
                    type: 'scroll',
                    top: 30,
                    left: 'center',
                    data: legendData,
                    
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                toolbox: {
                    right: '20px',
                    feature: {
                        magicType: {
                            show: true,
                            title: {
                                line: '折线图',
                                bar: '柱形图'
                                //stack: '堆积',
                                //tiled: '平铺'
                            },
                            type: ['bar', 'line']
                          // type: ['line', 'bar', 'stack', 'tiled']
                        },
                        // dataZoom: { show: true, title: { zoom: '区域缩放', back: '区域缩放还原' } },
                        saveAsImage: { show: true }
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (data) {
                        //console.log(mydata);
                        return TooltipFormatter(data);
                    }
                },
                color: colorData,
                xAxis: [
                    {
                        type: 'category',
                        data: result.yearList,
                        axisLabel: {
                            interval: 0,  //坐标轴刻度标签的显示间隔.设置成 0 强制显示所有标签。设置为 1,隔一个标签显示一个标签。
                            rotate: 45,//倾斜度 -90 至 90 默认为0 
                            textStyle: {
                                fontWeight: "bold",  //加粗
                                color: "#000000"   //黑色
                            },
                        },
                    },
                ],
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
                series: seriesData
 
            };
 
            chart_EcologicalTypeAreaChange_line.setOption(option1, true);
 
 
        });
    }
}

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
//柱状图Series数据
function LandspaceBarSeriesData( result) {
    var seriesData = null;
    var legendData = null;
    var colorData = null;
    if (Level == 1) {
        colorData = ['rgb(38,115,0)', 'rgb(0,0,255)', 'rgb(189,0,0)', 'rgb(255,255,0)'];
        legendData = ['植被', '水体', '不透水', '裸地'];
        seriesData = [
            {
                name: '植被',
                type: 'bar',
                data: result.zbList,
            },
            {
                name: '水体',
                type: 'bar',
                data: result.stList,
            },
            {
                name: '不透水',
                type: 'bar',
                data: result.btsList,
            },
            {
                name: '裸地',
                type: 'bar',
                data: result.ldList,
            }
        ];
    } else if (Level == 2) {
        colorData = ['rgb(0,128,0)', 'rgb(0,255,0)', 'rgb(255,255,160)', 'rgb(0,0,255)', 'rgb(189,0,0)', 'rgb(128,128,128)', 'rgb(192,220,192)', 'rgb(255,255,0)', 'rgb(255,233,233)'];
        legendData = ['林地', '草地', '农田', '水体', '建筑', '道路', '其他不透水', '裸土', '在建用地'];
        seriesData = [
            {
                name: '林地',
                type: 'bar',
                data: result.ldList2,
            },
            {
                name: '草地',
                type: 'bar',
                data: result.cdList2,
            },
            {
                name: '农田',
                type: 'bar',
                data: result.ntList2,
            },
            {
                name: '水体',
                type: 'bar',
                data: result.stList2,
            },
            {
                name: '建筑',
                type: 'bar',
                data: result.jzList2,
            },
            {
                name: '道路',
                type: 'bar',
                data: result.dlList2,
            },
            {
                name: '其他不透水',
                type: 'bar',
                data: result.btsList2,
            },
            {
                name: '裸土',
                type: 'bar',
                data: result.ltList2,
            },
            {
                name: '在建用地',
                type: 'bar',
                data: result.jsydList2,
            }
        ];
    }
    var info = { seriesData: seriesData, legendData: legendData, colorData: colorData }
 
    return info;
 
}

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//图例数据
function TooltipFormatter(data) {
    var seriesNames = [];
    var formateStrings = [];
    var formateString = "";
    if (data.length > 0) {
        formateStrings.push(data[0].axisValue);
        for (i in data) {
            var item = data[i];
            seriesNames.push(item.seriesName);
            formateStrings.push(item.marker + item.seriesName + ": " + item.value.toFixed(2));
        }
        formateString = formateStrings.join("<br />");
        return formateString;
 
    }
}

  







posted @   hao_1234_1234  阅读(5372)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示