utils-echart
Version:
Echart component
585 lines (574 loc) • 17.5 kB
text/typescript
import { defaultData, defaultMultipleDataWithName, colorLibrary } from "../assets/common";
import { symbolShape } from "../assets/enum";
import {
getDataWithoutName,
getMultipleDataWithName,
val,
splitLineX,
splitLineY,
linearGradient,
pieceWise,
adaptiveS,
colorOpacity,
xAxisTimeline,
} from "../methods/methods";
/** 折线 */
export class Line {
/** 是否显示拐点 */
static showSymbol = false;
/** 拐点形状 */
static symbol = symbolShape.emptyCircle;
/** 拐点大小 */
static symbolSize = 6;
/**
* 获取单折线数据
* @param xAxis x轴
* @param range 数据范围
* @returns obj
*/
static getSingleLineData(xAxis: string[], range?: number[]) {
return getDataWithoutName(xAxis, range);
}
/**
* 获取多折线数据
* @param xAxis x轴
* @param name 名称
* @param range 数据范围
* @returns obj
*/
static getMultipleLineData(xAxis: string[], name: string[], range?: number[]) {
return getMultipleDataWithName(xAxis, name, range);
}
/** 拐点设置 */
static setSymbol() {
return {
showSymbol: this.showSymbol,
symbol: this.symbol,
symbolSize: this.symbolSize,
};
}
/**
* 折线0
* @param data 数据
* @param color 颜色
* @returns option
*/
static line0(data?: any, color?: any) {
const d = data ? data : defaultData;
const c = color ? color : val("colorData");
const option = {
backgroundColor: val("backgroundColor"),
color: c,
grid: val("grid"),
tooltip: { trigger: "axis" },
title: val("title"),
legend: val("legend"),
xAxis: {
name: "",
type: "category",
data: Object.keys(d),
splitLine: splitLineX(),
boundaryGap: false,
axisLabel: {
fontSize: 10,
color: val("fontColor"),
},
},
yAxis: {
name: "",
type: "value",
splitLine: splitLineY(),
axisLabel: {
fontSize: 10,
color: val("fontColor"),
},
},
series: [
{
data: Object.values(d),
type: "line",
label: {
show: true,
position: "top",
color: val("fontColor"),
},
...this.setSymbol(),
},
],
};
return option;
}
/**
* 折线1
* @param data 数据
* @param colorArr 颜色组
* @returns option
*/
static line1(data?: any, colorArr?: any) {
const d = data ? data : defaultData;
const _colorArr = colorArr ? colorArr : val("colorData");
const option = {
backgroundColor: val("backgroundColor"),
grid: val("grid"),
tooltip: { trigger: "axis" },
title: val("title"),
legend: val("legend"),
xAxis: {
boundaryGap: false,
type: "category",
data: Object.keys(d),
splitLine: splitLineX(),
axisLabel: {
fontSize: 10,
color: val("fontColor"),
},
},
yAxis: {
splitLine: splitLineY(),
axisLabel: {
fontSize: 10,
color: val("fontColor"),
},
},
series: [
{
name: "",
type: "line",
data: Object.values(d),
...this.setSymbol(),
lineStyle: {
color: linearGradient(_colorArr),
},
},
],
};
return option;
}
/**
* 折线2
* @param data 数据
* @param color 颜色
* @returns option
*/
static line2(data?: any, color?: any) {
const d = data ? data : defaultData;
const c = color ? color : val("colorData");
const option = {
backgroundColor: val("backgroundColor"),
grid: val("grid"),
tooltip: { trigger: "axis" },
title: val("title"),
legend: val("legend"),
xAxis: {
boundaryGap: false,
type: "category",
data: Object.keys(d),
splitLine: splitLineX(),
axisLabel: {
fontSize: 10,
color: val("fontColor"),
},
},
visualMap: {
type: "piecewise",
show: false,
dimension: 0,
seriesIndex: 0,
pieces: pieceWise(),
axisLabel: {
fontSize: 10,
color: val("fontColor"),
},
},
yAxis: {
type: "value",
splitLine: splitLineY(),
},
series: [
{
data: Object.values(d),
type: "line",
lineStyle: {
color: c,
width: 2,
},
// 标线
markLine: {
symbol: ["none", "none"],
label: { show: true },
data: [{ xAxis: 1 }, { xAxis: 2 }, { xAxis: 3 }],
},
...this.setSymbol(),
},
],
};
return option;
}
/**
* 折线3
* @param data 数据
* @param color 颜色
* @returns option
*/
static line3(data?: any, color?: any) {
const d = data ? data : defaultData;
const c = color ? color : val("colorData");
const option = {
backgroundColor: val("backgroundColor"),
color: c,
grid: val("grid"),
tooltip: { trigger: "axis" },
legend: val("legend"),
title: val("title"),
xAxis: {
boundaryGap: false,
name: "X",
type: "category",
data: Object.keys(d),
splitLine: splitLineX(),
axisLabel: {
fontSize: 10,
color: val("fontColor"),
},
},
yAxis: {
name: "Y",
type: "value",
splitLine: splitLineY(),
axisLabel: {
fontSize: 10,
color: val("fontColor"),
},
},
series: [
{
data: Object.values(d),
type: "line",
areaStyle: {
color: c,
origin: "start",
},
...this.setSymbol(),
},
],
};
return option;
}
/**
* 折线4
* @param data 数据
* @param colorArr 颜色组
* @returns option
*/
static line4(data?: any, colorArr?: any[]) {
const d = data ? data : defaultData;
const _colorArr = colorArr ? colorArr : val("colorData");
const option = {
backgroundColor: val("backgroundColor"),
color: _colorArr,
grid: val("grid"),
tooltip: { trigger: "axis" },
title: val("title"),
legend: val("legend"),
xAxis: {
boundaryGap: false,
name: "",
type: "category",
data: Object.keys(d),
splitLine: splitLineX(),
axisLabel: {
fontSize: 10,
color: val("fontColor"),
},
},
yAxis: {
name: "",
type: "value",
splitLine: splitLineY(),
axisLabel: {
fontSize: 10,
color: val("fontColor"),
},
},
series: [
{
data: Object.values(d),
type: "line",
areaStyle: {
color: linearGradient(_colorArr),
origin: "start",
},
...this.setSymbol(),
},
],
};
return option;
}
/**
* 折线5
* @param data 数据
* @param color 颜色
* @returns option
*/
static line5(data?: any, color?: string) {
const d = data ? data : defaultData;
const c: string = color ? color : val("colorData")[0];
const option = {
backgroundColor: val("backgroundColor"),
grid: val("grid"),
tooltip: val("tooltip"),
title: val("title"),
xAxis: {
boundaryGap: false,
name: "",
type: "category",
data: Object.keys(d),
splitLine: splitLineX(),
axisLabel: {
fontSize: adaptiveS(10),
color: val("fontColor"),
},
},
yAxis: {
name: "",
type: "value",
splitLine: splitLineY(),
axisLabel: {
fontSize: adaptiveS(10),
color: val("fontColor"),
},
},
series: [
{
data: Object.values(d),
type: "line",
areaStyle: { color: linearGradient([c, colorOpacity(c, 0)]) },
lineStyle: {
color: c,
width: 1,
},
showSymbol: false,
symbol: "circle",
symbolSize: 6,
smooth: true,
},
],
triggerEvent: true,
};
return option;
}
/**
* 折线6
* @returns option
*/
static line6() {
const option = {
backgroundColor: val("backgroundColor"),
grid: val("grid"),
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
animation: false,
label: {
backgroundColor: "#ccc",
borderColor: "#aaa",
borderWidth: 1,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
color: "#222",
},
},
},
/** 标题 */
title: {},
/** 图例 */
legend: val("legend"),
xAxis: {
type: "category",
data: xAxisTimeline(90),
boundaryGap: false,
axisLabel: {
fontSize: 10,
color: val("fontColor"),
},
},
yAxis: {
splitNumber: 5,
axisLabel: {
fontSize: 10,
color: val("fontColor"),
},
},
series: [
{
name: "L",
type: "line",
data: [
0.3982670977999998, 1.6833036365, 2.1287778695, 2.3458167992, 2.4777322093, 2.5565719465, 2.6456042288, 2.6660088505, 2.7048160059, 2.7035604199,
2.7704556241000002, 2.7773623582, 2.7979520151, 2.7957951963, 2.8162736828, 2.863389992, 2.8430011353, 2.8589659708, 2.8561346310999998,
2.8708024645, 2.866027521, 2.8730733414, 2.8716521617, 2.8428827802, 2.8902645583, 3.0333682152, 2.9931527033, 2.8925718238, 2.9094802158,
2.915680144, 2.9085643219, 2.8830185255, 2.9643160742, 2.9441287137, 2.9292856612, 2.8281898665, 2.8118725935, 2.8268096679, 2.8229626183,
2.8497520389, 2.8381305555, 2.8409147023, 3.063624221, 3.1553854927, 3.2055952772, 2.9373533002, 2.9132405945, 2.8838290871, 2.8440240952,
2.8395635362, 2.8430976805, 2.9217012436, 2.8896126192, 2.8910355503, 2.8926150773, 2.8879701845, 2.8923158881, 2.8903008592, 2.9059386187,
2.9093189544999998, 2.9158694322, 2.9113276251, 2.9076518392, 2.9062236957, 2.9192971999, 2.9259998677, 2.9179569706, 2.9245886175, 2.9249372941,
2.9336515858, 2.9206829549, 2.9153876107, 2.9197331672, 2.9376260306, 2.9180444092, 2.9254556623, 2.9342292845, 2.9382004983, 2.9402302151,
2.9410873217, 2.9232894553, 2.9407763528, 2.916470056, 2.8913577471, 2.9118365122, 2.9192649771, 2.910004207, 2.910533519, 2.909486646,
2.9092848708, 3.1537781522,
],
lineStyle: {
opacity: 0,
},
stack: "confidence-band",
symbol: "none",
},
{
name: "U",
type: "line",
data: [
2.8967046779000003, 1.4491049982, 0.9668634870999999, 0.7258952249, 0.5816866709999999, 0.4853494, 0.4167718883, 0.3652780785, 0.3253602494,
0.29345747969999997, 0.2674476879, 0.24660966010000002, 0.22799691960000001, 0.2119911843, 0.19751615779999998, 0.188013836, 0.1772255058,
0.1683750477, 0.16040993730000003, 0.1524436508, 0.1456478711, 0.1398989877, 0.13398499989999998, 0.12594933700000002, 0.12384864790000001,
0.180702727, 0.1169753536, 0.1106951125, 0.1069448137, 0.1036518025, 0.1008793037, 0.0973219235, 0.0967551764, 0.0904872944, 0.0860042654,
0.08318302779999999, 0.0809116093, 0.10880889810000001, 0.2771231087, 0.2253627713, 0.2500147927, 0.2462733265, 0.1818859377, 0.203013617,
0.17562100509999998, 0.0663809955, 0.0643802981, 0.06269200050000001, 0.0912763956, 0.10018022620000001, 0.0990893558, 0.028098839, 0.0971742497,
0.1320028694, 0.1091139664, 0.129358271, 0.1624775084, 0.1657547211, 0.136613142, 0.1303694838, 0.118135569, 0.1280991019, 0.13622071819999998,
0.1397761598, 0.114185217, 0.10202655969999999, 0.11472014189999999, 0.1049026402, 0.1047563129, 0.0877568198, 0.11483302779999999, 0.125592095,
0.1176554629, 0.0818658387, 0.12029133980000001, 0.10515369690000001, 0.08849777739999999, 0.0814542884, 0.0789530192, 0.0775536225, 0.1137397899,
0.0790417924, 0.129810853, 0.1199467174, 0.1330203143, 0.12609499629999998, 0.1458287499, 0.1444856197, 0.147586668, 0.14686304039999998,
0.19616917940000003,
],
lineStyle: {
opacity: 0,
},
areaStyle: {
color: val("colorData"),
},
stack: "confidence-band",
symbol: "none",
},
{
name: "A",
type: "line",
data: [
1.8381573741, 2.4171752707, 2.6209229364, 2.7207073998, 2.7538834531, 2.7982645863, 2.8542523129, 2.997389027, 2.9919307266, 2.9703509067,
3.001317397, 2.9882350162, 3.0059394263, 2.9884434102, 3.0041183019, 3.0353559544, 3.0070046011, 2.9995748193, 2.9964538977, 3.007797889,
3.0025402723, 2.994682619, 2.9924158479, 2.9608611279, 3.0075430252, 3.1850284663, 3.076629596, 2.9685707729, 2.9767391326, 2.98031385,
2.9689803184, 2.9241253033, 3.0233974572, 3.011073579, 2.997905178, 2.8916292904, 2.8901741028, 2.9127029703, 2.9238007953, 2.9583345751,
2.9589871038, 2.9785710958, 3.2430880604, 3.3472823479000002, 3.3360734074, 2.9536351645, 2.9132990621, 2.8711327174, 2.8525573179, 2.8497594934,
2.8796234471, 2.9350877081, 2.984474438, 2.993948643, 3.0003154213, 2.9936981702, 2.995705166, 2.9946599168, 3.0070057212, 3.0082121656,
3.0141422884, 3.0041613553, 2.9986385713, 2.9947855067, 3.0078904741, 3.0099598702, 3.0001146029, 3.0047572651, 3.006204557, 3.0115231406,
2.9967365006, 2.9891014548, 2.9907233187, 3.0095972086, 2.9888190642, 2.9976427704, 3.0084213775, 3.0107446453, 3.009457792, 3.0031194779,
2.9884871787, 3.0058347339, 2.9764369564, 2.9520204036, 2.9781815641, 2.9928638828, 2.9848033088, 2.9902215145, 2.9904318505, 2.9965834085,
3.3297981389,
],
itemStyle: {
color: val("colorData")[0],
},
symbol: "none",
},
],
};
return option;
}
/**
* 多折线0
* @param obj 数据
* @param colorArr 颜色组
* @returns option
*/
static multipleLine0(obj?: any, colorArr?: any[]) {
const o = obj ? obj : defaultMultipleDataWithName;
const _colorArr = colorArr ? colorArr : val("colorData");
const s: any[] = [];
o.data.forEach((e: any) => {
const d = {
name: e.name,
type: "line",
data: e.value,
...this.setSymbol(),
};
s.push(d);
});
const option = {
backgroundColor: val("backgroundColor"),
color: _colorArr,
grid: val("grid"),
title: val("title"),
legend: val("legend"),
tooltip: { trigger: "axis" },
xAxis: {
type: "category",
data: o.xAxis,
splitLine: splitLineX(),
boundaryGap: false,
axisLabel: {
fontSize: 10,
color: val("fontColor"),
},
},
yAxis: {
splitLine: splitLineY(),
axisLabel: {
fontSize: 10,
color: val("fontColor"),
},
},
series: s,
};
return option;
}
/**
* 多折线1
* @param obj 数据
* @param colorArr 颜色组
* @returns option
*/
static multipleLine1(obj?: any, colorArr?: any[]) {
const o = obj ? obj : defaultMultipleDataWithName;
const _colorArr = colorArr ? colorArr : val("colorData");
const s: any[] = [];
let v = "";
o.data.forEach((e: any, index: any) => {
v = _colorArr[index] ? _colorArr[index] : colorLibrary[index];
const d = {
name: e.name,
type: "line",
data: e.value,
...this.setSymbol(),
areaStyle: {
color: linearGradient([v, colorOpacity(v, 0)]),
},
};
s.push(d);
});
const option = {
backgroundColor: val("backgroundColor"),
title: val("title"),
grid: val("grid"),
color: _colorArr,
legend: val("legend"),
tooltip: { trigger: "axis" },
xAxis: {
type: "category",
data: o.xAxis,
splitLine: splitLineX(),
boundaryGap: false,
axisLabel: {
fontSize: 10,
color: val("fontColor"),
},
},
yAxis: {
splitLine: splitLineY(),
axisLabel: {
fontSize: 10,
color: val("fontColor"),
},
},
series: s,
};
return option;
}
}