utils-echart
Version:
Echart component
748 lines (725 loc) • 18.6 kB
text/typescript
import * as echarts from "echarts";
import { defaultData, colorLibrary, defaultMultipleDataWithName } from "../assets/common";
import { getDataWithoutName, getMultipleDataWithName, val, splitLineX, splitLineY, colorOpacity, linearGradient, adaptiveS } from "../methods/methods";
/** 柱 */
export class Bar {
/** 柱条宽度 */
static barWidth = adaptiveS(20);
/**
* 获取单柱数据
* @param xAxis x轴
* @param range 数据范围
* @returns obj
*/
static getSingleBarData(xAxis: string[], range?: number[]) {
return getDataWithoutName(xAxis, range);
}
/**
* 获取多柱数据
* @param xAxis x轴
* @param name 名称
* @param range 数据范围
* @return obj
*/
static getMultipleBarData(xAxis: string[], name: string[], range?: number[]) {
return getMultipleDataWithName(xAxis, name, range);
}
/**
* 柱0
* @param data 数据
* @param color 柱颜色
* @returns option
*/
static bar0(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: "item" },
title: val("title"),
xAxis: {
type: "category",
data: Object.keys(d),
splitLine: splitLineX(),
axisLabel: {
fontSize: adaptiveS(10),
color: val("fontColor"),
},
},
yAxis: {
type: "value",
splitLine: splitLineY(),
axisLabel: {
fontSize: adaptiveS(10),
color: val("fontColor"),
},
},
series: [
{
data: Object.values(d),
type: "bar",
label: {
show: true,
position: "top",
color: val("fontColor"),
},
barWidth: this.barWidth,
},
],
};
return option;
}
/**
* 柱1
* @param data 数据
* @param barColor 柱颜色
* @param barBgColor 柱背景色
* @returns option
*/
static bar1(data?: any, barColor?: any, barBgColor?: any) {
const d = data ? data : defaultData;
const _barColor = barColor ? barColor : val("colorData");
const _barBgColor = barBgColor ? barBgColor : colorOpacity(val("colorData")[0], 0.1);
const o = {
backgroundColor: val("backgroundColor"),
color: _barColor,
grid: val("grid"),
tooltip: { trigger: "item" },
legend: val("legend"),
title: val("title"),
xAxis: {
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: "bar",
label: {
show: true,
position: "top",
color: val("fontColor"),
},
// 柱背景
showBackground: true,
backgroundStyle: {
color: _barBgColor,
},
barWidth: this.barWidth,
},
],
};
return o;
}
/**
* 柱2
* @param data 数据
* @param index 变色柱(数组下标从0开始)
* @param color 要变的颜色
* @returns option
*/
static bar2(data?: any, index?: number, color?: any) {
const d = data ? data : defaultData;
const i = index ? index : 0;
const c = color ? color : val("colorData");
const arr: any[] = Object.values(d); // 添加柱变色
let t = 0;
for (let v = 0; v < Object.values(d).length; v++) {
if (i === v) {
t = arr[v];
arr[v] = {
value: t,
itemStyle: {
color: c,
},
};
}
}
const option = {
backgroundColor: val("backgroundColor"),
color: val("colorData"),
grid: val("grid"),
tooltip: { trigger: "item" },
legend: val("legend"),
title: val("title"),
xAxis: {
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: [
{
type: "bar",
data: arr,
barWidth: this.barWidth,
},
],
};
return option;
}
/**
* 柱3
* @param data 数据
* @param color 颜色
* @returns option
*/
static bar3(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: "item" },
legend: val("legend"),
title: val("title"),
xAxis: {
name: "",
type: "value",
splitLine: splitLineX(),
axisLabel: {
fontSize: adaptiveS(10),
color: val("fontColor"),
},
},
yAxis: {
name: "",
data: Object.keys(d),
splitLine: splitLineY(),
axisLabel: {
fontSize: adaptiveS(10),
color: val("fontColor"),
},
},
series: [
{
type: "bar",
data: Object.values(d),
barWidth: this.barWidth,
},
],
};
return option;
}
/**
* 柱4
* @param data 数据
* @param color 颜色
* @returns option
*/
static bar4(data?: any, color?: any) {
const d = data ? data : defaultData;
const c = color ? color : val("colorData");
const option = {
backgroundColor: val("backgroundColor"),
color: linearGradient(c),
grid: val("grid"),
tooltip: { trigger: "item" },
legend: val("legend"),
title: val("title"),
xAxis: {
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: [
{
type: "bar",
label: {
show: true,
position: "top",
color: val("fontColor"),
},
data: Object.values(d),
barWidth: this.barWidth,
},
],
};
return option;
}
/**
* 柱5
* @param data 数据
* @param color 颜色
* @returns option
*/
static bar5(data?: any, color?: any) {
const d = data ? data : defaultData;
const c = color ? color : val("colorData");
const o = {
backgroundColor: val("backgroundColor"),
grid: val("grid"),
tooltip: { trigger: "item" },
legend: val("legend"),
title: val("title"),
xAxis: {
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: "bar",
barWidth: this.barWidth,
label: {
show: true,
position: "top",
color: val("fontColor"),
},
itemStyle: {
color: (params: any) => {
const i = params.dataIndex;
return c[i] ? c[i] : colorLibrary[Math.floor(Math.random() * colorLibrary.length)];
},
},
},
],
};
return o;
}
/**
* 柱6
* @param data 数据
* @param colorArr 颜色组
* @param barBgColor 柱背景色
* @param yMax y轴最大值
* @returns option
*/
static bar6(data?: any, colorArr?: any[], barBgColor?: any, yMax?: number) {
const d = data ? data : defaultData;
const _colorArr = colorArr ? colorArr : val("colorData");
const _yMax = yMax ? yMax : 10;
const _barBgColor = barBgColor ? barBgColor : "rgba(77, 128, 254, 0.2)";
const back: number[] = []; // 背景柱条
Object.keys(d).forEach(() => {
back.push(_yMax);
});
const option = {
backgroundColor: val("backgroundColor"),
grid: val("grid"),
tooltip: { trigger: "item" },
animation: true,
xAxis: {
data: Object.keys(d),
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: splitLineX(),
axisLabel: {
show: true,
fontSize: adaptiveS(10),
color: val("fontColor"),
},
},
yAxis: {
type: "value",
gridIndex: 0,
min: 0,
max: _yMax,
interval: 1,
splitLine: splitLineY(),
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
fontSize: adaptiveS(10),
color: val("fontColor"),
},
},
series: [
// 柱
{
type: "bar",
barWidth: this.barWidth,
showBackground: true,
backgroundStyle: {
color: _barBgColor,
},
itemStyle: {
label: {
show: false,
position: "top",
color: val("fontColor"),
fontSize: adaptiveS(10),
},
color: linearGradient(_colorArr),
},
data: Object.values(d),
},
// 分隔线
{
type: "pictorialBar",
itemStyle: {
normal: {
color: val("backgroundColor"),
},
},
symbolRepeat: "fixed",
symbolMargin: 10,
symbol: "rect",
symbolClip: true,
symbolSize: [30, 2],
symbolPosition: "start",
symbolOffset: [0, 20],
data: back,
zlevel: 1,
},
],
};
return option;
}
/**
* 柱7
* @param data 数据
* @param colorArr 颜色组
* @param borderColor 边框颜色
* @param shadowColor 阴影颜色
* @returns otpion
*/
static bar7(data?: any, colorArr?: any[], borderColor?: any, shadowColor?: any) {
const d = data ? data : defaultData;
const _colorArr = colorArr ? colorArr : val("colorData");
const border_color = borderColor ? borderColor : linearGradient(val("colorData"));
const shadow_color = shadowColor ? shadowColor : "rgba(10, 254, 232, 1)";
const option = {
backgroundColor: val("backgroundColor"),
title: val("title"),
grid: val("grid"),
tooltip: { trigger: "item" },
xAxis: {
type: "category",
data: Object.keys(d),
splitLine: splitLineX(),
axisLabel: {
fontSize: adaptiveS(10),
color: val("fontColor"),
},
},
yAxis: {
type: "value",
splitLine: splitLineY(),
axisLabel: {
fontSize: adaptiveS(10),
color: val("fontColor"),
},
},
series: [
{
type: "bar",
label: {
show: true,
position: "top",
color: val("fontColor"),
},
data: Object.values(d),
barWidth: this.barWidth,
showBackground: true,
itemStyle: {
borderWidth: 1,
borderColor: border_color,
shadowColor: shadow_color,
shadowBlur: 8,
color: linearGradient(_colorArr),
},
},
],
};
return option;
}
/**
* 柱8
* @param data 数据
* @param colorArr 柱颜色
* @param gridColor 网格颜色
* @returns option
*/
static bar8(data?: any, colorArr?: any, gridColor?: any) {
const d = data ? data : defaultData;
const _colorArr = colorArr ? colorArr : linearGradient(val("colorData"));
const _gridColor = gridColor ? gridColor : val("backgroundColor");
const option = {
backgroundColor: val("backgroundColor"),
color: val("colorData"),
grid: {
backgroundColor: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 0, color: _gridColor },
{ offset: 1, color: colorOpacity(_gridColor, 0) },
]),
...val("grid"),
},
tooltip: { trigger: "item" },
title: val("title"),
xAxis: {
type: "category",
data: Object.keys(d),
splitLine: splitLineX(),
axisLabel: {
fontSize: adaptiveS(10),
color: val("fontColor"),
},
},
yAxis: {
type: "value",
splitLine: splitLineY(),
axisLabel: {
fontSize: adaptiveS(10),
color: val("fontColor"),
},
},
series: [
{
data: Object.values(d),
type: "bar",
label: {
show: true,
position: "top",
color: val("fontColor"),
},
itemStyle: {
color: _colorArr,
},
barWidth: this.barWidth,
},
],
};
return option;
}
/**
* 多柱0
* @param obj 数据
* @param colorArr 颜色组
* @returns option
*/
static multipleBar0(obj?: any, colorArr?: any[]) {
const o = obj ? obj : defaultMultipleDataWithName;
const _colorArr = colorArr ? colorArr : val("colorData");
const s: any[] = [];
o.data.forEach((e: any) => {
s.push({
type: "bar",
name: e.name,
data: e.value,
barWidth: this.barWidth,
});
});
const option = {
backgroundColor: val("backgroundColor"),
legend: {
top: "3%",
},
grid: val("grid"),
tooltip: { trigger: "axis" },
color: _colorArr,
title: val("title"),
xAxis: {
type: "category",
data: o.xAxis,
splitLine: splitLineX(),
axisLabel: {
fontSize: adaptiveS(10),
color: val("fontColor"),
},
},
yAxis: {
splitLine: splitLineY(),
axisLabel: {
fontSize: adaptiveS(10),
color: val("fontColor"),
},
},
series: s,
};
return option;
}
/**
* 多柱1
* @param obj 数据
* @param colorArr 颜色组
* @returns option
*/
static multipleBar1(obj?: any, colorArr?: any[]) {
const o = obj ? obj : defaultMultipleDataWithName;
const _colorArr = colorArr ? colorArr : val("colorData");
const s: any[] = [];
o.data.forEach((e: any) => {
s.push({
type: "bar",
name: e.name,
data: e.value,
barWidth: this.barWidth,
});
});
const option = {
backgroundColor: val("backgroundColor"),
color: _colorArr,
grid: val("grid"),
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: val("legend"),
xAxis: {
type: "value",
splitLineX: splitLineX(),
axisLabel: {
fontSize: adaptiveS(10),
color: val("fontColor"),
},
},
yAxis: {
type: "category",
splitLineY: splitLineY(),
axisLabel: {
fontSize: adaptiveS(10),
color: val("fontColor"),
},
data: o.xAxis,
},
series: s,
};
return option;
}
/**
* 多柱状2
* @param obj 数据
* @param colorArr 颜色组
* @returns
*/
static multipleBar2(obj?: any, colorArr?: any[]) {
const o = obj ? obj : defaultMultipleDataWithName;
const _colorArr = colorArr ? colorArr : val("colorData");
const s: any[] = [];
o.data.forEach((e: any) => {
s.push({
name: e.name,
type: "bar",
stack: "total", // 堆叠图
barWidth: this.barWidth,
emphasis: {
focus: "series",
},
itemStyle: {
borderWidth: 1,
borderColor: val("backgroundColor"),
},
data: e.value,
});
});
const option = {
backgroundColor: val("backgroundColor"),
color: _colorArr,
tooltip: {
trigger: "item",
axisPointer: {
type: "shadow",
},
},
legend: {
left: "1%",
top: "0%",
icon: "rect",
itemGap: adaptiveS(30),
itemHeight: adaptiveS(5),
itemWidth: adaptiveS(14),
textStyle: {
fontSize: adaptiveS(14),
color: val("fontColor"),
},
},
grid: val("grid"),
yAxis: {
type: "value",
splitLine: splitLineY(),
axisLabel: {
color: val("fontColor"),
fontSize: adaptiveS(10),
},
},
xAxis: {
type: "category",
axisLine: {
show: false,
},
axisLabel: {
color: val("fontColor"),
fontSize: adaptiveS(10),
},
axisTick: {
alignWithLabel: true,
},
data: o.xAxis,
},
series: s,
};
return option;
}
}