utils-echart
Version:
Echart component
691 lines (669 loc) • 17.4 kB
text/typescript
import { defaultSingleDataWithName, colorLibrary } from "../assets/common";
import { getSingleDataWithName, val, adaptiveS, colorOpacity } from "../methods/methods";
/** 饼图 */
export class Pie {
/**
* 获取饼图数据
* @param name 名称
* @param range 数据范围
* @returns arr
*/
static getPieData(name: string[], range?: number[]) {
return getSingleDataWithName(name, range);
}
/**
* 饼图0
* @param data 数据
* @param colorArr 颜色组
* @returns option
*/
static pie0(data?: any, colorArr?: any[]) {
const d = data ? data : defaultSingleDataWithName;
const _colorArr = colorArr ? colorArr : val("colorData");
const option = {
backgroundColor: val("backgroundColor"),
color: _colorArr,
title: val("title"),
tooltip: { trigger: "item" },
series: [
{
type: "pie",
radius: "70%",
center: ["center", "center"],
label: val("label"),
emphasis: {
scale: true,
},
data: d,
},
],
};
return option;
}
/**
* 饼图1
* @param data 数据
* @param colorArr 颜色组
* @returns option
*/
static pie1(data?: any, colorArr?: any[]) {
const d = data ? data : defaultSingleDataWithName;
const _colorArr = colorArr ? colorArr : val("colorData");
const option = {
backgroundColor: val("backgroundColor"),
color: _colorArr,
tooltip: { trigger: "item" },
legend: val("legend"),
series: [
{
type: "pie",
radius: ["30%", "70%"],
roseType: "area",
data: d,
labelLine: {},
label: {
show: true,
backgourndColor: "transparent",
},
},
],
};
return option;
}
/**
* 饼图2
* @param data 数据 格式:[data1,data2,data3]
* @param colorArr 颜色组
* @param text 小标题 格式:[text1,text2,text3]
* @returns option
*/
static pie2(data?: any[], colorArr?: any[], text?: any[]) {
const d = data ? data : [defaultSingleDataWithName, defaultSingleDataWithName, defaultSingleDataWithName];
const t = text ? text : ["textA", "textB", "textC"];
const _colorArr = colorArr ? colorArr : val("colorData");
const option = {
backgroundColor: val("backgroundColor"),
color: _colorArr,
grid: val("grid"),
legend: {
show: false,
},
tooltip: { trigger: "item" },
title: [
{
subtext: t[0],
left: "20%",
top: "75%",
textAlign: "center",
},
{
subtext: t[1],
left: "50%",
top: "75%",
textAlign: "center",
},
{
subtext: t[2],
left: "80%",
top: "75%",
textAlign: "center",
},
],
series: [
{
type: "pie",
center: ["20%", "center"],
radius: "40%",
data: d[0],
labelLine: {
length: adaptiveS(5),
},
emphasis: {
scale: true,
},
},
{
type: "pie",
center: ["center", "center"],
radius: "40%",
data: d[1],
labelLine: {
length: adaptiveS(5),
},
emphasis: {
scale: true,
},
},
{
type: "pie",
center: ["80%", "center"],
radius: "40%",
data: d[2],
labelLine: {
length: adaptiveS(5),
},
emphasis: {
scale: true,
},
},
],
};
return option;
}
/**
* 饼图3
* @param data 数据
* @param colorArr 颜色组
* @returns option
*/
static pie3(data?: any, colorArr?: any[]) {
const d = data ? data : defaultSingleDataWithName;
const _colorArr = colorArr ? colorArr : val("colorData");
let sum = 0;
d.forEach((e: any) => {
sum += e.value;
});
const option = {
backgroundColor: val("backgroundColor"),
color: _colorArr,
grid: val("grid"),
legend: {
type: "scroll",
orient: "vertical",
right: "20%",
top: "center",
},
title: {
text: sum,
subtext: "数据总量",
left: "49%",
top: "42%",
textStyle: {
fontSize: adaptiveS(30),
fontWeight: "bolder",
},
subtextStyle: {
fontSize: adaptiveS(14),
fontWeight: "bolder",
},
textAlign: "center",
},
series: [
{
type: "pie",
radius: ["45%", "70%"],
center: ["center", "center"],
data: d,
label: val("label"),
},
],
};
return option;
}
/**
* 饼图4
* @param data 数据
* @param colorArr 颜色组
* @param scaleColor 刻度颜色
* @returns option
*/
static pie4(data?: any, colorArr?: any[], scaleColor?: any) {
const index = Math.round(Math.random() * 9);
const d = data ? data : defaultSingleDataWithName;
const _colorArr = colorArr ? colorArr : val("colorData");
const _scaleColor = scaleColor ? scaleColor : colorLibrary[index];
let sum = 0;
const scale_data: any[] = [];
d.forEach((e: any) => {
sum += e.value;
});
for (let i = 0; i < 100; i++) {
scale_data.push(
{
value: 1,
itemStyle: { color: _scaleColor },
},
{
value: 3,
itemStyle: {
color: "transparent",
borderColor: "transparent",
},
label: { show: false },
labelLine: { show: false },
color: val("backgroundColor"),
borderColor: val("backgroundColor"),
borderWidth: 0,
}
);
}
const option = {
backgroundColor: val("backgroundColor"),
color: _colorArr,
grid: val("grid"),
title: {
text: sum,
subtext: "数据总量",
left: "50%",
top: "45%",
textStyle: {
fontSize: adaptiveS(60),
fontWeight: "bolder",
},
subtextStyle: {
fontSize: adaptiveS(20),
fontWeight: "bolder",
},
textAlign: "center",
},
series: [
{
type: "pie",
radius: ["45%", "70%"],
data: d,
label: {
show: true,
formatter: "{d|{d}%}\n{b|{b}}",
rich: {
d: { fontSize: adaptiveS(16), fontWeight: "bold" },
b: { fontSize: adaptiveS(14), height: 20, fontWeight: "300" },
},
},
labelLine: {
length: 30,
},
},
// 刻度
{
emphasis: {
scale: true,
},
type: "pie",
data: scale_data,
radius: ["80%", "85%"],
label: {
position: "inside",
show: false,
},
},
],
};
console.log(option);
return option;
}
/**
* 饼图5
* @param data 数据
* @param colorArr 颜色组
* @param total 进度总量
* @returns option
*/
static pie5(data?: any, colorArr?: any[], total?: number) {
const d = data ? data : defaultSingleDataWithName;
const _colorArr = colorArr ? colorArr : val("colorData");
const t = total ? total : 100;
const s: any[] = [];
const w = (100 - 20) / d.length;
let v = "";
d.forEach((e: any, index: any) => {
v = _colorArr[index] ? _colorArr[index] : colorLibrary[index];
s.push({
name: e.name,
type: "pie",
radius: [w * (index + 1) + "%", w * index + 6 + "%"],
labelLine: {
show: false,
},
label: {
show: false,
},
data: [
{
value: t - e.value,
itemStyle: {
color: colorOpacity(v, 0.1),
},
emphasis: {
disabled: true,
},
},
{
name: e.name,
value: e.value,
itemStyle: {
color: v,
},
emphasis: {
label: {
show: true,
fontSize: adaptiveS(14),
align: "center",
fontWeight: "bold",
formatter: "{d}%\n{b|{b}}",
backgroundColor: colorOpacity(v, 0.5),
padding: [adaptiveS(5), adaptiveS(10)],
position: "outer",
rich: {
b: {
height: adaptiveS(20),
},
},
},
},
},
],
});
});
const option = {
backgroundColor: val("backgroundColor"),
grid: val("grid"),
legend: {
left: "10%",
top: "center",
itemHeight: adaptiveS(10),
itemGap: adaptiveS(8),
},
series: s,
};
return option;
}
/**
* 饼图6
* @param data 数据
* @param colorArr 颜色组
* @returns option
*/
static pie6(data?: any, colorArr?: any[]) {
const d = data ? data : defaultSingleDataWithName;
const _colorArr = colorArr ? colorArr : val("colorData");
const option = {
backgroundColor: val("backgroundColor"),
color: _colorArr,
tooltip: { trigger: "item" },
legend: val("legend"),
title: val("title"),
series: [
{
name: "",
type: "pie",
radius: ["45%", "70%"],
center: ["center", "center"],
data: d,
label: {
show: false,
position: "center",
},
labelLine: {
length: false,
},
emphasis: {
label: {
show: true,
fontSize: "25",
fontWeight: "bold",
formatter: "{d}%",
},
},
itemStyle: {
borderRadius: 10,
borderColor: "#ffffff",
borderWidth: 2,
},
},
],
};
return option;
}
/**
* 饼图7
* @param data 数据
* @param colorArr 颜色组
* @returns option
*/
static pie7(data?: any, colorArr?: any[]) {
const d = data ? data : defaultSingleDataWithName;
const _colorArr = colorArr ? colorArr : val("colorData");
let sum = 0;
d.forEach((e: any) => {
sum += e.value;
});
const option = {
backgroundColor: val("backgroundColor"),
color: _colorArr,
tooltip: { trigger: "item" },
legend: val("legend"),
title: {
textAlign: "center",
text: sum,
subtext: "数据总量",
left: "49%",
top: "42%",
textStyle: {
fontSize: 30,
fontWeight: "bolder",
},
subtextStyle: {
fontSize: 14,
fontWeight: "bolder",
},
},
series: [
{
name: "",
type: "pie",
radius: ["45%", "70%"],
center: ["center", "center"],
data: d,
label: {
show: true,
},
labelLine: {},
itemStyle: {
borderRadius: 10,
borderColor: "#fff",
borderWidth: 2,
},
},
],
};
return option;
}
/**
* 饼图8
* @param data 数据
* @param colorArr 颜色组
* @returns option
*/
static pie8(data?: any, colorArr?: any[]) {
const d = data ? data : defaultSingleDataWithName;
const _colorArr = colorArr ? colorArr : val("colorData");
const scale_data: any[] = [];
let sum = 0;
let v = 0;
d.forEach((e: any) => {
sum += e.value;
});
const rate = sum > 100 ? sum / 100 : 100 / sum;
const isOver = sum > 100 ? true : false;
// 根据每项数据渲染刻度圆
d.forEach((e: any, index: number) => {
for (let i = 0; i < 100; i++) {
v = Math.round(isOver ? e.value / rate : e.value * rate);
if (i <= v) {
scale_data.push(
{
value: 1,
itemStyle: {
color: val("colorData")[index],
},
},
{
value: 3,
itemStyle: {
label: { show: false },
labelLine: { show: false },
color: val("backgroundColor"),
borderColor: val("backgroundColor"),
borderWidth: 0,
},
}
);
} else {
break;
}
}
});
const option = {
backgroundColor: val("backgroundColor"),
color: _colorArr,
grid: val("grid"),
tooltip: { trigger: "item" },
series: [
// 刻度
{
name: "",
type: "pie",
data: scale_data,
radius: ["80%", "85%"],
label: {
position: "center",
show: false,
},
},
{
name: "",
type: "pie",
radius: ["45%", "70%"],
labelLine: {
show: false,
},
label: {
show: false,
position: "center",
},
data: d,
emphasis: {
label: {
show: true,
fontSize: "25",
fontWeight: "bold",
formatter: "{d}%\n占比",
},
},
},
],
};
return option;
}
/**
* 饼图9
* @param data 数据
* @param colorArr 颜色组
* @returns option
*/
static pie9(data?: any, colorArr?: any[]) {
const d = data ? data : defaultSingleDataWithName;
const _colorArr = colorArr ? colorArr : val("colorData");
const option = {
backgroundColor: val("backgroundColor"),
legend: val("legend"),
tooltip: { trigger: "item" },
title: val("title"),
series: [
{
type: "pie",
radius: ["40%", "85%"],
center: ["center", "center"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 0,
borderColor: val("backgroundColor"),
borderWidth: adaptiveS(10),
color: function (p: any) {
return _colorArr[p.dataIndex] ? _colorArr[p.dataIndex] : colorLibrary[p.dataIndex];
},
},
label: {
show: false,
position: "center",
},
labelLine: {
show: false,
},
data: d,
},
{
hoverAnimation: false,
type: "pie",
radius: ["40%", "65%"],
center: ["center", "center"],
roseType: "area",
itemStyle: {
borderRadius: adaptiveS(10),
color: "rgba(0, 0, 0, 0.3)",
},
label: {
show: false,
},
labelLine: {
show: false,
},
data: [{ value: 100, name: "s" }],
},
],
};
return option;
}
/**
* 饼图10
* @param data 数据
* @param colorArr 颜色组
* @returns option
*/
static pie10(data?: any, colorArr?: any[]) {
const d = data ? data : defaultSingleDataWithName;
const _colorArr = colorArr ? colorArr : val("colorData");
const option = {
backgroundColor: val("backgroundColor"),
series: [
{
hoverAnimation: false,
type: "pie",
radius: ["50%", "80%"],
itemStyle: {
borderRadius: adaptiveS(10),
color: function (p: any) {
return _colorArr[p.dataIndex] ? _colorArr[p.dataIndex] : colorLibrary[p.dataIndex];
},
},
label: {
show: false,
},
labelLine: {
show: false,
},
data: d,
},
{
type: "pie",
radius: ["50%", "100%"],
itemStyle: {
borderColor: val("backgroundColor"),
borderWidth: adaptiveS(10),
color: function (p: any) {
return _colorArr[p.dataIndex] ? colorOpacity(_colorArr[p.dataIndex], 0.1) : colorOpacity(colorLibrary[p.dataIndex], 0.1);
},
},
label: {
show: false,
},
labelLine: {
show: false,
},
data: d,
},
],
};
return option;
}
}