vue+echarts实现摩天轮大图效果。主要是包含echarts的散点图及迁徙图共同组成
1、在项目main.js中引入echarts
整个大图的绘制需要用到地图，所以还需要引入一个地图相关的依赖，此处以引入重庆为例
import Echarts from 'echarts'
import 'echarts/map/js/province/chongqing.js'
Vue.prototype.echarts = Echarts
Vue.use(Echarts)
2、新建vue组件，准备好先关的echarts图表容器
<template>
<div class="main">
<div id="motianlun" style="width:100%;height:800px"></div>
</div>
</template>
3、准备数据，从后端获取数据时保证将数据处理成格式一致即可，此处以静态数据为例，数据主要包含以下五类
（1）各个点的坐标信息，例：
echartOption.geoCoordMap = { "共享交换平台":[106.508319177554,29.5996628748326]}
（2）与中心点无交流的位置信息，例：
echartOption.accessdata = [ [{name:'共享交换平台'},{name:'市统计局',value:20}]]
（3）与中心点无交流的位置信息，例：
echartOption.sumdata= [ [{name:'共享交换平台'},{name:'市统计局',value:20}]]
（4）中心点交流出去的位置信息，相当于迁出数据例：
echartOption.outData= [ [{name:'共享交换平台'},{name:'市统计局',value:20}]]
（5）外界交流进来的位置信息，相当于迁入数据例：
echartOption.inData= [ [{name:'市统计局',value:20},{name:'共享交换平台'}]]
（6）所有位置名称
echartOption.sequence = [ "市财政局","市经济信息委","市市政委","市统计局","市园林局",];
4、在vue组件中定义加载地图获取图表数据及绘制图表的方法，具体计算点位信息的方法代码中已有注释，有点长，复制即用
首先必须引入包含数据和echarts配置项的echartOption.js文件
5、直接上代码吧
vue组件
<template>
<div class="main">
<div id="motianlun" style="width:100%;height:800px"></div>
</div>
</template>
<script>
import echarts from "echarts"
import { echartOption,convertData,getData,mapOption} from "../utils/echartOption";
var geoCoordMap = echartOption.geoCoordMap;
var sequence = echartOption.sequence;
var outData=echartOption.outData;
var inData=echartOption.inData
var series = null;
//全局chart，防止chart重复初始化
var chart = {
mapChart: null,
};
export default {
data(){
return {
}
},
mounted(){
this.init()
},
methods:{
init(){
let self=this;
self.$nextTick(()=>{
self.loadMap();
})
},
//加载地图，计算地图相关点位
loadMap(){
let self=this;
var accessdata = echartOption.accessdata;
var sumdata = echartOption.sumdata;
var x = 106.508319177554;
var y = 29.5996628748326;
var radius = 0;
var items=sequence;
//计算点的位置
for (var i = 0; i < items.length; i++) {
var x1, y1 = 0;
if (items.length <= 20) {//第一圈
radius = Math.PI * ((360 / items.length) / 180);
x1 = x + 0.006 * Math.cos(radius * i);//0.006这个数值越大，圆越大
y1 = y + 0.0054 * Math.sin(radius * i);//x对应的值（0.006）大于y对应的值（0.0054）的时候越圆，调整圆形大小以及椭圆程度可通过成倍计算来调整，另外还有option里面的zoom调整
} else if (i <= 20) {//第一圈
radius = Math.PI * (1 / 10);
x1 = x + 0.006 * Math.cos(radius * i);
y1 = y + 0.0054 * Math.sin(radius * i);
} else {//第二圈
radius = Math.PI * ((360 / (items.length - 21)) / 180);
x1 = x + 0.012 * Math.cos(radius * i);
y1 = y + 0.009 * Math.sin(radius * i);
}
geoCoordMap[items[i]] = [x1, y1];
}
for (var cc = 0; cc < sumdata.length; cc++) {
var item1 = sumdata[cc];
for (var dd = 0; dd < accessdata.length; dd++) {
if (item1[1].name === accessdata[dd][1].name) {
sumdata.splice(cc, 1);
cc--;
}
}
}
self.$nextTick(()=>{
chart.mapChart = chart.mapChart || echarts.init(document.getElementById('motianlun'));
chart.mapChart.on("mousemove", function () {
self.clearTimer();
echartOption.showOutData = false;
});
chart.mapChart.on("mouseover", function () {
self.clearTimer();
echartOption.showOutData = false;
});
chart.mapChart.on("mouseout", function () {
self.clearTimer();
self.beginTimer(chart.mapChart, seriesIndexArray);
echartOption.showOutData = true;
});
self.initData(chart.mapChart, accessdata, sumdata);
})
// //定时刷新
// setInterval(function () {
// initData(chart.mapChart, accessdata, sumdata);
// }, 30*60* 1000);
},
//获取数据
initData(mapChart, accessdata, sumdata){
series = [];
var visitDept = null,belongDept=null;
outData=echartOption.outData;
inData=echartOption.inData
this.drawCharts(mapChart,outData,sumdata,accessdata,inData);
},
//绘制图表
drawCharts(mapChart,outData,sumdata,accessdata,inData){
var pointColor = ['#27A5EA', '#CFCFCF', '#27A5EA', '#F8C021'];//点的颜色设置
var lineColor = ['#27A5EA', '#CFCFCF', '#27A5EA', '#F8C021'];//线的颜色设置
var show = [true, false, false, true];
var opacity = ['0.6', '0', '0.6', '0.6'];
var width = ['2', '0', '0', '2'];
[['资源调用', outData], ['未共享部门', sumdata], ['资源未共享', accessdata], ['资源共享', inData]].forEach(function (item, i) {
series.push({
name: item[0],
type: 'lines',
zlevel: 1,
effect: {
show: show[i],
period: 6,
trailLength: 0.7,
color: '#fff',
symbolSize: 3
},
lineStyle: {
normal: {
color: lineColor[i],
width: 0,
curveness: 0.2
}
},
data: convertData(item[1])
},
{
name: item[0],
type: 'lines',
zlevel: 2,
symbol: ['none', 'none'],
symbolSize: 10,
effect: {
show: show[i],
period: 6,
trailLength: 0,
symbol: "circle",
symbolSize: 6
},
lineStyle: {
normal: {
color: lineColor[i],
width: width[i],
opacity: opacity[i],
curveness: 0.2
}
},
data: convertData(item[1])
},
{
name: '',
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: function (val) {
if (val) {
if (val[0] === 106.508319177554) {
return 20;
} else {
return 12;
}
}
},
tooltip: {
trigger: 'item'
},
itemStyle: {
normal: {
color: pointColor[i]
}
},
data: getData(item[1], geoCoordMap)
});
});
mapChart.setOption(mapOption(series), true);
},
}
}
</script>
<style>
.main{
background-color: #0D131C;
}
</style>
echartOption.js
let echartOption = {};
echartOption.showOutData = true;
let option={};
/* 运行状态图 */
export const mapOption = function(series) {
return option = {
title : {
left: 'left',
textStyle : {
color: '#fff',
fontFamily: "Microsoft YaHei"
}
},
tooltip : {
trigger: 'item',
textStyle: {
fontSize: 12
},
enterable:true,
padding:[0,0,0,0],
backgroundColor:255,
formatter: function (params) {
var res ="";
if(params.data.resList) {
var d = params.data.resList;
var out = params.data.outResList;
var maxNum = 16;
var tHeight = $("#realtimemapdiv").height();
var tWidth = $("#realtimemapdiv").width();
var content = '';
content +='<li style="color: #ffa022 ;display: none;"></li>';
var ttContent = "";
ttContent +='<li style="color: #ffa022 ;display: none;"></li>';
for(var i = 0,len = d.length;i<len;i++) {
if (params.data.type == "服务共享") {
content+='<li style="color:#b6dc53;">'+ d[i]+'</li>';
} else {
content+='<li style="color: #ffa022">'+ d[i]+'</li>';
}
}
if (echartOption.showOutData) {
if(out!=undefined && out.length > 0) {
for(var j=0;j< out.length;j++) {
content+='<li style="color: #ffa022">'+ out[j]+'</li>';
}
}
}
res +='<div id="show-content" style="max-width:'+tWidth/2+'px;max-height:'+ tHeight/2 +'px;"> ' +
'<div class="tag"></div>'+
'<ul style="margin:10px 0 0 15px;>' + content +'</ul>' +
'</div>';
}
return res;
}
},
legend: {
orient: 'vertical',
top: 'bottom',
left: 'right',
data:['资源调用', '资源共享','未共享部门'],
textStyle: {
color: '#fff'
},
selectedMode: 'multiple'
},
geo: {
map: '重庆',
label: {
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#404a59',
opacity: 0
},
emphasis: {
areaColor: '#323c48',
opacity: 0
}
},
center:[106.509319177554,29.5996628748326],
zoom:260//缩放级别，可调整圆的大小
},
series: series
};
};
echartOption.geoCoordMap = {
"共享交换平台":[106.508319177554,29.5996628748326],
"市发展改革委":[106.504825827209,29.6048191595445],
"市财政局":[106.508117367231,29.6058211961393],
"市规划局":[106.512808968323,29.596344324465],
"市经济信息委":[106.510164829493,29.6054408915199],
"市教委":[106.498557472391,29.602082533647],
"市中小企业局":[106.498267472391,29.600782533647],
"市旅游局":[106.49814242189,29.5995017351916],
"市应急办":[106.49824242189,29.5982960914099],
"市科委":[106.518259943196,29.5981316169659],
"市城乡建委":[106.510274428029,29.5943769036019],
"市交委":[106.511764286861,29.5952537684448],
"市农委":[106.504347845192,29.5952670847922],
"市商务委":[106.498481595725,29.5970960914099],
"市公安局":[106.50191692238,29.6074992450774],
"市国安局":[106.518391836273,29.5997864731299],
"市民政局":[106.506266168769,29.5942466722155],
"市司法局":[106.503276065934,29.6084696932864],
"市人力社保局":[106.5135235668,29.5911125943844],
"市国土房管局":[106.50361682953,29.6037737887371],
"市环保局":[106.502502457075,29.5979144497373],
"市市政委":[106.511599580679,29.6046539370033],
"市水利局":[106.514032372341,29.5998790369308],
"市文化委":[106.506302495258,29.6096033540615],
"市卫生计生委":[106.503286532607,29.5963777782105],
"市民宗委":[106.500088320128,29.605592934548],
"市地税局":[106.508283791072,29.5939765087508],
"市工商局":[106.513719333674,29.5980841717286],
"市质监局":[106.517123148728,29.6045437689036],
"市体育局":[106.516215054605,29.6059465771466],
"市安监局":[106.508120222417,29.6098043520334],
"市食品药品监管局":[106.499666118215,29.5945767653721],
"市林业局":[106.502149403749,29.5998267085643],
"市统计局":[106.512866433779,29.6034083769136],
"市金融办":[106.515053865118,29.607213421586],
"市民防办":[106.498929972611,29.5958854217108],
"市物价局":[106.50658835208,29.58979812346],
"市煤管局":[106.504748222641,29.6091575351066],
"市园林局":[106.513765271685,29.6015637435504],
"市档案局":[106.501767817377,29.5920626530269],
"市国资委":[106.510167746473,29.6096352581],
"市政府办公厅":[106.506210266559,29.6055044563321],
"市审计局":[106.517795408929,29.603079422302],
"市移民局":[106.502502052653,29.6019582155748],
"市知识产权局":[106.517837037131,29.5964459266914],
"市扶贫办":[106.504666518811,29.5903497751953],
"市烟草局":[106.511841008717,29.5903009681378],
"市网信办":[106.503112648846,29.5910998709507],
"市政府新闻办":[106.51615124912,29.5934002182731],
"市地震局":[106.518237174491,29.6014732539719],
"市国税局":[106.508356299747,29.5896535680203],
"市气象局":[106.511857606784,29.609162219227],
"市政府口岸办":[106.499328539736,29.6045438331365],
"市综治办":[106.500878432908,29.6065515071299],
"人行重庆营管部":[106.515033654807,29.5922415016889],
"市邮政管理局":[106.517107620221,29.5948174562354],
"市通信管理局":[106.513654702812,29.60826896946],
"市编办":[106.510164333204,29.5898251939874],
"市盐务局":[106.500609450024,29.5932113369873],
"市供销总社":[106.498778539736,29.6032438331365]
};
echartOption.accessdata = [
[{name:'共享交换平台'},{name:'市统计局',value:20}],
[{name:'共享交换平台'},{name:'市规划局',value:20}],
[{name:'共享交换平台'},{name:'市国土房管局',value:20}],
[{name:'共享交换平台'},{name:'市财政局',value:20}],
[{name:'共享交换平台'},{name:'市农委',value:20}],
[{name:'共享交换平台'},{name:'市水利局',value:20}],
[{name:'共享交换平台'},{name:'市交委',value:20}],
[{name:'共享交换平台'},{name:'市环保局',value:20}],
[{name:'共享交换平台'},{name:'市卫生计生委',value:20}],
[{name:'共享交换平台'},{name:'市市政委',value:20}],
[{name:'共享交换平台'},{name:'市政府办公厅',value:20}],
[{name:'共享交换平台'},{name:'市园林局',value:20}],
[{name:'共享交换平台'},{name:'市工商局',value:20}],
[{name:'共享交换平台'},{name:'市林业局',value:20}],
[{name:'共享交换平台'},{name:'市城乡建委',value:20}],
[{name:'共享交换平台'},{name:'市民政局',value:20}],
[{name:'共享交换平台'},{name:'市经济信息委',value:20}],
[{name:'共享交换平台'},{name:'市发展改革委',value:20}],
[{name:'共享交换平台'},{name:'市移民局',value:20}],
[{name:'共享交换平台'}, {name:'市体育局',value:20}],
[{name:'共享交换平台'}, {name:'市通信管理局',value:20}],
[{name:'共享交换平台'}, {name:'市旅游局',value:20}],
[{name:'共享交换平台'}, {name:'市商务委',value:20}],
[{name:'共享交换平台'}, {name:'市司法局',value:20}],
[{name:'共享交换平台'}, {name:'市地震局',value:20}],
[{name:'共享交换平台'}, {name:'市网信办',value:20}],
[{name:'共享交换平台'}, {name:'市质监局',value:20}],
[{name:'共享交换平台'}, {name:'市政府口岸办',value:20}],
[{name:'共享交换平台'}, {name:'市国税局',value:20}],
[{name:'共享交换平台'}, {name:'市网信办',value:20}],
[{name:'共享交换平台'}, {name:'市气象局',value:20}],
[{name:'共享交换平台'}, {name:'市安监局',value:20}],
[{name:'共享交换平台'}, {name:'市邮政管理局',value:20}],
[{name:'共享交换平台'}, {name:'市知识产权局',value:20}],
[{name:'共享交换平台'}, {name:'市教委',value:20}],
[{name:'共享交换平台'}, {name:'人行重庆营管部',value:20}],
[{name:'共享交换平台'}, {name:'市中小企业局',value:20}]
];
echartOption.sumdata = [
[{name:'共享交换平台'}, {name:'市发展改革委',value:20}],
[{name:'共享交换平台'}, {name:'市财政局',value:20}],
[{name:'共享交换平台'}, {name:'市经济信息委',value:20}],
[{name:'共享交换平台'}, {name:'市科委',value:20}],
[{name:'共享交换平台'}, {name:'市城乡建委',value:20}],
[{name:'共享交换平台'}, {name:'市交委',value:20}],
[{name:'共享交换平台'}, {name:'市农委',value:20}],
[{name:'共享交换平台'}, {name:'市商务委',value:20}],
[{name:'共享交换平台'}, {name:'市公安局',value:20}],
[{name:'共享交换平台'}, {name:'市国安局',value:20}],
[{name:'共享交换平台'}, {name:'市民政局',value:20}],
[{name:'共享交换平台'}, {name:'市司法局',value:20}],
[{name:'共享交换平台'}, {name:'市人力社保局',value:20}],
[{name:'共享交换平台'}, {name:'市国土房管局',value:20}],
[{name:'共享交换平台'}, {name:'市环保局',value:20}],
[{name:'共享交换平台'}, {name:'市规划局',value:20}],
[{name:'共享交换平台'}, {name:'市市政委',value:20}],
[{name:'共享交换平台'}, {name:'市水利局',value:20}],
[{name:'共享交换平台'}, {name:'市文化委',value:20}],
[{name:'共享交换平台'}, {name:'市卫生计生委',value:20}],
[{name:'共享交换平台'}, {name:'市民宗委',value:20}],
[{name:'共享交换平台'}, {name:'市地税局',value:20}],
[{name:'共享交换平台'}, {name:'市工商局',value:20}],
[{name:'共享交换平台'}, {name:'市质监局',value:20}],
[{name:'共享交换平台'}, {name:'市食品药品监管局',value:20}],
[{name:'共享交换平台'}, {name:'市林业局',value:20}],
[{name:'共享交换平台'}, {name:'市统计局',value:20}],
[{name:'共享交换平台'}, {name:'市旅游局',value:20}],
[{name:'共享交换平台'}, {name:'市金融办',value:20}],
[{name:'共享交换平台'}, {name:'市民防办',value:20}],
[{name:'共享交换平台'}, {name:'市物价局',value:20}],
[{name:'共享交换平台'}, {name:'市煤管局',value:20}],
[{name:'共享交换平台'}, {name:'市园林局',value:20}],
[{name:'共享交换平台'}, {name:'市档案局',value:20}],
[{name:'共享交换平台'}, {name:'市烟草局',value:20}],
[{name:'共享交换平台'}, {name:'市国资委',value:20}],
[{name:'共享交换平台'}, {name:'市政府办公厅',value:20}],
[{name:'共享交换平台'}, {name:'市审计局',value:20}],
[{name:'共享交换平台'}, {name:'市政府新闻办',value:20}],
[{name:'共享交换平台'}, {name:'市地震局',value:20}],
[{name:'共享交换平台'}, {name:'市移民局',value:20}],
[{name:'共享交换平台'}, {name:'市国税局',value:20}],
[{name:'共享交换平台'}, {name:'市扶贫办',value:20}],
[{name:'共享交换平台'}, {name:'市政府口岸办',value:20}],
[{name:'共享交换平台'}, {name:'市综治办',value:20}],
[{name:'共享交换平台'}, {name:'市通信管理局',value:20}],
[{name:'共享交换平台'}, {name:'市编办',value:20}],
[{name:'共享交换平台'}, {name:'市盐务局',value:20}],
[{name:'共享交换平台'},{name:'市供销总社',value:20}],
[{name:'共享交换平台'},{name:'市应急办',value:20}]
];
echartOption.sequence = [
"市财政局","市经济信息委","市市政委","市统计局","市园林局",
"市水利局","市工商局","市规划局","市交委","市城乡建委",
"市地税局","市民政局","市农委","市卫计生委","市环保局",
"市林业局","市移民局","市国土房管局","市发展改革委","市政府办公厅",
"市安监局","市国资委","市气象局","市通信管理局","市金融办","市体育局",
"市质监局","市审计局","市地震局","市国安局","市科委","市知识产权局",
"市邮政管理局","市政府新闻办","人行重庆营管部","市人力社保局","市烟草局",
"市编办","市国税局","市物价局","市扶贫办","市网信办","市档案局","市盐务局",
"市食品药品监管局","市民防办","市商务委","市应急办","市旅游局","市中小企业局","市教委",
"市供销总社","市政府口岸办","市民宗委","市综治办","市公安局","市司法局",
"市煤管局","市文化委"
];
echartOption.outData=[
[{name:'共享交换平台'},{name:'市统计局',value:20}],
[{name:'共享交换平台'},{name:'市规划局',value:20}],
[{name:'共享交换平台'},{name:'市国土房管局',value:20}],
[{name:'共享交换平台'},{name:'市财政局',value:20}],
[{name:'共享交换平台'},{name:'市农委',value:20}],
[{name:'共享交换平台'},{name:'市水利局',value:20}],
[{name:'共享交换平台'},{name:'市交委',value:20}],
[{name:'共享交换平台'},{name:'市环保局',value:20}],
[{name:'共享交换平台'},{name:'市卫生计生委',value:20}],
[{name:'共享交换平台'},{name:'市市政委',value:20}],
[{name:'共享交换平台'},{name:'市政府办公厅',value:20}],
[{name:'共享交换平台'},{name:'市园林局',value:20}],
[{name:'共享交换平台'},{name:'市工商局',value:20}],
[{name:'共享交换平台'},{name:'市林业局',value:20}],
[{name:'共享交换平台'},{name:'市城乡建委',value:20}],
[{name:'共享交换平台'},{name:'市民政局',value:20}],
[{name:'共享交换平台'},{name:'市经济信息委',value:20}],
]
echartOption.inData=[
[{name:'市统计局',value:20},{name:'共享交换平台'}],
[{name:'市扶贫办',value:20},{name:'共享交换平台'}],
[{name:'市公安局',value:20},{name:'共享交换平台'}],
[{name:'市通信管理局',value:20},{name:'共享交换平台'}],
[{name:'市物价局',value:20},{name:'共享交换平台'}],
[{name:'市气象局',value:20},{name:'共享交换平台'}],
[{name:'市煤管局',value:20},{name:'共享交换平台'}],
[{name:'市民宗委',value:20},{name:'共享交换平台'}],
[{name:'市综治办',value:20},{name:'共享交换平台'}],
[{name:'市园林局',value:20},{name:'共享交换平台'}],
[{name:'市工商局',value:20},{name:'共享交换平台'}],
[{name:'市环保局',value:20},{name:'共享交换平台'}],
]
export { echartOption }
const geoCoordMap=echartOption.geoCoordMap;
export const convertData=function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
var rr = "", type = "", outResList = [];
if (dataItem[0].resname) {
rr = dataItem[0].resname;
type = "服务共享";
outResList = dataItem[0].outresname;
} else if (dataItem[1].resname) {
rr = dataItem[1].resname;
type = "服务调用";
}
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord, toCoord],
resList: rr,
type: type,
outResList: outResList
});
}
}
return res;
};
export const getData=function(item, geoCoordMap) {
var temp = [], temp1 = [];
var data = item.map(function (dataItem) {
if (dataItem[0].value) {
if (temp.indexOf(dataItem[0].name) < 0&&geoCoordMap[dataItem[0].name]) {
temp.push(dataItem[0].name);
return {
name: dataItem[0].name,
value: geoCoordMap[dataItem[0].name].concat([20])
};
}
} else {
if (temp1.indexOf(dataItem[1].name) < 0&&geoCoordMap[dataItem[1].name]) {
temp1.push(dataItem[1].name);
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name].concat([20])
};
}
}
});
data.push({
name: "共享交换平台",
value: geoCoordMap["共享交换平台"].concat([20]),
itemStyle: {
normal: {
color: '#46bee9',
label: {
textStyle: {
fontSize: 20
}
}
}
}
});
return data;
};
扫一扫
927
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
