前端html制作中国地图,echarts实现中国地图
最近项目中有个需求:在地图上展示各省市的数据分布,像这样:
项目中接入的图表展示工具是echart,查了echart官网,发现并没有中国地图相关的实现,唯一接近的,只有香港18区人口密度。没办法,只能求助万能的google了。搜索了一圈,最终发现了w3cschool的中国地图实现,实现代码如下:
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title : {
text: 'iphone销量',
subtext: '纯属虚构',
left: 'center'
},
tooltip : {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
data:['iphone']
},
visualMap: {
min: 0,
max: 2500,
left: 'left',
top: 'bottom',
text:['高','低'], // 文本,默认为数值文本
calculable : true
},
toolbox: {
show: true,
orient : 'vertical',
left: 'right',
top: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name: 'iphone',
type: 'map',
mapType: 'china',
roam: false,
label: {
normal: {
show: false
},
emphasis: {
show: true
}
},
data:[
{name: '北京',value: Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '重庆',value: Math.round(Math.random()*1000)},
{name: '河北',value: Math.round(Math.random()*1000)},
{name: '河南',value: Math.round(Math.random()*1000)},
{name: '云南',value: Math.round(Math.random()*1000)},
{name: '辽宁',value: Math.round(Math.random()*1000)},
{name: '黑龙江',value: Math.round(Math.random()*1000)},
{name: '湖南',value: Math.round(Math.random()*1000)},
{name: '安徽',value: Math.round(Math.random()*1000)},
{name: '山东',value: Math.round(Math.random()*1000)},
{name: '新疆',value: Math.round(Math.random()*1000)},
{name: '江苏',value: Math.round(Math.random()*1000)},
{name: '浙江',value: Math.round(Math.random()*1000)},
{name: '江西',value: Math.round(Math.random()*1000)},
{name: '湖北',value: Math.round(Math.random()*1000)},
{name: '广西',value: Math.round(Math.random()*1000)},
{name: '甘肃',value: Math.round(Math.random()*1000)},
{name: '山西',value: Math.round(Math.random()*1000)},
{name: '内蒙古',value: Math.round(Math.random()*1000)},
{name: '陕西',value: Math.round(Math.random()*1000)},
{name: '吉林',value: Math.round(Math.random()*1000)},
{name: '福建',value: Math.round(Math.random()*1000)},
{name: '贵州',value: Math.round(Math.random()*1000)},
{name: '广东',value: Math.round(Math.random()*1000)},
{name: '青海',value: Math.round(Math.random()*1000)},
{name: '西藏',value: Math.round(Math.random()*1000)},
{name: '四川',value: Math.round(Math.random()*1000)},
{name: '宁夏',value: Math.round(Math.random()*1000)},
{name: '海南',value: Math.round(Math.random()*1000)},
{name: '台湾',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳门',value: Math.round(Math.random()*1000)}
]
}
]
};;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
关于中国地图的js文件,echart官方github也有提供,可以在这里下载。
另外,如果想更加精细化定制地图的展示,可参考官方文档。
附上本人项目中最终处理效果:
前端html制作中国地图,echarts实现中国地图相关推荐
- html画布上海地图,echarts绘制上海地图
效果图: var myChart = echarts.init(document.getElementById('main')); var option = { title: { text : '上海 ...
- 高德地图+Echarts+Vue
@[TOC]高德地图+Echarts+Vue 高德地图+Echarts+Vue 先上效果图 1.创建后vue项目后下载echarts和高德地图插件 npm install amap-echarts n ...
- Echarts省市区县级地图JSON文件下载
最近项目中部分统计页面需要使用地图资源,考虑到已经引用Echarts组件,所以参考echarts的地图进行制作. 然而echarts目前只有地图的相关demo,并没有提供相对应的完整的区域JSON文件 ...
- Echarts实现中国地图完整示例
Echarts实现中国地图完整示例及js文件 有问题大家可以留言或私信我 公司是有一个产品,销量遍布全国. 近期要求制作一个***中国地图来显示所有省份的销量***,要有一个***滚动显示每个省的销量 ...
- echarts实现中国地图和各省市地图
echarts实现中国地图 我会把china.js和各省市的js以及json上传资源,有需要的可以下载 首先引入echarts.js和china.js <!DOCTYPE html> &l ...
- 使用echarts完成中国省市区县镇地图展示
目录 前言 一.中国地图 1.1 地图数据-china.js 1.2 代码应用 二.省份地图--以山东为例,其他省份同理 2.1 地图数据-shandong.js 2.2 代码应用 三.市级地图--以 ...
- echarts的中国地图,点击进入省级地图,点击省级地图,返回中国地图
先上效果图, 鼠标放上去时的效果,如下图所示: 点击进入到的省级地图,如下图所示: 中国地图,鼠标放上去时的代码: myChart.on('mouseover', function (params) ...
- 【vue】vue + ECharts 实现中国地图
1.效果图: 2.实现步骤 引入ECharts ECharts 官网地址:https://echarts.apache.org/zh/index.html npm install echarts -- ...
- echarts实现中国地图各省背景根据数值大小变化的方法
很多人不清楚中国地图要怎么实现,其实 echarts 已经为我们封装好了,只要我们配置好各省数据就可以快捷实现了. 首先我们先来实现中国地图: 中国地图的实现 (1)引入 echarts 及中国地图 ...
- Echarts实现——中国地图
Echarts实现--中国地图 如下图: 使用Echarts进行地图绘制展示的时候,需要china.json: 举例在vue的项目中可以通过cnpm install echarts --save安装E ...
最新文章
- tensorflow学习函数笔记
- php 第三方DB库NOTORM
- 函数或变量 rtenslearn_c 无法识别_Stata:过度识别检验一文读懂
- do while(false)
- linux grunt环境,安装 Grunt - Grunt: JavaScript 世界的构建工具 | Grunt 中文网
- webgl坐标转换_OpenGL/WebGL顶点坐标变换过程简介
- java 并列排名,178. 分数排名
- mysql 5.7 数据库备份_MySQL5.7.20数据库备份与恢复
- 26日直播预告丨 经典知识库:ASM元数据简介及案例分享
- Oracle全文索引之四 维护
- 车载系统华山论剑:Ali OS、Android、QNX孰优孰劣
- Android学习小Demo(19)利用Loader来实时接收短信
- yum 安装 tomcat
- 经济学人The Economist学习(笔记词汇)Day1
- 流利说英语level4_英语流利说懂你英语 Level4 Unit1 Part1 Vocabulary
- Matlab水果识别——基于形态学处理的水果识别
- intel dpdk api rte_eal_hpet_init() 函数介绍
- rr分布 matlab,讲解:E471、Econometric Theory、R、RR|Matlab
- 如何构建自我的认知系统
- 百度人脸识别搜索是怎么实现的
热门文章
- 硬座、软座、硬卧、软卧、以及餐车座
- LaTeX笔记(二)(开篇)
- 新茶饮的尽头是瓶装水?
- Unity Kinect体感跑酷互动游戏方案
- “贵人”相助,亚马逊云科技APN成员乘风破浪
- 提示:请安装TCP/IP协议.error=10106。解决方案
- vue 项目完美运行在IE或者360浏览器兼容模式下 踩坑笔记
- 手动实现简易版小区快递柜管理系统 Version 0.1.1
- 百度、谷歌高德等网络地图经纬度偏差纠正以及相关坐标系问题
- 史上最纯净的Win7专业版系统