echarts中地图和基本统计图的简单使用

最新推荐文章于 2024-03-11 13:15:00 发布
最新推荐文章于 2024-03-11 13:15:00 发布
阅读量1.2k 收藏 8
点赞数 1
分类专栏： css Web前端 文章标签： javascript js echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42038623/article/details/105851186
版权

目录

中国地图

1. 效果如下

在这里插入图片描述

2. 需要引入的文件

 <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

3. 样例代码如下

<!DOCTYPE html>
<html lang="en" style="height:100%;">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
    <style>
        * {
            margin: 0;
        }
    </style>
</head>

<body style="height:100%;width:100%;">
    <div id="main" style="width:100%;height:100%;"></div>
    <script>
        function randomValue() {
            return Math.round(Math.random() * 2000);
        }
        option = {
            backgroundColor: 'block',
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    //定义一个res变量来保存最终返回的字符结果,并且先把地区名称放到里面
                    var res = params.name + '<br />';
                    //定义一个变量来保存series数据系列
                    var myseries = option.series;
                    //循环遍历series数据系列
                    for (var i = 0; i < myseries.length; i++) {
                        //在内部继续循环series[i],从data中判断：当地区名称等于params.name的时候就将当前数据和名称添加到res中供显示
                        for (var k = 0; k < myseries[i].data.length; k++) {
                            //console.log(myseries[i].data[k].name);
                            //如果data数据中的name和地区名称一样
                            if (myseries[i].data[k].name == params.name) {
                                //将series数据系列每一项中的name和数据系列中当前地区的数据添加到res中
                                res += myseries[i].name + ':' + myseries[i].data[k]
                                    .value + '<br />';
                            }
                        }
                    }
                    return res;
                }
            },
            visualMap: {
                min: 0,
                max: 2000,
                text: ['High', 'Low'],
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['#e0ffff', 'red']
                }
            },
            geo: {
                map: 'china',
                roam: true,
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: 'rgba(0,0,0,0.4)'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(0, 0, 0, 0.2)'
                    },
                    emphasis: {
                        areaColor: null,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },

            series: [{
                    name: '浏览量',
                    type: 'map',
                    roam: false,
                    coordinateSystem: 'geo',
                    geoIndex: 0,
                    // tooltip: {show: false},
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#F06C00'
                        }
                    },
                    data: [{
                            name: '北京',
                            value: randomValue()
                        },
                        {
                            name: '天津',
                            value: randomValue()
                        },
                        {
                            name: '上海',
                            value: randomValue()
                        },
                        {
                            name: '重庆',
                            value: randomValue()
                        },
                        {
                            name: '河北',
                            value: randomValue()
                        },
                        {
                            name: '河南',
                            value: randomValue()
                        },
                        {
                            name: '云南',
                            value: randomValue()
                        },
                        {
                            name: '辽宁',
                            value: randomValue()
                        },
                        {
                            name: '黑龙江',
                            value: randomValue()
                        },
                        {
                            name: '湖南',
                            value: randomValue()
                        },
                        {
                            name: '安徽',
                            value: randomValue()
                        },
                        {
                            name: '山东',
                            value: randomValue()
                        },
                        {
                            name: '新疆',
                            value: randomValue()
                        },
                        {
                            name: '江苏',
                            value: randomValue()
                        },
                        {
                            name: '浙江',
                            value: randomValue()
                        },
                        {
                            name: '江西',
                            value: randomValue()
                        },
                        {
                            name: '湖北',
                            value: randomValue()
                        },
                        {
                            name: '广西',
                            value: randomValue()
                        },
                        {
                            name: '甘肃',
                            value: randomValue()
                        },
                        {
                            name: '山西',
                            value: randomValue()
                        },
                        {
                            name: '内蒙古',
                            value: randomValue()
                        },
                        {
                            name: '陕西',
                            value: randomValue()
                        },
                        {
                            name: '吉林',
                            value: randomValue()
                        },
                        {
                            name: '福建',
                            value: randomValue()
                        },
                        {
                            name: '贵州',
                            value: randomValue()
                        },
                        {
                            name: '广东',
                            value: randomValue()
                        },
                        {
                            name: '青海',
                            value: randomValue()
                        },
                        {
                            name: '西藏',
                            value: randomValue()
                        },
                        {
                            name: '四川',
                            value: randomValue()
                        },
                        {
                            name: '宁夏',
                            value: randomValue()
                        },
                        {
                            name: '海南',
                            value: randomValue()
                        },
                        {
                            name: '台湾',
                            value: randomValue()
                        },
                        {
                            name: '香港',
                            value: randomValue()
                        },
                        {
                            name: '澳门',
                            value: randomValue()
                        }
                    ]
                },
                {
                    name: '访问量',
                    type: 'map',
                    roam: false,
                    coordinateSystem: 'geo',
                    // geoIndex: 0,
                    // tooltip: {show: false},
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#F06C00'
                        }
                    },
                    data: [{
                            name: '北京',
                            value: randomValue()
                        },
                        {
                            name: '天津',
                            value: randomValue()
                        },
                        {
                            name: '上海',
                            value: randomValue()
                        },
                        {
                            name: '重庆',
                            value: randomValue()
                        },
                        {
                            name: '河北',
                            value: randomValue()
                        },
                        {
                            name: '河南',
                            value: randomValue()
                        },
                        {
                            name: '云南',
                            value: randomValue()
                        },
                        {
                            name: '辽宁',
                            value: randomValue()
                        },
                        {
                            name: '黑龙江',
                            value: randomValue()
                        },
                        {
                            name: '湖南',
                            value: randomValue()
                        },
                        {
                            name: '安徽',
                            value: randomValue()
                        },
                        {
                            name: '山东',
                            value: randomValue()
                        },
                        {
                            name: '新疆',
                            value: randomValue()
                        },
                        {
                            name: '江苏',
                            value: randomValue()
                        },
                        {
                            name: '浙江',
                            value: randomValue()
                        },
                        {
                            name: '江西',
                            value: randomValue()
                        },
                        {
                            name: '湖北',
                            value: randomValue()
                        },
                        {
                            name: '广西',
                            value: randomValue()
                        },
                        {
                            name: '甘肃',
                            value: randomValue()
                        },
                        {
                            name: '山西',
                            value: randomValue()
                        },
                        {
                            name: '内蒙古',
                            value: randomValue()
                        },
                        {
                            name: '陕西',
                            value: randomValue()
                        },
                        {
                            name: '吉林',
                            value: randomValue()
                        },
                        {
                            name: '福建',
                            value: randomValue()
                        },
                        {
                            name: '贵州',
                            value: randomValue()
                        },
                        {
                            name: '广东',
                            value: randomValue()
                        },
                        {
                            name: '青海',
                            value: randomValue()
                        },
                        {
                            name: '西藏',
                            value: randomValue()
                        },
                        {
                            name: '四川',
                            value: randomValue()
                        },
                        {
                            name: '宁夏',
                            value: randomValue()
                        },
                        {
                            name: '海南',
                            value: randomValue()
                        },
                        {
                            name: '台湾',
                            value: randomValue()
                        },
                        {
                            name: '香港',
                            value: randomValue()
                        },
                        {
                            name: '澳门',
                            value: randomValue()
                        }
                    ]
                }
            ]
        };

        var chart = echarts.init(document.getElementById("main"))
        chart.setOption(option);
    </script>
