使用echarts配置中国地图

最新推荐文章于 2024-03-19 13:51:51 发布
nbsp383
最新推荐文章于 2024-03-19 13:51:51 发布
阅读量1.6k
点赞数
文章标签： echarts javascript ecmascript
本文链接：https://blog.csdn.net/weixin_65243943/article/details/126125529
版权
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>中国地图</title>
    <!-- 先引入 echarts js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <!-- 再引入china.js -->
    <script src="./china.js"></script>
</head>

<body>
    <!-- 
        地图的使用：
        1：先引入 echarts.js 然后在引入 china.js
     -->
    <div id="china_chart" style="width: 1000px;height:560px;border:1px solid #999;"></div>

    <script>
        var china_chart = echarts.init(document.getElementById('china_chart'));
        //静态的数据，数据的格式和饼图的一致。
        var data = [{
            name: '江苏',
            value: 100
        },
        {
            name: '北京',
            value: 86
        },
        {
            name: '上海',
            value: 68
        },
        {
            name: '重庆',
            value: 123
        },
        {
            name: '河北',
            value: 34
        },
        {
            name: '河南',
            value: 32
        },
        {
            name: '云南',
            value: 160
        },
        {
            name: '辽宁',
            value: 43
        },
        {
            name: '黑龙江',
            value: 181
        },
        {
            name: '湖南',
            value: 24
        },
        {
            name: '安徽',
            value: 33
        },
        {
            name: '山东',
            value: 54
        },
        {
            name: '新疆',
            value: 118
        },
        {
            name: '浙江',
            value: 44
        },
        {
            name: '江西',
            value: 220
        },
        {
            name: '湖北',
            value: 21
        },
        {
            name: '广西',
            value: 30
        },
        {
            name: '甘肃',
            value: 12
        },
        {
            name: '山西',
            value: 32
        },
        {
            name: '内蒙古',
            value: 35
        },
        {
            name: '陕西',
            value: 25
        },
        {
            name: '吉林',
            value: 45
        },
        {
            name: '福建',
            value: 28
        },
        {
            name: '贵州',
            value: 18
        },
        {
            name: '广东',
            value: 37
        },
        {
            name: '青海',
            value: 62
        },
        {
            name: '西藏',
            value: 43
        },
        {
            name: '四川',
            value: 33
        },
        {
            name: '宁夏',
            value: 8
        },
        {
            name: '海南',
            value: 19
        },
        {
            name: '台湾',
            value: 190
        },
        {
            name: '香港',
            value: 11
        },
        {
            name: '澳门',
            value: 10
        }
        ];
        var option = {
            title: {
                text: '中国地图',
            },
            tooltip: {
                // 自定义弹窗
                // formatter: '{a}<br>{b}：{c}',//{a}: 系列中的name的属性值。{b}系列中具体的数据的内容。{c}：内容对应的值,如果存在多个系列。
                //使用函数  将系列中的
                // 鼠标引入省份,不断触发.params 对象.当前省份的信息.
                formatter: function (params) {
                    // console.log(params);
                    return params.seriesName + "<br>" + params.name + ":" + params.value;
                }
            },
            // 视觉映射组件，负责地图的颜色的配置。
            visualMap: [{
                // 组件的类型，连续的
                // type:"continuous",
                // 不连续的
                type: "piecewise",
                // 自定义颜色块区间
                // pieces: [
                //     { min: 201,label:">200",color:"#222" }, 
                //     { min: 101, max: 200, label: '101-200',color:"#666" },
                //     { min: 51, max: 100, label: '51-100',color:"#999" },
                //     { min: 11, max: 50, label: '11-50',color:"#aaa" },
                //     { min: 1, max: 10, label: '1-10',color:"#ccc" },
                //     // 单独的一个值。
                //     { value:0,label:"0",color:"#eee"}    
                // ]
                // 取值的最小值
                min: 0,
                //最大值。
                max: 250,
                itemWidth: 25,
                itemHeight: 15,
                // 组件两端的文本。
                // text:["高","低"],
                // 指定取哪个系列的数据，即哪个系列的 series.data。
                seriesIndex: [0],
                // 组件的颜色的范围。
                inRange: {
                    color: ['orange', 'red']
                },
                // 组件的排列方式
                // orient:"horizontal",
                // 默认垂直布局
                orient: "vertical",
            }],
            //地图的核心区域
            geo: {
                //地图的类型
                map: 'china',
                //缩放比例 
                zoom: 1,
                //地图上的文字
                label: {
                    show: true
                },
                //高亮选中
                emphasis: {
                    label: {
                        show: true
                    },
                    itemStyle: {
                        areaColor: 'pink'
                    }
                }
            },
            //系列
            series: [{
                name: '中国',
                type: 'map',
                geoIndex: 0,
                data: data
            }]
        };
        //渲染视图
        china_chart.setOption(option);
    </script>
</body>

</html>