使用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是关键,同时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); }