中国地图china.js

置顶卑微小钟

已于 2025-02-28 15:29:48 修改

阅读量9.2w

点赞数 46

分类专栏：大数据 python 文章标签： javascript html5 echarts

于 2021-06-02 10:28:08 首次发布

本文链接：https://blog.youkuaiyun.com/zhongjianboy/article/details/117461991

版权

python 同时被 2 个专栏收录

34 篇文章

订阅专栏

大数据

29 篇文章

订阅专栏

中国地图china.js

一、简介

中国地图china是基于echarts.js和china.js绘制图像。

官方已不支持china.js下载

China.js链接：https://pan.baidu.com/s/1QLnaI0UZAi1WI9TRZuTSbw?pwd=2000
提取码：2000

二、配置项

// china.js的配置项与echarts基本图形配置项相通
// 关于echarts基本图形配置参考：https://echarts.apache.org/v4/zh/option.html
// 其中china地图主要配置不同处在series

series: [
    {
        name: 'china',	// name:名称，可是自己设置任意值
        type: 'map',	// type:'map' 固定值
        mapType: 'china',// mapType: 'china' 固定值
        itemStyle: {
            normal: { label: { show: true } },//显示省份标签
            emphasis: { label: { show: true } }//鼠标悬浮效果
        },
        data: [['name1',value1],['name2',value2],['name3',value3]...]//传入一个列表格式[[name,value]]
    }
]
//如果这样配置是没有颜色变化的，使用需要配置dataRange
dataRange: {
    min: 0,
    max: list_value_max//Math.max.apply(null, data_value_list),
    x: 'left',
    y: 'bottom',
    text: ['高', '低'],           // 文本，默认为数值文本
    calculable: true,
    //inRange: {
    //    color: ['#FFFFFF','#0000FF'],
    //    symbolSize: [10, 100]
    //}
}

三、Demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echarts.js"></script>
    <script src="china.js"></script>
</head>

<body>
    <div id="main" style="width: 800px;height: 600px;"></div>
    <script>
        const data_list = [{name:'江苏',value:192836},{name:'安徽',value:118491},{name:'湖北',value:117036},{name:'湖南',value:110666},{name:'广东',value:109915},{name:'浙江',value:69540},{name:'福建',value:45146},{name:'山东',value:42753},{name:'河南',value:31141},{name:'四川',value:30287},{name:'河北',value:29890},{name:'江西',value:23649},{name:'黑龙江',value:20475},{name:'陕西',value:17942},{name:'贵州',value:16019},{name:'吉林',value:15441},{name:'广西',value:11875},{name:'山西',value:11077},{name:'云南',value:9238},{name:'辽宁',value:6538},{name:'甘肃',value:6128},{name:'重庆',value:5883},{name:'内蒙古',value:5605},{name:'海南',value:4596},{name:'天津',value:4244},{name:'新疆',value:4125},{name:'上海',value:3429},{name:'宁夏',value:3225},{name:'青海',value:1833},{name:'北京',value:1765}]
        const data_value_list= [192836,118491,117036,110666,109915,69540,45146,42753,31141,30287,29890,23649,20475,17942,16019,15441,11875,11077,9238,6538,6128,5883,5605,4596,4244,4125,3429,3225,1833,1765,0,]
        const option = {
            title: {
                text: '全国工作招聘数量',
                subtext: '数据源：前程无忧',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '名称：{a}<br/>省份：{b}<br/>数值：{c}'
            },

            dataRange: {
                min: 0,
                max: Math.max.apply(null, data_value_list),
                x: 'left',
                y: 'bottom',
                text: ['高', '低'],           // 文本，默认为数值文本
                calculable: true,
                //inRange: {
                //    color: ['#FFFFFF','#0000FF'],
                //    symbolSize: [10, 100]
                //}
            },
            series: [
                {
                    name: '数据',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    itemStyle: {
                        normal: { label: { show: true } },
                        emphasis: { label: { show: true } }
                    },
                    data: data_list
                }
            ]
        };
        ec_map = echarts.init(document.getElementById('main'));
        ec_map.setOption(option)
    </script>
</body>
</html>