echarts label加边框_echarts 添加自定义label标签
1.echarts 自定義標簽
注：當設置visualMap的后，給覆蓋regions單獨定義的值(如果data 中沒有regions的地區 則無妨，我這個是從data中刪除'青島'，但是lable 無法正常顯示了，如有哪位大神有好的方法，請賜教)
initChart(id,data){
// console.log(data);
let obj = echarts.init(document.getElementById(id));
const geoCoordMap = {
'濟南市': [117,36.65 ],
'青島市': [120.33,36.07 ],
'淄博市': [118.05,36.78 ],
'棗莊市': [117.57,34.86 ],
'東營市': [118.49,37.6 ],
'煙臺市': [121.0,37.52 ],
'濰坊市': [119.1,36.62 ],
'濟寧市': [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 = ({ // 進行相關配置
visualMap: { //各市區的顏色由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: [{ //單獨定義青島市的顏色
name: '青島市',
value:this.qdVal.managercount,
itemStyle: {
normal: {
areaColor: '#fe9910',
}
}
}],
},
series: [
{
type: 'map',
map: '山東',
geoIndex: 0, //此處地圖為geo的第一個值
data:data,
},
{
name:'山東',
type: 'scatter',
coordinateSystem: 'geo',
symbol:'pin',
symbolSize:1,
label:{ //標簽樣式設置
normal:{
show:true,
formatter:function(params){ //標簽內容
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);
},
效果展示：
總結
以上是生活随笔為你收集整理的echarts label加边框_echarts 添加自定义label标签的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jsoup 获取html中body内容_
- 下一篇： composer查看当前镜像取消_国内全