echarts地图默认⽂字颜⾊修改normal和emphasis
echarts 地图默认⽂字颜⾊修改 normal和emphasis
itemStyle（图形样式）参数分有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；emphasis 是图形在⾼亮状态下的样式
normal:{  //静态的时候显⽰的默认样式
  show:true, //默认是否显⽰
  textStyle:{
    color:'red'
  }
},
emphasis:{  //⿏标移⼊动态的时候显⽰的默认样式
  color:'green'
}
下边是实际项⽬的option代码
1 const sactterMapOpt = {
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"
47                                },
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: {textstyle
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中定义了每个系列的特效

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。