chore: sync local DataV boards and assets for standalone repo
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -0,0 +1,5 @@
|
||||
// 注册自定义图形
|
||||
import { registerShape as registerShapeSolidBar } from "./solidBar";
|
||||
export const registerCustomShape = (echarts) => {
|
||||
registerShapeSolidBar(echarts);
|
||||
};
|
||||
@@ -0,0 +1,306 @@
|
||||
// 立体柱状图 自定义图形
|
||||
import echarts from "@/echarts/index";
|
||||
|
||||
// 注册图形元素
|
||||
export const registerShape = (echarts) => {
|
||||
// 定义柱状图左侧图形元素
|
||||
const leftRect = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 10, //柱状图宽
|
||||
zWidth: 8, //阴影折角宽
|
||||
zHeight: 4, //阴影折角高
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
const api = shape.api;
|
||||
const xAxisPoint = api.coord([shape.xValue, 0]);
|
||||
const p0 = [
|
||||
shape.x - shape.width / 2 + shape.groupBasisX,
|
||||
shape.y - shape.zHeight,
|
||||
];
|
||||
const p1 = [
|
||||
shape.x - shape.width / 2 + shape.groupBasisX,
|
||||
shape.y - shape.zHeight,
|
||||
];
|
||||
const p2 = [
|
||||
xAxisPoint[0] - shape.width / 2 + shape.groupBasisX,
|
||||
xAxisPoint[1],
|
||||
];
|
||||
const p3 = [
|
||||
xAxisPoint[0] + shape.width / 2 + shape.groupBasisX,
|
||||
xAxisPoint[1],
|
||||
];
|
||||
const p4 = [shape.x + shape.width / 2 + shape.groupBasisX, shape.y];
|
||||
|
||||
ctx.moveTo(p0[0], p0[1]);
|
||||
ctx.lineTo(p1[0], p1[1]);
|
||||
ctx.lineTo(p2[0], p2[1]);
|
||||
ctx.lineTo(p3[0], p3[1]);
|
||||
ctx.lineTo(p4[0], p4[1]);
|
||||
ctx.lineTo(p0[0], p0[1]);
|
||||
ctx.closePath();
|
||||
},
|
||||
});
|
||||
// 定义柱状图右侧图形元素
|
||||
const rightRect = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 9,
|
||||
zWidth: 15,
|
||||
zHeight: 8,
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
const api = shape.api;
|
||||
const xAxisPoint = api.coord([shape.xValue, 0]);
|
||||
const p1 = [
|
||||
shape.x - shape.width / 2 + shape.groupBasisX,
|
||||
shape.y - shape.zHeight / 2,
|
||||
];
|
||||
const p3 = [
|
||||
xAxisPoint[0] + shape.width / 2 + shape.groupBasisX,
|
||||
xAxisPoint[1],
|
||||
];
|
||||
const p4 = [shape.x + shape.width / 2 + shape.groupBasisX, shape.y];
|
||||
const p5 = [
|
||||
xAxisPoint[0] + shape.width / 2 + shape.zWidth + shape.groupBasisX,
|
||||
xAxisPoint[1],
|
||||
];
|
||||
const p6 = [
|
||||
shape.x + shape.width / 2 + shape.zWidth + shape.groupBasisX,
|
||||
shape.y - shape.zHeight / 2,
|
||||
];
|
||||
const p7 = [
|
||||
shape.x - shape.width / 2 + shape.zWidth + shape.groupBasisX,
|
||||
shape.y - shape.zHeight,
|
||||
];
|
||||
ctx.moveTo(p4[0], p4[1]);
|
||||
ctx.lineTo(p3[0], p3[1]);
|
||||
ctx.lineTo(p5[0], p5[1]);
|
||||
ctx.lineTo(p6[0], p6[1]);
|
||||
ctx.lineTo(p4[0], p4[1]);
|
||||
|
||||
// ctx.moveTo(p4[0], p4[1]);
|
||||
// ctx.lineTo(p6[0], p6[1]);
|
||||
// ctx.lineTo(p7[0], p7[1]);
|
||||
// ctx.lineTo(p1[0], p1[1]);
|
||||
// ctx.lineTo(p4[0], p4[1]);
|
||||
ctx.closePath();
|
||||
},
|
||||
});
|
||||
//定义柱状图顶部图形元素
|
||||
const topRect = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 9,
|
||||
zWidth: 15,
|
||||
zHeight: 8,
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
const api = shape.api;
|
||||
const xAxisPoint = api.coord([shape.xValue, 0]);
|
||||
const p1 = [
|
||||
shape.x - shape.width / 2 + shape.groupBasisX,
|
||||
shape.y - shape.zHeight / 2,
|
||||
];
|
||||
const p3 = [
|
||||
xAxisPoint[0] + shape.width / 2 + shape.groupBasisX,
|
||||
xAxisPoint[1],
|
||||
];
|
||||
const p4 = [shape.x + shape.width / 2 + shape.groupBasisX, shape.y];
|
||||
const p5 = [
|
||||
xAxisPoint[0] + shape.width / 2 + shape.zWidth + shape.groupBasisX,
|
||||
xAxisPoint[1],
|
||||
];
|
||||
const p6 = [
|
||||
shape.x + shape.width / 2 + shape.zWidth + shape.groupBasisX,
|
||||
shape.y - shape.zHeight / 2,
|
||||
];
|
||||
const p7 = [
|
||||
shape.x - shape.width / 2 + shape.zWidth + shape.groupBasisX,
|
||||
shape.y - shape.zHeight,
|
||||
];
|
||||
// ctx.moveTo(p4[0], p4[1]);
|
||||
// ctx.lineTo(p3[0], p3[1]);
|
||||
// ctx.lineTo(p5[0], p5[1]);
|
||||
// ctx.lineTo(p6[0], p6[1]);
|
||||
// ctx.lineTo(p4[0], p4[1]);
|
||||
|
||||
ctx.moveTo(p4[0], p4[1]);
|
||||
ctx.lineTo(p6[0], p6[1]);
|
||||
ctx.lineTo(p7[0], p7[1]);
|
||||
ctx.lineTo(p1[0], p1[1]);
|
||||
ctx.lineTo(p4[0], p4[1]);
|
||||
ctx.closePath();
|
||||
},
|
||||
});
|
||||
echarts.graphic.registerShape("leftRect", leftRect);
|
||||
echarts.graphic.registerShape("rightRect", rightRect);
|
||||
echarts.graphic.registerShape("topRect", topRect);
|
||||
};
|
||||
const _getCustomBarStyleGroupList = (echarts) => [
|
||||
{
|
||||
leftRect: {
|
||||
fill: "#C69321",
|
||||
},
|
||||
rightRect: {
|
||||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// 这里 offset: 0 1 ,表示从下往上的渐变色
|
||||
{
|
||||
offset: 0, // 100%处的颜色
|
||||
color: "#FABF3D",
|
||||
},
|
||||
{
|
||||
offset: 1, // 0%处的颜色
|
||||
color: "#FFD376",
|
||||
},
|
||||
]),
|
||||
},
|
||||
topRect: {
|
||||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// 这里 offset: 0 1 ,表示从下往上的渐变色
|
||||
{
|
||||
offset: 0, // 100%处的颜色
|
||||
color: "#FAC244",
|
||||
},
|
||||
{
|
||||
offset: 1, // 0%处的颜色
|
||||
color: "#FED26F",
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
{
|
||||
leftRect: {
|
||||
fill: "#0EAEDC",
|
||||
},
|
||||
rightRect: {
|
||||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// 这里 offset: 0 1 ,表示从下往上的渐变色
|
||||
{
|
||||
offset: 0, // 100%处的颜色
|
||||
color: "#4BDBFF",
|
||||
},
|
||||
{
|
||||
offset: 1, // 0%处的颜色
|
||||
color: "#09C8FF",
|
||||
},
|
||||
]),
|
||||
},
|
||||
topRect: {
|
||||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// 这里 offset: 0 1 ,表示从下往上的渐变色
|
||||
{
|
||||
offset: 0, // 100%处的颜色
|
||||
color: "#4ADAFF",
|
||||
},
|
||||
{
|
||||
offset: 1, // 0%处的颜色
|
||||
color: "#0BC8FF",
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
];
|
||||
function getRenderItem(params, api, groupIdx, customBarStyleGroupList,groupBasisXVal=-30) {
|
||||
const seriesIndex = params.seriesIndex;
|
||||
const apiVals = [api.value(0), api.value(1)]; //
|
||||
let location = api.coord([apiVals[0], apiVals[1]]);
|
||||
var extent = api.size([0, api.value(1)]);
|
||||
const customBarStyleGroupListLen = customBarStyleGroupList.length;
|
||||
const _customBarStyle =
|
||||
customBarStyleGroupListLen - 1 >= groupIdx
|
||||
? customBarStyleGroupList[groupIdx]
|
||||
: customBarStyleGroupList[0];
|
||||
return {
|
||||
type: "group",
|
||||
children: [
|
||||
{
|
||||
type: "leftRect",
|
||||
shape: {
|
||||
api,
|
||||
groupBasisX: (groupIdx - 2) * groupBasisXVal * -1,
|
||||
xValue: apiVals[0],
|
||||
yValue: apiVals[1],
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
},
|
||||
style: _customBarStyle.leftRect,
|
||||
//style: api.style()
|
||||
},
|
||||
{
|
||||
type: "rightRect",
|
||||
shape: {
|
||||
api,
|
||||
groupBasisX: (groupIdx - 2) * groupBasisXVal * -1,
|
||||
xValue: apiVals[0],
|
||||
yValue: apiVals[1],
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
},
|
||||
style: _customBarStyle.rightRect,
|
||||
//style: api.style(),
|
||||
},
|
||||
{
|
||||
type: "topRect",
|
||||
shape: {
|
||||
api,
|
||||
groupBasisX: (groupIdx - 2) * groupBasisXVal * -1,
|
||||
xValue: apiVals[0],
|
||||
yValue: apiVals[1],
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
},
|
||||
style: _customBarStyle.topRect,
|
||||
//style: api.style(),
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
export const getSeriesData = (
|
||||
echarts,
|
||||
groups,
|
||||
xDataList,
|
||||
customBarStyleGroupList,
|
||||
groupBasisXVal = -30
|
||||
) => {
|
||||
if (!Array.isArray(customBarStyleGroupList)) {
|
||||
customBarStyleGroupList = _getCustomBarStyleGroupList(echarts);
|
||||
}
|
||||
const d = [];
|
||||
const len = xDataList.length;
|
||||
const len2 = xDataList[0].length;
|
||||
xDataList[0].forEach((el, idx) => {
|
||||
d.push(el);
|
||||
for (let index = 1; index < len; index++) {
|
||||
const el2 = xDataList[index];
|
||||
d.push(el2[idx]);
|
||||
}
|
||||
});
|
||||
return groups.map((label, idx) => {
|
||||
const temp = [];
|
||||
for (let index = 0; index < len2; index++) {
|
||||
const el = d[idx + index * groups.length];
|
||||
const _rest = []; //new Array(groups.length - 1).fill("");
|
||||
temp.push(el, ..._rest);
|
||||
}
|
||||
return {
|
||||
type: "custom",
|
||||
name: label,
|
||||
renderItem: function (params, api) {
|
||||
return getRenderItem(params, api, idx, customBarStyleGroupList,groupBasisXVal);
|
||||
},
|
||||
//barWidth: '20',
|
||||
|
||||
data: temp,
|
||||
itemStyle: {
|
||||
// color: () => {
|
||||
// return new echarts.graphic.LinearGradient(0, 0, 0, 1, colors[index]);
|
||||
// },
|
||||
},
|
||||
};
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,42 @@
|
||||
## 颜色渐进
|
||||
```json
|
||||
# 方法1
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// 这里 offset: 0 1 ,表示从下往上的渐变色
|
||||
{
|
||||
offset: 0, // 0%处的颜色
|
||||
color: "rgba(0, 216, 255,1)",
|
||||
},
|
||||
{
|
||||
offset: 0.8, // 100%处的颜色
|
||||
color: "rgba(0, 167, 254,1)",
|
||||
},
|
||||
{
|
||||
offset: 1, // 100%处的颜色
|
||||
color: "rgba(42, 118, 254,1)",//
|
||||
},
|
||||
]),
|
||||
# 方法2
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0, // 0%处的颜色
|
||||
color: "rgba(0, 216, 255,1)",
|
||||
},
|
||||
{
|
||||
offset: 0.8, // 100%处的颜色
|
||||
color: "rgba(0, 167, 254,1)",
|
||||
},
|
||||
{
|
||||
offset: 1, // 100%处的颜色
|
||||
color: "rgba(42, 118, 254,1)", //
|
||||
},
|
||||
],
|
||||
},
|
||||
```
|
||||
@@ -0,0 +1,66 @@
|
||||
/*
|
||||
* @Author: mjh
|
||||
* @Date: 2023-08-11 12:16:33
|
||||
* @LastEditors: mjh
|
||||
* @LastEditTime: 2023-08-15 10:20:14
|
||||
* @Description:
|
||||
*/
|
||||
import * as echarts from "echarts/core";
|
||||
import {
|
||||
GraphicComponent,
|
||||
GridComponent,
|
||||
LegendComponent,
|
||||
PolarComponent,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
ToolboxComponent,
|
||||
} from "echarts/components";
|
||||
import {
|
||||
BarChart,
|
||||
BoxplotChart,
|
||||
LineChart,
|
||||
PieChart,
|
||||
RadarChart,
|
||||
PictorialBarChart,
|
||||
GaugeChart,
|
||||
CustomChart,
|
||||
} from "echarts/charts";
|
||||
import { UniversalTransition } from "echarts/features";
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
|
||||
echarts.use([
|
||||
GraphicComponent,
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
ToolboxComponent,
|
||||
LegendComponent,
|
||||
TitleComponent,
|
||||
LineChart,
|
||||
BarChart,
|
||||
PieChart,
|
||||
BoxplotChart,
|
||||
CanvasRenderer,
|
||||
UniversalTransition,
|
||||
RadarChart,
|
||||
PictorialBarChart,
|
||||
PolarComponent,
|
||||
GaugeChart,
|
||||
CustomChart,
|
||||
]);
|
||||
// import * as echarts from 'echarts'
|
||||
// 初始化语法糖
|
||||
const draw = (dom, option) => {
|
||||
const chart = echarts.init(dom);
|
||||
chart.clear();
|
||||
chart.setOption(option);
|
||||
return chart;
|
||||
};
|
||||
// 注册自定义图形
|
||||
import { registerCustomShape } from "./customCharts/index";
|
||||
registerCustomShape(echarts);
|
||||
//
|
||||
|
||||
export default {
|
||||
...echarts,
|
||||
draw,
|
||||
};
|
||||
Reference in New Issue
Block a user