使用Echarts绘制省份地图源码

话不多说先上效果图，鼠标放在市会高亮当前市

地图上的两条线是因为展示需要，按照左边绘制上去了,不要问地图颜色，可以修改…
进入正题，聊一聊实现过程，首先引入echarts.js和省份.js

 <head><meta charset="utf-8" /><script src="../js/echarts.js"></script><script src="../js/jquery-3.4.1.min.js"></script><script src="../js/henan.js"></script><script src=""></script><title></title></head>

省份.js 链接：https://pan.baidu.com/s/1SmTpMm-dA8dECcYsFT-8rQ
提取码：5y3w

再来一块div装地图…哈哈

<body><div id="main" style="width: 1900px;height:800px;"></div></body>

注释很清晰了~

<script type="text/javascript">/* //container 为div的id */var dom = document.getElementById("main");//得到echarts的实例对象var myChart = echarts.init(dom);var option = {//背景颜色backgroundColor: '#fff',geo: {map: '河南',label: {//正常状态normal: {show: true,color: "#f00",},emphasis: {show: true,}},itemStyle: {borderWidth: 1, //省份的边框宽度color: '#0f0', //地图背景颜色},//缩放//roam: true,          },series: [{name: "河南",//类型:线条type: 'lines',coordinateSystem: 'geo',zlevel: 1,effect: {show: true,period: 2,trailLength: 1,//线条颜色color: '#00f',//线条粗细symbolSize: 3,},lineStyle: {normal: {//线条显色color: "#DAA520",width: 2,//线条弧度，0为直线curveness: 0.2,}},

以下是地图上显示的线的坐标代码~~

data: [{fromName: "安阳市",toName: "鹤壁市",coords: [[114.352482, 36.103442],[114.295444, 35.748236]]},{fromName: "鹤壁市",toName: "新乡市",coords: [[114.295444, 35.748236],[113.883991, 35.302616]]},{fromName: "鹤壁市",toName: "新乡市",coords: [[113.883991, 35.302616],[113.665412, 34.757975]]},{fromName: "新乡市",toName: "郑州市",coords: [[113.883991, 35.302616],[113.665412, 34.757975]]},{fromName: "郑州市",toName: "许昌市",coords: [[113.665412, 34.757975],[113.826063, 34.022956]]},{fromName: "许昌市",toName: "漯河市",coords: [[113.826063, 34.022956],[114.026405, 33.575855]]},{fromName: "漯河市",toName: "驻马店市",coords: [[114.026405, 33.575855],[114.024736, 32.980169]]},{fromName: "驻马店市",toName: "信阳市",coords: [[114.024736, 32.980169],[114.075031, 32.123274],],},{fromName: "三门峡市",toName: "洛阳市",coords: [[111.194099, 34.777338],[112.434468, 34.663041],],},{fromName: "洛阳市",toName: "许昌市",coords: [[112.434468, 34.663041],[113.826063, 34.022956],],},{fromName: "许昌市",toName: "周口市",coords: [[113.826063, 34.022956],[114.649653, 34.020357],],},{fromName: "周口市",toName: "商丘市",coords: [[114.649653, 34.020357],[115.650497, 34.437054],],},]}]
}
myChart.setOption(option);

结束了~~

使用Echarts绘制省份地图源码相关推荐

FLEX绘制行政区域地图源码
FLEX 通过开源框架Degrafa绘制行政区域地图以下是效果图点击地图上城市区域部分会变蓝色提示并且有相应的选择特效此地图是湖南省的部分城市地图通过SVG工具抠出来的实际效果链接: ht ...
关注女性健康，分享 echarts 绘制女性体温表源码
前言最近每天早起睁眼的第一件事就是测舌下体温(水银体温计),要想测得准,测温时间要固定,作息也要规律. 基础体温的动态变化一定程度上可以反映女性黄体功能是否正常. 医生给的纸质体温表被我画错了一格, ...
echarts 绘制省份地图 [ 把不同省份的市合并在一起 ]
安装echarts yarn add echarts 效果图: 获取任意省市县数据来源json格式注意: 这里在请求在写地图数据的时候,我采用的是JQ.使用axios的话会出现错误信息; 废话不多说 ...
vue echarts绘制省份地图并添加自定义标注
效果图在main.js中引入地图 import echarts from 'echarts' Vue.prototype.$echarts = echarts; 省份是动态引入的,在.vue文件中 ...
echarts 绘制中国地图（中英文转换）
echarts 绘制中国地图 1.引入echarts npm install echarts import echarts from 'echarts' 2.引入地图china.js(网上自行搜索下载 ...
使用Echarts绘制geo地图（案例）
使用Echarts绘制geo地图(案例) 项目使用@vue/cli 4.5.13以及echarts版本为5.1.2. 需求:在省份地图上,将数据进行分段映射.如图: 首先下载geojson数据链接: ...
C++ Opengl 绘制图像字符源码
C++ Opengl 绘制图像字符源码项目开发环境项目功能项目演示项目源码传送门项目开发环境开发语言:C++和IDE:VS2017,操作系统Windows版本windows SDK8.1, ...
C++ Opengl 绘制纹理字符源码
C++ Opengl 绘制纹理字符源码项目开发环境项目功能项目演示项目源码传送门项目开发环境开发语言:C++和IDE:VS2017,操作系统Windows版本windows SDK8.1, ...
vue echarts绘制市级地图下钻（带注释）
vue echarts绘制市级地图下钻 ------- 以浙江嘉兴市为例首先要知道地图的数据获取:http://datav.aliyun.com/portal/school/atlas/area_s ...
【朝花夕拾】Android自定义View之（一）手把手教你看懂View绘制流程——向源码要答案
前言原文:Android自定义View之(一)手把手教你看懂View绘制流程--向源码要答案 View作为整个app的颜值担当,在Android体系中占有重要的地位.深入理解Android View ...

使用Echarts绘制省份地图源码

使用Echarts绘制省份地图源码相关推荐

最新文章

热门文章