【ECharts学习】—实现中国地图

心已赠人 2022-10-09 12:26 252阅读 0赞

## 【ECharts学习】—实现中国地图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70]

## 使用Echarts进行地图绘制展示的时候，需要china.js的引入，我把它放在百度网盘里了，需要的自取 ##

## [点我跳转到百度网盘 ][Link 1] ##

## 提取码：clby ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src='js/echarts.min.js'></script>
        <script src='js/china.js'></script>
        <style>
            #china_chart { 
                width: 1000px;
                height: 800px;
                border: 1px solid #999;
            }
        </style>
    </head>
    
    <body>
    
        <div id="china_chart"></div>
    
        <script>
            var china_chart = echarts.init(document.getElementById('china_chart'));
            //数据纯属虚构 [{城市:数据,...}]
            var data = [{ 
                name: '江苏',
                value: 1
            }, { 
                name: '北京',
                value: 34
            }, { 
                name: '上海',
                value: 68
            }, { 
                name: '重庆',
                value: 23
            }, { 
                name: '河北',
                value: 34
            }, { 
                name: '河南',
                value: 3.2
            }, { 
                name: '云南',
                value: 1.6
            }, { 
                name: '辽宁',
                value: 4.3
            }, { 
                name: '黑龙江',
                value: 4.1
            }, { 
                name: '湖南',
                value: 2.4
            }, { 
                name: '安徽',
                value: 33
            }, { 
                name: '山东',
                value: 54
            }, { 
                name: '新疆',
                value: 1
            }, { 
                name: '浙江',
                value: 44
            }, { 
                name: '江西',
                value: 22
            }, { 
                name: '湖北',
                value: 2.1
            }, { 
                name: '广西',
                value: 3.0
            }, { 
                name: '甘肃',
                value: 1.2
            }, { 
                name: '山西',
                value: 3.2
            }, { 
                name: '内蒙古',
                value: 3.5
            }, { 
                name: '陕西',
                value: 2.5
            }, { 
                name: '吉林',
                value: 4.5
            }, { 
                name: '福建',
                value: 2.8
            }, { 
                name: '贵州',
                value: 1.8
            }, { 
                name: '广东',
                value: 3.7
            }, { 
                name: '青海',
                value: 0.6
            }, { 
                name: '西藏',
                value: 0.4
            }, { 
                name: '四川',
                value: 3.3
            }, { 
                name: '宁夏',
                value: 0.8
            }, { 
                name: '海南',
                value: 1.9
            }, { 
                name: '台湾',
                value: 0.1
            }, { 
                name: '香港',
                value: 0.1
            }, { 
                name: '澳门',
                value: 0.1
            }];
    
            var option = { 
                title: { 
                    show: true,
                    text: '排名情况',
                },
                tooltip: {  //悬浮弹框
                    show: true,
                    // formatter: function(params) {//data series里面数据 =[{name:'',value:''},{}] 
                    // return params.name + '：' + params.value + '人';
                    // },
                    formatter: '{a}-{b}:{c}人',
                },
                visualMap: [{  //visualMap 是视觉映射组件，用于进行『视觉编码 visualMap：图注样式定制，其中包括color范围，文字提示
                    // type:'continuous',//连续型视觉映射组件 type: 'piecewise',//类型为连续型
                    type: 'piecewise', //分段型视觉映射组件
                    // orient: 'horizontal',//如何放置 visualMap 组件，水平（'horizontal'）或者竖直（'vertical'）。
                    // itemWidth: 40,
                    // itemHeight: 20,
                    // text: ['高', '低'],
                    // min: 1,//最小值区域 小于1 显示的green
                    // max: 60,//大于4显示 red 剩余是中间区域blue 左右叠色
                    // inRange: { 
                    // color: ['green','red','yellow']
                    // },
                    // bottom: 30,
                    // left: 'left',
                }],
                geo: {  //地理坐标系组件 geo:定义地图为china 常用zoom
                    map: 'china', //地图类型。ECharts 3 中因为地图精度的提高，不再内置地图数据增大代码体积 map/js/china.js
                    // zoom:1,//视角缩放比例 
                    label: { 
                        show: true
                    },
                    emphasis: {  //高亮
                        label: {  //地图的标签名字
                            show: true
                        },
                        itemStyle: {  //区域样式 hover样式
                            areaColor: 'pink'
                        }
                    }
                },
                series: [{ 
                    name: '地图',
                    type: 'map', //地图
                    geoIndex: 0, //映射visualMap 颜色配置
                    data: data
                }]
            };
    
            china_chart.setOption(option);
        </script>
    </body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70]: /images/20221005/078fb55a51124a808b684e6b4b5e3e32.png
[Link 1]: https://pan.baidu.com/s/1WdAfJbVaC-Dt3XQwpz18vw