Echarts3实例 map地图值渲染

Bertha 。 2021-09-17 09:24 507阅读 0赞

### 前言 ###

Echarts Map中的地图需要按照区域所绑定的值进行渲染，以展示不同区域的属性值。

### 实现效果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70]

### 实现代码 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            html,body{
                height: 100%;
            }
            *{
                margin: 0px;
                height: 0px;
            }
            #map{
                width: 800px;
                height: 600px;
                border: 1px solid red;
            }
        </style>
        <script src="js/echarts.min.js"></script>
        <script src="js/jquery-3.1.1.js"></script>
    </head>
    <body>
    <div id="map"></div>
    <script>
    
    
        var Value = [
            {name:"莱芜市",value:"100"},
            {name:"威海市",value:"50"},
            {name:"滨州市",value:"20"},
            {name:"临沂市",value:"90"},
            {name:"淄博市",value:"170"},
            {name:"日照市",value:"190"},
            {name:"德州市",value:"160"},
            {name:"烟台市",value:"140"},
            {name:"菏泽市",value:"130"},
            {name:"青岛市",value:"110"},
            {name:"东营市",value:"105"},
            {name:"潍坊市",value:"142"},
            {name:"济南市",value:"80"},
            {name:"聊城市",value:"184"},
            {name:"泰安市",value:"55"},
            {name:"枣庄市",value:"130"},
            {name:"济宁市",value:"40"}
        ];
        // JSON
        $.getJSON('./json/shandong.json', function (data) {
            echarts.registerMap('shandong', data);
            var chart = echarts.init(document.getElementById('map'));
            var option = {
                title: {
                    text: '值渲染',
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        return params.name + ' : ' + params.value;
                    },
                    extraCssText:"height:20px;"
                },
    
                visualMap: {
                    min: 0,
                    max: 200,
                    calculable: true,
                    inRange: {
                        color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                    },
                    text:['High','Low'],           // 文本，默认为数值文本
                },
    
                series: [
                    {
                        name: 'USA PopEstimates',
                        type: 'map',
                        roam: true,
                        map: 'shandong',
                        label: {
                            show:true,
                            normal: {
                                show: true,
                                color:"#000",
                            },
                            emphasis: {
                                show: true,
                                fontSize:16,
                                color:"#fff"
    
                            }
                        },
                        itemStyle:{
                            emphasis:{label:{show:true}}
                        },
                        // 文本位置修正
                        textFixed: {
                            Alaska: [20, -20]
                        },
                        data:Value
                    },
    
                ]
            };
    
            chart.setOption(option);
        });
    
    
    
    </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70]: /images/20210726/8e4299f507bc4822b8525431415bbff5.png