在pycharm中使用Echarts绘制单个省份的地图（以内蒙古自治区为例）

今天来复盘一下，如何使用Echarts绘制单个省份的地图，昨天在网上搜了很多教程，代码大差不差，但是运行的时候总出不来，经过自己的琢磨，里面也有很多需要注意的点，今天就以自身的问题来针对几个问题说一下，希望可以帮到有需要的同学。
1.在head中需要引入三个链接，注意，我直接拿来网上的代码来跑，没有改链接发现跑不通，（可能有的使用了本地链接），在这里我使用了线上链接。
第一个链接是echatrs的一个链接，使用echarts绘图都需要引入，我是在echarts官网直接复制拿来的，具体操作见下图。
按照下图步骤复制js
2.这里需要引进所画省份的Json文件，就拿我画内蒙古地图来说，我需要加入内蒙古地图的Json.
从阿里云添加链接描述进入获取Json文件，点最下面的下载按钮讲将Json文件保存下来，注意这里保存的是Json文件，在代码里我们使用的是js文件，所以需要将格式转化成js格式，转化为Js格式之后将这个文件放在编写代码的根目录下。
3.在js文件中加入“var nmgJson=”，可以根据你所画的省份名字自行命名。一定要注意是在js文件中加入，我一开始在json文件中加，一直出错。
下面就是直接在Json文件加的，就报错了，切记不要直接加！要转换格式！！！
这里要对应写正确，要不然就出不来地图。nmgJson名称取自nei.js里的var nmgJson变量名。
然后剩下的代码根据自己的需求写啦，我只是写了一个最基本的，绘制内蒙古的地区，只包含12个盟市，没有添加数据。完整代码奉上。

<!doctype html>
<html><head><meta charset="utf-8"><title>echarts图形插件使用</title></head><body>
<div id="main" style="width:1000px;height:1000px;"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/asset/theme/infographic.js"></script>
<script type="text/JavaScript" src="./nei.js"></script>
<script type="text/javascript">echarts.registerMap('nei', nmgJson);//nmgJson名称取自nei.js里的var  nmgJson变量名var chart = echarts.init(document.getElementById('main'));var option = {title: {text: '内蒙古自治区地图',left: 'center'},tooltip:{trigger: 'item'},series: [{type: 'map',map: 'nei',label:{normal:{show:true},emphasis:{show:true}},itemStyle:{normal:{areaColor: '#ffff00',borderColor: '#000000'},}}]};chart.setOption(option);
</script>
</body>
</html>

运行结果图：

希望可以帮到需要的人。

在pycharm中使用Echarts绘制单个省份的地图（以内蒙古自治区为例）相关推荐

vue中使用Echarts绘制K线图
一.需求问题在开发项目中,我们可能会遇到这样的需求.在vue中使用Echarts绘制K线图,进行数据分析.下面是一个简单的K线图绘制,数据是伪造的,虽然不多,但是能够实现大致的K线图效果. 二.需求 ...
解决问题，在pycharm中使用graphviz绘制决策树时，决策树图片中不显示中文(中文字体乱码！！) 图文并茂版！！！
解决问题问题信息问题代码问题分析解决问题注意问题信息 •我们在pycharm中使用graphviz绘制决策树时,可能会出现下述图片中中文字体乱码的问题: •参考网上修改各种配 ...
echarts vue 柱状图实例_VUE中使用Echarts绘制柱状图
在main.js中引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts 在相应的vue中导入echarts ...
react中使用ECharts绘制各省市地图
首先,安装对应依赖 npm install echarts --save 2.引入 import React from "react"; // 模块化样式表 import s fr ...
React中使用echarts绘制图表
我们都知道,Echarts图表功能非常强大,使用起来也很方便,我们的项目中就用到了Echarts,现在笔者就带大家看看怎么在react中使用Echarts. 我们要想在react项目中高效使用echa ...
vue中使用echarts绘制仪表盘
效果图目录一.安装echarts 1.控制台使用命令进行安装 2.在package.json中配置echarts 3.在main.js中引用二.vue中使用echarts 1.首先设置一个放置图 ...
python爬取新冠状病毒实时数据，绘制各省份疫情地图
想法: 偶然接触爬虫之后,想要试试爬取新冠状病毒的数据,但本人是编程小白,只能从网上寻找代码进行学习,在看过博主Hakuna_Matata_001的代码之后,可以说是将其默写出来了,然后加入了自己的一 ...
Echarts 绘制单独省份地图
1. 文档介绍采用node端http-server作为服务端,引用第三方插件Echarts 2.阅读对象本篇文章要求开发者熟悉 HTML.JavaScript.CSS.Echarts.Nodejs ...
在Vue3项目中使用 Echarts 绘制股票图表的分享（五）：分时图的基础上绘制出五日图
效果展示分析:五日图其实也就是展示了相当于五天的分时图的数据量:对比前面的分时图绘制效果,我们可以发现:它多出了对这五天内的现价做个最高价和最低价的标注,并且对最新时间段的现价数据做个闪烁点+涟漪特 ...

在pycharm中使用Echarts绘制单个省份的地图（以内蒙古自治区为例）

在pycharm中使用Echarts绘制单个省份的地图（以内蒙古自治区为例）相关推荐

最新文章

热门文章