</body>

</html>

省份地图

1. 效果如下

在这里插入图片描述

2. 需要引入的文件

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>

3. 需要请求获取省份的数据（json文件）

各个省份地图json下载地址：
https://github.com/apache/incubator-echarts/tree/master/map
或者点击这里
链接：https://pan.baidu.com/s/11d-vKVEip7InOOlu8si8RA
提取码：b397

4. 样例代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>

<body style="background-color: black;">
    <div id="main" style="width: 605px;height: 550px;margin: 80px auto;"></div>
    <script>
        $(function () {
            var myChart = echarts.init(document.getElementById('main'));
            myChart.showLoading();
            $.get('./省份数据/json(省份)/jiangxi.json', function (geoJson) {
                myChart.hideLoading();
                echarts.registerMap('云南', geoJson);

                myChart.setOption(option = {
                    backgroundColor: 'black',
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            //定义一个res变量来保存最终返回的字符结果,并且先把地区名称放到里面
                            var res = params.name + '<br />';
                            //定义一个变量来保存series数据系列
                            var myseries = option.series;
                            //循环遍历series数据系列
                            for (var i = 0; i < myseries.length; i++) {
                                //在内部继续循环series[i],从data中判断：当地区名称等于params.name的时候就将当前数据和名称添加到res中供显示
                                for (var k = 0; k < myseries[i].data.length; k++) {
                                    //console.log(myseries[i].data[k].name);
                                    //如果data数据中的name和地区名称一样
                                    if (myseries[i].data[k].name == params.name) {
                                        //将series数据系列每一项中的name和数据系列中当前地区的数据添加到res中
                                        res += myseries[i].name + ':' + myseries[i].data[k]
                                            .value + '<br />';
                                    }
                                }
                            }
                            return res;
                        }
                    },
                    visualMap: {
                        min: 0,
                        max: 2000,
                        text: ['High', 'Low'],
                        realtime: false,
                        calculable: true,
                        inRange: {
                            color: ['#e0ffff', 'red']
                        }
                    },
                    geo: {
                        map: '云南',
                        roam: true,
                        label: {
                            normal: {
                                show: true,
                                color: 'rgba(0,0,0,0.4)'
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(0, 0, 0, 0.7)'
                            },
                            emphasis: {
                                areaColor: null,
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                shadowBlur: 20,
                                borderWidth: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        "left": 50,
                        "right": 0,
                        "top": 0,
                        "bottom": 0
                    },

                    series: [{
                            name: '治愈病例',
                            type: 'map',
                            roam: false,
                            coordinateSystem: 'geo',
                            // geoIndex: 0,
                            label: {
                                normal: {
                                    formatter: '{b}',
                                    position: 'right',
                                    show: false
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#F06C00'
                                }
                            },
                            data: [{
                                    name: '赣州市',
                                    value: 222
                                },
                                {
                                    name: '新余市',
                                    value: 333
                                },
                                {
                                    name: '抚州市',
                                    value: 432
                                },
                                {
                                    name: '吉安市',
                                    value: 1234
                                },
                                {
                                    name: '上饶市',
                                    value: 324
                                }
                            ]
                        },
                        {
                            name: '确诊病例',
                            type: 'map',
                            roam: false,
                            coordinateSystem: 'geo',
                            geoIndex: 0,
                            // tooltip: {show: false},
                            label: {
                                normal: {
                                    formatter: '{b}',
                                    position: 'right',
                                    show: false
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#F06C00'
                                }
                            },
                            data: [{
                                    name: '赣州市',
                                    value: 888
                                },
                                {
                                    name: '新余市',
                                    value: 677
                                },
                                {
                                    name: '抚州市',
                                    value: 1322
                                },
                                {
                                    name: '吉安市',
                                    value: 1234
                                },
                                {
                                    name: '上饶市',
                                    value: 4321
                                }
                            ]
                        }
                    ]
                });
            });
        })
    </script>
