工作当中的需求,就当学习记录一下,一个前端小白。
需求是一条曲线进行分时段展示,每个时段显示数据量不同,可能三条,也可能是10条不等,想让echarts数据分时段展示,就需要多个series来进行数据渲染,例如:我现在这个曲线是分3段展示的,数据格式大概是这种:
series:[
{
......配置参数就省略了
[100,200,300,' ', ' ',' ',' ',' ',' ',' ',' ',' '],
} ,
{
......配置参数就省略了
[' ',' ',' ',' 320 ', ' 349 ',' 234 ',' 556 ',' 123 ',' ',' ',' ',' '],
} ,
{
......配置参数就省略了
[' ',' ',' ',' ', ' ',' ',' ',' ',' 666 ',' 777 ',' 888',' 999 '],
}
],
总的来说是什么呢,意思就是你想分段显示就需要用数据去拼接来展示,一条曲线可能也可以实现,但是我这里用的是这种方法(不喜勿喷),方法有多种,大家可以自己发挥并实践,基于上面的数据结构最后出来的效果是这种:
下面附上代码及数据处理
//我这里是展示的五个时段的数据
//需要展示的曲线数据 实际项目中,就是后台接口返回数据
var lingsixzxyd = [10,10, 10, 10, 10, 10] //第一时段
var sixtenzxyd = [10, 10, 10, 10, 10, 10] //第二时段
var tentensixzxyd = [10, 10, 10] //第三时段
var tensixtwotenonezxyd = [10, 10, 10, 10, 10, 10, 10, 10] //第四时段
var twotenonetwotenfourzxyd = [10, 10, 10, 10, 10]; //第五时段
//处理上放数据,生成为文章开头我给大家展示的数据
//获取当前各个时段数据长度 并计算总长度
var length1 = lingsix.length;
var length2 = sixten.length;
var length3 = tentensix.length;
var length4 = tensixtwotenone.length;
var length5 = twotenonetwotenfour.length;
var length6 = length1 + length2 + length3 + length4 + length5;
//处理各个时段数组的数据格式并返回var a1 = seriesForArr(length1, 0, 0, 0, 0, length6, lingsix, '');
var a2 = seriesForArr(length1, 0, 0, 0, 0, length6, sixten, 'sixten');
var a3 = seriesForArr(length1, length2, 0, 0, 0, length6, tentensix, '');
var a4 = seriesForArr(length1, length2, length3, 0, 0, length6, tensixtwotenone, '');var a5 = seriesForArr(length1, length2, length3, length4, 0, length6, twotenonetwotenfour, '');
//console.log(a1) //第一时段
//console.log(a2) //第二时段
//console.log(a3) //第三时段
//console.log(a4) //第四时段
//console.log(a5) //第五时段
//控制台输出结果
[100, 240, 250, 235, 220, 222, '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '']
['', '', '', '', '', '', 300, 280, 250, 260, 270, 200, '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '']
['', '', '', '', '', '', '', '', '', '', '', '', 250, 300, 290, '', '', '', '', '', '', '', '', '', '', '', '', '']
['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 260, 230, 240, 250, 235, 245, 255, 210, '', '', '', '', '']
['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 280, 250, 260, 270, 200]
//处理数据格式方法
function seriesForArr(num1, num2, num3, num4, num5, num6, arr, type) {
if (num1 != 0 && num6 != 0 && num2 == 0 && num3 == 0 && num4 == 0 && num5 == 0) {
if (type == 'sixten') {
for (var i = 0; i < num1; i++) {
arr.unshift('');
}
var add = num6 - arr.length;
for (var i = 0; i < add; i++) {
arr.push('');
}
} else {
for (var i = 0; i < num6 - num1; i++) {
arr.push('')
}
}
} else {
var add = num1 + num2 + num3 + num4 + num5;
for (var i = 0; i < add; i++) {
arr.unshift('');
}
var count = num6 - arr.length;
for (var i = 0; i < count; i++) {
arr.push('');
}
}
return arr;
}
//接下来就是echarts图例的处理 这里包含series 及 tooltip的数据处理 有需要的可以看一下
//先说series 这里声明一个series数组 及 需要显示的 legend 数组,因为是五段数据,我主要是图方便把legend内容写死,到时候到家可以用循环生成
var seriesArr = [];
var legendArr = ['测试2', '测试2', '测试2', '测试2', '测试2'];
//接下来进行series循环处理数据 这里的yData就是上面五个数组的合集
//为什么要判断i呢,因为这只是一个时段的数据,如果有两条线呢那就是 5 6 7 8 9,以此类推这里就不写在代码里面了
var lineColor = ''; //折线颜色
var lineStyle = ''; //折线样式
yData.forEach((v, i) => {
if (i == 0 || i == 1 || i == 2 || i == 3 || i == 4) {
lineColor = 'yellow';
lineStyle = 'solid'
} var seriesObj = {
name: legendArr[i],
type: 'line',
step: "start",
symbol:'none',
smooth: false,
itemStyle: {
normal: {
color: lineColor,
lineStyle:{
type:lineStyle
}
}
},
data: v
}
seriesArr.push(seriesObj)
})
//这里是tooltip的数据进行formatter处理
formatter: function(params) {
var arr = params;
let str = '';
var hide = '';
var time = '';
//time是你要显示的时段
//hide是判断你的legend显示还是隐藏 因为如果你不判断的话,会生成五个legend,因为你放了 5个 series
for(var i=0;i<arr.length;i++){
if(arr[i].data == '' && arr[i].value == ''){
hide = 'none';
}else{
hide = 'block';
}
//判断属于哪一个时段的方法,06是第一时段的结尾,写多少都根据你们的需求来定
if(arr[i].dataIndex <= getArrayIndex(xData,'06')){
time = '00时-06时'
}else if(arr[i].dataIndex > getArrayIndex(xData,'06') && arr[i].dataIndex <= getArrayIndex(xData,'10')){
time = '06时-10时'
}else if(arr[i].dataIndex > getArrayIndex(xData,'10') && arr[i].dataIndex <= getArrayIndex(xData,'16')){
time = '10时-16时'
}else if(arr[i].dataIndex > getArrayIndex(xData,'16') && arr[i].dataIndex <= getArrayIndex(xData,'21')){
time = '16时-21时'
}else if(arr[i].dataIndex > getArrayIndex(xData,'21') && arr[i].dataIndex <= getArrayIndex(xData,'24')){
time = '21时-24时'
}
str += `
<span style='display:${hide};'>${time}</span>
<div style='display:${hide};width:150px;'>
<span style='display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:${arr[i].color}'><span>
<span style='display:inline-block;left:15px;position:relative;top:-7px;'> ${arr[i].seriesName} :${arr[i].value}</span>
</div>
`
}
return str;
}
function getArrayIndex(arr,obj){
var i = arr.length;
while(i--){
if(arr[i] == obj){
return i;
}
}
return -1;
}
以上就是方法及数据实现啦,本人就是一个前端小白,重在分享和记录,望大家不喜勿喷啦!
如果可以帮到各位,我还是会非常开心的。
再次感谢大家的浏览及查看,谢谢大家!