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: {
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中定义了每个系列的特效

原文地址:https://www.cnblogs.com/lgjava/p/13092194.html