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是关键，同时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;
 
    }
}