echarts中国地图根据数据对省份渲染不同的颜色

最新推荐文章于 2024-03-21 15:22:39 发布
最新推荐文章于 2024-03-21 15:22:39 发布
阅读量6.2k 收藏 32
点赞数 2
分类专栏： 笔记 原创 文章标签： 地图 echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41810005/article/details/103861911
版权

完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>echarts中国地图</title>
    <style>
        .centerItem {
            width: 856px;
            height: 640px;
            background-color: #fff;
            margin: 110px auto 0 auto;
        }

        .big {
            width: 100px;
            height: 100px;
            background: rgba(18, 139, 237, 1);
            /* background:rgba(71,169,241,1);                
            background:rgba(165,216,246,1);
            background:rgba(196,237,249,1); */
        }
    </style>
</head>

<body>
    <!-- 中国地图展示 -->
    <div id="mapBox" class="centerItem"></div>
    <!-- <div class="big"></div> -->
    <!-- 引入相关文件 -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.js"></script>
    <script src="./china.js"></script>

    <script>
        // 基于准备好的dom，初始化echarts实例
        var mapBoxEchart = echarts.init(document.getElementById('mapBox'));
        var num = Math.random(),
            data = [
                { name: '北京', selected: false, value: 1 },
                { name: '天津', selected: false, value: 2 },
                { name: '上海', selected: false, value: 3 },
                { name: '重庆', selected: false, value: 4 },
                { name: '河北', selected: false, value: 5 },
                { name: '河南', selected: false, value: 6 },
                { name: '云南', selected: false, value: 7 },
                { name: '辽宁', selected: false, value: 8 },
                { name: '黑龙江', selected: false, value: 9 },
                { name: '湖南', selected: false, value: 10 },
                { name: '安徽', selected: false, value: 11 },
                { name: '山东', selected: false, value: 12 },
                { name: '新疆', selected: false, value: 13 },
                { name: '江苏', selected: false, value: 14 },
                { name: '浙江', selected: false, value: 15 },
                { name: '江西', selected: false, value: 16 },
                { name: '湖北', selected: false, value: 17 },
                { name: '广西', selected: false, value: 18 },
                { name: '甘肃', selected: false, value: 19 },
                { name: '山西', selected: false, value: 20 },
                { name: '内蒙古', selected: false, value: 21 },
                { name: '陕西', selected: false, value: 22 },
                { name: '吉林', selected: false, value: 23 },
                { name: '福建', selected: false, value: 24 },
                { name: '贵州', selected: false, value: 25 },
                { name: '广东', selected: false, value: 26 },
                { name: '青海', selected: false, value: 27 },
                { name: '西藏', selected: false, value: 28 },
                { name: '四川', selected: false, value: 29 },
                { name: '宁夏', selected: false, value: 30 },
                { name: '海南', selected: false, value: 31 },
                { name: '台湾', selected: false, value: 32 },
                { name: '香港', selected: false, value: 33 },
                { name: '澳门', selected: false, value: 34 }
            ],
            dataColor = {
                x: '-1000 px', //图例横轴位置
                y: '-1000 px', //图例纵轴位置
                splitList: [
                    { start: 1, end: 1, label: '北京', color: '#cfc5de' },
                    { start: 2, end: 2, label: '天津', color: '#f1ebd1' },
                    { start: 3, end: 3, label: '上海', color: '#feffdb' },
                    { start: 4, end: 4, label: '重庆', color: '#e0cee4' },
                    { start: 5, end: 5, label: '河北', color: '#fde8cd' },
                    { start: 6, end: 6, label: '河南', color: '#e4f1d7' },
                    { start: 7, end: 7, label: '云南', color: '#fffed7' },
                    { start: 8, end: 8, label: '辽宁', color: '#e4f1d7' },
                    { start: 9, end: 9, label: '黑龙江', color: '#e4f1d7' },
                    { start: 10, end: 10, label: '湖南', color: '#fffed7' },
                    { start: 11, end: 11, label: '安徽', color: '#fffed8' },
                    { start: 12, end: 12, label: '山东', color: '#dccee7' },
                    { start: 13, end: 13, label: '新疆', color: '#fffed7' },
                    { start: 14, end: 14, label: '江苏', color: '#fce8cd' },
                    { start: 15, end: 15, label: '浙江', color: '#ddceeb' },
                    { start: 16, end: 16, label: '江西', color: '#e4f1d3' },
                    { start: 17, end: 17, label: '湖北', color: '#fde8cd' },
                    { start: 18, end: 18, label: '广西', color: '#fde8cd' },
                    { start: 19, end: 19, label: '甘肃', color: '#fde8cd' },
                    { start: 20, end: 20, label: '山西', color: '#fffdd6' },
                    { start: 21, end: 21, label: '内蒙古', color: '#ddcfe6' },
                    { start: 22, end: 22, label: '陕西', color: '#fad8e9' },
                    { start: 23, end: 23, label: '吉林', color: '#fce8cd' },
                    { start: 24, end: 24, label: '福建', color: '#fad8e8' },
                    { start: 25, end: 25, label: '贵州', color: '#fad8e8' },
                    { start: 26, end: 26, label: '广东', color: '#ddcfe8' },
                    { start: 27, end: 27, label: '青海', color: '#fad8e9' },
                    { start: 28, end: 28, label: '西藏', color: '#ddcfe6' },
                    { start: 29, end: 29, label: '四川', color: '#e4f1d5' },
                    { start: 30, end: 30, label: '宁夏', color: '#fefcd5' },
                    { start: 31, end: 31, label: '海南', color: '#fad8e9' },
                    { start: 32, end: 32, label: '台湾', color: '#fce8cd' },
                    { start: 33, end: 33, label: '香港', color: '#dc9bbb' },
                    { start: 34, end: 34, label: '澳门', color: '#e0f7cc' }
                ]
            };
        //从数组中获取最大值和最小值
        var dataValue = [];
        data.forEach(e => {
            dataValue.push(e.value)
        });
        var max = Math.max.apply(null, dataValue),//数据最大值
            min = Math.min.apply(null, dataValue),//数据最小值
            min_max = max - min;//极差
        var R = 178,//色值差
            G = 98,
            B = 12,
            R_min = 18,
            G_min = 139,
            B_min = 237;
        dataColor.splitList.forEach(e => {
            var RED = (R / min_max * e.start) + R_min,
                GREEN = (G / min_max * e.start) + G_min,
                BLUE = (B / min_max * e.start) + B_min;
            e.color = "rgb(" + RED + ',' + GREEN + ',' + BLUE + ")";
        });
        // 指定相关的配置项和数据
        var mapBoxOption = {
            series: [{
                type: 'map',
                mapType: 'china',
                label: {
                    normal: {
                        show: false, //显示省份标签
                        textStyle: {
                            color: "#fff"
                        } //省份标签字体颜色
                    }
                },
                aspectScale: 0.75,
                zoom: 1.2,
                itemStyle: {
                    normal: {
                        borderWidth: .5, //区域边框宽度
                        borderColor: '#009fe8', //区域边框颜色
                        areaColor: "#ffefd5", //区域颜色
                    }
                },
                data: data //各省地图颜色数据依赖value
            }],
            dataRange: dataColor, //各省地图颜色；start：值域开始值；end：值域结束值；label：图例名称；color：自定义颜色值；
        };
        // 使用制定的配置项和数据显示图表
        mapBoxEchart.setOption(mapBoxOption);
        // echart图表自适应
        window.addEventListener("resize", function () {
            mapBoxEchart.resize();
        });
    </script>