</body>

</html>

注意：请求json文件必须使用服务器运行
在这里插入图片描述

条形、折线统计图

1. 效果如下

在这里插入图片描述

2. 需要引入的文件

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>

3. 样例代码如下

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>第三部分</title>
</head>

<body>
    <div id="main" style="height:600px;width: 1100px;margin-left: 30px;"></div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
    <script type="text/javascript">
        $(function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = echarts.init(document.getElementById('main'));

            option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
                },
                toolbox: {
                    show: true,
                    // color: ['#1e90ff', '#22bb22', '#4b0082', '#d2691e'],
                    feature: {
                        mark: {
                            show: true
                        },
                        dataView: {
                            show: true,
                            readOnly: false
                        },
                        magicType: {
                            show: true,
                            type: ['line', 'bar', 'stack', 'tiled']
                        },
                        restore: {
                            show: true
                        },
                        saveAsImage: {
                            show: true
                        }
                    }
                },
                calculable: true,
                dataZoom: {
                    show: true,
                    realtime: true,

                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [{
                        name: '邮件营销',
                        type: 'line',
                        // stack: '总量',
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: 'default'
                                }
                            }
                        },
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '联盟广告',
                        type: 'line',
                        // stack: '总量',
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: 'default'
                                }
                            }
                        },
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: '视频广告',
                        type: 'line',
                        // stack: '总量',
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: 'default'
                                }
                            }
                        },
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: '直接访问',
                        type: 'line',
                        // stack: '总量',
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: 'default'
                                }
                            }
                        },
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name: '搜索引擎',
                        type: 'line',
                        stack: '总量',
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: 'default'
                                }
                            }
                        },
                        data: [820, 932, 901, 934, 1290, 1330, 1320]
                    }
                ]
            };



            // 为echarts对象加载数据 
            myChart.setOption(option);
        });
    </script>
