VUE 中实现echarts江苏气泡图
效果图:
安装Echarts依赖
要在vue中使用Echarts 需要先安装依赖
npm install echarts --save
这是我的Echarts版本(据了解低版本的echarts,默认并没有地图相关数据)
"echarts": "^4.0.4"
引入Echarts 以及 地图数据
import echarts from 'echarts' import 'echarts/map/js/province/jiangsu'
地图数据在 根目录 node_modules > echarts > map 文件夹下
初始化Echarts
在 methods 中编写方法
methods: {
//加载中国飞线地图
loadChinaLineMap() {
var echarts = require('echarts');
var myCharts = echarts.init(document.getElementById('ChinaLineMap'));
let geoCoordMap = {
'苏州市': [120.585728, 31.2974],
'南通市': [120.894676, 31.981143],
'徐州市': [117.284124, 34.205768],
'常州市': [119.974061, 31.811226],
'无锡市': [120.31191, 31.491169],
'盐城市': [120.163107, 33.347708],
'连云港市': [119.221611, 34.596653],
'淮安市': [119.113185, 33.551052],
'南京市': [118.796682, 32.05957],
'镇江市': [119.425836, 32.187849],
'宿迁市': [118.275198, 33.963232],
'扬州市': [119.412939, 32.394209],
'泰州市': [119.922933, 32.455536]
};.....................................................................................................................................................................................................
在 mounted 中调用
mounted() {
this.loadChinaLineMap()
},
完整页面代码
<template>
<div class="min-body">
<div class="header">
<p class="til">江苏气泡地图</p>
<div class="time-box">{{time}}</div>
</div>
<div id="ChinaLineMap">
</div>
</div>
</template>
<script>
//import 'echarts/map/js/china' //引入中国地图
//import 'echarts/map/js/province/jiangsu.js';//引入江苏地图
import 'echarts/map/js/province/jiangsu'
//import * as api from '@/api/admin.js';
export default {
name: "jiangsuMap",
data: function () {
return {
time:''
}
},
created() {
this.loadTime()
},
mounted() {
this.loadChinaLineMap()
},
methods: {
//加载时间
loadTime(){
var that = this
//var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
setInterval(function () {
that.updateTime()
}, 1000);
that.updateTime()
},
updateTime(){
var that = this
var cd = new Date();
var time = that.zeroPadding(cd.getHours(), 2) + ':' + that.zeroPadding(cd.getMinutes(), 2) + ':' + that.zeroPadding(cd.getSeconds(), 2);
var date = that.zeroPadding(cd.getFullYear(), 4) + '年' + that.zeroPadding(cd.getMonth()+1, 2) + '月' + that.zeroPadding(cd.getDate(), 2) + '日 ';
that.time = date+" "+time
},
zeroPadding(num, digit) {
var zero = '';
for(var i = 0; i < digit; i++) {
zero += '0';
}
return (zero + num).slice(-digit);
},
//加载中国飞线地图
loadChinaLineMap() {
var echarts = require('echarts');
var myCharts = echarts.init(document.getElementById('ChinaLineMap'));
let geoCoordMap = {
'苏州市': [120.585728, 31.2974],
'南通市': [120.894676, 31.981143],
'徐州市': [117.284124, 34.205768],
'常州市': [119.974061, 31.811226],
'无锡市': [120.31191, 31.491169],
'盐城市': [120.163107, 33.347708],
'连云港市': [119.221611, 34.596653],
'淮安市': [119.113185, 33.551052],
'南京市': [118.796682, 32.05957],
'镇江市': [119.425836, 32.187849],
'宿迁市': [118.275198, 33.963232],
'扬州市': [119.412939, 32.394209],
'泰州市': [119.922933, 32.455536]
};
var data = [
{name: '徐州市',value:886},
{name: '泰州市',value:45},
{name: '镇江市',value:12},
{name: '苏州市',value:45},
];
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
console.log(geoCoord);
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
console.log(res);
return res;
};
let lineConvertData = function (data) {
let res = [];
for (let i = 0; i < data.length; i++) {
let dataItem = data[i];
let fromCoord = geoCoordMap[dataItem[0].name];
let toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord, toCoord]
});
}
}
return res;
};
let nJData = [
[{name: '无锡市', value: 20}, {name: '南京市', value: 100}],
[{name: '南通市', value: 80}, {name: '南京市', value: 100}],
[{name: '苏州市', value: 60}, {name: '南京市', value: 100}],
[{name: '淮安市', value: 40}, {name: '南京市', value: 100}],
[{name: '徐州市', value: 100}, {name: '南京市', value: 100}],
[{name:'宿迁市',value:100}, {name:'南京市',value:100}],
[{name:'连云港市',value:100}, {name:'南京市',value:100}],
[{name:'盐城市',value:100}, {name:'南京市',value:100}],
[{name:'扬州市',value:100}, {name:'南京市',value:100}],
[{name:'泰州市',value:100}, {name:'南京市',value:100}],
[{name:'镇江市',value:100}, {name:'南京市',value:100}],
[{name:'常州市',value:100}, {name:'南京市',value:100}]
];
let option = {
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 0.2,
formatter: function (params) {
let value = (params.value + '').split('.');
value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
return params.seriesName + '<br/>' + params.name + ': ' + value;
}
},
visualMap: {
left: 'left',
min: 500000,
max: 3800000,
inRange: {
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
},
text:['High','Low'],
calculable: true,
show: false
},
geo: {
map: '江苏',
label: {
emphasis: {
show: false
}
},
zoom: 1.2,
roam: false,
itemStyle: {
normal: {
borderColor: '#3b56b5',
borderWidth:2,
areaColor:'rgba(0,0,0,0)',
shadowColor:'#2485af',
shadowBlur:20
},
emphasis: {
areaColor: 'green'
}
}
},
series: [
{
name:'',
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 6,
trailLength: 0.1,
// symbol: planePath,
symbol: 'arrow',
symbolSize: 5
},
lineStyle: {
normal: {
color: '#01B4F1',
width: 1,
opacity: 0.4,
curveness: 0.2
}
},
data: lineConvertData(nJData)
},
{
name:'jiangsu',
type: 'map',
map: '江苏',
mapType: 'jiangsu',
zlevel:0,
zoom:1.2,
selectedMode:'single',
itemStyle: {
normal: {
label: {
show: true
},
borderWidth:.5,
borderColor:'#009fe0',
areaColor:'#C4EDFA'
},
emphasis:{
borderWidth:1.5,
borderColor:'#009fe0',
shadowColor:'#FC8A4E',
shadowBlur:10,
areaColor:'#1f94fb'
}
},
data:[
{name: '南京市', value: 9},
{name: '常州市', value: 731449},
{name: '徐州市', value: 6553255},
{name: '淮安市', value: 2949131},
{name: '南通市', value: 38041430},
{name: '宿迁市', value: 5187582},
{name: '无锡市', value: 3590347},
{name: '扬州市', value: 917092},
{name: '盐城市', value: 632323},
{name: '苏州市', value: 1931751},
{name: '泰州市', value: 9919945},
{name: '镇江市', value: 1392313},
{name: '连云港市', value: 1595728}
]
},
{
name: '',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: 50,
label : {
normal : {
show : true,
textStyle : {
color : '#fff',
fontSize : 9
},
formatter:function(value){
var r = '';
if(value.data.value[2]>100000000){//亿
r = (value.data.value[2]/100000000).toFixed(1) + '亿';
}else if(value.data.value[2]>10000000){//万
r = (value.data.value[2]/10000000).toFixed(1) + '千万';
}else if(value.data.value[2]>10000){//万
r = (value.data.value[2]/10000).toFixed(1) + '万';
}else{
r = value.data.value[2]+'万';
}
return r;
}
}
},
itemStyle : {
// normal : {
// color :'' // 鏍囧織棰滆壊
// }
normal : {
color : function(params) {
console.log(params);
var colorList = [ '#f7c12e','#f7962e', '#f7622e','#f7412e'];
// if(params.data.value[2]>0&¶ms.data.value[2]<30.99){
// colorList.push('#f7c12e');
// }else if(params.data.value[2]>30.99&¶ms.data.value[2]<59.99){
// colorList.push('#f7962e');
// }else if(params.data.value[2]>59.99&¶ms.data.value[2]<90.01){
// colorList.push('#f7622e');
// }else if(params.data.value[2]>90.01){
// colorList.push('#f7412e');
// }
console.log(colorList);
//return colorList[params.dataIndex%colorList.length];
return colorList[0];
}
}
},
//zlevel: 6,
data: convertData(data),
// data:[
// {name:'徐州市',value:[117.284124, 34.205768,34]}
// ]
}
]
};
myCharts.setOption(option)
}
}
}
</script>
<style lang="scss" scoped>
#ChinaLineMap{
width: 100%;
height:calc(100% - 7vh);
}
.min-body {
width: 100%;
height: 100%;
overflow: hidden;
background: #010827;
.header {
position: relative;
height: 6vh;
background-color: #cccccc33;
background: url("~@/assets/img/top-bg.png") no-repeat;
background-size: 100% 100%;
user-select: none;
.til {
width: 100%;
font-size: 2.2vw;
font-weight: bold;
text-align: center;
line-height: 6vh;
letter-spacing: 0.3vw;
color: #fff;
margin: 0;
}
.til:before {
content: '';
display: inline-block;
width: 5vh;
height: 5vh;
margin-right: 1vw;
vertical-align: middle;
}
.time-box{
font-size: 1.3vw;
letter-spacing: 0.2vw;
color: #00FFFF;
font-weight: normal;
position: absolute;
top: 2.2vh;
right: 1vw;
z-index: 100;
}
}
}
</style>
感谢阅读,欢迎订阅!!!更多echarts数据可视化图表请持续关注!!!