echarts向数据添加自定义注释
echarts向数据添加自定义注释
提问于 2021-10-07 14:35:19
这是一个基于js echarts的geomap示例的代码。
var data = [
{ name: '海门', value: 115 },
{ name: '鄂尔多斯', value: 111 },
];
var geoCoordMap = {
海门: [121.15, 31.89],
鄂尔多斯: [109.781327, 39.608266]
};
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
text: geoCoord.concat(data[i].text)
});
}
}
return res;
};
function renderItem(params, api) {
var coords = [
[116.7, 39.53],
[103.73, 36.03],
[112.91, 27.87],
[120.65, 28.01],
[119.57, 39.95]
];
var points = [];
for (var i = 0; i < coords.length; i++) {
points.push(api.coord(coords[i]));
}
var color = api.visual('color');
return {
type: 'polygon',
shape: {
points: echarts.graphic.clipPointsByRect(points, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
})
},
style: api.style({
fill: color,
stroke: echarts.color.lift(color)
})
};
}
option = {
backgroundColor: 'transparent',
title: {
text: '全国主要城市空气质量',
subtext: 'data from PM25.in',
sublink: 'http://www.pm25.in',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item'
},
bmap: {
center: [104.114129, 37.550339],
zoom: 5,
roam: true,
mapStyle: {
styleJson: [
{
featureType: 'water',
elementType: 'all',
stylers: {
color: '#044161'
}
},
{
featureType: 'land',
elementType: 'all',
stylers: {
color: '#004981'
}
},
{
featureType: 'boundary',
elementType: 'geometry',
stylers: {
color: '#064f85'
}
},
{
featureType: 'railway',
elementType: 'all',
stylers: {
visibility: 'off'
}
},
{
featureType: 'highway',
elementType: 'geometry',
stylers: {
color: '#004981'
}
},
{
featureType: 'highway',
elementType: 'geometry.fill',
stylers: {
color: '#005b96',
lightness: 1
}
},
{
featureType: 'highway',
elementType: 'labels',
stylers: {
visibility: 'off'
}
},
{
featureType: 'arterial',
elementType: 'geometry',
stylers: {
color: '#004981'
}
},
{
featureType: 'arterial',
elementType: 'geometry.fill',
stylers: {
color: '#00508b'
}
},
{
featureType: 'poi',
elementType: 'all',
stylers: {
visibility: 'off'
}
},
{
featureType: 'green',
elementType: 'all',
stylers: {
color: '#056197',
visibility: 'off'
}
},
{
featureType: 'subway',
elementType: 'all',
stylers: {
visibility: 'off'
}
},
{
featureType: 'manmade',
elementType: 'all',
stylers: {
visibility: 'off'
}
},
{
featureType: 'local',
elementType: 'all',
stylers: {
visibility: 'off'
}
},
{
featureType: 'arterial',
elementType: 'labels',
stylers: {
visibility: 'off'
}
},
{
featureType: 'boundary',
elementType: 'geometry.fill',
stylers: {
color: '#029fd4'
}
},
{
featureType: 'building',
elementType: 'all',
stylers: {
color: '#1a5787'
}
},
{
featureType: 'label',
elementType: 'all',
stylers: {
visibility: 'off'
}
}
]
}
},
series: [
{
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'bmap',
data: convertData(data),
encode: {
value: 2
},
symbolSize: function (val) {
return val[2] / 10;
},
label: {
formatter: '{b}',
position: 'right'
},
itemStyle: {
color: '#ddb926'
},
emphasis: {
label: {
show: true
}
}
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'bmap',
data: convertData(
data
.sort(function (a, b) {
return b.value - a.value;
})
.slice(0, 6)
),
encode: {
value: 2
},
symbolSize: function (val) {
return val[2] / 10;
},
showEffectOn: 'emphasis',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
formatter: '{b}',
position: 'right',
show: true
},
itemStyle: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
},
zlevel: 1
},
{
type: 'custom',
coordinateSystem: 'bmap',
renderItem: renderItem,
itemStyle: {
opacity: 0.5
},
animation: false,
silent: true,
data: [0],
z: -10
}
]
};下面是它的显示方式
现在我想在每个城市的值后面添加一些随机字符串，例如：
Top 5
鄂尔多斯 111
many green trees我可以在echarts data part中添加什么属性？我看到只有数字在数据部分可用，我可以用哪种方法将字符串“许多绿色树”添加到可视化中？
回答 1
Stack Overflow用户
发布于 2021-10-11 06:45:24
如果你想知道的话，我已经找到了一种在框中包含单词的方法。
- 创建新字典来存储您的单词
var ={海门：‘许多红树’，鄂尔多斯：‘许多绿树’}；var stringmap
将字符串添加到值中，存储在最后一个元素中，如3 (因为map.geo将0,1识别为坐标，2识别为符号的大小)，将这些添加到convertData
- 中
var stringname=stringmap[datai.name]；var new=[]；new.push(datai.value) var
并将geocoord.concat替换为
value: geoCoord.concat(new)- 在工具提示中显示这些单词，更改格式化程序
工具提示：{ trigger:'item'，confine:true formatter: function(params){ tip=params.name+ ":“+ ""+params.value3 return tip } }
然后你得到了它
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69483039
复制相关文章
相似问题
腾讯云开发者
