Record the development needs you encounter at work, hoping it will be helpful to others.
Requirements: You need to select the year, month, and day based on a drop-down selection box, pass different parameters, dynamically render the data according to different values, and compare multiple types, compare the same year together, and exclude those that are not returned by the interface. Date, do data processing.
Simulated data: Modify according to your own business situation. There are 3 types of time here.
const dayData = [
{
"load_cx4": 410542,
"load_cx5": 76517,
"load_cx2": 124012,
"load_cx3": 334962,
"year": 2022,
"load_cx1": 1511398,
"axles": 3291,
"load_cx6": 3148367,
"load_cx7": 919311,
"loads": 6525109,
"load3": 76517,
"load2": 2380914,
"load5": 109175,
"total2": 1057,
"gcrq": "2022-05-01",
"totals": 1267,
"load4": 1722191,
"total3": 15,
"total9": 33,
"month": 5,
"total4": 84,
"gczbs": "51000020160412100910844rlpJLxoD6",
"load6": 1949521,
"total5": 8,
"load9": 286791,
"total6": 70,
"total_cx4": 32,
"total_cx5": 15,
"total_cx6": 147,
"total_cx7": 48,
"total_cx1": 817,
"total_cx2": 13,
"total_cx3": 195
},
{
"load_cx4": 214867,
"load_cx5": 101036,
"load_cx2": 11149,
"load_cx3": 415157,
"year": 2022,
"load_cx1": 1616387,
"axles": 3481,
"load_cx6": 2956191,
"load_cx7": 710374,
"loads": 6025161,
"load3": 101036,
"load2": 2257560,
"load5": 185282,
"total2": 1256,
"gcrq": "2022-05-02",
"totals": 1434,
"load4": 1271642,
"total3": 10,
"total9": 22,
"month": 5,
"total4": 67,
"gczbs": "51000020160412100910844rlpJLxoD6",
"load6": 1844804,
"total5": 11,
"load9": 364837,
"total6": 68,
"total_cx4": 22,
"total_cx5": 10,
"total_cx6": 137,
"total_cx7": 31,
"total_cx1": 980,
"total_cx2": 1,
"total_cx3": 253
},
{
"load_cx4": 1080415,
"load_cx5": 840439,
"load_cx2": 991544,
"load_cx3": 3200850,
"year": 2022,
"load_cx1": 11709596,
"axles": 27588,
"load_cx6": 20914117,
"load_cx7": 4671400,
"loads": 43408361,
"load3": 840439,
"load2": 16982405,
"load5": 978521,
"total2": 8367,
"gcrq": "2022-05-03",
"totals": 10079,
"load4": 9709127,
"total3": 75,
"total9": 356,
"month": 5,
"total4": 632,
"gczbs": "51000020160412100910844rlpJLxoD6",
"load6": 12350636,
"total5": 68,
"load9": 2547233,
"total6": 581,
"total_cx4": 104,
"total_cx5": 75,
"total_cx6": 1276,
"total_cx7": 361,
"total_cx1": 6406,
"total_cx2": 115,
"total_cx3": 1742
},
{
"load_cx4": 1350002,
"load_cx5": 1312769,
"load_cx2": 1607006,
"load_cx3": 3469962,
"year": 2022,
"load_cx1": 13390232,
"axles": 31929,
"load_cx6": 23234549,
"load_cx7": 6568181,
"loads": 50932701,
"load3": 1312769,
"load2": 19817202,
"load5": 1434747,
"total2": 9341,
"gcrq": "2022-05-04",
"totals": 11355,
"load4": 10754338,
"total3": 128,
"total9": 440,
"month": 5,
"total4": 700,
"gczbs": "51000020160412100910844rlpJLxoD6",
"load6": 13543924,
"total5": 95,
"load9": 4069721,
"total6": 651,
"total_cx4": 106,
"total_cx5": 128,
"total_cx6": 1437,
"total_cx7": 449,
"total_cx1": 7224,
"total_cx2": 136,
"total_cx3": 1875
},
{
"load_cx4": 1782454,
"load_cx5": 1382739,
"load_cx2": 1591580,
"load_cx3": 3446190,
"year": 2022,
"load_cx1": 13372239,
"axles": 33088,
"load_cx6": 26782587,
"load_cx7": 6578400,
"loads": 54936189,
"load3": 1382739,
"load2": 20192463,
"load5": 1820880,
"total2": 9287,
"gcrq": "2022-05-05",
"totals": 11494,
"load4": 12119316,
"total3": 132,
"total9": 481,
"month": 5,
"total4": 760,
"gczbs": "51000020160412100910844rlpJLxoD6",
"load6": 15357136,
"total5": 121,
"load9": 4063655,
"total6": 713,
"total_cx4": 148,
"total_cx5": 132,
"total_cx6": 1584,
"total_cx7": 491,
"total_cx1": 7055,
"total_cx2": 151,
"total_cx3": 1933
},
{
"load_cx4": 1754023,
"load_cx5": 1808103,
"load_cx2": 1791631,
"load_cx3": 3645515,
"year": 2022,
"load_cx1": 13951775,
"axles": 34918,
"load_cx6": 32726488,
"load_cx7": 7982141,
"loads": 63659676,
"load3": 1808103,
"load2": 222,
"load5": 1905621,
"total2": 9611,
"gcrq": "2022-05-02",
"totals": 12107,
"load4": 16420845,
"total3": 181,
"total9": 509,
"month": 5,
"total4": 923,
"gczbs": "510000201604151437057760ZY9pVRt0",
"load6": 17525619,
"total5": 118,
"load9": 4856544,
"total6": 765,
"total_cx4": 155,
"total_cx5": 181,
"total_cx6": 1815,
"total_cx7": 500,
"total_cx1": 7306,
"total_cx2": 172,
"total_cx3": 1978
},
];
const monthData = [
{
"load_cx4": 1367186,
"load_cx5": 2701428,
"load_cx2": 1667680,
"load_cx3": 3482312,
"year": 2022,
"load_cx1": 12346470,
"axles": 30130,
"day_cnt": 31,
"load_cx6": 25471285,
"load_cx7": 7717674,
"loads": 54754031,
"load3": 2701428,
"load2": 18863646,
"load5": 2053551,
"total2": 8492,
"load4": 12271606,
"totals": 10851,
"total3": 477,
"total9": 396,
"month": 1,
"total4": 783,
"gczbs": "51000020160412100910844rlpJLxoD6",
"load6": 13072210,
"total5": 134,
"load9": 5791592,
"total6": 571,
"total_cx4": 144,
"total_cx5": 477,
"total_cx6": 1459,
"total_cx7": 424,
"total_cx1": 6437,
"total_cx2": 173,
"total_cx3": 1740
},
{
"load_cx4": 685500,
"load_cx5": 2463575,
"load_cx2": 844874,
"load_cx3": 2482525,
"year": 2022,
"load_cx1": 8783703,
"axles": 14152,
"day_cnt": 28,
"load_cx6": 8808653,
"load_cx7": 3499736,
"loads": 27568565,
"load3": 2463575,
"load2": 12796602,
"load5": 872889,
"total2": 4517,
"load4": 4876565,
"totals": 5404,
"total3": 139,
"total9": 157,
"month": 2,
"total4": 341,
"gczbs": "51000020160412100910844rlpJLxoD6",
"load6": 4169316,
"total5": 54,
"load9": 2389620,
"total6": 198,
"total_cx4": 80,
"total_cx5": 139,
"total_cx6": 579,
"total_cx7": 170,
"total_cx1": 3416,
"total_cx2": 101,
"total_cx3": 921
},
{
"load_cx4": 1424621,
"load_cx5": 23486214,
"load_cx2": 1790283,
"load_cx3": 8356323,
"year": 2022,
"load_cx1": 30707444,
"axles": 19760,
"day_cnt": 31,
"load_cx6": 28796895,
"load_cx7": 38519618,
"loads": 133081396,
"load3": 23514616,
"load2": 42278671,
"load5": 6989877,
"total2": 3042,
"load4": 13180133,
"totals": 4456,
"total3": 318,
"total9": 367,
"month": 3,
"total4": 363,
"gczbs": "51000020160412100910844rlpJLxoD6",
"load6": 9337230,
"total5": 98,
"load9": 37780872,
"total6": 270,
"total_cx4": 63,
"total_cx5": 318,
"total_cx6": 761,
"total_cx7": 336,
"total_cx1": 2290,
"total_cx2": 73,
"total_cx3": 617
},
{
"load_cx4": 1371482,
"load_cx5": 3229550,
"load_cx2": 1548431,
"load_cx3": 3090777,
"year": 2022,
"load_cx1": 11250514,
"axles": 25652,
"day_cnt": 30,
"load_cx6": 18608610,
"load_cx7": 8224111,
"loads": 47323471,
"load3": 3258293,
"load2": 17261202,
"load5": 1617484,
"total2": 6346,
"load4": 8609022,
"totals": 8068,
"total3": 176,
"total9": 461,
"month": 4,
"total4": 528,
"gczbs": "51000020160412100910844rlpJLxoD6",
"load6": 10122821,
"total5": 105,
"load9": 6454652,
"total6": 453,
"total_cx4": 100,
"total_cx5": 176,
"total_cx6": 1165,
"total_cx7": 382,
"total_cx1": 4840,
"total_cx2": 113,
"total_cx3": 1295
},
{
"load_cx4": 873636,
"load_cx5": 819430,
"load_cx2": 913068,
"load_cx3": 1950990,
"year": 2022,
"load_cx1": 7474462,
"axles": 18000,
"day_cnt": 15,
"load_cx6": 14920644,
"load_cx7": 3779361,
"loads": 30731590,
"load3": 819430,
"load2": 11212155,
"load5": 993273,
"total2": 5179,
"load4": 6763667,
"totals": 6379,
"total3": 73,
"total9": 248,
"month": 5,
"total4": 422,
"gczbs": "51000020160412100910844rlpJLxoD6",
"load6": 8676569,
"total5": 63,
"load9": 2266498,
"total6": 396,
"total_cx4": 73,
"total_cx5": 73,
"total_cx6": 874,
"total_cx7": 254,
"total_cx1": 3971,
"total_cx2": 80,
"total_cx3": 1056
},
{
"load_cx4": 3303,
"load_cx5": 904965,
"load_cx2": 3039,
"load_cx3": 236477,
"year": 2022,
"load_cx1": 5901307,
"axles": 8201,
"day_cnt": 31,
"load_cx6": 5242059,
"load_cx7": 338397,
"loads": 12629544,
"load3": 202621,
"load2": 6141227,
"load5": 3027444,
"total2": 3216,
"load4": 725227,
"totals": 3564,
"total3": 18,
"total9": 0,
"month": 1,
"total4": 50,
"gczbs": "510000201604151437057760ZY9pVRt0",
"load6": 2533027,
"total5": 166,
"load9": 0,
"total6": 116,
"total_cx4": 1,
"total_cx5": 65,
"total_cx6": 266,
"total_cx7": 18,
"total_cx1": 3091,
"total_cx2": 1,
"total_cx3": 125
},
{
"load_cx4": 0,
"load_cx5": 155055,
"load_cx2": 0,
"load_cx3": 252425,
"year": 2022,
"load_cx1": 6101545,
"axles": 7210,
"day_cnt": 3,
"load_cx6": 151680,
"load_cx7": 11644,
"loads": 6672348,
"load3": 31563,
"load2": 6353970,
"load5": 0,
"total2": 3554,
"load4": 141168,
"totals": 3577,
"total3": 4,
"total9": 0,
"month": 2,
"total4": 13,
"gczbs": "510000201604151437057760ZY9pVRt0",
"load6": 145648,
"total5": 0,
"load9": 0,
"total6": 7,
"total_cx4": 0,
"total_cx5": 15,
"total_cx6": 8,
"total_cx7": 1,
"total_cx1": 3414,
"total_cx2": 0,
"total_cx3": 140
}
];
const yearData = [
{
"load_cx4": 1514947,
"load_cx5": 4939118,
"load_cx2": 1780294,
"load_cx3": 3784992,
"year": 2021,
"load_cx1": 14083687,
"axles": 30550,
"day_cnt": 197,
"load_cx6": 33620056,
"load_cx7": 11754268,
"loads": 71477357,
"load3": 4939118,
"load2": 21167687,
"load5": 2268930,
"total2": 8982,
"load4": 19113932,
"totals": 11207,
"total3": 198,
"total9": 279,
"total4": 1007,
"gczbs": "51000020160412100910844rlpJLxoD6",
"load6": 15454923,
"total5": 88,
"load9": 8532770,
"total6": 655,
"total_cx4": 147,
"total_cx5": 198,
"total_cx6": 1617,
"total_cx7": 412,
"total_cx1": 6829,
"total_cx2": 173,
"total_cx3": 1833
},
{
"load_cx4": 1185104,
"load_cx5": 7333148,
"load_cx2": 1414832,
"load_cx3": 4137012,
"year": 2022,
"load_cx1": 15038870,
"axles": 22092,
"day_cnt": 135,
"load_cx6": 20081658,
"load_cx7": 13590832,
"loads": 62781452,
"load3": 7346057,
"load2": 21775815,
"load5": 2727487,
"total2": 5571,
"load4": 9520544,
"totals": 7137,
"total3": 259,
"total9": 338,
"total4": 498,
"gczbs": "51000020160412100910844rlpJLxoD6",
"load6": 9224197,
"total5": 95,
"load9": 12187354,
"total6": 379,
"total_cx4": 95,
"total_cx5": 259,
"total_cx6": 986,
"total_cx7": 323,
"total_cx1": 4229,
"total_cx2": 112,
"total_cx3": 1137
},
{
"load_cx4": 3436,
"load_cx5": 1520140,
"load_cx2": 1919,
"load_cx3": 167166,
"year": 2021,
"load_cx1": 4106698,
"axles": 6937,
"day_cnt": 232,
"load_cx6": 9336857,
"load_cx7": 618317,
"loads": 15754530,
"load3": 268392,
"load2": 4276981,
"load5": 5188974,
"total2": 2067,
"load4": 1268073,
"totals": 2610,
"total3": 20,
"total9": 0,
"total4": 68,
"gczbs": "510000201604151437057760ZY9pVRt0",
"load6": 4752111,
"total5": 258,
"load9": 0,
"total6": 198,
"total_cx4": 1,
"total_cx5": 87,
"total_cx6": 428,
"total_cx7": 29,
"total_cx1": 1986,
"total_cx2": 1,
"total_cx3": 81
},
// {
// "load_cx4": 3012,
// "load_cx5": 838796,
// "load_cx2": 2771,
// "load_cx3": 237884,
// "year": 2022,
// "load_cx1": 5918976,
// "axles": 8114,
// "day_cnt": 34,
// "load_cx6": 4792908,
// "load_cx7": 309566,
// "loads": 12103909,
// "load3": 187528,
// "load2": 6159998,
// "load5": 2760317,
// "total2": 3246,
// "load4": 673692,
// "totals": 3565,
// "total3": 16,
// "total9": 0,
// "total4": 47,
// "gczbs": "510000201604151437057760ZY9pVRt0",
// "load6": 2322376,
// "total5": 151,
// "load9": 0,
// "total6": 106,
// "total_cx4": 1,
// "total_cx5": 61,
// "total_cx6": 243,
// "total_cx7": 16,
// "total_cx1": 3119,
// "total_cx2": 1,
// "total_cx3": 126
// }
];
export { dayData, monthData, yearData };
Install echarts: You can refer to the official website to get started
npm install echarts
Prepare echarts container and page
<div id="main" style="width: 800px;height:420px;"></div>
Initialize the DOM and render the page
const myChart = echarts.init(document.getElementById('main'))
//example-type
const legendData = ["two axes", "three axes", "four axes", "five axes", "six axes", "nine axes"];
const loadToChinese = {
load2: "Two axis",
load3: "three-axis",
load4: "Four Axis",
load5: "five-axis",
load6: "six-axis",
load9: "Nine Axis",
};
//Simulate data Day: dayData, month: monthData, year: yearData
const dataList = interface data;
//Because it is comparing multiple pieces of data, you also need to select the corresponding piece of data. My business has a multi-select list. Select multiple pieces and get the unique identification of each piece, which is stored in a variable.
//Checked data
const selectedRowsBs = selectedRowsBs || [];
//Get the checked data that contains the returned data
const siteArr = [];
selectedRowsBs.forEach((v) => { //Compare whether the unique identifier is consistent, return true, and save it in the siteArr array
const item = dataList.find((s) => s.gczbs == v);
if (item) {
siteArr.push(item.gczbs);
} else {
siteArr.push("");
}
});
//Get x-axis
let xData = dataList.map((v: any) => {
if (v.gcrq) {
//By date
v.myDate = v.gcrq; //Insert a field into the returned data to facilitate subsequent data comparison
return v.gcrq;
} else if (v.month & amp; & amp; !v.gcrq) {
//by month
v.myDate = v.year + "-" + v.month;
return v.year + "-" + v.month;
} else {
//by year
v.myDate = v.year;
return v.year;
}
});
//Remove duplicate dates on the same x-axis
xData = [...new Set(xData)];
//Combined data * This _.flattenDeep is a method of the tool loadsh**
const seriesData = _.flattenDeep(
//1. Check the box and have data
siteArr.map((s) => {
//2. Single columnar data
return Object.keys(loadToChinese).map((load) => {
return {
name: loadToChinese[load],
type: "bar",
stack: s, //Use gczbs to define stack
//3. Match X coordinate position and data filling
data: xData.map((v, i) => {
const item = dataList.find((d: any) => {
return d.gczbs == s & amp; & amp; v == d.myDate;
});
if (item) {
return item[load];
}
return null;
}),
};
});
})
);
const option = {
legend: {
data: legendData,
top: 20,
icon: "rect",
textStyle: {
height: 8,
color: "#BDD8FB",
fontSize: 12,
rich: {
a: {
verticalAlign: "bottom",
},
},
},
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
xAxis: {
type: "category",
boundaryGap: true, // White space strategy on both sides of the coordinate axis, Boolean values can also be used, true is centered
data: xData,
axisLabel: {
color: "#BDD8FB", // x-axis font color
fontSize: 12,
// interval: xData.length < 5 ? 1 : Math.floor(xData.length / 5), // Display every 4 labels
},
axisLine: {
show: false,
lineStyle: {
color: "#BDD8FB", // x-axis color
fontSize: 12,
},
},
axisTick: {
show: false,
},
},
yAxis: {
type: "value",
min: 0,
minInterval: 1,
nameTextStyle: {
fontSize: 12,
color: "#BDD8FB",
align: "center",
},
splitLine: {
lineStyle: {
color: "rgba(255, 255, 255, 0.15)",
type: "dashed", // dotted dashed line
},
},
splitArea: { show: false },
axisLabel: {
fontSize: 12,
fontFamily: "Bebas",
color: "#BDD8FB",
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
dataZoom: [
{
show: xData.length > 0 ? true : false,
height: 20,
xAxisIndex: [0],
bottom: 25,
start: 0,
end: 100,
textStyle: {
color: "#fff",
},
},
{
type: "inside",
show: true,
height: 10,
start: 1,
end: 25,
},
],
series: seriesData,
grid: {
// left: 100,
bottom: 25,
containLabel: true,
},
};
// Display the chart using the configuration items and data just specified.
myChart.setOption(option);
The graph displayed is like this. The x-axis will change dynamically. As mentioned above, it is displayed based on the date type. Here I filter by month.
The most difficult part is the combination of data. Because I have many requests, the combination is a little complicated.