要求x轴从0点开始，间隔15分钟一个点，后台返回的时间间隔不一样。
效果图：
数据：
{
"title": "电流曲线",
"x": {
"key": "测点时间",
"value": [
"2023-10-19T00:01:04",
"2023-10-19T00:06:04",
"2023-10-19T00:11:05",
"2023-10-19T00:16:04",
"2023-10-19T00:21:06",
"2023-10-19T00:26:05",
"2023-10-19T00:31:04",
"2023-10-19T00:36:04",
"2023-10-19T00:41:03",
"2023-10-19T00:46:03",
"2023-10-19T00:51:03",
"2023-10-19T00:56:04",
"2023-10-19T01:01:06",
"2023-10-19T01:06:04",
"2023-10-19T01:11:03",
"2023-10-19T01:16:04",
"2023-10-19T01:21:05",
"2023-10-19T01:26:06",
"2023-10-19T01:31:06",
"2023-10-19T01:36:06",
"2023-10-19T01:41:06",
"2023-10-19T01:46:06",
"2023-10-19T01:51:05",
"2023-10-19T01:56:05",
"2023-10-19T02:01:06",
"2023-10-19T02:06:06",
"2023-10-19T02:11:06",
"2023-10-19T02:16:06",
"2023-10-19T02:21:05",
"2023-10-19T02:26:06",
"2023-10-19T02:31:06",
"2023-10-19T02:36:06",
"2023-10-19T02:41:05",
"2023-10-19T02:46:07",
"2023-10-19T02:51:08",
"2023-10-19T02:56:05",
"2023-10-19T03:01:07",
"2023-10-19T03:06:07",
"2023-10-19T03:11:05",
"2023-10-19T03:16:06",
"2023-10-19T03:21:05",
"2023-10-19T03:26:05",
"2023-10-19T03:31:05",
"2023-10-19T03:36:06",
"2023-10-19T03:41:06",
"2023-10-19T03:46:06",
"2023-10-19T03:51:06",
"2023-10-19T03:56:05",
"2023-10-19T04:01:05",
"2023-10-19T04:06:06",
"2023-10-19T04:11:05",
"2023-10-19T04:16:06",
"2023-10-19T04:21:06",
"2023-10-19T04:26:05",
"2023-10-19T04:31:05",
"2023-10-19T04:36:05",
"2023-10-19T04:41:05",
"2023-10-19T04:46:05",
"2023-10-19T04:51:05",
"2023-10-19T04:56:05",
"2023-10-19T05:01:05",
"2023-10-19T05:06:06",
"2023-10-19T05:11:05",
"2023-10-19T05:16:05",
"2023-10-19T05:21:05",
"2023-10-19T05:26:05",
"2023-10-19T05:31:05",
"2023-10-19T05:36:06",
"2023-10-19T05:41:05",
"2023-10-19T05:46:05",
"2023-10-19T05:51:06",
"2023-10-19T05:56:05",
"2023-10-19T06:01:06",
"2023-10-19T06:06:05",
"2023-10-19T06:11:05",
"2023-10-19T06:16:05",
"2023-10-19T06:21:05",
"2023-10-19T06:26:05",
"2023-10-19T06:31:06",
"2023-10-19T06:36:05",
"2023-10-19T06:41:06",
"2023-10-19T06:46:05",
"2023-10-19T06:51:05",
"2023-10-19T06:56:05",
"2023-10-19T07:01:04",
"2023-10-19T07:06:06",
"2023-10-19T07:11:05",
"2023-10-19T07:16:05",
"2023-10-19T07:21:07",
"2023-10-19T07:26:05",
"2023-10-19T07:31:05",
"2023-10-19T07:36:06",
"2023-10-19T07:41:06",
"2023-10-19T07:46:04",
"2023-10-19T07:51:05",
"2023-10-19T07:56:05",
"2023-10-19T08:01:05",
"2023-10-19T08:06:06",
"2023-10-19T08:11:06",
"2023-10-19T08:16:04"
]
},
"y": [
{
"key": "电流",
"value": [
1382.9535,
1327.9814,
1357.094,
1330.937,
1392.5257,
1396.0697,
1349.1041,
1364.3756,
1375.1535,
1314.9698,
1399.2859,
1424.8677,
1449.2892,
1471.3269,
1459.3263,
1509.2054,
1487.5339,
1457.8058,
1425.4581,
1459.1478,
1468.4656,
1469.8753,
1486.0217,
1492.6762,
1439.3685,
1512.1123,
1502.9482,
1458.1265,
1469.5096,
1498.9141,
1481.8331,
1464.9499,
1444.1253,
1477.575,
1428.0432,
1450.1836,
1441.935,
1490.2819,
1448.9059,
1405.6814,
1402.1942,
1493.6189,
1436.5123,
1426.9581,
1458.4347,
1496.6733,
1486.695,
1457.5228,
1457.3034,
1473.9188,
1490.6446,
1467.6536,
1489.4221,
1459.5141,
1464.847,
1487.144,
1456.6135,
1475.494,
1475.1923,
1485.6143,
1442.7171,
1493.6869,
1439.3117,
1423.7016,
1430.6175,
1450.6202,
1452.3598,
1463.8424,
1421.4912,
1373.4611,
1363.7153,
1374.4329,
1360.588,
1386.4821,
1400.3161,
1345.7341,
1382.2266,
1373.4378,
1351.2138,
1395.0271,
1399.8658,
1396.8667,
1421.277,
1432.9479,
1445.0369,
1475.7256,
1434.2602,
1474.7661,
1482.7684,
1479.9694,
1470.7841,
1482.83,
1498.7133,
1511.552,
1457.9236,
1471.0004,
1421.4005,
1411.9025,
1388.9948,
1402.2357
]
},
{
"key": "a相电流",
"value": [
"1391.323526",
"1335.746788",
"1370.725416",
"1348.375285",
"1413.981124",
"1411.226506",
"1361.135007",
"1373.736673",
"1381.255569",
"1331.151065",
"1407.020268",
"1436.582196",
"1460.353077",
"1484.540862",
"1472.66067",
"1514.992804",
"1501.400711",
"1471.456037",
"1435.411306",
"1466.986754",
"1483.580321",
"1476.705615",
"1498.995129",
"1503.903495",
"1453.354568",
"1521.971701",
"1514.609766",
"1473.560521",
"1481.362031",
"1510.098474",
"1496.300598",
"1480.45902",
"1458.895137",
"1493.41677",
"1439.842663",
"1462.025084",
"1453.514764",
"1501.723014",
"1457.788693",
"1420.467664",
"1417.172014",
"1502.647077",
"1453.701471",
"1444.034388",
"1469.489932",
"1512.86438",
"1495.641777",
"1468.581851",
"1467.830695",
"1489.920351",
"1500.653431",
"1476.540501",
"1503.572164",
"1469.236156",
"1479.719159",
"1502.126072",
"1466.911297",
"1488.151411",
"1483.544429",
"1503.177132",
"1451.482311",
"1503.780241",
"1451.542616",
"1438.134716",
"1445.945049",
"1461.523357",
"1465.424262",
"1472.05295",
"1432.757544",
"1383.385586",
"1375.674055",
"1391.108502",
"1372.958713",
"1396.374641",
"1412.381417",
"1356.493649",
"1397.332287",
"1387.213147",
"1366.33182",
"1407.82092",
"1414.437927",
"1409.889812",
"1436.101834",
"1444.44557",
"1457.303887",
"1494.227109",
"1446.094749",
"1493.138873",
"1492.518252",
"1493.959435",
"1486.153887",
"1497.975457",
"1517.244975",
"1519.782376",
"1469.801175",
"1484.796433",
"1428.374165",
"1424.222006",
"1399.845643",
"1410.525029"
]
},
{
"key": "b相电流",
"value": [
1363.9367,
1306.9792,
1331.9206,
1307.4707,
1363.9632,
1366.514,
1325.0722,
1345.3399,
1355.3961,
1286.0307,
1377.8097,
1403.2731,
1428.352,
1443.3568,
1429.1326,
1488.7996,
1461.8837,
1434.7694,
1408.0426,
1436.4377,
1449.79,
1448.3777,
1459.1045,
1469.8977,
1415.8604,
1492.9045,
1483.3259,
1434.6035,
1449.0828,
1477.7061,
1458.1137,
1444.1756,
1416.06,
1455.1042,
1407.3228,
1427.1458,
1417.1194,
1467.0427,
1429.2911,
1386.4215,
1382.955,
1474.1634,
1407.893,
1400.6365,
1436.4767,
1475.3991,
1469.9253,
1438.2569,
1435.7517,
1455.4833,
1463.9878,
1448.5252,
1462.5933,
1435.3585,
1437.941,
1463.7561,
1437.9651,
1450.352,
1453.9372,
1462.6448,
1419.8587,
1476.585,
1412.0082,
1393.7627,
1398.0392,
1428.1517,
1431.1681,
1445.9121,
1394.7587,
1348.2646,
1339.4283,
1346.2665,
1335.9733,
1365.1251,
1376.345,
1323.7194,
1359.4685,
1350.3134,
1325.5567,
1377.7667,
1371.9679,
1371.5353,
1397.3605,
1411.9512,
1420.3459,
1455.4192,
1411.3988,
1451.1217,
1463.4137,
1451.4799,
1441.8384,
1457.1949,
1475.2114,
1496.597,
1435.1447,
1449.7812,
1403.8533,
1393.6591,
1366.4291,
1379.9501
]
},
{
"key": "c相电流",
"value": [
1393.6003,
1341.2182,
1368.6359,
1336.9649,
1399.6329,
1410.4687,
1361.1051,
1374.0502,
1388.8088,
1327.7275,
1413.0276,
1434.7477,
1459.1625,
1486.0831,
1476.1857,
1523.8239,
1499.3174,
1467.1919,
1432.9203,
1474.0189,
1472.0263,
1484.5426,
1499.9653,
1504.2275,
1448.8904,
1521.4608,
1510.9089,
1466.2153,
1478.0839,
1508.9376,
1491.0849,
1470.2151,
1457.4208,
1484.2041,
1436.9642,
1461.3799,
1455.1709,
1502.08,
1459.6379,
1410.1551,
1406.4555,
1504.0462,
1447.9424,
1436.2035,
1469.3375,
1501.7565,
1494.518,
1465.7295,
1468.3278,
1476.3527,
1507.2926,
1477.8952,
1502.1007,
1473.9475,
1476.8808,
1495.5497,
1464.9642,
1487.9786,
1488.0954,
1491.0211,
1456.8101,
1500.6955,
1454.3842,
1439.2073,
1447.8684,
1462.1855,
1460.487,
1473.5622,
1436.9573,
1388.733,
1376.0434,
1385.9236,
1372.8321,
1397.9466,
1412.2219,
1356.9894,
1389.8791,
1382.7868,
1361.7529,
1399.4936,
1413.1917,
1409.175,
1430.3686,
1442.4469,
1457.4609,
1477.5306,
1445.2871,
1480.0377,
1492.3734,
1494.469,
1484.36,
1493.3198,
1503.6835,
1518.2767,
1468.8251,
1478.4237,
1431.9739,
1417.8263,
1400.7097,
1416.2319
]
}
]
}
newInit(chartData) {
let { myChart } = this
let echartsDom = document.querySelector('.myChart')
myChart = echarts.init(echartsDom)
let seriesData = []
let legendData = []
chartData.y.forEach((ey, iy) => {
let xData = []
chartData.x.value.forEach((ex, ix) => {
xData.push({
name: ex,
value: [ex, ey.value[ix]]
})
});
seriesData.push({
type: 'line',
name: ey.key,
data: xData,
smooth: true,
showSymbol: false,
})
legendData.push(ey.key)
});
let setting = {
yAxisName: '',
yAxisUnit: '',
// 使用了moment.js
min: moment(chartData.x.value[0]).format('YYYY-MM-DD 00:00'), // YYYY-MM-DD HH:mm为获取数值的最小值
max: moment(chartData.x.value[chartData.x.value.length - 1]).format('YYYY-MM-DD HH:mm')
}
let option = {
title: {
text: chartData.title,
textStyle: {
fontSize: 16
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
}
},
grid: {
top: '15%',
},
legend: {
show: true,
top: '5%',
data: legendData,
icon: 'roundRect',
itemHeight: 2,
},
xAxis: {
type: 'time',
min: setting.min,
// 控制时间间隔为15分钟
minInterval: 900 * 1000,
maxInterval: 901 * 1000,
interval: 15,
boundaryGap: false,
name: chartData.x.key,
nameLocation: 'center',
nameTextStyle: {
lineHeight: 55
},
axisTick: {
show: false
},
axisLabel: {
rotate: 60,
color: '#89AADD',
fontSize: 12,
formatter: function(value, index) {
return moment(value).format('HH:mm')
}
},
},
yAxis: {
type: 'value',
scale: true,
axisLine: {
show: true,
lineStyle: {
}
},
splitLine: {
show: false
},
axisLabel: {
formatter: '{value} ' + setting.yAxisUnit
},
},
series: seriesData
}
if (option && typeof option === 'object') {
myChart.setOption(option, true)
window.onresize = myChart.resize;
}
},
