echarts 地图默认文字颜色修改 normal和emphasis

echarts 地图默认文字颜色修改 normal和emphasis

normal:{   //静态的时候显示的默认样式

  show:true, //默认是否显示

  textStyle:{

    color:'red'

  }

},

emphasis:{  //鼠标移入动态的时候显示的默认样式

  color:'green'

}

 

 

 

下边是实际项目的option代码

const sactterMapOpt = {
                    title: {
                        text: "全国主要城市访问数据",
                        x: "center",
                        textStyle: {
                            color: "#43d0d6"
                        }
                    },
                    legend: {
                        data: ['下载','浏览','搜索'], //与series的name属性对应
                        top:60,
                        align: 'left',
                        textStyle: {
                            color: "#fff"
                        }
                    },
                    geo: {
                        map: "china",
                        roam: false, //开启鼠标缩放和漫游
                        zoom: 1, //地图缩放级别
                        selectedMode: false, //选中模式:single | multiple
                        left: 0,
                        right: 0,
                        top: 0,
                        bottom: 0,
                        layoutCenter: ["50%", "50%"], //设置后left/right/top/bottom等属性无效
                        layoutSize: "100%",
                        label: {
                            normal: { //静态的时候展示样式
                                show: false, //是否显示地图省份得名称
                                textStyle: {
                                    color: "#fff",
                                    fontSize: 10,
                                    fontFamily: "Arial"
                                }
                            },
                            emphasis: { //动态展示的样式
                                color:'#43d0d6',
                            },
                        },
                        itemStyle: {
                            normal: {
                                areaColor: "#101f32",
                                borderWidth: 1.1,
                                textStyle: {
                                    color: "#fff"
                                },
                                borderColor: "#43d0d6" //地图边框颜色
                            },
                            emphasis: {
                                color: "#fff",
                                areaColor: "#069"
                            }
                        }
                    },
                    series: [
                        {
                            name:'下载',
                            type: "effectScatter",
                            coordinateSystem: "geo",
                            symbol: "rect",
                            symbolSize: symbolSize,
                            rippleEffect: {
                                //涟漪特效
                                period: 1, //特效动画时长
                                scale: 4, //波纹的最大缩放比例
                                brushType: "stroke" //波纹的绘制方式:stroke | fill
                            },
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: "red" //颜色
                                },
                                emphasis: {
                                    borderColor: "#fff",
                                    borderWidth: 1
                                }
                            },
                            data: res2
                        },
                        {
                            name:'浏览',
                            type: "effectScatter",
                            coordinateSystem: "geo",
                            symbol: "rect",
                            symbolSize: symbolSize,
                            rippleEffect: {
                                //涟漪特效
                                period: 1, //特效动画时长
                                scale: 4, //波纹的最大缩放比例
                                brushType: "stroke" //波纹的绘制方式:stroke | fill
                            },
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: "yellow" //颜色
                                },
                                emphasis: {
                                    borderColor: "#fff",
                                    borderWidth: 1
                                }
                            },
                            data: res2
                        },
                        {
                            name:'搜索',
                            type: "effectScatter",
                            coordinateSystem: "geo",
                            symbol: "rect",
                            symbolSize: symbolSize,
                            rippleEffect: {
                                //涟漪特效
                                period: 1, //特效动画时长
                                scale: 4, //波纹的最大缩放比例
                                brushType: "stroke" //波纹的绘制方式:stroke | fill
                            },
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: "#fff" //颜色
                                },
                                emphasis: {
                                    borderColor: "#fff",
                                    borderWidth: 1
                                }
                            },
                            data: res3
                        }
                    ]
                };

  

geo函数定义了 地图省份文字的样式

 

posted @ 2018-11-15 11:01  一八嘚酒  阅读(34875)  评论(0编辑  收藏  举报