散点图

<!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-3.5.1.min.js"></script>
    <div id ="m" style="width: 1000px;height: 800px ;"></div>
</head>
<body>
    <script>
        myChart = echarts.init(document.getElementById("m"))
        var mapData = []; //存字典{name:"地名",center:[经纬度]}
        $.ajax({
            url:"lib/中华人民共和国.json",
            type:"get",
            dataType:"json",
            async:false,
            success:function(args){
                mapdata = args
                // 使用echarts.registerMap(地图名字，地图数据)注册地图
                echarts.registerMap("china",args)
            //获取地理位置的省会位置信息
            for (var item of args.features){
                mapData.push(
                    {name:item.properties.name,
                    center:item.properties.center
                    }
                )
            }

            }
        })
        //读取销售数据
        var salesData;
        $.ajax({
            url:"lib/各省销售数据新.json",
            type:"get",
            dataType:"json",
            async:false,
            success:function(args){
                salesData = args
            }
        })
        console.log(salesData)
        var scatterData = [];
        function convertData(){
            for (var m of mapData)
                for (var s of salesData){
                    if (m.name == s.name){
                        m.center.push(s.value)
                        scatterData.push(m.center)
                        break;
                    }
                }
                return scatterData;
        }
        opt={
            geo:{
                map:"china",
               
            },
            tooltip:{
                trigger:'item',
                formatter:function(args){
                   
                }
            },
            visualMap:{
                    min:-66561,
                    max:12667,
                    left:'left',
                    top:'50',
                    text:['高','低'],
                    color:['#24693d','#449141','#73ba67','#ced7c3','#f8816b','#AE123A']
                },
            series:{
                type:"scatter",
                coordinateSystem:"geo",
                data:convertData(),
                symbolSize:function(args){
                    return args[2]/20000
                },
                itemStyle:{
                    color:'#F62157'
                }
           },
        }
        myChart.setOption(opt)
    </script>
</body>
</html>

posted on 2023-05-10 12:02  Gzhichen  阅读(30)  评论(0)    收藏  举报

导航