</body>

</html>

效果图

代码无边，回头是岸
关注
  • 2
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目使用ECharts的中国地图，设置地图不同板块的颜色以及动态显示效果
小楠子的博客
05-10 1万+
本篇讲述在vue中使用echarts的中国地图，以及对不同板块进行渐变色的设置。 效果图如下： 实现上图效果步骤如下： 确保项目中下载了echarts，然后在main.js中引用echarts import echarts from 'echarts' import 'echarts/map/js/china' Vue.prototype.$echarts = echarts 在组件中放...
基于echarts的中国地图省份数据统计显示
12-07
基于百度的echarts编写的中国地图数据统计显示demo，可以下载直接使用，用于技术交流分享
echarts 中国地图开发第一章 地图渲染与背景添加
add_ysd的博客
01-19 595
中的 引入 echars 和 地图JSON china.json 文件。1.为地图增加了背景图片，通过创造img标签后并添加图片路径，并在。为偏移量，geo层 y 轴偏移 0.5 可以使地图有两层的效果。使用 框架为Vue2，开发地图大屏，包含的内容有。data中声明 chart 和 options。中 增加 id为china 的div。此时地图就渲染完成了！
echarts mapbox地图案例
12-12
echarts mapbox 地图提供下载，根据echarts官方案例进行开发。
Echarts地图之——如何给省份名称添加背景图片背景色
最新发布
在车上在路上的博客
03-21 572
这样就默认给了所有的省份设置了rich为a的样式，要设置的背景图就放到backgroundColor的image里面就行。如果我们需要根据后端返回数据给对应的省份设置rich为b的样式，则只需要对label的formatter重新设置即可。上次添加的背景是给整张地图添加的，如果想要给省份名称设置背景图，我们就要在label配置里面去添加设置。同样，如果要根据省份的数据来给省份添加背景色，则通过visualMap来设置。最后我们看到的配置了对应条件的省份就会是下面这样的。
echarts设置图例颜色和地图底色的方法实例
10-18
最近项目要使用echarts进行数据可视化，所以下面这篇文章主要给大家介绍了关于echarts设置图例颜色和地图底色的相关资料，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧
Vue3 + Echarts(5.x) 实现中国地图
SongZhengxing_的博客
10-19 1590
下载地址：https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/china.js，下载到本地使用即可。在echarts5.x版本中，已经不再提供地图数据，所以需要我们自己手动下载，我这里已经提供好了下载地址。文件代码，这个文件主要是通过省份名称获取经纬度。在这个版本中的引入方式必须是下面这种方法。默认安装的是 5.x 版本。然后下面是地图实现源码。
Echarts中国地图各个省市自治区自定义颜色
EstherLty的博客
08-24 8169
最近有个需求是这样的 需要根据评级（低、中、高…）来显示省市区的颜色。就不能根据数据对省份渲染不同的颜色 dataRange 方法就行不通，因为他是根据数据值域来划分的。 后面想到可以根据评级判断对各个省市自治区自定义颜色。 需要的data数据结构如下: data: { {"name": "北京", "value": 34, "count": 500, "color": "#f00"}, {"name": "天津", "value": 33, "count": 300, "color":.
【删繁就简】Echarts 视觉映射组件中国地图分段颜色显示，选中范围内外颜色设置策略
追寻上飞的博客
03-09 2181
在前端项目开发过程中，需要在大屏模块模块中按照项目在各省份分部的数量进行可视化显示，该功能对应`Echarts`的视觉映射组件`VisualMap`，设置完成后，出现的效果如图所示。当项目量为0的省份是透明的。
Echarts中国地图根据数据对省份渲染不同的颜色
EstherLty的博客
08-03 1万+
在 setOption 里面设置（setOption官方参数及用法介绍）。 title //标题设置 legend //图例控制 grid //图例内网格控制 xAxis //X轴 yAxis //Y轴 polar //极坐标 radiusAxis //极坐标系径向轴 angleAxis //极坐标系的角度轴。 radar //雷达图坐标系组件 dataZoom //图表缩放控件 visualMap //视觉映射组件 tooltip //提示框控件 axisPointer //坐标轴指示器（axisPoi
echarts 中国地图，根据省份数值高低改变省份颜色深浅
热门推荐
qq_26680031的博客
02-09 1万+
function randomValue() { return Math.round(Math.random()*1000); } option = { tooltip: {}, visualMap: { min: 0, max: 2000, text:['High','Low'], realtime: fa...
vue+echarts.js 实现中国地图——根据数值表示省份的深浅——技能提升
yehaocheng520的博客
03-09 2351
vue+echarts.js 实现中国地图——根据数值表示省份的深浅——技能提升
ECharts省份地图数据合集.zip
06-07
ECharts省份地图数据合集。收录中国各个省份的地图JSON数据。ECharts省份地图数据合集。收录中国各个省份的地图JSON数据。ECharts省份地图数据合集。收录中国各个省份的地图JSON数据。ECharts省份地图数据合集。收录...
echarts地图(包含中国所有省份JSON格式数据).zip
05-12
echarts地图(包含中国所有省份JSON格式数据)
echarts世界地图+中国详细省份
04-24
echarts的 geo: { map: 'world-china', ｝
echarts 中国各省市 echarts地图数据，含世界地图
08-14
echarts 中国各省市 echarts地图数据，含世界地图,含各省地市数据
vuex中的state、getters、mutations、actions之间的关系用法笔记
大乌鸦
12-05 1万+
一、state的用法 &lt;body&gt; &lt;!-- 想要获取到state中的数据 {{$store.state.属性}} 以为这个表达式很长，所以我们可以直接通过computed去获取 { computed: { 属性名 () { return this.$store.state.属性 ...
浏览器指纹Fingerprint2的实现教程
大乌鸦
09-01 8943
废话不多说！！！直接就是开怼。。。。。。。。。。 第一步：下载Fingerprint2依赖包 npm install -S Fingerprint2 或者 cnpm install -S Fingerprint2 第二步：写js代码 在这里就是把下面的代码添加到项目启动就会直接执行就是文件里 如果你是使用的vue项目，那么你就可以像我这样直接放在main.js里面 要是用的原生的话，...
前端vue导出Zip文件
大乌鸦
05-30 6942
第一步：下载插件 npm install jszip /npm install script-loader / npm install file-saver 第二步：封装js代码 require('script-loader!file-saver'); import JSZip from 'jszip' //th是头部标题，jsonData是数据，txtName是txt文件名字，zi...
移动echarts地图省份颜色
08-12
要移动 ECharts 地图上的省份颜色，您可以使用 ECharts 提供的 VisualMap 组件来实现。 首先，您需要在 ECharts 的配置项中添加一个 VisualMap 组件，然后设置相应的配置项，包括最小值、最大值、颜色范围等。接下来，在地图系列中设置 `visualMap` 属性为刚刚定义的 VisualMap 组件的名称。 以下是一个示例代码片段，展示了如何移动地图省份的颜色： ```javascript option = { visualMap: { type: 'piecewise', min: 0, max: 100, left: 'left', top: 'bottom', text: ['High', 'Low'], // 文本，默认为数值文本 calculable: true, inRange: { color: ['#e0ffff', '#006edd'] // 设置颜色范围 } }, series: [{ type: 'map', map: 'jiangsu', label: { show: true }, itemStyle: { normal: { borderWidth: 0.5, borderColor: '#fff' }, emphasis: { areaColor: '#f2d5ad' } }, // 其他配置项... }] }; ``` 在上述示例中，`visualMap` 组件被定义为一个分段型的视觉映射组件，通过 `min` 和 `max` 属性设置了颜色映射的最小值和最大值。`inRange` 属性定义了颜色范围，可以通过设置颜色数组来调整省份的颜色。您可以根据自己的需求进行调整和尝试。 请注意，具体的配置可能因使用的地图类型、版本和需求而有所不同，您可以根据具体情况进行调整和尝试。希望对您有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值