</body>

饼图

1. 效果如下

在这里插入图片描述

2. 需要引入的文件

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>

3. 样例代码如下

<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>

    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            title: {
                text: '2018年TOP 25电影来源地区的分布情况',
                subtext: '数据真实',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                right: "right",
                data: ['中国大陆', '中国香港', '中国台湾', '美国', '印度'],
                textStyle: {
                    fontSize: '14'
                }
            },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: '70%',

                data: [{
                        value: 14,
                        name: '中国大陆'
                    },
                    {
                        value: 5,
                        name: '中国香港'
                    },
                    {
                        value: 2,
                        name: '中国台湾'
                    },
                    {
                        value: 11,
                        name: '美国'
                    },
                    {
                        value: 1,
                        name: '印度'
                    }
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    normal: {
                        textStyle: {
                            fontSize: '20'
                        }
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                }
            }]
        };;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    </script>
</body>

</html>

总结

  1. 使用echarts一般可以自己网上找案例，或者去官网查看文档
  2. 如果使用的echarts是动态获取到，用到ajax不能使用异步的方式，不然渲染的时候拿不到数据，应该选择使用同步的方式（自己搞了半天，特别注意）
 $.ajax({
                type: "get",
                url: "http://localhost:8080/area/chartData",
                data: "data",
                dataType: "json",
                async: false,//使用同步
                success: function (response) {
                    console.log(response);
                 
                }

            })
