echarts label加边框_echarts 添加自定义label标签
1.echarts 自定義標(biāo)簽
注：當(dāng)設(shè)置visualMap的后，給覆蓋regions單獨(dú)定義的值(如果data 中沒(méi)有regions的地區(qū) 則無(wú)妨，我這個(gè)是從data中刪除'青島'，但是lable 無(wú)法正常顯示了，如有哪位大神有好的方法，請(qǐng)賜教)
initChart(id,data){
// console.log(data);
let obj = echarts.init(document.getElementById(id));
const geoCoordMap = {
'濟(jì)南市': [117,36.65 ],
'青島市': [120.33,36.07 ],
'淄博市': [118.05,36.78 ],
'棗莊市': [117.57,34.86 ],
'東營(yíng)市': [118.49,37.6 ],
'煙臺(tái)市': [121.0,37.52 ],
'濰坊市': [119.1,36.62 ],
'濟(jì)寧市': [116.59,35.38 ],
'泰安市': [117.13,36.0 ],
'威海市': [122.3,37.5],
'日照市': [119.46,35.42 ],
'濱州市': [118.03,37.4],
'德州市': [116.29,37.45 ],
'聊城市': [115.97,36.45 ],
'臨沂市': [118.35,35.05 ],
'菏澤市': [115.43,35.24 ],
'萊蕪市': [117.67,36.2 ],
}
const convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].region];
if (geoCoord) {
res.push({
value: geoCoord.concat(data[i].value),
name: data[i].region,
managercount:data[i].managercount,
fundcount:data[i].fundcount,
});
}
}
return res;
};
let option = ({ // 進(jìn)行相關(guān)配置
visualMap: { //各市區(qū)的顏色由value值得大小定
show:false,
text: ['高', '低'],
showLabel: true,
seriesIndex: [0],
min: 1,
max: 300,
inRange: {
color:[ '#2ab0fc','#0195f1', '#047ad7',]
},
},
geo: {
map: '山東',
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#83caf5',
borderColor: '#fff',
},
emphasis: {
areaColor: '#aed6f2',
}
},
regions: [{ //單獨(dú)定義青島市的顏色
name: '青島市',
value:this.qdVal.managercount,
itemStyle: {
normal: {
areaColor: '#fe9910',
}
}
}],
},
series: [
{
type: 'map',
map: '山東',
geoIndex: 0, //此處地圖為geo的第一個(gè)值
data:data,
},
{
name:'山東',
type: 'scatter',
coordinateSystem: 'geo',
symbol:'pin',
symbolSize:1,
label:{ //標(biāo)簽樣式設(shè)置
normal:{
show:true,
formatter:function(params){ //標(biāo)簽內(nèi)容
return params.name+':'+params.data.managercount+','+params.data.fundcount
},
lineHeight: 20,
backgroundColor:'rgba(255,255,255,.9)',
borderColor:'#80cffd',
borderWidth:'1',
padding:[5,15,4],
color:'#000000',
fontSize: 14,
fontWeight:'normal',
},
},
data:convertData(data),
}
]
})
obj.setOption(option);
},
效果展示：
總結(jié)
以上是生活随笔為你收集整理的echarts label加边框_echarts 添加自定义label标签的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： jsoup 获取html中body内容_
- 下一篇： composer查看当前镜像取消_国内全