echarts 地图数据展示

野性酷女 2022-03-26 02:22 366阅读 0赞

<div class='col' id="map-wrap" style=' height: 280px;'></div>

<script type="text/javascript" src="__LIB__/jquery/1.9.1/jquery.min.js"></script>
    <script type='text/javascript' src='__LIB__/echarts/4.0.4/echarts.min.js'></script>
    <script type='text/javascript' src='__LIB__/echarts/4.0.4/china.js'></script>
    <script>
        
    
    function randomData() {  
         return Math.round(Math.random()*500);  
    } 
    var getRandomColor = function() {
        
        return '#' +
            (function(color) {
                return (color += '0123456789abcdef' [Math.floor(Math.random() * 16)]) && (color.length == 6) ? color : arguments.callee(color);
            })('');
    }
    var mydata = [  
                    {name: '北京',value: '100' },
                    {name: '上海',value: randomData() ,itemStyle: {areaColor: getRandomColor()}},
                    {name: '云南',value: randomData() ,itemStyle: {areaColor: getRandomColor()}},
                    {name: '安徽',value: randomData() ,itemStyle: {areaColor: getRandomColor()}},
                    {name: '浙江',value: randomData() ,itemStyle: {areaColor: getRandomColor()}},
                    {name: '湖北',value: randomData() ,itemStyle: {areaColor: getRandomColor()}},
                    {name: '四川',value:'2500' ,itemStyle: {areaColor: '#669046'}} 
                ];
    var mapChart = echarts.init(document.getElementById('map-wrap'));
    var option = {
        tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        if(!isNaN(params.value)){
                            return params.name + ' : ' + params.value+"㎡";
                        }
                    }
                    },
        series: [{  
                        name: '数据',  
                        type: 'map',  
                        mapType: 'china',   
                        roam: false,
                        zoom: 1.3,
                        label: {  
                            normal: {  
                                show: false  //省份名称  
                            },  
                            emphasis: {  
                                show: true  
                            }  
                        },  
                        data:mydata  //数据
                    }]  
    }
    
    
    mapChart.setOption(option);
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，366人围观）

还没有评论，来说两句吧...

相关阅读

相关 8.2echarts展示数据

Echarts快速使用 ![751d83ee184291fd4bb1690015737adb.png][] <!DOCTYPE html> <html st

分手后的思念是犯贱/ 2023年09月27日 13:51/ 0 赞/ 100 阅读

相关 8.2echarts展示数据

Echarts快速使用 ![cedf3b8f2ea0cc57cc7f58c3b355e715.png][] <!DOCTYPE html> <html st

墨蓝/ 2023年09月27日 13:44/ 0 赞/ 118 阅读

相关 echarts地图海南省地图问题

需求： > 在echarts地图开发中，有时候需要点击某个省份的时候，地图变成当前省份的下级地图。问题： > 在海南岛点击下钻时，由于海南岛的三沙市是由很多岛屿组成(南

雨点打透心脏的1/2处/ 2023年01月03日 01:22/ 0 赞/ 530 阅读

相关 Echarts 地图 json数据来源（地图选择器）

[http://datav.aliyun.com/tools/atlas/\&lat=22.628908559313757&lng=114.18972305307356&zoo

曾经终败给现在/ 2022年12月29日 14:29/ 0 赞/ 226 阅读

相关 Echarts地图

echats地图使用 <template> <div id='mapId' :style="{width:'100%',height:'100%'

淡淡的烟草味﹌/ 2022年09月05日 12:54/ 0 赞/ 297 阅读

相关 echarts3 + 百度地图API展示自定义地图

　之前一篇echarts+百度地图API实现自定义底图后，这次测试提出了bug：地图上的点可点击，弹出地点信息。于是开始研究如何去掉底图可点的功能。上网搜索无果后，还是自己研究

电玩女神/ 2022年06月10日 10:10/ 0 赞/ 521 阅读

相关 echarts地图

<!doctype html> <html> <head> <meta charset="utf-8"> <t

蔚落/ 2022年06月08日 07:20/ 0 赞/ 294 阅读

相关 Leaflet+Echarts实现GIS地图动态播放以及使用Echarts对点位数据详情进行展示

> 是的，你没看错…我还在发烧中，昨天在众多人的围殴当中我顽强的活了下来。请允许我最后作死一波，因为我知道漂亮的小姐姐个帅气的小哥哥一定都不会和我一般见识的… 效果图大致长

川长思鸟来/ 2022年05月18日 03:36/ 0 赞/ 343 阅读

相关 Echarts饼图展示动态数据

Echarts饼图展示动态数据注：本例是在SSM框架基础上实现的，通过其他框架或ｓｅｒｖｌｅｔ也同样可以实现;（不要纠结于此） echarts.jsp文件 <%

﹏ヽ暗。殇╰゛Y/ 2022年05月11日 11:14/ 0 赞/ 365 阅读

相关 echarts 地图数据展示

<div class='col' id="map-wrap" style=' height: 280px;'></div> <script type="

野性酷女/ 2022年03月26日 02:22/ 0 赞/ 367 阅读