不愿意做鱼的小鲸鱼
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
基于echarts的中国地图省份数据统计显示
12-07
基于百度的echarts编写的中国地图数据统计显示demo，可以下载直接使用，用于技术交流分享
基于Echarts的地图统计图-中国地图统计图
weixin_42941628的博客
06-15 973
【代码】基于Echarts的地图统计图，鼠标悬浮高亮显示数据
echarts统计图表
weixin_49107940的博客
09-20 1240
ECharts是百度的一个项目，后来百度把Echart捐给apache，用于图表展示，提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
地理数据可视化：使用echarts实现地图可视化功能
最新发布
Shids_的博客
03-11 2813
地理数据可视化：使用echarts实现地图可视化功能
Echarts地图的基本使用方法
weixin_44121583的博客
08-02 1万+
简单介绍了Echarts如何引入地图，以及在地图上的展示
大屏-echarts地图的注册使用
超级小恐龙~
03-03 9438
我安装的版本是echarts@4.9.0 内含中国、各省核心js和JSON文件 可直接引用，但没有各市区地图文件，若更新到echarts5以上各省市地图文件也不自带了，需到三方库中自行下载，连接如下： js文件获取https://github.com/echarts-maps JSON文件获取DataV.GeoAtlas地理小工具系列 script标签中 echarts注册： import echarts from 'echarts'; import 'echarts/map/j...
使用ECharts绘制中国地图
热门推荐
object not found的博客
09-06 1万+
想要在echarts中展示地图，我们需要有对应的地图数据，可以去我们需要的数据就是一个对象，我们需要使用他们提供的接口或者把这个对象下载到本地。
Echarts地图registerMap使用的GeoJson数据获取
jieyucx的博客
11-28 1699
也可以直接在地图上点击对应区域。可以选择省，市，区。
Echarts.js常见参数设置
zhongjunhaoz的博客
11-19 3238
常见API echarts echarts.init(dom,theme)。 创建一个ECharts实例，返回echartsinstance，不能在单个容器上初始化多个ECharts实例。 dom是实例容器，一般是一个具有宽高的div元素。必须要设置宽高。 theme应用的主题。可以是一个主题的配置对象，也可以使用已经通过 使用已经通过 echarts.registerTheme 注册的主题名称。注册的主题名称。 echarts.connect(group:string|Array) 多
echarts 中国各省市 echarts地图数据，含世界地图
09-17
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的...
基于 eCharts 的百度地图学生籍贯统计.zip
01-21
基于 eCharts 的百度地图学生籍贯统计.zip
eCharts格网统计图
10-27
eCharts格网统计图，Binning on Map，格网统计图是一种将统计数据汇总到格网当中显示的统计图表，它的使用范围相当广泛。可以使用一点的监测值代表一个网格区域的值。可以不用使用插值而得到整个面的统计值。
echarts地图散点悬浮显示多条数据
10-29
echarts地图散点悬浮显示多条数据echarts地图散点悬浮显示多条数据echarts地图散点悬浮显示多条数据
【项目实战开发技巧】Echarts 中国地图的第三方使用方法
New前端工厂的博客
06-16 2486
第一次用Echarts 被这个地图迷糊了好久，光有代码，就是不显示，为了给第一次使用的小白一个简单入门， 好了，废话不多说，直接上代码 首先第一步，你想用Echarts，那就必须安装 npm install --save echarts 安装完成之后，你就可以在main.js中全局引入这个echarts了 import echarts from 'echarts' Vue.prototype.$echarts = ec...
echartsMap使用
Scd666666的博客
05-29 992
如果大家想要在地图上加对应的图标什么的就需要再对应的 series里面添加对应的数据进行操作，需要设置对应的地图样式也可在上面数据里面设置对应的参数即可，这点在echarts里面可以找到对应的设置。不同的图标需要不同数组进行操作 option.series[0]的data里面，如果想清空对应的图标清空对应的数组里面的数据即可，好处之一就是数据是自己的可以私有化部署，缺点就是地图数据可能每过一段时间需要进行更新。
echarts添加地图散点
SongZhengxing_的博客
12-03 4577
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>地图下钻</title> <style> body { m.
Echarts——中国地图绘制
heal_l的博客
01-13 1万+
首先准备中国城市分布Geo数据 china.jsonhttps://download.csdn.net/download/heal_l/75671467https://download.csdn.net/download/heal_l/75671467
使用 Echarts 插件完成中国旅游地图
weixin_62897746的博客
12-06 2105
设置一个标签，标签设置宽高，否则不显示 引入中国地图的数据 初始化echarts实例，并挂载到dom中 注册中国地图，必须在geo或map中 this.$echarts.registerMap("china", geoJson); 编写配置项，把配置项添加到实例中（简写） 配置项： 背景色 geo：图层（zoom），长宽比例，样式（itemStyle)：地图区域的颜色，阴影，阴影偏移量，特点区域的样式(region)：南海诸岛 series：......
地图图表生成工具链接
12程序猿的博客
07-07 249
ECharts： http://echarts.baidu.com/examples/index.html Jquery+echarts.js全国门店分布地图统计图表代码： https://www.sucaihuo.com/js/4253.html
基于echarts的前端地图统计插件
08-21
基于Echarts的前端地图统计插件是一种能够使用Echarts地图组件进行数据可视化、统计和分析的插件。该插件结合了Echarts强大的数据可视化能力和丰富的地图功能，使用户能够在前端轻松创建各种地理数据的统计图表。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不愿意做鱼的小鲸鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值