echarts地图展示，鼠标移入指定区域颜色不变，china.js是文字居中无间隙版

最新推荐文章于 2025-06-10 14:57:17 发布

转载最新推荐文章于 2025-06-10 14:57:17 发布 · 7.9k 阅读

echart 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了如何使用ECharts库绘制中国地图热力图，包括地图初始化、省份标签显示、鼠标悬浮效果及省份颜色变化等功能实现。通过具体代码示例，帮助读者快速掌握ECharts地图图表的配置和交互设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id="china-map" style="width:1200px; height: 600px;">

</div>

function mapChartInit() {
        var myChart = echarts.init(document.getElementById('china-map'));
        var option = {
            tooltip: {
//                     //不显示提示标签
                show: false,
                formatter: '{b}', //提示标签格式
                backgroundColor:"#4169E1",//提示标签背景颜色
                textStyle:{color:"#fff"} //提示标签字体颜色
            },
            series: [{
                type: 'map',
                zoom:1.2,
                mapType: 'china',
                label: {
                    normal: {
                        show: true,//显示省份标签
                        textStyle:{color:"#696969"}//省份标签字体颜色
                    },
                    emphasis: {//对应的鼠标悬浮效果
                        show: true,
                        textStyle:{color:"#FFFFFF"}
                    }
                },
                itemStyle: {
                    normal: {
                        borderWidth: .5,//区域边框宽度
                        borderColor: '#FFFFFF',//区域边框颜色
                        areaColor:"#DCDCDC",//区域颜色

                    },
                    emphasis: {
                        borderWidth: .10,
                        borderColor: '#4b0082',
                        areaColor:"#f00",
                    }
                },
                data:[
                    {name:'新疆', selected:false, value: 1},
                    {name:'西藏', selected:false, value: 2},
                    {name:'台湾', selected:false, value: 3},
                    {name:'南海诸岛', selected:false, value: 4}
                ]
            }]
        };
        myChart.setOption(option);

//设置鼠标移入指定省份颜色不变的效果
        myChart.on("mouseover", function (params){
            if(params.data.value != undefined){
                myChart.dispatchAction({
                    type: 'downplay'
                });
            }
        });
    }