echarts实现中国地图和各省市地图

echarts实现中国地图

我会把china.js和各省市的js以及json上传资源，有需要的可以下载
首先引入echarts.js和china.js

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>地图</title><script src="./js/echarts.min.js"></script><script src="./map/js/china.js"></script>
</head>
<body><div id="map" style="height:600px"></div><script type="text/javascript">function randomData() {  return Math.round(Math.random()*500);  } var mydata = [  {name: '北京',value: '100' },{name: '天津',value: randomData() },  {name: '上海',value: randomData() },{name: '重庆',value: randomData() },  {name: '河北',value: randomData() },{name: '河南',value: randomData() },  {name: '云南',value: randomData() },{name: '辽宁',value: randomData() },  {name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() },  {name: '安徽',value: randomData() },{name: '山东',value: randomData() },  {name: '新疆',value: randomData() },{name: '江苏',value: randomData() },  {name: '浙江',value: randomData() },{name: '江西',value: randomData() },  {name: '湖北',value: randomData() },{name: '广西',value: randomData() },  {name: '甘肃',value: randomData() },{name: '山西',value: randomData() },  {name: '内蒙古',value: randomData() },{name: '陕西',value: randomData() },  {name: '吉林',value: randomData() },{name: '福建',value: randomData() },  {name: '贵州',value: randomData() },{name: '广东',value: randomData() },  {name: '青海',value: randomData() },{name: '西藏',value: randomData() },  {name: '四川',value: randomData() },{name: '宁夏',value: randomData() },  {name: '海南',value: randomData() },{name: '台湾',value: randomData() },  {name: '香港',value: randomData() },{name: '澳门',value: randomData() }  ];var optionMap = {  backgroundColor: '#FFFFFF',  title: {  text: '中国地图大数据',  subtext: '',  x:'center'  },  tooltip : {  trigger: 'item'  },  //左侧小导航图标visualMap: {  show : true,  x: '200',  y: 'center',  splitList: [   {start: 500, end:600},{start: 400, end: 500},  {start: 300, end: 400},{start: 200, end: 300},  {start: 100, end: 200},{start: 0, end: 100},  ],  color: ['#0bebf9', '#f488f2', '#fcf367','#fcf912', '#fa14c6', '#184dfa']  },  //配置属性series: [{  name: '数据',  type: 'map',  mapType: 'china',   roam: true,  label: {  normal: {  show: true  //省份名称  },  emphasis: {  show: false  }  },  data:mydata  //数据}]  };  //初始化echarts实例var myChart = echarts.init(document.getElementById('map'));//使用制定的配置项和数据显示图表myChart.setOption(optionMap);</script>
</body>
</html>

接下来是echarts实现各省市地图
首先引入echarts.js和各省市的js，我这里以河南为例

接下来就和全国地图的代码差不多了，需要改下myData。

需要特别注意的是：当你想做全国地图时，mapType是china，香港是HK，其他的省市就是汉字，比如河南就是河南。直辖市也不要写带上市，比如不能写上海市，写上海就行。

河南省地图效果如下

echarts实现中国地图和各省市地图相关推荐

Echarts使用二：全国地图与各省市地图联动
===========================更新============================ 介于很多人都找我要相关的js文件,我就传到网上以供大家下载~~ js文件下载地址: ...
使用vue+echarts快速进行全国地图与各省市地图联动(下钻地图)，引入省份js文件
项目源码附js/json地图数据(下载项目源码后请使用Npm install 来安装相关依赖) 效果使用前请使用npm(cnpm)安装echarts,详情见官网. 本文作为笔记demo只引入5个省( ...
vue 引入json地图_使用vue+echarts快速进行全国地图与各省市地图联动(下钻地图)，引入省份js文件...
项目源码附js/json地图数据(下载项目源码后请使用Npm install 来安装相关依赖) 效果使用前请使用npm(cnpm)安装echarts,详情见官网. 本文作为笔记demo只引入5个省( ...
使用echarts完成中国省市区县镇地图展示
目录前言一.中国地图 1.1 地图数据-china.js 1.2 代码应用二.省份地图--以山东为例,其他省份同理 2.1 地图数据-shandong.js 2.2 代码应用三.市级地图--以 ...
echarts实现各省市地图、中国地图
之前写过单独的省市地图,好多朋友都问各省市的地图怎么写,今天我就简单的写了个demo.仅供大家参考.不足之处望大家多多指正. 首先我们还是先看下效果图鼠标滑过各个省市的效果如下: 其实写法和之前我写 ...
Vue+Echarts实现中国地图的省市切换
Vue+Echarts实现中国地图的省市切换首先要安装一下Echarts npm install echarts 在min.js中引入echarts import * as echarts from ...
echarts.制作中国地图,点击对应的省市链接到该省份的详细介绍
今天花了一天的时间,用echart弄了一个效果,是从中国地图点进去身份并把改省份的数据渲染出来的效果,刚开始完全没有头绪,只能硬着头皮去看百度echart的api,和博客,看了半天,好家伙,终于给我找 ...
Echarts实现中国地图、省市地区地图
中国地图山西地图天津地图(实现3D立体效果) 地图赋值 initMapChart() {let mapData = [{name: '北京',value: this.randomData()}, ...
echarts实现省市地图
使用Echarts实现省市区的地图,今天有时间写个北京地图demo.先看下效果图: 1.首先先引入echarts.min.js文件,然后改造下beijing.json文件,改造后把json改成js文件 ...

echarts实现中国地图和各省市地图

echarts实现中国地图和各省市地图相关推荐

最新文章

热门文章