地图订单量

最新推荐文章于 2022-05-17 21:36:29 发布

a267252a

最新推荐文章于 2022-05-17 21:36:29 发布

阅读量68

点赞数 1

本文链接：https://blog.csdn.net/a267252a/article/details/118121226

版权

该博客展示了一个使用ECharts库实现的中国地图数据可视化应用，用于显示各省份的订单量。通过随机生成的数据，地图上的每个区域用不同的颜色和数值表示订单量的多少，提供了一种直观了解全国订单分布的方式。用户还可以交互查看数据，包括缩放、恢复、保存为图片等功能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./assets/js/jquery-1.9.1.min.js"></script>
    <script src="./assets/dist/echarts.js"></script>
   <style>
       .k{
           color: #A3E00B;
       }
   </style>

   
</head>
<body>
    <div id="map" style="width: 100%; overflow: auto; overflow: hidden;"></div>
    <script>
        $("#map").height($(window).height()-20);
        $(window).resize(function(){
            $("#map").height($(window).height()-20);
        });
        require.config({
            paths:{echarts:"./assets/dist"}
        });
        require(
            ['echarts',
            'echarts/theme/macarons',
            'echarts/chart/map',
            ],
            function(ec,theme){
                var myChart = ec.init(document.getElementById('map'),theme);
                option = 
                {
                    title:{text:'订单量',subtext:'',x:'center'},
                    tooltip:{trigger:'item'},
                    legend:{orient:'vertical',x:'left',data:['订单量']},
                    dataRange:
                    {
                    x:'left',y:'bottom',
                    splitList:
                    [
                        {start:500},
                        {start:900,end:1500},
                        {start:310,end:1000},
                        {start:200,end:300},
                        {start:10,end:200,label:'10到200'},
                        {start:5,end:5,label:'5',color:'black'},
                        {end:10}
                    ],
                    color:['#E0022B','#E09107','#A3E00B']
                    },
                  show:
                  {
                    show:true, orient:'vertical',x:'right',y:'center',feature:{
                         mark:
                         {
                             show:true
                         },
                         dataView:{dhoe:true,readOnly:false},
                         restore:{show:true},
                         savaAsImage:{show:true}  
                    }
                  },
                  roamController:{
                      show:true,x:'right',
                      mapTypeControl:{'china':true}
                  },
                  series:[{name:'订单量',type:'map',mapType:'china',roam:false,
                       itemStyle:{
                           normal:{
                               label:{show:true,
                               textStyle:{color:"rgb(249,249,249)"}
                              }
                           },
                           emphasis:{
                               label:{show:true}
                           }
                       },
                       data:[
                           {name:'北京',value:Math.round(Math.random()*2000)},
                           {name:'天津',value:Math.round(Math.random()*2000)},
                           {name:'上海',value:Math.round(Math.random()*2000)},
                           {name:'重庆',value:Math.round(Math.random()*2000)},
                           {name:'河北',value:0},
                           {name:'河南',value:Math.round(Math.random()*2000)},
                           {name:'云南',value:5},
                           {name:'辽宁',value:305},
                           {name:'黑龙江',value:Math.round(Math.random()*2000)},
                           {name:'湖南',value:200},
                           {name:'安徽',value:Math.round(Math.random()*2000)},
                           {name:'山东',value:Math.round(Math.random()*2000)},
                           {name:'新疆',value:Math.round(Math.random()*2000)},
                           {name:'江苏',value:Math.round(Math.random()*2000)},
                           {name:'浙江',value:Math.round(Math.random()*2000)},
                           {name:'江西',value:Math.round(Math.random()*2000)},
                           {name:'湖北',value:Math.round(Math.random()*2000)},
                           {name:'广西',value:Math.round(Math.random()*2000)},
                           {name:'甘肃',value:Math.round(Math.random()*2000)},
                           {name:'山西',value:Math.round(Math.random()*2000)},
                           {name:'内蒙古',value:Math.round(Math.random()*2000)},
                           {name:'陕西',value:Math.round(Math.random()*2000)},
                           {name:'吉林',value:Math.round(Math.random()*2000)},
                           {name:'福建',value:Math.round(Math.random()*2000)},
                           {name:'贵州',value:Math.round(Math.random()*2000)},
                           {name:'广东',value:Math.round(Math.random()*2000)},
                           {name:'青海',value:Math.round(Math.random()*2000)},
                           {name:'西藏',value:Math.round(Math.random()*2000)},
                           {name:'四川',value:Math.round(Math.random()*2000)},
                           {name:'宁夏',value:Math.round(Math.random()*2000)},
                           {name:'海南',value:Math.round(Math.random()*2000)},
                           {name:'台湾',value:Math.round(Math.random()*2000)},
                           {name:'香港',value:Math.round(Math.random()*2000)},
                           {name:'澳门',value:Math.round(Math.random()*2000)},
                       ]
                  }]
                };
                myChart.setOption(option);
            }
        )
    </script>
</body>
</html>

a267252a

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
地图订单量

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./assets/js/jquery-1.9..
复制链接

扫一扫