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中定義了每個系列的特效

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM