echarts地图默认⽂字颜⾊修改normal和emphasis echarts 地图默认⽂字颜⾊修改 normal和emphasis
itemStyle（图形样式）参数分有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；emphasis 是图形在⾼亮状态下的样式 normal:{ //静态的时候显⽰的默认样式
show:true, //默认是否显⽰
textStyle:{
color:'red'
}
},
emphasis:{ //⿏标移⼊动态的时候显⽰的默认样式
color:'green'
}
下边是实际项⽬的option代码
1 const sactterMapOpt = {robust
2 title: {
3 text: "全国主要城市访问数据",
4 x: "center",
5 textStyle: {
6 color: "#43d0d6"
7 }
8 },
9 legend: {
10 data: ['下载','浏览','搜索'], //与series的name属性对应
大马士革钢11 top:60,
12 align: 'left',
13 textStyle: {
14 color: "#fff"
15 }
16 },
17 geo: {
18 map: "china",
19 roam: false, //开启⿏标缩放和漫游 20 zoom: 1, //地图缩放级别
21 selectedMode: false, //选中模式：single | multiple
22 left: 0,
23 right: 0,
24 top: 0,
25 bottom: 0,
26 layoutCenter: ["50%", "50%"], //设置后left/right/top/bottom等属性⽆效
27 layoutSize: "100%",
28 label: {
29 normal: { //静态的时候展⽰样式
30 show: false, //是否显⽰地图省份得名称 31 textStyle: {
32 color: "#fff",
33 fontSize: 10,
34 fontFamily: "Arial"
35 }
36 },
37 emphasis: { //动态展⽰的样式
38 color:'#43d0d6',
39 },
40 },
41 itemStyle: {
42 normal: {
43 areaColor: "#101f32",
44 borderWidth: 1.1,
45 textStyle: {
46 color: "#fff"
NORWAL47 },
48 borderColor: "#43d0d6" //地图边框颜⾊
49 },
50 emphasis: {
51 color: "#fff",
52 areaColor: "#069"
53 }
54 }
55 },
56 series: [
57 {
58 name:'下载',
59 type: "effectScatter",//type如果定义成map也会⾃动⽣成geo
60 coordinateSystem: "geo",//引⽤上⾯定义的geo属性
61 symbol: "rect",
62 symbolSize: symbolSize,
63 rippleEffect: {
64 //涟漪特效
65 period: 1, //特效动画时长
66 scale: 4, //波纹的最⼤缩放⽐例
67 brushType: "stroke" //波纹的绘制⽅式：stroke | fill
68 },
69 label: {
70 normal: {
安溪八中
71 show: false
72 },
73 emphasis: {
74 show: false
75 }
76 },
77 itemStyle: {
78 normal: {
79 color: "red" //颜⾊
80 },
81 emphasis: {
82 borderColor: "#fff",
83 borderWidth: 1
84 }
85 },
86 data: res2
87 },
88 {
89 name:'浏览',
90 type: "effectScatter",
91 coordinateSystem: "geo",
92 symbol: "rect",
93 symbolSize: symbolSize,
94 rippleEffect: {
95 //涟漪特效
96 period: 1, //特效动画时长
97 scale: 4, //波纹的最⼤缩放⽐例
98 brushType: "stroke" //波纹的绘制⽅式：stroke | fill
99 },
100 label: {
101 normal: {次生灾害
102 show: false
103 },
104 emphasis: {
105 show: false
106 }
107 },
108 itemStyle: {
109 normal: {
110 color: "yellow" //颜⾊
111 },
112 emphasis: {
113 borderColor: "#fff",
114 borderWidth: 1
115 }
116 },
117 data: res2
118 },
119 {
120 name:'搜索',
121 type: "effectScatter",
122 coordinateSystem: "geo",
123 symbol: "rect",
124 symbolSize: symbolSize,
125 rippleEffect: {
126 //涟漪特效
127 period: 1, //特效动画时长
128 scale: 4, //波纹的最⼤缩放⽐例
129 brushType: "stroke" //波纹的绘制⽅式：stroke | fill
130 },
131 label: {
132 normal: {
133 show: false
134 },
135 emphasis: {
136 show: false
137 }
138 },
139 itemStyle: {
140 normal: {
141 color: "#fff" //颜⾊
142 },
143 emphasis: {
柔毛水杨梅144 borderColor: "#fff",
145 borderWidth: 1
146 }
147 },
148 data: res3
149 }
150 ]
151 };
geo函数定义了地图省份⽂字的样式，series中定义了每个系列的特效
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议