echarts之地图和散点图结合使用

地图和散点图结合使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>快速上手</title>
  <!--  1。引入echart.js文件-->
  <script src="lib/echarts.min.js"></script>
  <script src="lib/jquery.min.js"></script>
</head>
<body>

<!--2。准备一个呈现图表的盒子-->
<div style="width: 600px;height: 400px"></div>

<script>
    //3。初始化echarts实力对象
    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 mCharts = echarts.init(document.querySelector('div'));
    $.get('map/china.json', function (ret) {
        echarts.registerMap('chinaMap', ret);

        //4。准备配置项
        var option = {
            geo: {
                type: 'map',
                map: 'chinaMap', //chinaMap需要与registerMao中的变量名称保持一致
                raom: true,
                label: {
                    show: true
                },
            },
            series: [
                {
                    data: airData,
                    geoIndex: 0,
                    type: 'map'
                },
                {
                    data:scatterData,
                    type:'effectScatter',
                    coordinateSystem:'geo', //指明散点使用geo系统
                    rippleEffect:{
                        scale:10
                    }
                }
            ],
            visualMap: {
                min: 0,
                max: 300,
                inRange: {
                    color: ['white', 'red']
                },
                calculable:true

            }
        }

        //5。将配置项设置给echarts实例对象
        mCharts.setOption(option);
    })

</script>
</body>
</html>

posted @ 2022-08-06 01:39  King-DA  阅读(122)  评论(0)    收藏  举报