power-poweproject
Powershell
mkdir my-echarts-project
cd my-echarts-project
npm init -y
npm install echarts --save
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ECharts Cumulative Chart Example</title>
<!-- Import ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!-- Prepare a DOM container with width and height -->
<div id="main" style="width: 600px;height:400px;"></div>
<!-- Import your main JavaScript file -->
<script src="main.js"></script>
</body>
</html>
Main.js
// Assume this is your raw data array with timestamps and values.
const rawData = [
['2023-11-03T00:00:00', 10],
['2023-11-03T00:05:00', 15],
['2023-11-03T00:10:00', 20]
// Add more data points as needed.
];
// Calculate cumulative totals.
const cumulativeData = rawData.reduce((acc, currentValue) => {
const lastSum = acc.length > 0 ? acc[acc.length - 1][1] : 0;
acc.push([currentValue[0], currentValue[1] + lastSum]);
return acc;
}, []);
// Initialize the ECharts instance based on the prepared DOM container.
const myChart = echarts.init(document.getElementById('main'));
// Specify the configuration items and data for the chart.
const option = {
title: {
text: 'Data Over Time'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
}
},
series: [
{
name: 'Raw Data',
data: rawData,
type: 'line',
showSymbol: true,
hoverAnimation: true,
markLine: {
data: [
{ type: 'average', name: 'Average' }
]
}
},
{
name: 'Cumulative Total',
data: cumulativeData,
type: 'line',
showSymbol: true,
hoverAnimation: true,
areaStyle: {}
}
]
};
// Use the specified configuration item and data to show the chart.
myChart.setOption(option);
it's possible to plot data at 5-minute intervals without explicitly specifying each interval. ECharts can automatically handle the time axis and intervals if you provide it with a series of timestamps and corresponding values.
you can calculate the cumulative sum in JavaScript like this:
// main.js
// This is the raw data with timestamps and values.
let rawData = [
['2023-11-03T00:00:00', 10],
['2023-11-03T00:05:00', 15],
['2023-11-03T00:10:00', 20]
];
// Process the raw data to calculate cumulative totals.
let cumulativeData = rawData.reduce((acc, currentValue) => {
if (acc.length > 0) {
currentValue[1] += acc[acc.length - 1][1];
}
acc.push(currentValue);
return acc;
}, []);
// Initialize the ECharts instance based on the prepared DOM container.
var myChart = echarts.init(document.getElementById('main'));
// Specify the configuration items and data for the chart.
var option = {
xAxis: {
type: 'time',
},
yAxis: {
type: 'value'
},
series: [{
data: cumulativeData,
type: 'line',
areaStyle: {} // Optional: Use this to create an area chart effect.
}]
};
// Use the specified configuration item and data to show the chart.
myChart.setOption(option);
xAxis: {
type: 'time',
boundaryGap: false,
min: 'dataMin', // Set the minimum value of the axis to the minimum data point
max: 'dataMax', // Set the maximum value of the axis to the maximum data point
axisLabel: {
formatter: function (value) {
// Format the date as a simple HH:mm string
const date = new Date(value);
const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
return hours + ':' + minutes;
},
rotate: 45, // Rotate the labels to prevent overlap
// Manual control over the interval can be complex because it might not display as expected
interval: 5 * 60 * 1000, // 5 minutes in milliseconds
},
splitLine: {
show: false
},
axisTick: {
alignWithLabel: true,
interval: function (index, value) {
// Show a tick only if the minutes are a multiple of 5
let date = new Date(value);
return date.getMinutes() % 5 === 0;
}
}
},
// Assume this is your raw data array with timestamps and values.
const rawData = [
['2023-11-03T00:00:00', 10],
['2023-11-03T00:05:00', 15],
['2023-11-03T00:10:00', 20],
// Add more data points as needed.
];
// Function to format the date into a readable string.
function formatDate(dateString) {
const date = new Date(dateString);
const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
return `${hours}:${minutes}`;
}
// Extract the labels from the rawData for the xAxis.
const labels = rawData.map(item => formatDate(item[0]));
// Calculate cumulative totals.
const cumulativeData = rawData.reduce((acc, currentValue) => {
const lastSum = acc.length > 0 ? acc[acc.length - 1][1] : 0;
acc.push([formatDate(currentValue[0]), currentValue[1] + lastSum]);
return acc;
}, []);
// Process the raw data to only include the labels.
const processedRawData = rawData.map(item => [formatDate(item[0]), item[1]]);
// Initialize the ECharts instance based on the prepared DOM container.
const myChart = echarts.init(document.getElementById('main'));
// Specify the configuration items and data for the chart.
const option = {
title: {
text: 'Data Over Time'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: labels, // Use the labels derived from the rawData.
axisLabel: {
rotate: 45, // Rotate labels if needed
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
}
},
series: [
{
name: 'Raw Data',
data: processedRawData.map(item => item[1]), // Use only the values for the category axis.
type: 'line',
showSymbol: true,
hoverAnimation: true
},
{
name: 'Cumulative Total',
data: cumulativeData.map(item => item[1]), // Use only the values for the category axis.
type: 'line',
showSymbol: true,
hoverAnimation: true,
areaStyle: {}
}
]
};
// Use the specified configuration item and data to show the chart.
myChart.setOption(option);