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

最新推荐文章于 2024-01-07 11:01:43 发布

weixin_30319097

最新推荐文章于 2024-01-07 11:01:43 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hao-1234-1234/p/9140093.html

本文介绍了ECharts中tooltip的formatter参数更新问题及其解决方案。当需要动态更新图表时，需正确使用setOption方法以实现tooltip内容随数据变化而更新。此外，还提供了地图和柱状图的具体案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

来源：https://blog.youkuaiyun.com/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是关键，同时transitionDuration设0也会有交互体验上的差别。
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单独提出，结构更清晰。

    //面积变化柱状图
    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);


            });
        }
    }

    //柱状图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;

    }

    //图例数据
    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;

        }
    }

转载于:https://www.cnblogs.com/hao-1234-1234/p/9140093.html