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

使用echarts画地图时,遇到一个很奇怪的问题。

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

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

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);
}



猜你喜欢

转载自blog.csdn.net/u010682330/article/details/80446886
今日推荐