vue中，基于echarts 地图实现一个人才回流的大数据展示效果
0.引入echarts组件，和中国地图js
import eCharts from 'echarts'
import 'echarts/map/js/china.js'// 引入中国地图
1. 设置地图容器
<div id="ID_L2H1Map" style="width: 600px;height:400px;"></div>
2.调用echarts绘制地图
createEchart_2L1H1G (data) {
data = [
{ "name": "北京", "dataCount": [0, 1, 0, 0, 0, 0, 1], "id": "247" }, {
"name": "天津",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "248"
}, { "name": "河北", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "249" }, {
"name": "山西",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "250"
}, { "name": "内蒙古", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "251" }, {
"name": "辽宁",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "252"
}, { "name": "吉林", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "253" }, {
"name": "黑龙江",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "254"
}, { "name": "上海", "dataCount": [0, 1, 0, 0, 0, 0, 0], "id": "255" }, {
"name": "江苏",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "256"
}, { "name": "浙江", "dataCount": [0, 1, 0, 0, 0, 0, 0], "id": "257" }, {
"name": "安徽",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "258"
}, { "name": "福建", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "259" }, {
"name": "江西",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "260"
}, { "name": "山东", "dataCount": [14235, 820, 0, 35, 0, 0, 4], "id": "261" }, {
"name": "河南",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "262"
}, { "name": "湖北", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "263" }, {
"name": "湖南",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "264"
}, { "name": "广东", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "265" }, {
"name": "广西",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "266"
}, { "name": "海南", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "267" }, {
"name": "重庆",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "268"
}, { "name": "四川", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "269" }, {
"name": "贵州",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "270"
}, { "name": "云南", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "271" }, {
"name": "西藏",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "272"
}, { "name": "陕西", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "273" }, {
"name": "甘肃",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "274"
}, { "name": "青海", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "275" }, {
"name": "宁夏",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "276"
}, { "name": "新疆", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "277" }, {
"name": "台湾",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "278"
}, { "name": "香港", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "279" }, {
"name": "澳门",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "280"
}]
var chinaGeoCoordMap =
{
'黑龙江': [127.9688, 45.368,1],
'内蒙古': [110.3467, 41.4899,1],
'吉林': [125.8154, 44.2584,1],
'北京': [116.4551, 40.2539,2],
'辽宁': [123.1238, 42.1216,1],
'河北': [114.4995, 38.1006,1],
'天津': [117.4219, 39.4189,1],
'山西': [112.3352, 37.9413,1],
'陕西': [109.1162, 34.2004,1],
'甘肃': [103.5901, 36.3043,1],
'宁夏': [106.3586, 38.1775,1],
'青海': [101.4038, 36.8207,1],
'新疆': [87.9236, 43.5883,1],
'西藏': [91.11, 29.97,1],
'四川': [103.9526, 30.7617,1],
'重庆': [108.384366, 30.439702,1],
'山东': [117.1582, 36.8701,1],
'河南': [113.4668, 34.6234,1],
'江苏': [118.8062, 31.9208,1],
'安徽': [117.29, 32.0581,1],
'湖北': [114.3896, 30.6628,1],
'浙江': [119.5313, 29.8773,1],
'福建': [119.4543, 25.9222,1],
'江西': [116.0046, 28.6633,1],
'湖南': [113.0823, 28.2568,1],
'贵州': [106.6992, 26.7682,1],
'云南': [102.9199, 25.4663,1],
'广东': [113.12244, 23.009505,1],
'广西': [108.479, 23.1152,1],
'海南': [110.3893, 19.8516,1],
'上海': [121.4648, 31.2891,1],
'台湾': [120.991676054688, 24.7801149726563,1],
'澳门': [113.33, 22.11,1],
'香港': [114.15, 22.15,1]
}
for (let i=0;i<data.length;i++){
var da = chinaGeoCoordMap[data[i].name];
chinaGeoCoordMap[data[i].name]=[...da,...data[i].dataCount];
}
var chinaDatas = [
[{
name: '北京',
value: 2
}], [{
name: '黑龙江',
value: 1
}], [{
name: '内蒙古',
value: 1
}], [{
name: '吉林',
value: 1
}], [{
name: '辽宁',
value: 1
}], [{
name: '河北',
value: 1
}], [{
name: '天津',
value: 1
}], [{
name: '山西',
value: 1
}], [{
name: '陕西',
value: 1
}], [{
name: '甘肃',
value: 1
}], [{
name: '宁夏',
value: 1
}], [{
name: '青海',
value: 1
}], [{
name: '新疆',
value: 1
}], [{
name: '西藏',
value: 1
}], [{
name: '四川',
value: 1
}], [{
name: '重庆',
value: 1
}], [{
name: '山东',
value: 1
}], [{
name: '河南',
value: 1
}], [{
name: '江苏',
value: 1
}], [{
name: '安徽',
value: 1
}], [{
name: '湖北',
value: 1
}], [{
name: '浙江',
value: 1
}], [{
name: '福建',
value: 1
}], [{
name: '江西',
value: 1
}], [{
name: '湖南',
value: 1
}], [{
name: '贵州',
value: 1
}], [{
name: '广东',
value: 1
}], [{
name: '广西',
value: 1
}], [{
name: '云南',
value: 1
}], [{
name: '海南',
value: 1
}], [{
name: '上海',
value: 1
}], [{
name: '台湾',
value: 1
}], [{
name: '澳门',
value: 1
}], [{
name: '香港',
value: 1
}]
]
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = [chinaGeoCoordMap[dataItem[0].name][0], chinaGeoCoordMap[dataItem[0].name][1]];
var toCoord = [117.1582, 36.8701];
console.log(dataItem, fromCoord)
if (fromCoord && toCoord) {
res.push([{
coord: fromCoord,
value: dataItem[0].value
}, {
coord: toCoord,
}]);
}
}
return res;
};
let seriesA = []
seriesA.push(
{
type: 'lines',
zlevel: 1,
effect: {
show: true,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.3, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'pin', //箭头图标
symbolSize: 8, //图标大小
color: '#fff'
},
lineStyle: {
normal: {
color: '#15f43f',
width: 1,//尾迹线条宽度
opacity: .9, //尾迹线条透明度
curveness: .3 //尾迹线条曲直度
}
},
data: convertData(chinaDatas)
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: { // 涟漪特效
period: 4, // 动画时间，值越小速度越快
brushType: 'fill', // 波纹绘制方式 stroke, fill
scale: 6, // 波纹圆环最大限制，值越大波纹越大
color: '#a2ffa8' // 涟漪的颜色，默认为散点的颜色。
},
label: {
normal: {
show: true,
color: '#283c64',
position: 'top', // 显示位置
offset: [0, 0], // 偏移设置
formatter: function (params) { // 圆环显示文字
return params.data.name
},
fontSize: 13
},
emphasis: {
show: false
}
},
symbol: 'circle',
symbolSize: function (val) {
return 1 + val[2] * 5 // 圆环大小
},
itemStyle: {
show: false,
color: '#3ff4a9',
opacity: 1
},
data: chinaDatas.map(function (dataItem) {
return {
name: dataItem[0].name,
value: chinaGeoCoordMap[dataItem[0].name],
itemStyle: {
color: '#3ff4a9'
}
}
})
},
//被攻击点
{
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
label: {
normal: {
show: false,
position: 'right',
//offset:[5, 0],
color: '#0f0',
formatter: '{b}',
textStyle: {
color: "#0f0"
}
},
emphasis: {
show: true,
color: "#f60"
}
},
symbol: 'pin',
symbolSize: 0,
data: [{
name: '山东',
value: chinaGeoCoordMap['山东'].concat([10]),
}],
}
);
let aChart = eCharts.init(document.getElementById('ID_L2H1Map'))
let aOption = {
tooltip: {
show: true,
trigger: 'item',
backgroundColor: '#2e65fd',
borderColor: '#FFFFCC',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: function (params, ticket, callback) {
console.log(params)
// 根据业务自己拓展要显示的内容
var res = ''
var name = params.name
var value1 = params.value[params.seriesIndex + 3] || 0
var value2 = params.value[params.seriesIndex + 4] || 0
var value3 = params.value[params.seriesIndex + 5] || 0
var value4 = params.value[params.seriesIndex + 6] || 0
var value5 = params.value[params.seriesIndex + 7] || 0
var value6 = params.value[params.seriesIndex + 8] || 0
var value7 = params.value[params.seriesIndex + 9] || 0
res = "<span style='color:#fff'>" + name + '</span>' +
'<br/>' +
'<i class="icon icon-xuesheng"></i> 学生：' + value1+
'<br/>' +
'<i class="icon icon-laoshi_huaban"></i> 老师：'+value2+
'<br/>' +
'<i class="icon icon-baoanxiehui"></i> 青企协：'+value3+
'<br/>' +
'<i class="icon icon-rencaizhengce"></i> 青年企业家：'+value4+
'<br/>' +
'<i class="icon icon-investmentinstitutions"></i> 十强产业：'+value5+
'<br/>' +
'<i class="icon icon-caozuoyaoqingjiabin"></i> 峰会嘉宾：'+value6+
'<br/>' +
'<i class="icon icon-rencai"></i> 高端人才：'+value7
return res
}
},
backgroundColor: 'rgba(0,0,0,0)',
geo: {
map: 'china',
zoom: 1.2,
label: {
normal: {
color: '#1e2d4c'
},
emphasis: {
show: false
}
},
roam: false, // 是否允许缩放
itemStyle: {
normal: {
color: '#8dbeff', // 地图背景色
borderColor: '#5ea8ff', // 省市边界线00fcff 516a89
borderWidth: 1
},
emphasis: {
color: '#81acff' // 悬浮背景
}
}
},
series: seriesA
}
aChart.setOption(aOption)
aChart.on('click', this.showWinmap)
},
3.调用地图绘制方法：
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted () {
this.createEchart_2L1H1G(data)
},
4.展示效果
vue中，基于echarts 地图实现一个人才回流的大数据展示效果的更多相关文章
- 在vue中调用echarts中的地图散点图~
首先!当然是在vue中引入echarts! 命令行 npm install echarts --save 在main.js文件中里引入 import echarts from 'ech ...
- 在vue中使用echarts图表
在vue中使用echarts图表 转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...
- Vue中使用ECharts画散点图加均值线与阴影区域
[本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...
- VUE中集成echarts时 getAttribute of null错误
错误 错误场景一: 错误提示: 在运行Vue项目时出现了上述错误,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的,代码如下: // 基于准备好的dom,初始化echart ...
- 记录下vue 中引用echarts 出现 "TypeError: Cannot read property 'getAttribute' of undefined"问题
今天做项目,用echarts展示数据 ,自己测试 先测试 了下.写的代码html: <div ref="myChart" style="height:300px;w ...
- vue中使用echarts（vue+vue-cli+axios+jsonp+echarts）
一.安装echarts: cnpm i echarts -D 二.在vue-cli的main.js文件中引用echarts: import charts from 'echarts' Vue.prot ...
- vue中使用echarts的两种方法
在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...
- Vue中使用百度地图——设置地图标注
知识点:创建Map实例,为指定的位置设置标注 参考博客:https://www.cnblogs.com/liuswi/p/3994757.html 1.效果图:初始化地图,设置指定经纬度为地图中心点坐 ...
- vue中使用echarts 制作某市各个街道镇的地图
我要制作的是青州的各街道镇的地图,于是我上网搜,很感谢这篇文章的作者给的提点和帮助https://www.jianshu.com/p/7337c2f56876 现在我把自己的制作过程做个整理,以山东省 ...
随机推荐
- 胡昊—第6次作业—static关键字、对象
#题目1:编写一个类Computer,类中含有一个求n的阶乘的方法.将该类打包,并在另一包中的Java文件App.java中引入包,在主类中定义Computer类的对象,调用求n的阶乘的方法(n值由参 ...
- tornado下pandas ndarray乱试
from tornado.web import RequestHandler from pymongo import MongoClient import pandas,xlrd from panda ...
- PHP大文件上传断点续传解决方案
1.使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc) APC实现方法: 安装APC,参照官方文档安装,可以使 ...
- TTTTTTTTTTTTTT poj 1127 Jack Straws 线段相交+并查集
题意: 有n个木棍,给出木棍的两个端点的x,y坐标,判断其中某两个线段是否连通(可通过其他线段连通) #include <iostream> #include <cstdio> ...
- sh_06_元组基本使用
sh_06_元组基本使用 info_tuple = ("zhangsan", 18, 1.75, "zhangsan") # 1. 取值和取索引 print(i ...
- el-input和和filter结合实现实时搜索
<el-input placeholder="请选择日期" clearable prefix-icon="el-icon-search" v-model= ...
- JS框架_(Bootstrap.js)实现简单的轮播图
Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...
- phpfor函数和foreach函数
PHP for 循环 PHP While 循环 PHP 函数 PHP for 循环执行代码块指定的次数. PHP for 循环 如果您已经提前确定脚本运行的次数,可以使用 for 循环. 语法 for ...
- C++入门经典-例3.17-使用while循环进行计算
1:代码如下: // 3.17.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> usin ...
- win10上的docker怎么设置开机不要自动启动 [问题点数：20分，结帖人xyq1986]
次win开机都自动启动docker,感觉很耗资源,docker只是有时开发时需要用到,在docker的setting上的Start Docker Desktop when you log in取消了也 ...