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