欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ECharts绘制中国地图、广西地图

程序员文章站 2022-06-22 16:46:54
准备工作:导入ECharts依赖、和地图需要的.js文件。文件获取方式:官网:urlgithub:url(下载完后 :incubator-echarts-4.8.0\map\js\province目录下有各个省级的.js文件)绘制中国地图先在html中添加一个地图要挂载的节点:china-map

准备工作:导入ECharts依赖、和地图需要的.js文件。

文件获取方式:

  • 官网:url
  • github:url
    (下载完后 :incubator-echarts-4.8.0\map\js\province目录下有各个省级的.js文件)

绘制中国地图

先在html中添加一个地图要挂载的节点:china-map

<body>
<div class="china-map" id="china-map"></div>
</body>

js:

<script>
  var myChart = echarts.init(document.getElementById('china-map'));
    var option = {
        tooltip: {
//                    show: false //不显示提示标签
            formatter: '{b}', //提示标签格式
            backgroundColor:"#ff7f50",//提示标签背景颜色
            textStyle:{color:"#fff"} //提示标签字体颜色
        },
        series: [{
            type: 'map',
            mapType: 'china',
            label: {
                normal: {
                    show: true,//显示省份标签
                    textStyle:{color:"#c71585"}//省份标签字体颜色
                },
                emphasis: {//对应的鼠标悬浮效果
                    show: true,
                    textStyle:{color:"#800080"}
                }
            },
            itemStyle: {
                normal: {
                    borderWidth: .5,//区域边框宽度
                    borderColor: '#009fe8',//区域边框颜色
                    areaColor:"#ffefd5",//区域颜色
                },
                emphasis: {
                    borderWidth: .5,
                    borderColor: '#4b0082',
                    areaColor:"#f47920",
                }
            },
            data:[
                {name:'广西', selected:true},//广西为选中状态
                {name:'贵州', selected:true},//贵州为选中状态
                {name:'云南', selected:true},//云南为选中状态
                {name:'广东', selected:true},//云南为选中状态
                {name:'海南', selected:true},//云南为选中状态
                {name:'湖北', selected:true},//云南为选中状态
            ]
        }],
    };

    myChart.setOption(option);
    myChart.on('mouseover', function (params) {
        var dataIndex = params.dataIndex;
        console.log(params);
    });
</script>

绘制广西地图

和上面的中国地图类似:

<body>
 <div class="china-map" id="guangxi-map"></div>
</body>
var myChart = echarts.init(document.getElementById('guangxi-map'));
    var option = {
        title: {
            text : '广西地图',
            subtext : '各市区显示'
        },
        tooltip: {
//                    show: false //不显示提示标签
            formatter: '{b}', //提示标签格式
            backgroundColor:"#ff7f50",//提示标签背景颜色
            textStyle:{color:"#fff"} //提示标签字体颜色
        },
        series: [
            {
                name: '数据名称',
                type: 'map',
                mapType: '广西',
                selectedMode : 'single',
                label: {
                    normal: {
                        show: true,//显示市区标签
                        textStyle:{color:"#c71585"}//省份标签字体颜色
                    },
                    emphasis: {//对应的鼠标悬浮效果
                        show: true,
                        textStyle:{color:"#800080"}
                    }
                },
                itemStyle:{
                    normal: {
                        borderWidth: .5,//区域边框宽度
                        borderColor: '#009fe8',//区域边框颜色
                        areaColor:"#ffefd5",//区域颜色
                    },
                    emphasis: {
                        show:true,
                        borderWidth: .5,
                        borderColor: '#4b0082',
                        areaColor:"#f47920",
                    }
                },
                data:[
                    {name:'南宁市', selected:true},//**为选中状态
                    {name:'百色市', selected:true},//**为选中状态
                    {name:'玉林市', selected:true},//**为选中状态
                    {name:'柳州市', selected:true},//**为选中状态
                ]
            }]
    };
    myChart.setOption(option);
    myChart.on('mouseover', function (params) {
            var dataIndex = params.dataIndex;
            console.log(params);
        });

效果展示:
ECharts绘制中国地图、广西地图

ECharts绘制中国地图、广西地图

本文地址:https://blog.csdn.net/qq_32953185/article/details/107374553