数据的可视化echarts effectScatter配置项内容和展示
每两个点，一入一出产生一条数据，如何更好地展示
配置项如下
let categories = [
{
itemStyle: {
normal: {
color: '#c1232b',
}
}
},{
itemStyle: {
normal: {
color: '#27727b',
}
}
},{
itemStyle: {
normal: {
color: '#fcce10',
}
}
},{
itemStyle: {
normal: {
color: '#e87c25',
}
}
},{
itemStyle: {
normal: {
color: '#b5c334',
}
}
},{
itemStyle: {
normal: {
color: '#fe8463',
}
}
},{
itemStyle: {
normal: {
color: '#9bca63',
}
}
},{
itemStyle: {
normal: {
color: '#fad860',
}
}
},{
itemStyle: {
normal: {
color: '#f3a43b',
}
}
},{
itemStyle: {
normal: {
color: '#60c0dd',
}
}
},{
itemStyle: {
normal: {
color: '#d7504b',
}
}
},{
itemStyle: {
normal: {
color: '#c6e579',
}
}
},{
itemStyle: {
normal: {
color: '#f4e001',
}
}
}
]
// rgba(27, 227, 239, 0.94) 4
// rgba(27, 227, 239, 0.54) 3
// rgba(27, 227, 239, 0.14) 2
// rgba(27, 227, 239, 0.09) 1
// rgba(27, 227, 239, 0.06) 1
// rgba(27, 227, 239, 0.01) 1
const data = [
{
name: "学校背部",
active: true,
speed: '4',
datas: [
{value: 0},
{value: 4},
{value: 5},
{value: 2},
{value: 3},
{value: 5},
{value: 3},
{value: 4},
{value: 2},
{value: 4},
{value: 5},
{value: 4},
{value: 3},
],
value: [16, 11],
symbolSize: 60,
color: 'rgba(27, 227, 239, 1)',// 1
category: 0,
itemStyle: null
},
{
name: "南大门口",
active: true,
speed: '1',
datas: [
{value: 2},
{value: 0},
{value: 1},
{value: 2},
{value: 1},
{value: 1},
{value: 3},
{value: 2},
{value: 2},
{value: 1},
{value: 1},
{value: 1},
{value: 1},
],
value: [3, 33],
symbolSize: 30,
color: 'rgba(27, 227, 239, 0.09)', // 4
category: 1,
itemStyle: null
},
{
name: "生活区北门",
active: true,
speed: '1',
datas: [
{value: 2},
{value: 1},
{value: 0},
{value: 2},
{value: 3},
{value: 1},
{value: 3},
{value: 2},
{value: 2},
{value: 1},
{value: 1},
{value: 2},
{value: 1},
],
value: [0, 60],
symbolSize: 10,
color: 'rgba(27, 227, 239, 0.01)',// 6
category: 2,
itemStyle: null
},
{
name: "东门北",
active: true,
speed: '1',
datas: [
{value: 2},
{value: 1},
{value: 2},
{value: 0},
{value: 1},
{value: 1},
{value: 3},
{value: 2},
{value: 2},
{value: 1},
{value: 1},
{value: 1},
{value: 1},
],
value: [10, 93],
symbolSize: 30,
color: 'rgba(27, 227, 239, 0.09)',// 4
category: 3,
itemStyle: null
},
{
name: "图书馆南边",
active: true,
speed: '1',
datas: [
{value: 2},
{value: 1},
{value: 2},
{value: 1},
{value: 0},
{value: 1},
{value: 1},
{value: 2},
{value: 2},
{value: 1},
{value: 1},
{value: 2},
{value: 1},
],
value: [26, 90],
symbolSize: 20,
color: 'rgba(27, 227, 239, 0.06)',// 5
category: 4,
itemStyle: null
},
{
name: "学校正门",
active: true,
speed: '2',
datas: [
{value: 2},
{value: 1},
{value: 2},
{value: 1},
{value: 1},
{value: 0},
{value: 3},
{value: 2},
{value: 2},
{value: 3},
{value: 1},
{value: 2},
{value: 1},
],
value: [52, 100],
symbolSize: 40,
color: 'rgba(27, 227, 239, 0.14)', // 3
category: 5,
itemStyle: null
},
{
name: "生活区侧门",
active: true,
speed: '4',
datas: [
{value: 4},
{value: 3},
{value: 2},
{value: 3},
{value: 4},
{value: 3},
{value: 0},
{value: 5},
{value: 4},
{value: 2},
{value: 5},
{value: 3},
{value: 3},
],
value: [77, 93],
symbolSize: 60,
color: 'rgba(27, 227, 239, 0.94)',//1
category: 6,
itemStyle: null
},
{
name: "一号教学楼",
active: true,
speed: '2',
datas: [
{value: 2},
{value: 1},
{value: 3},
{value: 1},
{value: 1},
{value: 4},
{value: 2},
{value: 0},
{value: 2},
{value: 2},
{value: 1},
{value: 2},
{value: 1},
],
value: [95, 84],
symbolSize: 40,
color: 'rgba(27, 227, 239, 0.14)', //3
category: 7,
itemStyle: null
},
// {//重复部分
// name: "nnn",
// active: true,
// speed: '50',
// value: [90, 100],
// category: 8,
// },
{
name: "教学区西门",
active: true,
speed: '3',
datas: [
{value: 3},
{value: 2},
{value: 2},
{value: 1},
{value: 1},
{value: 3},
{value: 2},
{value: 2},
{value: 0},
{value: 1},
{value: 1},
{value: 1},
{value: 1},
],
value: [99, 63],
symbolSize: 50,
color: 'rgba(27, 227, 239, 0.54)',// 2
category: 8,
itemStyle: null
},
// {//重复部分
// name: "bbbb",
// active: true,
// speed: '50',
// value: [90, 100],
// category: 10,
// },
{
name: "教职工宿舍南",
active: true,
speed: '3',
datas: [
{value: 3},
{value: 1},
{value: 3},
{value: 1},
{value: 1},
{value: 3},
{value: 2},
{value: 2},
{value: 1},
{value: 0},
{value: 2},
{value: 3},
{value: 1},
],
value: [100, 36],
symbolSize: 50,
color: 'rgba(27, 227, 239, 0.54)',// 2
category: 9,
itemStyle: null
},
{
name: "综合楼北边",
active: true,
speed: '1',
datas: [
{value: 2},
{value: 1},
{value: 2},
{value: 1},
{value: 1},
{value: 3},
{value: 2},
{value: 2},
{value: 1},
{value: 1},
{value: 0},
{value: 1},
{value: 1},
],
value: [90, 17],
symbolSize: 10,
color: 'rgba(27, 227, 239, 0.01)',// 6
category: 10,
itemStyle: null
},
{
name: "五号教学楼南",
active: true,
speed: '1',
datas: [
{value: 4},
{value: 1},
{value: 2},
{value: 1},
{value: 2},
{value: 3},
{value: 2},
{value: 2},
{value: 1},
{value: 1},
{value: 2},
{value: 0},
{value: 1},
],
value: [68, 11],
symbolSize: 30,
color: 'rgba(27, 227, 239, 0.09)',// 4
category: 11,
itemStyle: null
},
{
name: "生活区中心",
active: true,
speed: '1',
datas: [
{value: 2},
{value: 1},
{value: 2},
{value: 1},
{value: 1},
{value: 3},
{value: 2},
{value: 2},
{value: 1},
{value: 1},
{value: 2},
{value: 1},
{value: 0},
],
value: [37, 4],
symbolSize: 20,
color: 'rgba(27, 227, 239, 0.06)',// 5
category: 12,
itemStyle: null
},
// {//重复部分
// name: "aaaa",
// active: true,
// speed: '50',
// value: [90, 100],
// category: 15,
// },
]
let linesData = [];
let links = [];
for(let i = 0;i < data.length ;i++) { // linesData
for(let j = 0;j < data.length;j++) {
// if(data[i].name == data[j].name){
// continue;
// }
if(data[i].name != data[j].name){
linesData.push([
{coord:data[i].value},{coord:data[j].value}
]);
}
}
}
for(let i = 0;i < data.length;i++) { // links
for(let j = 0;j < data.length;j++) {
// if(data[i].name == data[j].name){
// continue;
// }
if(data[i].name != data[j].name){
links.push(
{
source: data[i].name,
target: data[j].name,
speed: parseInt(Math.random())+'kb/s',
lineStyle: {
normal: {
curveness: 0.1,
width: data[i].datas[j].value,
// width: 1,
// color: i >= j ? (new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
// offset: 0,
// color: 'red'
// }, {
// offset: 1,
// color: data[i].color,
// // color: 'rgba(27, 227, 239, 0.06)'
// }])) : (new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
// offset: 0,
// color: data[i].color,
// // color: 'rgba(27, 227, 239, 0.06)'
// }, {
// offset: 1,
// color: 'red'
// }])),
color: data[i].color,
},
}
}
)
}
}
}
let data_circle = [];
data.forEach(function(item,index){
data_circle[index] = {};
data_circle[index]['name'] = item.name;
data_circle[index]['value'] = item.value;
data_circle[index]['symbolSize'] = item.symbolSize;
// data_circle[index]['color'] = item.color + '';
})
option = {
// color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua','red','blue','gray',],
color: ['#c1232b','#27727b','#fcce10','#e87c25','#b5c334','#fe8463','#9bca63','#fad860','#f3a43b','#60c0dd','#d7504b','#c6e579','#f4e001'],
xAxis: {
show: false,
type: 'value'
},
yAxis: {
show: false,
type: 'value'
},
animationDuration: 1500,//////////////
animationEasingUpdate: 'quinticInOut',///////////
series: [{
type: 'effectScatter',
// type: 'graph',
rippleEffect: {
period: 3,
brushType: 'fill',
scale: 2
},
color: 'rgba(27, 227, 239, 0.81)',
// itemStyle: {
// shadowColor: 'green'
// },
data: data_circle,//图上的各个点
},{
type: 'graph',
roam: true,/////////////
focusNodeAdjacency: true,///////////////
itemStyle: {///////////////////////////
normal: {
show: true,
borderColor: 'rgba(27, 227, 239, 0.5)',
borderWidth: 1,
shadowBlur: 8,
shadowColor: 'rgba(27, 227, 239, 0.5)'
}
},//////////////////////////
// symbolSize: 14,
layout: 'none',
coordinateSystem: 'cartesian2d',
z: 3,
// 每个球的字
label: {
normal: {
show: true,
position: 'bottom',
color: '#fff'
}
},
edgeSymbol: ['none', 'arrow'],
edgeSymbolSize: 14,
data: data,//图上的各个点
links: links,//图上的连线
categories: categories,
}, {
name: 'A',
type: 'lines',
coordinateSystem: 'cartesian2d',
z: 1,
effect: {// feiji的特效配置
show: false,
period: 20,
trailLength: 0,// 飞机带不带阴影
// color: 'blue',//飞机的颜色
symbol: "arrow",// 用什么飞机
symbolSize: 5//飞机的大小
},
lineStyle: {
normal: {
color: 'transparent',
curveness: 0.3//连线的弧度
}
},
data: linesData//连线，// 连线具体数据，格式固定，通过处理13个点就可以
}]
}
截图如下
