Echarts3实例 map地图值渲染

最新推荐文章于 2024-07-31 11:13:21 发布

idomyway

最新推荐文章于 2024-07-31 11:13:21 发布

阅读量5.1k

点赞数 1

分类专栏： Echarts 文章标签： echarts map 渲染 visualMap

本文链接：https://blog.csdn.net/idomyway/article/details/85073426

版权

Echarts 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

前言

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

实现效果

在这里插入图片描述

实现代码

<!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>

idomyway

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Echarts3实例 map地图值渲染

前言&nbsp;&nbsp;&nbsp;&nbsp;Echarts Map中的地图需要按照区域所绑定的值进行渲染，以展示不同区域的属性值。实现效果实现代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;tit
复制链接

扫一扫

专栏目录