今天做个需求，做表格滑动类似于下面的截图，使用第三方，不是echarts库
接下来是echarts代码以及做效果
<div id="chart-container"></div>
<script>
gttatistics(){
Getstatistics().then(response => {
if (response && response.data) {
const data = response.data;
const today = new Date();
today.setHours(0, 0, 0, 0);
const currentDateStr = today.getFullYear() + "-" +
String(today.getMonth() + 1).padStart(2, '0') + "-" +
String(today.getDate()).padStart(2, '0');
const todayData = data.filter(item => {
if (item.date) {
return item.date === currentDateStr;
} else {
const itemHour = parseInt(item.xs);
const currentHour = new Date().getHours();
if (currentHour < 6) {
return true;
} else {
return itemHour <= currentHour;
}
}
}).reverse();
const filteredData = todayData.length >= 7 ? todayData : data.slice(0, Math.max(7, todayData.length)).reverse();
const xAxisData = filteredData.map(item => `${item.xs}:00`);
const processValue = (value) => {
const num = parseFloat(value);
return !isNaN(num) && num >= 0 ? num : 0;
};
const ljrlData = filteredData.map(item => processValue(item.ljrl));
const ljdnData = filteredData.map(item => processValue(item.ljdn));
const sbjljllData = filteredData.map(item => processValue(item.sbjljll));
const swwdData = filteredData.map(item => processValue(item.swwd));
this.updateEnergyChart(xAxisData, ljrlData, ljdnData, sbjljllData, swwdData);
}
});
},
//=============
updateEnergyChart(xAxisData, ljrlData, ljdnData, sbjljllData, swwdData) {
const chart = echarts.init(document.getElementById('chart-container'));
const findMinMax = (data, minHeight, maxHeight) => {
const maxValue = Math.max(...data, minHeight);
return {
min: 0,
max: Math.min(maxValue * 1.2, maxHeight)
};
};
const dataLength = xAxisData.length;
const sevenItemsPercent = dataLength > 7 ? (7 / dataLength) * 100 : 100;
const initialEnd = 100;
const initialStart = initialEnd - sevenItemsPercent;
const option = {
color: ['#0bb988', '#fad870', '#f1608f', '#1ffcff'],
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
confine: true,
padding: [5, 10]
},
legend: {
data: ['日用热(单位:GJ)', '日用电(单位:Wh)', '日用水(单位:m)', '室内温度(单位:C)'],
textStyle: { color: '#fff', fontSize: 11 },
itemWidth: 15,
itemHeight: 10,
itemGap: 8,
top: '15%',
right: '10%',
padding: [0, 5],
selectedMode: true
},
grid: {
top: '30%',
left: '3%',
right: '2%',
bottom: '10%',
containLabel: true
},
dataZoom: [
{
type: 'slider',
xAxisIndex: 0,
filterMode: 'filter',
height: 8,
bottom: 0,
start: initialStart,
end: initialEnd,
// borderColor: 'rgba(200,200,200)',
backgroundColor: 'rgba(100,100,100)',
fillerColor: 'rgba(82,255,255)',
handleStyle: {
color: '#1ffcff',
size: 8
},
textStyle: {
color: '#fff',
fontSize: 10
},
showDetail: false,
brushSelect: false
},
{
type: 'inside',
xAxisIndex: 0,
start: initialStart,
end: initialEnd,
zoomOnMouseWheel: true,
moveOnMouseMove: true
}
],
xAxis: {
type: 'category',
data: xAxisData,
axisLabel: {
color: '#fff',
// rotate: 45,
fontSize: 10,
margin: 8
},
axisLine: {
lineStyle: { color: '#fff', width: 1 }
},
axisTick: {
show: false
}
},
yAxis: [
{
type: 'value',
name: '',
nameTextStyle: {
color: '#fff',
fontSize: 10,
padding: [0, 0, 0, 0]
},
min: 0,
max: 40,
axisLabel: {
show: false,
color: '#fff',
fontSize: 10,
margin: 5
},
axisLine: {
show: true,
lineStyle: { color: '#fff', width: 1 }
},
splitLine: {
show: true,
lineStyle: { color: 'rgba(255,255,255,0.1)', width: 0.5 }
},
splitNumber: 4
},
{
type: 'value',
name: '',
nameTextStyle: {
color: '#fff',
fontSize: 10,
padding: [0, 0, 0, 5]
},
min: 0,
max: 600,
axisLabel: {
show: false,
color: '#fff',
fontSize: 10,
margin: 5
},
axisLine: {
show: true,
lineStyle: { color: '#fff', width: 1 }
},
splitLine: { show: false },
splitNumber: 4
}
],
series: [
{
name: '日用热(单位:GJ)',
type: 'bar',
data: ljrlData,
barWidth: '18%',
barGap: '5%',
minBarHeight: 5,
yAxisIndex: 0,
label: {
show: true,
position: 'top',
color: 'rgb(36,191,124)',
fontWeight: 'bold',
fontSize: 10,
distance: 0,
formatter: '{c}'
},
z: 10
},
{
name: '日用电(单位:Wh)',
type: 'bar',
data: ljdnData,
barWidth: '18%',
barGap: '5%',
minBarHeight: 5,
yAxisIndex: 1,
label: {
show: true,
position: 'top',
color: '#fad870',
fontWeight: 'bold',
fontSize: 10,
distance: 0,
formatter: v => (v.value >= 1000 ? (v.value / 1000) + 'k' : v.value)
},
z: 9
},
{
name: '日用水(单位:m)',
type: 'bar',
data: sbjljllData,
barWidth: '18%',
barGap: '5%',
minBarHeight: 5,
yAxisIndex: 1,
label: {
show: true,
position: 'top',
color: '#f1608f',
fontWeight: 'bold',
fontSize: 10,
distance: 0,
formatter: v => (v.value >= 1000 ? (v.value / 1000) + 'k' : v.value)
},
z: 8 // 设置z轴层级
},
{
name: '室内温度(单位:C)',
type: 'bar',
data: swwdData,
barWidth: '18%',
barGap: '5%',
minBarHeight: 5,
yAxisIndex: 0,
label: {
show: true,
position: 'top',
color: '#1ffcff',
fontWeight: 'bold',
fontSize: 10,
distance: 0,
formatter: '{c}'
},
z: 7
}
]
};
option.yAxis[0].max = 40;
option.yAxis[1].max = 600;
chart.setOption(option);
// 响应式
const observer = new ResizeObserver(() => chart.resize());
observer.observe(document.getElementById('chart-container'));
},
</script>
以上主要的代码是定义dataZoom的数组，进行代码的书写。
