echarts 地图数据展示

野性酷女 2022-03-26 02:22 399阅读 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 条评论，399人围观）

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

相关阅读

相关使用Echarts实现地图展示

首先来看下效果 ![在这里插入图片描述][9c6a3385b1ae476aa23e9113b81283b9.png] 实现其实也简单，创建一个组件 <temp

╰半夏微凉°/ 2023年10月04日 20:24/ 0 赞/ 80 阅读

相关 8.2echarts展示数据

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

偏执的太偏执、/ 2023年09月30日 18:37/ 0 赞/ 20 阅读

相关 8.2echarts展示数据

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

Bertha 。/ 2023年09月30日 18:24/ 0 赞/ 19 阅读

相关 8.2echarts展示数据

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

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

相关 8.2echarts展示数据

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

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

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

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

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

相关 Echarts地图

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

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

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

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

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

相关 echarts地图

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

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

相关 echarts 地图数据展示

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

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