vue + echarts 实现中国地图 展示城市
Demo
安装依赖
vue中安装echarts
npm install echarts -S
在main.js中引用
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
默认情况下,使用map事,因为事china地图,所以展示出来或者匹配的城市名称,只有声,城市是不参与的(北京、上海...这些独立市是例外)
所以,想要正常展示出你的城市数据,需要引入echarts的城市js或json
引入城市json
为了防止echarts还没加载完,我就开始加载页面,我是在我使用到的页面内引入的echarts,属于局部引入了
可以看到,城市json我已经引入了,要想知道有没有正常引入,在mounted中,将city打印出来就可以了
地图初始化的methods
这是我的地图展示的源码,当鼠标放在地图上时,会展示相关信息
chinaConfigure() {
var _this = this
let myChart = echarts.init(this.$refs.platform); //这里是为了获得容器所在位置
var geoCoordMap = {};
var mapName = 'china'
myChart.showLoading();
var mapFeatures = city.features;
myChart.hideLoading();
mapFeatures.forEach(function(v) { // 地区名称
var name = v.properties.name; // 地区经纬度
geoCoordMap[name] = v.properties.cp;
});
var data = []
data = this.mapData
var max = 480,
min = 9; // todo
var maxSize4Pin = 100,
minSize4Pin = 20;
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
count: data[i].count,
value: geoCoord.concat(data[i].value),
});
}
}
console.log(geoCoord)
return res;
};
window.onresize = myChart.resize;
myChart.setOption({ // 进行相关配置
backgroundColor: "transparent",
tooltip: {
trigger: "item",
backgroundColor: "#1540a1",
borderColor: "#FFFFCC",
showDelay: 0,
hideDelay: 0,
enterable: false,
transitionDuration: 0,
extraCssText: "z-index:100",
formatter: function(params, ticket, callback) {
// if (ticket.indexOf('散点') != -1) {
let index = params.dataIndex
console.log(this.mapData)
let name = params.name
var tipHtml = '';
tipHtml =
'<div style="width:280px;height:200px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">' +
'<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);padding:0 20px">' +
'<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:40px;">' +
'</i>' + '<span style="margin-left:10px;color:#fff;font-size:16px;">' + name + '</span>' +
'</div>' + '<div style="padding:20px">' + '<p style="color:#fff;font-size:12px;">' +
'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
'</i>' + '机器总数:' + '<span style="color:#f48225;margin:0 6px;">' + _this.mapData[index].count +
'</span>' +
'个' + '</p>' + '<p style="color:#fff;font-size:12px;">' +
'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
'</i>' + '正常运行机器数:' + '<span style="color:#f48225;margin:0 6px;">' + _this.mapData[index].good +
'</span>' +
'个' + '</p>' + '<p style="color:#fff;font-size:12px;">' +
'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
'</i>' + '待修机器数:' + '<span style="color:#f48225;margin:0 6px;">' + _this.mapData[index].bad +
'</span>' +
'个' + '</p>' + '</div>' + '</div>';
return tipHtml;
// } }
},
visualMap: {
show: false,
min: 0,
max: 200,
left: '10%',
top: 'bottom',
calculable: false,
seriesIndex: [1],
inRange: {
color: ['#04387b', '#467bc0']
}
},
geo: {
map: mapName,
label: {
normal: {
show: false
},
emphasis: {
show: true
},
color: '#fff'
},
roam: true,
zoom: .6,
scaleLimit: { //所属组件的z分层,z值小的图形会被z值大的图形覆盖
min: .6, //最小的缩放值
},
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: "180%",
itemStyle: {
normal: {
areaColor: '#0083ce', //地图颜色
borderColor: '#0066ba' //省份边界颜色
},
emphasis: {
borderColor: '#0066ba', //选中省份边界颜色
areaColor: "#0494e1", //选中省份颜色
shadowColor: 'rgba(0, 0, 0, 0.4)', //选中省份投影
shadowBlur: 10
}
}
},
series: [{
name: '散点',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(this.mapData),
rippleEffect: {
//涟漪特效
period: 4, //动画时间,值越小速度越快
brushType: "stroke", //波纹绘制方式 stroke, fill
scale: 4 //波纹圆环最大限制,值越大波纹越大
},
hoverAnimation: true,
symbolSize: 5,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: '#fff'
}
}
}, {
name: '散点',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(this.mapData.sort(function(a, b) {
return b.count - a.count;
}).slice(0, 5)),
symbolSize: 8,
showEffectOn: 'render',
rippleEffect: {
//涟漪特效
period: 3, //动画时间,值越小速度越快
brushType: "stroke", //波纹绘制方式 stroke, fill
scale: 4 //波纹圆环最大限制,值越大波纹越大
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'left',
show: false
}
},
itemStyle: {
normal: {
color: 'yellow',
shadowBlur: 10,
shadowColor: 'yellow'
}
},
zlevel: 1
}]
})
},
注:
我用到的数据mapData,你可以根据自己的需求修改为自己想要的数据格式:
this.mapData = [
{name: "石家庄", number: 102, count: 2457, good: 2313, bad: 144},
{name: "秦皇岛", number: 169, count: 1931, good: 1869, bad: 62},
{name: "唐山", number: 164, count: 1291, good: 1200, bad: 91},
{name: "保定", number: 157, count: 2142, good: 2098, bad: 44},
{name: "太原", number: 256, count: 2331, good: 2070, bad: 261},
{name: "大同", number: 128, count: 2699, good: 2556, bad: 143},
{name: "阳泉", number: 136, count: 1277, good: 1051, bad: 226},
{name: " 呼和浩特", number: 138, count: 2108, good: 2085, bad: 23},
{name: "韶关", number: 266, count: 2734, good: 2609, bad: 125},
{name: "长沙", number: 133, count: 2938, good: 2746, bad: 192},
{name: "郴州", number: 252, count: 1604, good: 1306, bad: 298},
{name: "娄底", number: 270, count: 2885, good: 2639, bad: 246},
{name: " 武汉", number: 211, count: 1121, good: 964, bad: 157},
{name: "黄石", number: 120, count: 2534, good: 2432, bad: 102},
{name: "十堰", number: 125, count: 1581, good: 1540, bad: 41},
{name: "荆州", number: 186, count: 2926, good: 2730, bad: 196},
{name: " 郑州", number: 121, count: 1787, good: 1662, bad: 125}
]
细节部分 可以一起探讨哦
vue + echarts 实现中国地图 展示城市的更多相关文章
- 基于Echarts的中国地图数据展示
发布时间:2018-10-31 技术:javascript+html5+canvas 概述 基于echarts的大数据中国地图展示,结合API定制,开发样式,监听鼠标事件,实现带参数路由跳转等 ...
- 小程序Echarts 构建中国地图并锚定区域点击事件
小程序Echarts 构建中国地图并锚定区域点击事件 Step1 效果展示 使用的绘图框架为 Echarts for Wexin 具体API文档地址请点击 ----> Step2 条件准备 1. ...
- vue使用echart中国地图
/* 引入 ECharts (按需加载) 文档:http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD ...
- echarts实现中国地图数据展示
在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...
- vue中echarts引入中国地图
<div id="myChartChina" :style="{width: '100%', height: '500px'}"></div& ...
- Vue 实现一个中国地图
参考:https://www.cnblogs.com/mazey/p/7965698.html 重点:如何引入中国地图js文件,china.js require('echarts/map/js/chi ...
- 用echarts绘制中国地图
在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...
- vue + echart 实现中国地图 和 省市地图(可切换省份)
一.中国地图 1.先导入echarts,然后再main.js里引入echarts // 引入echartsimport echarts from 'echarts'Vue.prototype.$ech ...
- echarts.制作中国地图,点击对应的省市链接到该省份的详细介绍
今天花了一天的时间,用echart弄了一个效果,是从中国地图点进去身份并把改省份的数据渲染出来的效果,刚开始完全没有头绪,只能硬着头皮去看百度echart的api,和博客,看了半天,好家伙,终于给我找 ...
随机推荐
- JDK的新特性
JDK5新特性 a,自动拆装箱 b,泛型 c,可变参数 d,静态导入 e,增强for循环 f,互斥锁 g,枚举 JDK7新特性 * A:二进制字面量 * B:数字字面量可以出现下划线 * C:swit ...
- Windows 7开发:UAC数据重定向 - Win32 Native
Windows 7开发:UAC数据重定向 - Win32 Native 目标 本动手实验中,您将会学习如何: • 故障排除一个文件重定向 问题 • 使用Process Monitor查找引起问题的根本 ...
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_17-CMS前端工程创建-单页面应用介绍
查看运行起来的页面的源代码 这个webpck打包生成的文件. 单页面应用的优缺点: 优点: 1.用户操作体验好,用户不用刷新页面,整个交互过程都是通过Ajax来操作. 2.适合前后端分离开发,服务端提 ...
- [Scikit-learn] 2.3 Clustering - kmeans
参考: 2.3. Clustering 2.4. Biclustering 2.1.2.3. The Dirichlet Process Clusering, GMM, Variational Inf ...
- Python查询Mysql时返回字典结构的代码
Python查询Mysql时返回字典结构的代码 MySQLdb默认查询结果都是返回tuple,输出时候不是很方便,必须按照0,1这样读取,无意中在网上找到简单的修改方法,就是传递一个cursors.D ...
- jprofile 远程监控linux上的jvm
环境 客户端:win7+jprofiler_windows-x64_10_0_4.exe linux服务器:tomcat7+jdk1.7+jprofiler_linux_10_0_4.sh 一.客户端 ...
- 19 个让 MySQL 效率提高 3 倍的 SQL 优化技巧
优化成本: 硬件>系统配置>数据库表结构>SQL及索引 优化效果: 硬件<系统配置<数据库表结构<SQL及索引 本文我们就来谈谈 MySQL 中常用的 SQL 优化 ...
- MapReduce程序的开发过程
1. 在linux(虚拟机环境)下安装hadoop2.8.3 1.1 安装JDK环境 1.2 安装hadoop 1.3 进行配置:core-site.xml,hdfs-site.xml设置 1.4 初 ...
- MATLAB 2016b + CUDA10.1 +MatConvNet beta25 安装踩坑记
最近因为目标跟踪实验需要得安装MatConvNet,由于已经是2019年了大家的软件版本肯定不可能是像官网要求的那样,所以安装自然而然就会碰到很多问题.在这一过程中我参考了网上很多博主的经验,有些确实 ...
- 记录下关于RabbitMQ常用知识点(持续更新)
1.端口及说明: 4369 -- erlang发现口 5672 --client端通信口 15672 -- 管理界面ui端口 25672 -- server间内部通信口 举例说明 我们访问Rabbit ...