echarts画图时tooltip.formatter参数params不会更新（转载）echarts画图时tooltip.formatter参数params不会更新
解决⽅案： setOption时默认是合并，如果要全部重新加载要写成 setOption（{}，true），这样就可以了。
只写成这样setOption（{}），没有true 也默认合并这次和上次的数据，⽽不是更新。
案例⼀：
⾸先说明我的⽬的：为了让地图漂亮些，不同的地图区域显⽰不同的颜⾊。
由于待绘制的地图⼆级地市数量不确定，需要通过解析获取到的数据来确定，因此我在
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.ElementById('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.ElementById('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 = lorData;
// 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: arList,
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: List2,
},
{
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);
font weight bolderformateStrings.push(item.marker + item.seriesName + ": " + Fixed(2));            }
formateString = formateStrings.join("<br />");
return formateString;
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。