this.linkChartOption = {
title: {
text: '热耗变化趋势',
},
color: ['#1890FF', '#52C41A', '#FFC069', '#B37FEB', 'red'], // 配置数据颜色
grid: [
// 配置第一个折线图的位置
{
left: '5%',
right: '5%',
top: '10%',
height: '32%',
// bottom:'15%'
containLabel: true,
},
// 配置第二个折线图位置
{
left: '5%',
right: '5%',
top: '61%',
height: '32%',
containLabel: true,
},
],
tooltip: {
trigger: 'axis',
// formatter函数动态修改tooltip样式
formatter: function (params) {
// console.log('params:', params);
let arr = [];
const filteredTem = params.filter((obj) => obj.seriesName.includes('气温'));
const filteredRoom = params.filter((obj) => obj.seriesName.includes('室温'));
if (filteredTem.length > 0) {
arr[0] = filteredTem[0];
}
if (filteredRoom.length > 0) {
arr[1] = filteredRoom[0];
}
// console.log('arr:', arr);
for (let i = 0; i < params.length; i++) {
if (params[i]['seriesName'].includes('气温') || params[i]['seriesName'].includes('室温')) {
continue;
} else {
arr.push(params[i]);
}
}
arr=arr.filter(item=>item)
if (arr.length>0) {
var htmlStr = '';
htmlStr += arr[0].name + '<br/>'; //x轴的名称
for (var i = 0; i < arr.length; i++) {
var param = arr[i]; // 存一份item项
var seriesName = param.seriesName; //图例名称
var value = param.value; //y轴值
var color = param.color; //图例颜色
htmlStr += '<div>';
//圆点后面显示的文本
// switch (seriesName) {
// case seriesName.includes('平均气温'):
// htmlStr +=
// '<span style="margin-right:5px;display:inline-block;width:10px;height:12px;border-radius:5px;background-color:' +
// color +
// ';"></span>';
// break;
// case seriesName.includes('平均室温'):
// htmlStr += ' ' + '%';
// break;
// case '大件货物':
// htmlStr += ' ' + '件';
// break;
// default:
// htmlStr += ' ';
// }
if (seriesName.includes('平均气温')) {
htmlStr +=
'<span style="margin-right:5px;display:inline-block;width:10px;height:2px;line-height:2px;vertical-align:middle;background-color:' +
color +
';"></span>';
} else if (seriesName.includes('平均室温')) {
htmlStr +=
'<span style="margin-right:5px;display:inline-block;width:10px;height:2px;line-height:2px;vertical-align:middle;background-color:' +
color +
';"></span>';
} else if (seriesName.includes('实际')) {
htmlStr +=
'<span style="margin-right:5px;display:inline-block;width:10px;height:10px;line-height:10px;vertical-align:middle;background-color:' +
color +
';"></span>';
} else if (seriesName.includes('对标值')) {
htmlStr +=
'<span style="margin-right:5px;display:inline-block;width:10px;height:10px;line-height:10px;vertical-align:middle;background-color:' +
color +
';"></span>';
} else if (seriesName.includes('供')) {
htmlStr +=
'<span style="margin-right:5px;display:inline-block;width:10px;height:2px;line-height:2px;vertical-align:middle;background-color:' +
color +
';"></span>';
}
htmlStr += seriesName + '：' + value;
htmlStr += '</div>';
}
return htmlStr;
} else {
return;
}
},
borderWidth: 1,
// borderColor: '#ccc',
padding: 10,
textStyle: {
// color: '#000',
fontSize: 14,
align: 'left',
},
},
legend: [
{
show: true,
x: 'center',
y: '0',
data: ['日平均气温(℃)', '日平均室温(℃)'],
textStyle: {
fontSize: 14,
},
seriesIndex: 0,
icon: 'roundRect',
itemHeight: 2,
itemWidth: 15,
selected: {
[this.linkLegendSelectd]: false,
},
},
{
show: true,
// x: 'center',
y: '55%',
data: [],
textStyle: {
fontSize: 14,
},
itemHeight: 15,
itemWidth: 15,
seriesIndex: 1,
selected: {
[this.linkLegendSelectd]: false,
},
},
// {
// show: true,
// // right: '27%',
// y: '55%',
// data: [],
// icon: 'roundRect',
// itemHeight: 2,
// itemWidth: 15,
// textStyle: {
// fontSize: 14,
// },
// seriesIndex: 1,
// selected: {
// [this.linkLegendSelectd]: false,
// },
// itemGap: 115
// },
],
// 将上下两个tootip合成一个
axisPointer: {
link: { xAxisIndex: 'all' },
},
xAxis: [
{
type: 'category',
boundaryGap: false,
scale: false,
axisLabel: {
show: true,
fontSize: 14,
margin: 15,
},
axisTick: {
alignWithLabel: true,
},
splitLine: {
show: false,
},
data: this.xData, //x轴时间的数据
},
{
gridIndex: 1,
type: 'category',
boundaryGap: true,
scale: false,
axisLabel: {
fontSize: 14,
margin: 15,
},
axisTick: {
show: true,
alignWithLabel: true,
},
splitLine: {
show: false,
},
data: this.xData, //x轴时间的数据
},
],
yAxis: [
{
type: 'value',
name: '温度：℃',
nameLocation: 'center',
nameGap: 50,
nameTextStyle: {
fontSize: 14,
fontWeight: '500',
},
axisLine: {
show: false,
},
axisLabel: {
fontSize: 14,
},
scale: true,
boundaryGap: [0, '100%'],
splitLine: {
show: true,
linseStyle: 'dotted',
},
splitNumber: 5, //设置坐标轴的分割段数
min: function (value) {
return parseInt(value.min);
},
max: function (value) {
const num = value.max * 1.05;
return parseInt(num.toString());
},
},
{
type: 'value',
name: '',
nameLocation: 'center',
nameGap: 50,
nameTextStyle: {
fontSize: 14,
fontWeight: '500',
},
axisLine: {
show: false,
},
axisLabel: {
fontSize: 14,
},
scale: true,
boundaryGap: [0, '100%'],
splitLine: {
show: true,
linseStyle: 'dotted',
},
min: function (value) {
return parseInt(value.min);
},
max: function (value) {
const num = value.max * 1.05;
return parseInt(num.toString());
},
},
{
type: 'value',
name: '实际供热量单耗：W/m²',
nameLocation: 'center',
gridIndex: 1,
nameGap: 50,
nameTextStyle: {
fontSize: 14,
},
axisLabel: {
fontSize: 14,
},
axisLine: {
show: false,
},
scale: true,
boundaryGap: [0, '100%'],
splitLine: {
show: true,
linseStyle: 'dotted',
},
splitNumber: 5, //设置坐标轴的分割段数
},
{
axisLine: {
show: false,
},
type: 'value',
name: '供热量：GJ',
nameLocation: 'center',
gridIndex: 1,
nameGap: 50,
nameTextStyle: {
fontSize: 14,
},
axisLabel: {
fontSize: 14,
},
// min: function (value) {
// return parseInt(value.min);
// },
// max: function (value) {
// return parseInt(value.max * 1.05);
// },
scale: true,
boundaryGap: [0, '100%'],
splitLine: {
show: false,
},
splitNumber: 4, //设置坐标轴的分割段数
},
{
axisLine: {
show: false,
},
type: 'value',
name: '',
nameLocation: 'center',
gridIndex: 1,
nameGap: 50,
nameTextStyle: {
show: false,
fontSize: 14,
},
axisLabel: {
show: false,
fontSize: 14,
},
// min: function (value) {
// return parseInt(value.min);
// },
// max: function (value) {
// return parseInt(value.max * 1.05);
// },
scale: true,
boundaryGap: [0, '100%'],
splitLine: {
show: false,
},
splitNumber: 4, //设置坐标轴的分割段数
},
],
series: [
{
name: '日平均气温(℃)',
type: 'line',
xAxisIndex: 0,
yAxisIndex: 0,
hoverAnimation: true, // 悬浮的动画加上
data: this.y1Data, //平均气温
areaStyle: {
opacity: 0.6,
origin: 'start',
},
symbol: 'none', // 设置为 "none"，隐藏小圆点
showSymbol: false, // 将 showSymbol 属性设置为 false，隐藏小圆点
// seriesIndex: 0,
stack: 'Total',
smooth: true,
emphasis: {
focus: 'series',
},
},
{
name: '日平均室温(℃)',
type: 'line',
xAxisIndex: 0,
yAxisIndex: 0,
hoverAnimation: true, // 悬浮的动画加上
data: this.y2Data, //日平均室温
areaStyle: {
opacity: 0.6,
},
symbol: 'none', // 设置为 "none"，隐藏小圆点
showSymbol: false, // 将 showSymbol 属性设置为 false，隐藏小圆点
seriesIndex: 0,
// stack: 'Total',
smooth: true,
emphasis: {
focus: 'series',
},
},
{
name: '实际热单耗(W/m²)',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 2,
hoverAnimation: true, // 悬浮的动画加上
data: this.y3Data, //实际热单耗
areaStyle: {},
smooth: true,
symbol: 'none', // 设置为 "none"，隐藏小圆点
showSymbol: false, // 将 showSymbol 属性设置为 false，隐藏小圆点
seriesIndex: 1,
barGap: '3%',
barWidth: '15%',
barCategoryGap: '70%',
},
{
name: '单耗对标值(W/m²)',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 3,
hoverAnimation: true, // 悬浮的动画加上
data: this.y4Data, //网点负荷
areaStyle: {},
smooth: true,
symbol: 'none', // 设置为 "none"，隐藏小圆点
showSymbol: false, // 将 showSymbol 属性设置为 false，隐藏小圆点
seriesIndex: 1,
barGap: '3%',
barWidth: '15%',
barCategoryGap: '70%',
},
{
name: '供热量(GJ)',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 4,
hoverAnimation: true, // 悬浮的动画加上
data: this.y5Data, //网点负荷
smooth: true,
symbol: 'none', // 设置为 "none"，隐藏小圆点
showSymbol: false, // 将 showSymbol 属性设置为 false，隐藏小圆点
seriesIndex: 1,
},
],
dataZoom: [
{
type: 'inside',
startValue: 0, //
endValue: this.y1Data.length - 1,
xAxisIndex: [0, 1], // 显示 0 1 的数据，这个要加，不加的话，悬浮提示就会出问题
},
],
};