|
@@ -0,0 +1,377 @@
|
|
|
+import * as echarts from "echarts";
|
|
|
+import { EChartsOption} from "echarts";
|
|
|
+import { lightenColor } from "@shalu/utils";
|
|
|
+
|
|
|
+
|
|
|
+export const get3dSeries = (series: EChartsOption["series"], index: number, color: EChartsOption["color"]) => {
|
|
|
+ const leftShape = echarts.graphic.extendShape({
|
|
|
+ buildPath(ctx, shape) {
|
|
|
+ const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;
|
|
|
+
|
|
|
+ const WIDTH = 15;
|
|
|
+
|
|
|
+ const OBLIQUE_ANGLE_HEIGHT = 8;
|
|
|
+
|
|
|
+ const p1 = [basicsXAxis - WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];
|
|
|
+ const p2 = [basicsXAxis - WIDTH, bottomYAxis];
|
|
|
+ const p3 = [basicsXAxis, bottomYAxis];
|
|
|
+ const p4 = [basicsXAxis, topBasicsYAxis];
|
|
|
+
|
|
|
+ ctx.moveTo(p1[0], p1[1]);
|
|
|
+ ctx.lineTo(p2[0], p2[1]);
|
|
|
+ ctx.lineTo(p3[0], p3[1]);
|
|
|
+ ctx.lineTo(p4[0], p4[1]);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ const rightShape = echarts.graphic.extendShape({
|
|
|
+ buildPath(ctx, shape) {
|
|
|
+ const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;
|
|
|
+
|
|
|
+ const WIDTH = 15;
|
|
|
+
|
|
|
+ const OBLIQUE_ANGLE_HEIGHT = 8;
|
|
|
+
|
|
|
+ const p1 = [basicsXAxis, topBasicsYAxis];
|
|
|
+ const p2 = [basicsXAxis, bottomYAxis];
|
|
|
+ const p3 = [basicsXAxis + WIDTH, bottomYAxis];
|
|
|
+ const p4 = [basicsXAxis + WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];
|
|
|
+
|
|
|
+ ctx.moveTo(p1[0], p1[1]);
|
|
|
+ ctx.lineTo(p2[0], p2[1]);
|
|
|
+ ctx.lineTo(p3[0], p3[1]);
|
|
|
+ ctx.lineTo(p4[0], p4[1]);
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ const topShape = echarts.graphic.extendShape({
|
|
|
+ buildPath(ctx, shape) {
|
|
|
+ const { topBasicsYAxis, basicsXAxis } = shape;
|
|
|
+
|
|
|
+ const WIDTH = 15;
|
|
|
+
|
|
|
+ const OBLIQUE_ANGLE_HEIGHT = 8;
|
|
|
+
|
|
|
+ const p1 = [basicsXAxis, topBasicsYAxis];
|
|
|
+ const p2 = [basicsXAxis + WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];
|
|
|
+ const p3 = [basicsXAxis, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT * 2];
|
|
|
+ const p4 = [basicsXAxis - WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];
|
|
|
+
|
|
|
+ ctx.moveTo(p1[0], p1[1]);
|
|
|
+ ctx.lineTo(p2[0], p2[1]);
|
|
|
+ ctx.lineTo(p3[0], p3[1]);
|
|
|
+ ctx.lineTo(p4[0], p4[1]);
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ echarts.graphic.registerShape("leftShape1", leftShape);
|
|
|
+ echarts.graphic.registerShape("rightShape1", rightShape);
|
|
|
+ echarts.graphic.registerShape("topShape1", topShape);
|
|
|
+
|
|
|
+ return {
|
|
|
+ ...series,
|
|
|
+ type: "custom",
|
|
|
+ renderItem: (_params: any, api: any) => {
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ const basicsCoord = api.coord([api.value(0), api.value(1)]);
|
|
|
+
|
|
|
+ const topBasicsYAxis = basicsCoord[1];
|
|
|
+
|
|
|
+ const basicsXAxis = basicsCoord[0] + index * 30;
|
|
|
+
|
|
|
+ const bottomYAxis = api.coord([api.value(0), 0])[1];
|
|
|
+
|
|
|
+ const basicColor = Array.isArray(color) ? color[index % color.length] : color;
|
|
|
+ const topColor = lightenColor(basicColor as string, 20);
|
|
|
+ const leftColor = lightenColor(basicColor as string, -40);
|
|
|
+
|
|
|
+ return {
|
|
|
+ type: "group",
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ type: "leftShape1",
|
|
|
+ shape: {
|
|
|
+ topBasicsYAxis,
|
|
|
+ basicsXAxis,
|
|
|
+ bottomYAxis,
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ fill: leftColor,
|
|
|
+ emphasis: {
|
|
|
+ fill: "yellow",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "rightShape1",
|
|
|
+ shape: {
|
|
|
+ topBasicsYAxis,
|
|
|
+ basicsXAxis,
|
|
|
+ bottomYAxis,
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ fill: basicColor,
|
|
|
+ emphasis: {
|
|
|
+ fill: "yellow",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "topShape1",
|
|
|
+ shape: {
|
|
|
+ topBasicsYAxis,
|
|
|
+ basicsXAxis,
|
|
|
+ bottomYAxis,
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ fill: topColor,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ };
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+export const getCircleSeries = (series: EChartsOption["series"], index: number, color: EChartsOption["color"]) => {
|
|
|
+ const barShape = echarts.graphic.extendShape({
|
|
|
+ buildPath(ctx, shape) {
|
|
|
+ const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;
|
|
|
+
|
|
|
+ const WIDTH = 15;
|
|
|
+
|
|
|
+ const p1 = [basicsXAxis - WIDTH, topBasicsYAxis];
|
|
|
+ const p2 = [basicsXAxis - WIDTH, bottomYAxis];
|
|
|
+ const p3 = [basicsXAxis + WIDTH, bottomYAxis];
|
|
|
+ const p4 = [basicsXAxis + WIDTH, topBasicsYAxis];
|
|
|
+
|
|
|
+ ctx.moveTo(p1[0], p1[1]);
|
|
|
+ ctx.lineTo(p2[0], p2[1]);
|
|
|
+ ctx.lineTo(p3[0], p3[1]);
|
|
|
+ ctx.lineTo(p4[0], p4[1]);
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ echarts.graphic.registerShape("barShape1", barShape);
|
|
|
+
|
|
|
+ return {
|
|
|
+ ...series,
|
|
|
+ type: "custom",
|
|
|
+ renderItem: (_params: any, api: any) => {
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ const basicsCoord = api.coord([api.value(0), api.value(1)]);
|
|
|
+
|
|
|
+ const topBasicsYAxis = basicsCoord[1];
|
|
|
+
|
|
|
+ const basicsXAxis = basicsCoord[0] + index * 30;
|
|
|
+
|
|
|
+ const bottomYAxis = api.coord([api.value(0), 0])[1];
|
|
|
+
|
|
|
+ const basicColor = Array.isArray(color) ? color[index % color.length] : color;
|
|
|
+
|
|
|
+ return {
|
|
|
+ type: "group",
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ type: "barShape1",
|
|
|
+ shape: {
|
|
|
+ topBasicsYAxis,
|
|
|
+ basicsXAxis,
|
|
|
+ bottomYAxis,
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ fill: basicColor,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'ellipse',
|
|
|
+ shape: {
|
|
|
+ cx: basicsXAxis,
|
|
|
+ cy: topBasicsYAxis,
|
|
|
+ rx: 15,
|
|
|
+ ry: 6
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ fill: lightenColor(basicColor as string, 20),
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'ellipse',
|
|
|
+ shape: {
|
|
|
+ cx: basicsXAxis,
|
|
|
+ cy: bottomYAxis,
|
|
|
+ rx: 15,
|
|
|
+ ry: 6
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ fill: basicColor,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ };
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+export const getTriangleSeries = (series: EChartsOption["series"], index: number, color: EChartsOption["color"]) => {
|
|
|
+ const barShape = echarts.graphic.extendShape({
|
|
|
+ buildPath(ctx, shape) {
|
|
|
+ const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;
|
|
|
+
|
|
|
+ const WIDTH = 15;
|
|
|
+
|
|
|
+ const p1 = [basicsXAxis, topBasicsYAxis];
|
|
|
+ const p2 = [basicsXAxis - WIDTH, bottomYAxis];
|
|
|
+ const p3 = [basicsXAxis + WIDTH, bottomYAxis];
|
|
|
+ const p4 = [basicsXAxis, topBasicsYAxis];
|
|
|
+
|
|
|
+ ctx.moveTo(p1[0], p1[1]);
|
|
|
+ ctx.lineTo(p2[0], p2[1]);
|
|
|
+ ctx.lineTo(p3[0], p3[1]);
|
|
|
+ ctx.lineTo(p4[0], p4[1]);
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ echarts.graphic.registerShape("barShape2", barShape);
|
|
|
+
|
|
|
+ return {
|
|
|
+ ...series,
|
|
|
+ type: "custom",
|
|
|
+ renderItem: (_params: any, api: any) => {
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ const basicsCoord = api.coord([api.value(0), api.value(1)]);
|
|
|
+
|
|
|
+ const topBasicsYAxis = basicsCoord[1];
|
|
|
+
|
|
|
+ const basicsXAxis = basicsCoord[0] + index * 30;
|
|
|
+
|
|
|
+ const bottomYAxis = api.coord([api.value(0), 0])[1];
|
|
|
+
|
|
|
+ const basicColor = Array.isArray(color) ? color[index % color.length] : color;
|
|
|
+
|
|
|
+ return {
|
|
|
+ type: "group",
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ type: "barShape2",
|
|
|
+ shape: {
|
|
|
+ topBasicsYAxis,
|
|
|
+ basicsXAxis,
|
|
|
+ bottomYAxis,
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ fill: basicColor,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ };
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+export const get3dTriangleSeries = (series: EChartsOption["series"], index: number, color: EChartsOption["color"]) => {
|
|
|
+ const leftShape = echarts.graphic.extendShape({
|
|
|
+ buildPath(ctx, shape) {
|
|
|
+ const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;
|
|
|
+
|
|
|
+ const WIDTH = 15;
|
|
|
+
|
|
|
+ const p1 = [basicsXAxis, topBasicsYAxis];
|
|
|
+ const p2 = [basicsXAxis - WIDTH, bottomYAxis];
|
|
|
+ const p3 = [basicsXAxis, bottomYAxis];
|
|
|
+ const p4 = [basicsXAxis, topBasicsYAxis];
|
|
|
+
|
|
|
+ ctx.moveTo(p1[0], p1[1]);
|
|
|
+ ctx.lineTo(p2[0], p2[1]);
|
|
|
+ ctx.lineTo(p3[0], p3[1]);
|
|
|
+ ctx.lineTo(p4[0], p4[1]);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ const rightShape = echarts.graphic.extendShape({
|
|
|
+ buildPath(ctx, shape) {
|
|
|
+ const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;
|
|
|
+
|
|
|
+ const WIDTH = 15;
|
|
|
+
|
|
|
+ const p1 = [basicsXAxis, topBasicsYAxis];
|
|
|
+ const p2 = [basicsXAxis, bottomYAxis];
|
|
|
+ const p3 = [basicsXAxis + WIDTH, bottomYAxis];
|
|
|
+ const p4 = [basicsXAxis, topBasicsYAxis];
|
|
|
+
|
|
|
+ ctx.moveTo(p1[0], p1[1]);
|
|
|
+ ctx.lineTo(p2[0], p2[1]);
|
|
|
+ ctx.lineTo(p3[0], p3[1]);
|
|
|
+ ctx.lineTo(p4[0], p4[1]);
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ echarts.graphic.registerShape("leftShape3", leftShape);
|
|
|
+ echarts.graphic.registerShape("rightShape3", rightShape);
|
|
|
+
|
|
|
+ return {
|
|
|
+ ...series,
|
|
|
+ type: "custom",
|
|
|
+ renderItem: (_params: any, api: any) => {
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ const basicsCoord = api.coord([api.value(0), api.value(1)]);
|
|
|
+
|
|
|
+ const topBasicsYAxis = basicsCoord[1];
|
|
|
+
|
|
|
+ const basicsXAxis = basicsCoord[0] + index * 30;
|
|
|
+
|
|
|
+ const bottomYAxis = api.coord([api.value(0), 0])[1];
|
|
|
+
|
|
|
+ const basicColor = Array.isArray(color) ? color[index % color.length] : color;
|
|
|
+ const leftColor = lightenColor(basicColor as string, -40);
|
|
|
+
|
|
|
+ return {
|
|
|
+ type: "group",
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ type: "leftShape3",
|
|
|
+ shape: {
|
|
|
+ topBasicsYAxis,
|
|
|
+ basicsXAxis,
|
|
|
+ bottomYAxis,
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ fill: leftColor,
|
|
|
+ emphasis: {
|
|
|
+ fill: "yellow",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "rightShape3",
|
|
|
+ shape: {
|
|
|
+ topBasicsYAxis,
|
|
|
+ basicsXAxis,
|
|
|
+ bottomYAxis,
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ fill: basicColor,
|
|
|
+ emphasis: {
|
|
|
+ fill: "yellow",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ };
|
|
|
+};
|