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

1、静态时显示

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

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

  textStyle:{
    color:'red'

  }

},

2、鼠标移入时显示

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

  color:'green'

}

 

3、完整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
                        }
                    ]
                };
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 ECharts 地图上实现移入时改变颜色的效果,你可以使用 ECharts 的事件监听和更新配置的功能。 以下是一个示例代码,演示了在移入地图区域时改变颜色的效果: ```javascript // 初始化 ECharts 实例 var myChart = echarts.init(document.getElementById('chart')); // 地图数据 var mapData = [ {name: '北京', value: 100}, {name: '上海', value: 200}, // 其他地区数据... ]; // 配置项 var option = { // 其他配置项... series: [{ type: 'map', map: 'china', data: mapData, // 在地图区域上添加事件监听 itemStyle: { // 默认状态下的样式 normal: { areaColor: '#ccc', borderColor: '#fff' }, // 鼠标移入时的样式 emphasis: { areaColor: '#ff0', borderColor: '#fff' } }, // 监听鼠标移入事件 // 在移入时更新配置项,改变样式 // 移出时还原样式 eventHandlers: { 'mouseover': function(params) { var dataIndex = params.dataIndex; myChart.setOption({ series: [{ emphasis: { itemStyle: { areaColor: '#ff0', borderColor: '#fff' } } }] }); }, 'mouseout': function(params) { var dataIndex = params.dataIndex; myChart.setOption({ series: [{ emphasis: {} }] }); } } }] }; // 使用配置项生成地图 myChart.setOption(option); ``` 在上面的代码中,我们通过配置项的 `itemStyle` 字段定义了地图区域的样式,其中 `normal` 表示默认状态下的样式,`emphasis` 表示鼠标移入时的样式。然后,在 `eventHandlers` 字段中监听了 `mouseover` 和 `mouseout` 事件,在移入和移出时更新配置项,从而改变样式。 你可以根据自己的需求修改 `areaColor`、`borderColor` 等样式属性来实现不同的效果。同时,你也可以根据实际情况修改地图数据和其他配置项。 希望以上信息对你有所帮助!如果还有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值