echarts 地圖默認文字顏色修改 normal和emphasis
normal:{ //靜態的時候顯示的默認樣式
show:true, //默認是否顯示
textStyle:{
color:'red'
}
},
emphasis:{ //鼠標移入動態的時候顯示的默認樣式
color:'green'
}
下邊是實際項目的option代碼
const sactterMapOpt = {
title: {
text: "全國主要城市訪問數據",
x: "center",
textStyle: {
color: "#43d0d6"
}
},
legend: {
data: ['下載','瀏覽','搜索'], //與series的name屬性對應
top:60,
align: 'left',
textStyle: {
color: "#fff"
}
},
geo: {
map: "china",
roam: false, //開啟鼠標縮放和漫游
zoom: 1, //地圖縮放級別
selectedMode: false, //選中模式：single | multiple
left: 0,
right: 0,
top: 0,
bottom: 0,
layoutCenter: ["50%", "50%"], //設置后left/right/top/bottom等屬性無效
layoutSize: "100%",
label: {
normal: { //靜態的時候展示樣式
show: false, //是否顯示地圖省份得名稱
textStyle: {
color: "#fff",
fontSize: 10,
fontFamily: "Arial"
}
},
emphasis: { //動態展示的樣式
color:'#43d0d6',
},
},
itemStyle: {
normal: {
areaColor: "#101f32",
borderWidth: 1.1,
textStyle: {
color: "#fff"
},
borderColor: "#43d0d6" //地圖邊框顏色
},
emphasis: {
color: "#fff",
areaColor: "#069"
}
}
},
series: [
{
name:'下載',
type: "effectScatter",
coordinateSystem: "geo",
symbol: "rect",
symbolSize: symbolSize,
rippleEffect: {
//漣漪特效
period: 1, //特效動畫時長
scale: 4, //波紋的最大縮放比例
brushType: "stroke" //波紋的繪制方式：stroke | fill
},
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: "red" //顏色
},
emphasis: {
borderColor: "#fff",
borderWidth: 1
}
},
data: res2
},
{
name:'瀏覽',
type: "effectScatter",
coordinateSystem: "geo",
symbol: "rect",
symbolSize: symbolSize,
rippleEffect: {
//漣漪特效
period: 1, //特效動畫時長
scale: 4, //波紋的最大縮放比例
brushType: "stroke" //波紋的繪制方式：stroke | fill
},
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: "yellow" //顏色
},
emphasis: {
borderColor: "#fff",
borderWidth: 1
}
},
data: res2
},
{
name:'搜索',
type: "effectScatter",
coordinateSystem: "geo",
symbol: "rect",
symbolSize: symbolSize,
rippleEffect: {
//漣漪特效
period: 1, //特效動畫時長
scale: 4, //波紋的最大縮放比例
brushType: "stroke" //波紋的繪制方式：stroke | fill
},
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: "#fff" //顏色
},
emphasis: {
borderColor: "#fff",
borderWidth: 1
}
},
data: res3
}
]
};
geo函數定義了 地圖省份文字的樣式