Echarts-json显示地图，动态渲染，常见效果

最新推荐文章于 2024-03-27 09:49:07 发布

小羊在北方

最新推荐文章于 2024-03-27 09:49:07 发布

阅读量1.8k

点赞数

文章标签： echarts json javascript

本文链接：https://blog.csdn.net/weixin_43320429/article/details/127365710

版权

<!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>图表</title>
    <script src="lib/echarts.min.js"></script>
    <script src="lib/jquery.min.js"></script>
</head>

<body>

    <div style="width:600px;height:400px;border:1px solid red;"></div>
    <script>
        //1. ECharts最基本的代码结构
        //2. 准备中国地图的矢量数据
        //3. 使用Ajax获取矢量地图数据
        //4. 在Ajax的回调函数中注册地图矢量数据 echarts.registerMap('chinaMap', 矢量地图数据)
        //5. 配置geo的type为'map', map为'chinaMap' 

        // 空气质量数据，颜色渲染
        var airData = [
            { name: '北京', value: 39.92 },
            { name: '天津', value: 39.13 },
            { name: '上海', value: 31.22 },
            { name: '重庆', value: 66 },
            { name: '河北', value: 147 },
            { name: '河南', value: 113 },
            { name: '云南', value: 25.04 },
            { name: '辽宁', value: 50 },
            { name: '黑龙江', value: 114 },
            { name: '湖南', value: 175 },
            { name: '安徽', value: 117 },
            { name: '山东', value: 92 },
            { name: '新疆', value: 84 },
            { name: '江苏', value: 67 },
            { name: '浙江', value: 84 },
            { name: '江西', value: 96 },
            { name: '湖北', value: 273 },
            { name: '广西', value: 59 },
            { name: '甘肃', value: 99 },
            { name: '山西', value: 39 },
            { name: '内蒙古', value: 58 },
            { name: '陕西', value: 61 },
            { name: '吉林', value: 51 },
            { name: '福建', value: 29 },
            { name: '贵州', value: 71 },
            { name: '广东', value: 38 },
            { name: '青海', value: 57 },
            { name: '西藏', value: 24 },
            { name: '四川', value: 58 },
            { name: '宁夏', value: 52 },
            { name: '海南', value: 54 },
            { name: '台湾', value: 88 },
            { name: '香港', value: 66 },
            { name: '澳门', value: 77 },
            { name: '南海诸岛', value: 55 }
        ]

        // 散点数据
        var scatterData = [
            {
                value: [117.283042, 31.86119]
            }
        ]
        // 配置图表
        var MyCharts = echarts.init(document.querySelector("div"))

        $.get('json/map/china.json', function (ret) {
            console.log(ret);
            echarts.registerMap('chinaMap', ret)

            var options = {
                geo: {
                    type: 'map',
                    map: 'chinaMap',//chinaMap要与registerMap第一个属性一致
                    roam: true,//允许缩放和拖动效果
                    // label:{//省份名称一直显示
                    //     show:true
                    // },
                    // zoom:5,//设置初始化的缩放比例，原始为1
                    // center:[116,39],//设置地图中心点坐标，经纬度   
                },
                series: [
                    {
                        data: airData,
                        geoIndex: 0,//将空气质量的数据和第0个geo配置关联在一起
                        type: 'map'
                    },
                    //   散点图，series可以配置多个图表
                    {
                        data: scatterData,//配置散点的坐标数据
                        type:'effectScatter',//配置series下的新对象的type值为effectScatter
                        coordinateSystem:'geo',//指明散点使用的坐标系统，geo的坐标系统
                        rippleEffect:{
                            scale:10 //设置涟漪动画的缩放比例
                        }
                    }

                ],
                visualMap: {
                    min: 0,
                    max: 300,
                    inRange: {
                        color: ['white', 'red'],//颜色渐变
                    },
                    calculable: true//三角，可以筛选数据
                },


            }

            MyCharts.setOption(options)
        })


    </script>
</body>

</html>