data={
"msg": "操作成功",
"code": 200,
"dataList": [
{
"yzDataList": [
[
"2023-10-16",
19.74,
20.3
],
[
"2023-10-17",
19.74,
20.3
],
[
"2023-10-18",
18.9,
22.2
]
],
"dateDataList": [
{
"area_name": "西控花园智慧热力",
"heat_station_name": "西控花园智慧热力",
"yzNum": 0.28,
"company_name": "西联供热有限公司",
"branch_name": "低区",
"name": "2023-10-16",
"zone_name": "西控花园小区",
"value": 20.02
},
{
"area_name": "西控花园智慧热力",
"heat_station_name": "西控花园智慧热力",
"yzNum": 0.28,
"company_name": "西联供热有限公司",
"branch_name": "低区",
"name": "2023-10-17",
"zone_name": "西控花园小区",
"value": 20.02
},
{
"area_name": "西控花园智慧热力",
"heat_station_name": "西控花园智慧热力",
"yzNum": 1.65,
"company_name": "西联供热有限公司",
"branch_name": "低区",
"name": "2023-10-18",
"zone_name": "西控花园小区",
"value": 20.55
}
]
},
{
"yzDataList": [
[
0,
19.6,
21.9
]
],
"dateDataList": [
{
"area_name": "西联",
"heat_station_name": "西联",
"yzNum": 1.15,
"company_name": "西联供热有限公司",
"branch_name": null,
"name": "2023-10-18",
"zone_name": "西电劳动路小区北区",
"value": 20.75
}
]
}
],
"dateList": [
"2023-10-11",
"2023-10-12",
"2023-10-13",
"2023-10-14",
"2023-10-15",
"2023-10-16",
"2023-10-17",
"2023-10-18"
]
}
let barGap = '0.2';
let barWidth = '30%';
barGap = '0';
barWidth = '0%'
debugger;
let seriesArr = [];
let legendArr = [];
let dateList = data.dateList;
let dataList = data.dataList;
for (let i = 0; i < dataList.length; i++) {
let dl = dataList[i];
let dateDataList = dl.dateDataList;
let yzDataList = dl.yzDataList;
let lineName = dateDataList[0].heat_station_name;
legendArr.push(lineName);
let lineObj = {
name: lineName,
type: 'line',
// barWidth: barWidth,
symbol:'circle',
smooth: true ,
data: dateDataList
}
let customObj = {
type: 'custom',
name: '',
itemStyle: {
borderWidth: 1.5,
// color: "#ffff"
},
renderItem: function (params, api) {
var xValue = api.value(0);
let size = api.size(1,0)[0]
var highPoint = api.coord([xValue, api.value(1)]);
var lowPoint = api.coord([xValue, api.value(2)]);
var halfWidth = size * 0.1;
var style = api.style({
stroke: api.visual('color'),
fill: undefined
});
let barWidth_float = parseFloat(barWidth)/100;
let proportion = barGap*1/3 + barWidth_float
return {
type: 'group',
children: [
{
type: 'line',
transition: ['shape'],
shape: {
x1: highPoint[0]- (size*proportion/2) - halfWidth,
y1: highPoint[1],
x2: highPoint[0]- (size*proportion/2) + halfWidth,
y2: highPoint[1]
},
style: style
},
{
type: 'line',
transition: ['shape'],
shape: {
x1: highPoint[0]- (size*proportion/2),
y1: highPoint[1],
x2: lowPoint[0]- (size*proportion/2),
y2: lowPoint[1]
},
style: style
},
{
type: 'line',
transition: ['shape'],
shape: {
x1: lowPoint[0]- (size*proportion/2) - halfWidth,
y1: lowPoint[1],
x2: lowPoint[0]- (size*proportion/2) + halfWidth,
y2: lowPoint[1]
},
style: style
}
]
};
},
encode: {
x: 0,
y: [1, 2]
},
data: yzDataList,
z: 100
}
seriesArr.push(lineObj);
// seriesArr.push(customObj);
}
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
},
formatter:function(params){
debugger;
var relVal = params[0].name
for (var i = 0, l = params.length; i < l; i++)
{
if (params[i].seriesType == "custom")
{
continue;
}
relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + '±' + params[i].data.yzNum + '℃';
}
return relVal
},
},
// color: ['#56d86e', '#e65efe'],
legend: {
itemHeight:12,//改变圆圈大小
type: 'scroll',
textStyle:{
fontSize:14,
// color:'#fff',
rich:{
b:{color:'red'}
}
},
// data: roomNames, /*这时房间名称的数组*/
type: "scroll", //分页类型
pageIconColor: '#6495ed', //翻页下一页的三角按钮颜色
pageIconInactiveColor: '#aaa', //翻页（即翻页到头时）
pageButtonItemGap: 10,//翻页按钮的两个之间的间距
pageIconSize: 15, //翻页按钮大小
pageTextStyle:{
color: "#fff"
},
width: "80%",
/* height: "80",*/
top: "15"
},
grid: {
left: '20',
right: '80',
bottom: '30',
containLabel: true
},
xAxis: [
{
type: 'category',
name:'温度℃',
nameTextStyle: {
// color: "#fff",
fontSize: 16,
padding: [10, 0, 0, 20]
},
axisLabel: {
textStyle: {
// color: '#fff',//坐标数值的具体的颜色
}
},
axisLine: {
symbol: ['none', 'arrow'],
symbolOffset:[0, 30],
lineStyle: {
color: '#5daec4',//坐标轴的颜色
width: 3,
type: 'solid',
shadowOffsetX:30,
shadowColor:'#5daec4'
}
},
data: dateList,
}
],
yAxis: [
{
type: 'value',
name: '日期',
min: 0,
// max: 250,
// interval: 50,
nameTextStyle: {
// color: "#fff",
fontSize: 15
},
axisLabel: {
formatter: '{value}',
textStyle: {
// color: '#fff',//坐标数值的具体的颜色
}
},
axisLine: {
symbol: ['none', 'arrow'],
symbolOffset:[0, 20],
lineStyle: {
color: '#5daec4',//坐标轴的颜色
width: 3,
type: 'solid',
shadowOffsetY:-20,
shadowColor:'#5daec4'
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#5daec4'],
width: 1,
type: 'solid'
}
}
}
],
series: seriesArr
}