转载

Echarts折线图设置背景色

官网示例:
https://echarts.baidu.com/examples/editor.html?c=line-sections
除官网所示的参数外,有一些个人的说明。
以我项目中用到的情况为例
//-----------------------停产时段标记------------------------
series.push({
smooth: true,
name:'停产时段',
type:'line',
color:['#888'],//可以控制边界线颜色
markArea: {
silent:true,//如果想要折线能够被鼠标“触摸”,该区域一定要设置"静默"
itemStyle: {
normal: {
// color: '#aaddee',//淡蓝色,transparent是透明
borderWidth: 1,
borderType: 'dashed'
}
// opacity: 0.1//透明度
},
label:{
normal: {
show: true,
textStyle: {
color: '#555',//标记的色彩大小,即:“停产时段”的色彩和大小
fontSize: 13,
}
}
},
data: stopxAxis
}
});

stopxAxis的格式如下:
let stopxAxis = [];
for(var i=0;i<e.data.length;i++){
let xArr = [];
let xObj1 = {
name:'停产时段',
xAxis:''

                                    };
                                    let xObj2 = {
                                        name:'停产时段',
                                        xAxis:''
                                    };
                                    let startTime = e.data[i].startTime
                                    let endTime = e.data[i].endTime

                                    if(new Date(de).getTime()<new Date(startTime).getTime()){
                                        continue
                                    }
                                    if(new Date(ds).getTime()>new Date(endTime).getTime()){
                                        continue
                                    }

                                    if(new Date(ds).getTime()>new Date(startTime).getTime()){
                                        startTime = ds;
                                    }
                                    if(new Date(de).getTime()<new Date(endTime).getTime()){
                                        endTime = de;
                                    }
                                    xObj1.xAxis = startTime
                                    xArr.push(xObj1);
                                    xObj2.xAxis = endTime
                                    xArr.push(xObj2);

                                    stopxAxis.push(xArr);
                                }

最终是一个多维数据。

效果如下:

正文到此结束
本文目录