使用echarts简单制作省份地图

叁歲伎倆 2022-07-15 13:52 371阅读 0赞

引入echarts.min.js文件,http://echarts.baidu.com/download.html下载地址

引入对应省份的js文件   可以在http://echarts.baidu.com/download-map.html?qq-pf-to=pcqq.c2c生成省份的json格式文件,

然后再将其转化成henan.js文件

var  henanJson=下载的json数据:

<!doctype html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>echarts图形插件使用</title>
    
    </head>
    
    <body>
    <div id="main" style="height:800px;"></div>
    <script type="text/JavaScript" src="js/echarts.min.js"></script>
    <script type="text/JavaScript" src="js/henan.js"></script>
    <script type="text/javascript">
            echarts.registerMap('henan', henanJson);//hennanJson名称取自henan.js里的var  henanJson变量名
    
    
            var chart = echarts.init(document.getElementById('main'));
            chart.setOption({
                series: [{
                    type: 'map',
                    map: 'henan'
                }]
            });
    </script>
    </body>
    
    </html>

效果如下:

![70][]

[70]: /images/20220715/6b7f552c7ac64e4d8d3fea7ba38d1388.png

发表评论取消回复

表情：

评论列表（有 0 条评论，371人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts中国地图各省份区域设置不同的颜色

摘要：接着《Echarts引入中国地图》续写，我们的项目需求是要求地图的背景颜色要各省份不同。看了文档同时也看了相关官网例子，写出来总结下吧，以便以后需要。实现： 1

红太狼/ 2023年10月11日 15:37/ 0 赞/ 75 阅读

相关 react hooks（dva） echarts 实现中国地图省份数据分布显示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9u

﹏ヽ暗。殇╰゛Y/ 2022年12月13日 14:17/ 0 赞/ 238 阅读

相关全国地图省份联动效果

[下载地址/images/20220828/d5cc8595b90548ad9c69f07c3f471369.png![icon-default.png?t=L892][ico

向右看齐/ 2022年09月13日 01:58/ 0 赞/ 276 阅读

相关 ECharts地图使用

ECharts地图使用最近项目开发中用到了ECharts地图，感觉ECharts地图美观炫酷，所以写篇博客记录下来。 ECharts，缩写来自Enterpr

小鱼儿/ 2022年08月09日 18:39/ 0 赞/ 566 阅读

相关使用echarts简单制作中国地图

网站需要一张中国地图，并且鼠标经过某个省份，该省份的省份名字显示，而且该省份的地区会变色显示。第一种方法：将每个省份的图片定位（先隐藏），拼合成一张中国地图，然后再定位

拼搏现实的明天。/ 2022年08月06日 02:11/ 0 赞/ 300 阅读

相关使用echarts简单制作省份地图

引入echarts.min.js文件,http://echarts.baidu.com/download.html下载地址引入对应省份的js文件可以在

叁歲伎倆/ 2022年07月15日 13:52/ 0 赞/ 372 阅读

相关 Echarts 制作用户所在地地图分析

代码: 1.SSM框架先编写人员的数据接口: package com.ytdx.entity; import java.io.Serializab

深碍√TFBOYSˉ_/ 2022年05月26日 08:37/ 0 赞/ 294 阅读

相关 DataV基础版如何制作单独省份地图？

第一步以“全国业务态势“模版创建可视化因为DataV基础版不能够自由的添加地图的下各个子组件，制作省份地图需要包含“区域热力”这个子组件。没关系，即便您目前使用的是基

叁歲伎倆/ 2022年01月27日 14:17/ 0 赞/ 1964 阅读

相关在react中使用echarts制作地图

1.下载echarts npm install echarts 2.app.js代码如下 import React, { Component } fro

喜欢ヅ旅行/ 2021年07月25日 11:34/ 0 赞/ 753 阅读

相关 echarts 地图(区域渐变等)、地图和散点图结合、点击省份进入省份地图(双击切换回来)

(1)地图: 1、下载矢量地图.json文件 2、请求.json文件 var map=await axios.get('.

布满荆棘的人生/ 2021年07月24日 22:22/ 0 赞/ 523 阅读