目前在公司做的项目中就是使用的echarts进行地图的展示,遇到一个很奇怪的问题,就是在option的配置下面,formatter获取不到值,如果为字符串是可以正常显示的
tooltip: {
trigger: "item",
formatter: "{b}<br/>{c} (p / km2)",
},
如果formatter为函数,就会出现值为undefined的情况,具体代码如下:
tooltip: {
trigger: "item",
formatter: function(params) {
console.log(params, "lllllll");
},
},
series: [
{
name: "数据名称",
type: "map",
roam: false,
mapType: mapName,
selectedMode: "single",
showLegendSymbol: false,
visibility: "off",
// data: this.mapData,
data: [
{ name: "新疆", value: Math.random()},
{ name: "黑龙江", value: Math.random() },
{ name: "内蒙古", value: Math.random() },
],
},
],
以上所有的都是没有问题的,formatter中的参数params的值是从series.data中获取的,最后矛头对准了key和value,在数据中要使用name来匹配数据,一旦name名称对不上,数据就是获取不到的。
匹配之后代码如下,地图上的名称要和echarts渲染的名称相对应:
tooltip: {
trigger: "item",
formatter: function(params) {
console.log(params, "lllllll");
},
},
series: [
{
name: "数据名称",
type: "map",
roam: false,
mapType: mapName,
selectedMode: "single",
showLegendSymbol: false,
visibility: "off",
// name匹配很重要,标识!!!!
data: [
{ name: "新疆维吾尔自治区", value: Math.random()},
{ name: "黑龙江省", value: Math.random() },
{ name: "内蒙古自治区", value: Math.random() },
],
},
],
在控制台中名称匹配上的数据是这样的,data中是有数据,这样也就可以正确使用tooltip中的fromatter,进行相关内容的展示,在此不赘述。
如果没有匹配上的话,很自然的数据为undefined。
总之,刚开始接触echarts,各种细节和小点都很多,要多研究,多动手操作才好。