echarts实现中国地图数据展示

在项目中运用到图形展示数据太常见了，echarts是一款使用率非常高的插件工具，很多大平台都是使用echarts；

一般运用到条形、折线、扇形图，今天说一说在中国地图上展示各地数据；

首先要准备中国地图的JS文件，可以在网盘下载，链接: https://pan.baidu.com/s/1j_edGU2ka9YeHBTErqDWdg 密码: ft9n

引入echarts后引入china.js文件

<head><meta charset="utf-8" /><title>echarts中国地图数据</title><script type="text/javascript" src="js/echarts.min.js" ></script><script type="text/javascript" src="js/china.js" ></script></head>

写入随机数来测试数据：

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() }  ];

自己的数据写入value里

实例化option，配置属性，data置入数据

var optionMap = {  backgroundColor: '#FFFFFF',  title: {  text: '全国地图大数据',  subtext: '',  x:'center'  },  tooltip : {  trigger: 'item'  },  //左侧小导航图标visualMap: {  show : true,  x: 'left',  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: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']  },  //配置属性series: [{  name: '数据',  type: 'map',  mapType: 'china',   roam: true,  label: {  normal: {  show: true  //省份名称  },  emphasis: {  show: false  }  },  data:mydata  //数据}]  };  //初始化echarts实例var myChart = echarts.init(document.getElementById('main'));//使用制定的配置项和数据显示图表myChart.setOption(optionMap);

效果如图：

下载源码

echarts实现中国地图数据展示相关推荐

echarts geo地图示例_基于Echarts的中国地图数据展示
一.概述实际项目中大概率会遇到很多需要进行数据展示的地方,如折现图,柱状图等,今天给大家介绍一个更加炫酷的中国地图大数据展示,结合echarts免费开源第三方插件,可以实现自己的定制样式,定制提示. ...
echarts地图api series_echarts实现中国地图数据展示
在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 也可以在gith ...
ECharts实现中国地图数据可视化
项目中数据可视化已经太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts:一般都有折线图.柱形图.饼形图,还有常见的地图,今天就地图来说一下--中国地图. 1.首先官 ...
echarts立体中国地图的展示
效果图 1.首先需要下载echarts,然后在man.js中进行一个引入 2.然后需要下载地图插件,然后也在man.js进行一个引入引入echarts,和地图插件 import * as echar ...
echarts市级区域地图数据展示
一.原理引用对应市区json数据(比如我就是引用的河南省驻马店市的数据),通过百度地图坐标拾取器获取地区的经纬度,将数据填在对应位置(我下面有注释),再配置下样式颜色之类的渲染上就可以了二.看图片 ...
ECharts在线编辑中国地图数据可视化展示
1.打开ECharts网站输入网址:https://echarts.apache.org/examples/zh/editor.html?c=map-china&theme=light 2. ...
echarts实现中国地图的下钻和返回上一级
首先我们需要知道echarts的地图的渲染需要依赖于json文件,例如:中国地图china.json,广东地图guangdong.json,广西地图guangxi.json:也就是每个不同的json文 ...
echarts实现中国地图，山西地图，图表面积图配置项
文章目录 1.vue引入echars 2.建立echars基本框架 3.中国地图 4.山西地图为例,展示点击获取城市名称并保存在data中,方便使用 6.图表面积图(大小,线条颜色,面积颜色,百分比显 ...
Vue+Echarts实现中国地图的省市切换
Vue+Echarts实现中国地图的省市切换首先要安装一下Echarts npm install echarts 在min.js中引入echarts import * as echarts from ...

echarts实现中国地图数据展示

echarts实现中国地图数据展示相关推荐

最新文章

热门文章