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单独提出,结构更清晰。
    //面积变化柱状图
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; }
}

  


echarts画图时tooltip.formatter参数params不会更新(转载)的更多相关文章

  1. ECharts地图中tooltip提示框通过formatter分别显示多个数值

    我原来的CSDN博客上写过这篇文章:http://blog.csdn.net/giscript/article/details/52162165 但是现在发现了代码中存在一个bug,在此更正. 按照原 ...

  2. Echarts数据可视化tooltip提示框,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  3. vue父组件异步传递prop到子组件echarts画图问题踩坑总结

    效果图: 大致思路:考虑到5张图都是折线图,所以准备用一个子组件承接echarts画图,然后父组件通过prop传递不同数据来展示不同的图 踩坑问题: 1.引入line子组件,画了5个元素,但是只显示一 ...

  4. .NET框架- in ,out, ref , paras使用的代码总结 C#中in,out,ref的作用 C#需知--长度可变参数--Params C#中的 具名参数 和 可选参数 DEMO

    C#.net 提供的4个关键字,in,out,ref,paras开发中会经常用到,那么它们如何使用呢? 又有什么区别? 1 in in只用在委托和接口中: 例子: 1 2 3 4 5 6 7 8 9 ...

  5. 对接接口时,组织参数json出现的问题

    在进行对接第三方接口时,进行参数组装成json的过程中出现参数传递格式错误以及json格式化错误. 在拼接json时,如果json中有对象,则以map的方式组装好所有参数.最后map转成json,不然 ...

  6. 发送请求时携带了参数,但是浏览器network没有显示的排错思路

    发送请求时携带了参数,但是浏览器network没有显示的排错思路 不知道大家有没有遇到这样子的情况就是发送请求的时候明明携带了参数,但是浏览器的network中就是没有!请看下图和代码! 我发送请求用 ...

  7. 浅谈C#可变参数params

    前言 前几天在群里看到群友写了一个基础框架,其中设计到关于同一个词语可以添加多个近义词的一个场景.当时群友的设计是类似字典的设计,直接添加k-v的操作,本人看到后思考了一下觉得使用c#中的params ...

  8. Oracle创建表时涉及的参数解析

    1.oracle pctfree和pctused详解   http://www.cnblogs.com/linjiqin/archive/2012/01/16/2323320.html http:// ...

  9. @PathVariable出现点号"."时导致路径参数截断获取不全的解决办法

    @PathVariable出现点号"."时导致路径参数截断获取不全的解决办法 比如,我路径是/test/{name},name的值是1.2.3.4,后台用@PathVariable ...

随机推荐

  1. shell指令(一)

    ubuntu桌面窗口下进入shell窗口:Ctrl + Alt + F2~F6:  退出shell窗口:Ctrl + Alt + F7:从UI中进入UI命令窗口,Ctrl + Alt +T shell ...

  2. iOS TouchID & FaceID

    import UIKit import LocalAuthentication //指纹识别必须用真机测试,并且在iOS8以上系统,如果是FaceID至少IOS11以上. class Authenti ...

  3. Java 并发编程:核心理论

    并发编程是Java程序员最重要的技能之一,也是最难掌握的一种技能.它要求编程者对计算机最底层的运作原理有深刻的理解,同时要求编程者逻辑清晰.思维缜密,这样才能写出高效.安全.可靠的多线程并发程序.本系 ...

  4. 协程 及 libco 介绍

    libco 是腾讯开源的一个协程库,主要应用于微信后台RPC框架,下面我们从为什么使用协程.如何实现协程.libco使用等方面了解协程和libco. why协程 为什么使用协程,我们先从server框 ...

  5. 背水一战 Windows 10 (121) - 后台任务: 推送通知

    [源码下载] 背水一战 Windows 10 (121) - 后台任务: 推送通知 作者:webabcd 介绍背水一战 Windows 10 之 后台任务 推送通知 示例演示如何接收推送通知/WebA ...

  6. C实现动态进度条

    #include <iostream> #include <windows.h> void HideCursor() { CONSOLE_CURSOR_INFO cursor_ ...

  7. Android 展示控件之Surface、SurfaceView、SurfaceHolder及SurfaceHolder.Callback之间的关系

    一.Surface Surface在SDK的文档中的描述是这样的:Handle onto a raw buffer that is being managed by the screen compos ...

  8. 每天学点SpringCloud(十二):Zipkin全链路监控

    Zipkin是SpringCloud官方推荐的一款分布式链路监控的组件,使用它我们可以得知每一个请求所经过的节点以及耗时等信息,并且它对代码无任何侵入,我们先来看一下Zipkin给我们提供的UI界面都 ...

  9. PHP新特性Trait

    Trait是PHP 5.4引入的新概念,看上去既像类又像接口,其实都不是,Trait可以看做类的部分实现,可以混入一个或多个现有的PHP类中,其作用有两个:表明类可以做什么:提供模块化实现.Trait ...

  10. python访问互联网

    1.python有一个网络包urllib,里面有很多网络模块,其中我们常用的就是urllib.request (module)这个模块 2.引入要是用的模块:import urllib.request ...