基于Echarts实现可视化数据大屏中国地图城市区块选择代码

最新推荐文章于 2024-03-29 04:52:23 发布

@码出未来-web网页设计

最新推荐文章于 2024-03-29 04:52:23 发布

阅读量680

点赞数 1

分类专栏：网站建设文章标签： echarts大数据 vue+echarts 大屏数据可视化 echart数据可视化 echarts地图

本文链接：https://blog.csdn.net/ruan365392777/article/details/127386146

版权

网站建设专栏收录该内容

914 篇文章 39 订阅

订阅专栏

前言

🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作，可以在此基础上重新开发。

本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

⚽精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】

❤ 【1000套毕设项目精品实战案例】

❤ 【 20套 VUE+Echarts 大数据可视化源码】

❤ 【150套 HTML+ Echarts大数据可视化源码】

一、Echart是什么

ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

二、ECharts入门教程

5 分钟上手ECharts

三、作品演示

在这里插入图片描述

四、代码实现

1.HTML


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <title>ECharts China Map</title>
    <style>
        #china-map {
            width: 1000px;
            height: 1000px;
            margin: auto;
        }

        #box {
            display: none;
            background-color: goldenrod;
            width: 180px;
            height: 30px;
        }

        #box-title {
            display: block;
        }
    </style>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/map/china.js"></script>
</head>

<body>
    <button id="back">返回全国</button>
    <div id="china-map"></div>

    <script>
        var myChart = echarts.init(document.getElementById('china-map'));
        var oBack = document.getElementById("back");

        var provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen'];

        var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门'];

        var seriesData = [{
            name: '北京',
            value: 100
        }, {
            name: '天津',
            value: 0
        }, {
            name: '上海',
            value: 60
        }, {
            name: '重庆',
            value: 0
        }, {
            name: '河北',
            value: 60
        }, {
            name: '河南',
            value: 60
        }, {
            name: '云南',
            value: 0
        }, {
            name: '辽宁',
            value: 0
        }, {
            name: '黑龙江',
            value: 0
        }, {
            name: '湖南',
            value: 60
        }, {
            name: '安徽',
            value: 0
        }, {
            name: '山东',
            value: 60
        }, {
            name: '新疆',
            value: 0
        }, {
            name: '江苏',
            value: 0
        }, {
            name: '浙江',
            value: 0
        }, {
            name: '江西',
            value: 0
        }, {
            name: '湖北',
            value: 60
        }, {
            name: '广西',
            value: 60
        }, {
            name: '甘肃',
            value: 0
        }, {
            name: '山西',
            value: 60
        }, {
            name: '内蒙古',
            value: 0
        }, {
            name: '陕西',
            value: 0
        }, {
            name: '吉林',
            value: 0
        }, {
            name: '福建',
            value: 0
        }, {
            name: '贵州',
            value: 0
        }, {
            name: '广东',
            value: 597
        }, {
            name: '青海',
            value: 0
        }, {
            name: '西藏',
            value: 0
        }, {
            name: '四川',
            value: 60
        }, {
            name: '宁夏',
            value: 0
        }, {
            name: '海南',
            value: 60
        }, {
            name: '台湾',
            value: 0
        }, {
            name: '香港',
            value: 0
        }, {
            name: '澳门',
            value: 0
        }];

        oBack.onclick = function() {
            initEcharts("china", "中国");
        };

        initEcharts("china", "中国");

        // 初始化echarts
        function initEcharts(pName, Chinese_) {
            var tmpSeriesData = pName === "china" ? seriesData : [];

            var option = {
                title: {
                    text: Chinese_ || pName,
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}<br/>{c} (p / km2)'
                },
                series: [{
                    name: Chinese_ || pName,
                    type: 'map',
                    mapType: pName,
                    roam: false, //是否开启鼠标缩放和平移漫游
                    data: tmpSeriesData,
                    top: "3%", //组件距离容器的距离
                    zoom: 1.1,
                    selectedMode: 'single',

                    label: {
                        normal: {
                            show: true, //显示省份标签
                            textStyle: {
                                color: "#fbfdfe"
                            } //省份标签字体颜色
                        },
                        emphasis: { //对应的鼠标悬浮效果
                            show: true,
                            textStyle: {
                                color: "#323232"
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: .5, //区域边框宽度
                            borderColor: '#0550c3', //区域边框颜色
                            areaColor: "#4ea397", //区域颜色

                        },

                        emphasis: {
                            borderWidth: .5,
                            borderColor: '#4b0082',
                            areaColor: "#ece39e",
                        }
                    },
                }]

            };

            myChart.setOption(option);

            myChart.off("click");

            if (pName === "china") { // 全国时，添加click 进入省级
                myChart.on('click', function(param) {
                    console.log(param.name);
                    // 遍历取到provincesText 中的下标  去拿到对应的省js
                    for (var i = 0; i < provincesText.length; i++) {
                        if (param.name === provincesText[i]) {
                            //显示对应省份的方法
                            showProvince(provinces[i], provincesText[i]);
                            break;
                        }
                    }
                    if (param.componentType === 'series') {
                        var provinceName = param.name;
                        $('#box').css('display', 'block');
                        $("#box-title").html(provinceName);

                    }
                });
            } else { // 省份，添加双击 回退到全国
                myChart.on("dblclick", function() {
                    initEcharts("china", "中国");
                });
            }
        }

        // 展示对应的省
        function showProvince(pName, Chinese_) {
            //这写省份的js都是通过在线构建工具生成的，保存在本地，需要时加载使用即可，最好不要一开始全部直接引入。
            loadBdScript('$' + pName + 'JS', './js/map/province/' + pName + '.js', function() {
                initEcharts(Chinese_);
            });
        }

        // 加载对应的JS
        function loadBdScript(scriptId, url, callback) {
            var script = document.createElement("script");
            script.type = "text/javascript";
            if (script.readyState) { //IE
                script.onreadystatechange = function() {
                    if (script.readyState === "loaded" || script.readyState === "complete") {
                        script.onreadystatechange = null;
                        callback();
                    }
                };
            } else { // Others
                script.onload = function() {
                    callback();
                };
            }
            script.src = url;
            script.id = scriptId;
            document.getElementsByTagName("head")[0].appendChild(script);
        };
    </script>
</body>

</html>

五、更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、Echarts大数据可视化, 等! 「一起探讨 web前端 ,Node ,Java 知识，互相学习」！

3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥

@码出未来-web网页设计

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
基于Echarts实现可视化数据大屏中国地图城市区块选择代码

🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作，可以在此基础上重新开发。本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤
复制链接

扫一扫