echart散点图替换数据
<template>
<div class="center_center">
<div class="main" ref="imRatio" style="width:100%;height:400px"></div>
</div>
</template>
<srcipt>
export default({
dara(){
return {
tableData:[],
spaceData:[],
}},
methods:{
getDot(){
var timeData=[] //创建对象，利用对象属性。去创建多个数组集合
var objData={} //最终生成的数组集合
Api.GetDot().then((res)=>{
for(var i=0; i<res.data.length;i++){ //遍历接口数组第一层数据 i为0 1 2 3
objData[res.data+i]=[] //动态根据数据几个集合就生成几个数组
for(var j=0;j<res.data[i].length; j++){ //遍历第二层数组，并且把对应的数据，挨个添加到一个小数据里面去res.data[i][j].WEEK_DAY,Number(res.data[i][j].NUMS),res.data[i][j].RECENTLYDAY,res.data[i][j].TIMES
//再用上一层遍历的时候创建的数组，把小数组数据给push进去
objData[res.data+i].push([res.data[i][j].WEEK_DAY,Number(res.data[i][j].NUMS),res.data[i][j].RECENTLYDAY,res.data[i][j].TIMES])
}
}
for(var k in objData){ //遍历对象，这时候只需要遍历一层就可以了，需要把遍历出来的res.data0,rea.data1,rea.data2给集合到新的大数字
timeData.push(objData[k])
}
var data=timeData
var option = {
backgroundColor: new this.$echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
offset: 0,
color: '#002a3d'
}, {
offset: 1,
color: '#002a3d'
}]),
legend: {
left: '15%',
top: '3%',
data: ['预报', '确报','已装','舱位数'],
textStyle:{
color:'rgba(255,255,255)'
},
icon: "rect",
itemWidth: 13.5,
itemHeight: 12.5,
itemGap: 70
},
xAxis: {
// show:true,
data:["星期一","星期二","星期三","星期四","星期五","星期六","星期日",],
splitLine: {
show: true,
lineStyle: {
type: 'deshed',
color: "rgba(95, 107, 116, 1)"
}
},
// 坐标文字显示颜色
axisLabel: {
color: "#cccccc",
},
},
yAxis: {
type:"value",
// min:0,
// max:800,
axisLabel: {
color: "#cccccc",
},
// 设置坐标线颜色
splitLine: {
show: true,
lineStyle: {
type: 'solid',
color: "rgba(95, 107, 116, 1)"
}
},
},
series: [
{
name:'预报',
data: data[0],
type:'effectScatter',
symbolSize: 20,
selectedMode: true,
legendHoverLink: true,
showEffectOn: "emphasis",
emphasis:{
scale: true,
focus:'series',
blurScope: 'coordinateSystem',
// 是否显示标签
label:{
show:true,
},
position:'top',
},
itemStyle:{
show:true,
shadowBlur:10,
shadowColor:'rgba(249, 155, 85)',
shadowOffsetY:5,
color: new this.$echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: 'rgba(249, 155, 85)'
}, {
offset: 1,
color: 'rgba(249, 155, 85)'
}])
}
},
{
name:'确报',
data: data[1],
type:'effectScatter',
symbolSize: 20,
selectedMode: true,
legendHoverLink: true,
showEffectOn: "emphasis",
emphasis:{
scale: true,
focus:'series',
blurScope: 'coordinateSystem',
// 是否显示标签
label:{
show:true,
},
position:'top',
},
itemStyle:{
shadowBlur:10,
shadowColor:'rgba(52, 209, 197)',
shadowOffsetY:5,
color: new this.$echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: 'rgba(52, 209, 197)'
}, {
offset: 1,
color: 'rgba(52, 209, 197)'
}])
}
},
{
name:'已装',
data: data[2],
type:'effectScatter',
symbolSize: 20,
selectedMode: true,
legendHoverLink: true,
showEffectOn: "emphasis",
emphasis:{
scale: true,
focus:'series',
blurScope: 'coordinateSystem',
// 是否显示标签
label:{
show:true,
},
position:'top',
},
itemStyle:{
shadowBlur:10,
shadowColor:'rgba(144, 155, 191)',
shadowOffsetY:5,
color: new this.$echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: 'rgba(144, 155, 191)'
}, {
offset: 1,
color: 'rgba(144, 155, 191)'
}])
}
},
{
name:'舱位数',
data: data[3],
type:'effectScatter',
symbolSize: 20,
selectedMode: true,
legendHoverLink: true,
showEffectOn: "emphasis",
emphasis:{
scale: true,
focus:'series',
blurScope: 'coordinateSystem',
// 是否显示标签
label:{
show:true,
},
position:'top',
},
itemStyle:{
shadowBlur:10,
shadowColor:'rgba(66, 171, 220)',
shadowOffsetY:5,
color: new this.$echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: 'rgba(66, 171, 220)'
}, {
offset: 1,
color: 'rgba(66, 171, 220)'
}])
}
},
]
};
var myChart = this.$echarts.init(this.$refs.imRatio);
myChart.setOption(option);
var _this=this
myChart.on('click',function (params) {
if(params.seriesName==="预报"){
_this.getForecastList(params.data[3])
_this.isShow=true
_this.spaceShow=false
}else if(params.seriesName==="确报"){
_this.getGuaranteeList(params.data[3])
_this.isShow=true
_this.spaceShow=false
}
else if(params.seriesName==="已装"){
_this.getContainerisedList(params.data[3])
_this.isShow=true
_this.spaceShow=false
}
else if (params.seriesName==="舱位数"){
_this.getShippingSpaceList(params.data[3])
_this.spaceShow=true
_this.isShow=false
}
})
})
},
}
})
</srcipt>
后台返回的数据格式
数据展示的格式
