/**
* 画双折线图
* @param container 容器
* @param titleName 标题
* @param xData x轴数据
* @param seriesNameOne 第一条折线图表名称
* @param seriesDataOne 第一条折线图表数据
* @param seriesNameTwo 第二条折线图表名称
* @param seriesDataTwo 第二条折线图表数据
* @param yAxisName y轴名称
* @param legendNameArr legend名称
* @colorArr 曲线颜色数据以及 legend颜色数组
* @yNumData y轴刻度设置,最小值,最大值,间隔值
*/
function drawDoubleLine(container, titleName, xData, seriesNameOne, seriesDataOne, seriesNameTwo, seriesDataTwo,yAxisName,legendNameArr,colorArr,yNumData) {
var doubleLine = echarts.init(document.getElementById(container));
doubleLineOption = {
legend: {
data: legendNameArr,
color: colorArr,//legend自定义颜色值数组
top:'1%',
left:'70%',
textStyle: { //图例文字的样式
color: '#fff',
fontSize: 12,
},
},
tooltip: {
trigger: 'axis',
//指示器
axisPointer: {
type: 'line',
lineStyle: {
color: '#00eaff'
}
}
},
//标题样式
title: {
text: titleName,
textStyle: {
color: 'white',
},
left: 'center',
show: true,
},
//图形位置
grid: {
left: '4%',
right: '6%',
bottom: '4%',
top: 50,
containLabel: true
},
xAxis: [{
type: 'category',
//x轴坐标点开始与结束点位置都不在最边缘
boundaryGap: false,
axisLine: {
show: true,
onZero: false,//x轴一直在最下面
//x轴线样式
lineStyle: {
color: '#51fefe',
width: 2,
type: 'solid',
}
},
//x轴字体设置
axisLabel: {
show: true,
fontSize: 12,
color: 'white'
},
data: xData
}],
yAxis: [{
name: yAxisName,
type: 'value',
nameTextStyle: {
color: '#ffffff',
fontSize:12,
},
min: yNumData[0],//y轴最小值
max: yNumData[1],//y轴最大值
interval:yNumData[2],//刻度间隔
//y轴字体设置
axisLabel: {
show: true,
color: 'white',
fontSize: 12,
formatter: function(value) {
if (value >= 1000) {
value = value / 1000 + 'k';
}
return value;
}
},
//y轴线设置显示
axisLine: {
show: false
},
//与x轴平行的线样式
splitLine: {
show: true,
lineStyle: {
color: '#51fefe',
width: 1,
type: 'dashed',
}
}
}],
series: [{
name: seriesNameOne,
type: 'line',
smooth: true,
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: colorArr[0] // 0% 处的颜色
}, {
offset: 1,
color: colorArr[0] // 100% 处的颜色
}],
globalCoord: false
},
width: 2,
type: 'solid',
},
//折线连接点样式
itemStyle: {
color: colorArr[0]
},
//折线堆积区域样式
/* areaStyle: {
color: '#004c5E'
}, */
data: seriesDataOne
}, {
name: seriesNameTwo,
type: 'line',
smooth: true,
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: colorArr[1] // 0% 处的颜色
}, {
offset: 1,
color: colorArr[1] // 100% 处的颜色
}],
globalCoord: false
},
width: 2,
type: 'solid',
},
//折线连接点样式
itemStyle: {
color: colorArr[1],
},
//折线堆积区域样式
/* areaStyle: {
color: '#004c5E'
}, */
data: seriesDataTwo
}]
};
doubleLine.setOption(doubleLineOption);
}
drawDoubleLine(
'doubleLine',
'温度记录',
['11-11', '11-12', '11-13', '11-14','11-15', '11-16', '11-17', '11-18'],
'主卧室',
[5, 10, 15, 5,20,10,20,10],
'室外',
[10, 5, 5, 15,5,20,5,20],
'温度(℃)',
['主卧室','室外'],
['#51fefe','#1673ff'],
[-5,20,5],
);