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)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。