暂无数据echarts scatter配置项内容和展示
用散点图展示文字,(时间紧没有作细节调整)
配置项如下
var data = [
[4 + 10, 1+10],
[12 + 10, 1+10],
[4 + 10, 2+10],
[5 + 10, 2+10],
[6 + 10, 2+10],
[7 + 10, 2+10],
[8 + 10, 2+10],
[9 + 10, 2+10],
[10 + 10, 2+10],
[11 + 10, 2+10],
[12 + 10, 2+10],
[4 + 10, 3+10],
[12 + 10, 3+10],
[4 + 10, 4+10],
[5 + 10, 4+10],
[6 + 10, 4+10],
[7 + 10, 4+10],
[8 + 10, 4+10],
[9 + 10, 4+10],
[10 + 10, 4+10],
[11 + 10, 4+10],
[12 + 10, 4+10],
[4 + 10, 5+10],
[12 + 10, 5+10],
[4 + 10, 6+10],
[5 + 10, 6+10],
[6 + 10, 6+10],
[7 + 10, 6+10],
[8 + 10, 6+10],
[9 + 10, 6+10],
[10 + 10, 6+10],
[11 + 10, 6+10],
[12 + 10, 6+10],
[13 + 10, 6+10],
[12 + 10, 7+10],
[5 + 10, 8+10],
[7 + 10, 8+10],
[12 + 10, 8+10],
[5 + 10, 9+10],
[8 + 10, 9+10],
[12 + 10, 9+10],
[1 + 10, 10+10],
[2 + 10, 10+10],
[3 + 10, 10+10],
[4 + 10, 10+10],
[5 + 10, 10+10],
[6 + 10, 10+10],
[7 + 10, 10+10],
[9 + 10, 10+10],
[12 + 10, 10+10],
[5 + 10, 11+10],
[9+10, 11+10],
[12 + 10, 11+10],
[2 + 10, 12+10],
[3 + 10, 12+10],
[4 + 10, 12+10],
[5 + 10, 12+10],
[6 + 10, 12+10],
[7 + 10, 12+10],
[9 + 10, 12+10],
[10 + 10, 12+10],
[11 + 10, 12+10],
[12 + 10, 12+10],
[13 + 10, 12+10],
[14 + 10, 12+10],
[15 + 10, 12+10],
[3 + 10, 13+10],
[4 + 10, 13+10],
[5 + 10, 13+10],
[9 + 10, 13+10],
[14 + 10, 13+10],
[4 + 10, 14+10],
[9 + 10, 14+10],
[2 + 10, 15+10],
[3 + 10, 15+10],
[4 + 10, 15+10],
[5 + 10, 15+10],
[6 + 10, 15+10],
[7 + 10, 15+10],
[9 + 10, 15+10],
[10 + 10, 15+10],
[11 + 10, 15+10],
[12 + 10, 15+10],
[4 + 10, 16+10],
[13 + 10, 16+10],
[14 + 10, 16+10]
];
var data2 = [
[2+30, 1+10],
[3+30, 2+10],
[10+30, 2+10],
[11+30, 2+10],
[12+30, 2+10],
[13+30, 2+10],
[14+30, 2+10],
[15+30, 2+10],
[4+30, 3+10],
[9+30, 3+10],
[15+30, 3+10],
[5+30, 4+10],
[9+30, 4+10],
[15+30, 4+10],
[5+30, 5+10],
[9+30, 5+10],
[6+30, 6+10],
[9+30, 6+10],
[6+30, 7+10],
[9+30, 7+10],
[7+30, 8+10],
[9+30, 8+10],
[7+30, 9+10],
[9+30, 9+10],
[2+30, 10+10],
[3+30, 10+10],
[4+30, 10+10],
[5+30, 10+10],
[6+30, 10+10],
[7+30, 10+10],
[8+30, 10+10],
[9+30, 10+10],
[10+30, 10+10],
[11+30, 10+10],
[12+30, 10+10],
[13+30, 10+10],
[14+30, 10+10],
[7+30, 11+10],
[13+30, 11+10],
[7+30, 12+10],
[7+30, 13+10],
[7+30, 14+10],
[3+30, 15+10],
[4+30, 15+10],
[5+30, 15+10],
[6+30, 15+10],
[7+30, 15+10],
[8+30, 15+10],
[9+30, 15+10],
[10+30, 15+10],
[11+30, 15+10],
[12+30, 15+10],
[11+30, 16+10]
];
var data3 = [
[2+55, 1+10],
[7+55, 1+10],
[14+55, 1+10],
[3+55, 2+10],
[6+55, 2+10],
[8+55, 2+10],
[13+55, 2+10],
[14+55, 2+10],
[15+55, 2+10],
[4+55, 3+10],
[5+55, 3+10],
[9+55, 3+10],
[13+55, 3+10],
[4+55, 4+10],
[6+55, 4+10],
[10+55, 4+10],
[12+55, 4+10],
[3+55, 5+10],
[7+55, 5+10],
[11+55, 5+10],
[3+55, 6+10],
[7+55, 6+10],
[10+55, 6+10],
[12+55, 6+10],
[1+55, 7+10],
[2+55, 7+10],
[3+55, 7+10],
[4+55, 7+10],
[5+55, 7+10],
[6+55, 7+10],
[7+55, 7+10],
[9+55, 7+10],
[12+55, 7+10],
[4+55, 8+10],
[9+55, 8+10],
[13+55, 8+10],
[2+55, 9+10],
[5+55, 9+10],
[7+55, 9+10],
[9+55, 9+10],
[13+55, 9+10],
[3+55, 10+10],
[5+55, 10+10],
[6+55, 10+10],
[9+55, 10+10],
[13+55, 10+10],
[4+55, 11+10],
[5+55, 11+10],
[8+55, 11+10],
[13+55, 11+10],
[1+55, 12+10],
[2+55, 12+10],
[3+55, 12+10],
[4+55, 12+10],
[5+55, 12+10],
[6+55, 12+10],
[7+55, 12+10],
[8+55, 12+10],
[9+55, 12+10],
[10+55, 12+10],
[11+55, 12+10],
[12+55, 12+10],
[13+55, 12+10],
[14+55, 12+10],
[15+55, 12+10],
[5+55, 13+10],
[9+55, 13+10],
[14+55, 13+10],
[3+55, 14+10],
[5+55, 14+10],
[7+55, 14+10],
[10+55, 14+10],
[2+55, 15+10],
[5+55, 15+10],
[8+55, 15+10],
[10+55, 15+10],
[5+55, 16+10],
[10+55, 16+10]
];
var data4 = [
[3+80, 1+10],
[8+80, 1+10],
[14+80, 1+10],
[2+80, 2+10],
[4+80, 2+10],
[5+80, 2+10],
[8+80, 2+10],
[9+80, 2+10],
[10+80, 2+10],
[11+80, 2+10],
[12+80, 2+10],
[13+80, 2+10],
[14+80, 2+10],
[4+80, 3+10],
[6+80, 3+10],
[8+80, 3+10],
[14+80, 3+10],
[4+80, 4+10],
[6+80, 4+10],
[8+80, 4+10],
[14+80, 4+10],
[4+80, 5+10],
[6+80, 5+10],
[8+80, 5+10],
[14+80, 5+10],
[4+80, 6+10],
[7+80, 6+10],
[8+80, 6+10],
[9+80, 6+10],
[10+80, 6+10],
[11+80, 6+10],
[12+80, 6+10],
[13+80, 6+10],
[14+80, 6+10],
[15+80, 6+10],
[1+80, 7+10],
[2+80, 7+10],
[4+80, 7+10],
[7+80, 7+10],
[11+80, 7+10],
[14+80, 7+10],
[3+80, 8+10],
[4+80, 8+10],
[7+80, 8+10],
[11+80, 8+10],
[4+80, 9+10],
[5+80, 9+10],
[7+80,9+10],
[8+80, 9+10],
[9+80, 9+10],
[10+80, 9+10],
[11+80, 9+10],
[12+80, 9+10],
[13+80, 9+10],
[14+80, 9+10],
[15+80, 9+10],
[4+80, 10+10],
[6+80, 10+10],
[7+80, 10+10],
[11+80, 10+10],
[14+80, 10+10],
[4+80, 11+10],
[7+80, 11+10],
[11+80, 11+10],
[1+80, 12+10],
[2+80, 12+10],
[3+80, 12+10],
[4+80, 12+10],
[5+80, 12+10],
[6+80, 12+10],
[7+80, 12+10],
[8+80, 12+10],
[9+80, 12+10],
[10+80, 12+10],
[11+80, 12+10],
[12+80, 12+10],
[13+80, 12+10],
[14+80, 12+10],
[4+80, 13+10],
[7+80, 13+10],
[14+80, 13+10],
[4+80, 14+10],
[7+80, 14+10],
[14+80, 14+10],
[4+80, 15+10],
[7+80, 15+10],
[8+80, 15+10],
[9+80, 15+10],
[10+80, 15+10],
[11+80, 15+10],
[12+80, 15+10],
[13+80, 15+10],
[14+80, 15+10],
[15+80, 15+10],
[4+80, 16+10],
[14+80, 16+10]
];
var chartData = [{
value: data
}, {
value: data2
}, {
value: data3
}, {
value: data4
}]
var color = "#189cbb";
var scale = 1; //缩放
option = {
color: ['#e8b828', '#1c95b4'],
backgroundColor: '#031f2d',
legend: {
orient: 'horizontal',
// orient: 'vertical',
// x: 'right',
right: '9%',
y: 'top',
itemWidth: 15 * scale, // 图例图形宽度
itemHeight: 15 * scale, // 图例图形高度
itemGap: 30 * scale,
icon: 'roundRect',
selectedMode: true,
textStyle: {
color: '#fff', // 图例文字颜色
fontSize: 13 * scale,
},
data: ['暂', '无', '数', '据']
},
// backgroundColor: '#3c4656',
grid: {
left: '5%',
right: '5%',
bottom: '5%',
containLabel: true
},
xAxis: {
max:100,
axisLabel: {
textStyle: {
color: color,
fontSize: 13 * scale,
}
},
axisTick: {
lineStyle: {
color: color,
}
},
axisLine: {
lineStyle: {
color: color,
}
},
splitLine: {
lineStyle: {
color: 'rgba(80,224,255,0.3)',
type: 'dashed'
}
},
},
yAxis: {
axisLabel: {
textStyle: {
color: color,
fontSize: 13 * scale,
}
},
axisTick: {
lineStyle: {
color: color,
}
},
axisLine: {
lineStyle: {
color: color,
}
},
splitLine: {
lineStyle: {
color: 'rgba(80,224,255,0.3)',
type: 'dashed'
}
},
nameTextStyle: {
color: color,
fontSize: 13 * scale,
padding: [0, 0, 20, 0]
},
},
visualMap: {
show: false,
max: 150,
inRange: {
symbolSize: [14 * scale, 14 * scale]
}
},
series: [{
name: '暂',
type: 'scatter',
data: chartData[0].value,
symbolSize: 20
}, {
name: '无',
type: 'scatter',
data: chartData[1].value,
symbolSize: 30
}, {
name: '数',
type: 'scatter',
data: chartData[2].value,
symbolSize: 30
}, {
name: '据',
type: 'scatter',
data: chartData[3].value,
symbolSize: 30
}],
animationDelay: function(idx) {
return idx * 50;
},
animationEasing: 'elasticOut'
};
截图如下
