export function getTheme() { // ("zen" | "hack" | "concrete" | "") return localStorage.isDark ? 'hack' : '' } export function getLineData({ xAxis = [] as any[], datas = [] as number[][], legend = [] as string[], suffix = '', width = 1000, height = 400, responsive = false, zoom = false, modulo = 10, padding = 30, useArea = true }) { const colors = ['#6376DD', '#FBBB04'] const maxVal = Math.max(...datas.flat()) // 设置最大值为 接近这个数值并且比这个数值稍大的整数 const radio = 10 ** (maxVal.toString().length - 2) const max = Math.ceil(maxVal * 1.4 / radio) * radio const config = { theme: getTheme(), responsive, "chart": { "fontFamily": "inherit", "paddingTop": 0, height, width, "zoom": { "show": zoom }, "padding": { "top": 30, "right": padding, "bottom": 34, "left": padding }, "grid": { "position": "start", "labels": { "show": true, "fontSize": 12, "axis": { "fontSize": 12 }, "yAxis": { "commonScaleSteps": 10, "scaleMin": 0, "scaleMax": max, }, "xAxisLabels": { "show": true, "values": xAxis, "fontSize": 12, "showOnlyFirstAndLast": false, "showOnlyAtModulo": true, modulo, "yOffset": 8 } } }, "labels": { "fontSize": 12, "prefix": "", suffix }, "legend": { "show": legend.length > 1, "fontSize": 12 }, "title": { "text": " ", "show": false }, "userOptions": { "show": false }, }, "line": { "radius": 3, "useGradient": true, "strokeWidth": 2, "labels": {}, "area": { "useGradient": true, "opacity": "26" } }, } const dataset = datas.map((data, i) => { return { "name": legend[i], "series": data, "color": colors[i], "type": "line", "shape": "circle", "useArea": useArea, "useProgression": false, "dataLabels": true, "smooth": true, "dashed": false, "useTag": "none" } }) return { config, dataset } } export function getBarData({ xAxis = [] as any[], datas = [] as number[][], legend = [] as string[], suffix = '', width = 1000, height = 400, responsive = false, zoom = false, modulo = 10, padding = 30, colors = ['#6376DD', '#FBBB04'] }) { const config = { theme: getTheme(), responsive, "chart": { "fontFamily": "inherit", "paddingTop": 0, height, width, "zoom": { "show": zoom }, "padding": { "top": 20, "right": padding, "bottom": 20, "left": padding }, "grid": { "position": "middle", "labels": { "show": true, "fontSize": 16, "axis": { "fontSize": 16 }, "yAxis": { "commonScaleSteps": 10, "scaleMin": 0, }, "xAxisLabels": { "show": true, "values": xAxis, "fontSize": 16, "showOnlyFirstAndLast": false, "showOnlyAtModulo": true, modulo: xAxis.length < modulo ? xAxis.length : modulo, "yOffset": 2 } } }, "labels": { "fontSize": 16, "prefix": "", suffix }, "legend": { "show": legend.length > 1, "fontSize": 16 }, "title": { "text": " ", "show": false }, "userOptions": { "show": false }, }, "bar": { "borderRadius": 2, "useGradient": true, "periodGap": 0.5, "border": { "useSerieColor": false, "strokeWidth": 1, "stroke": "#FFFFFFff" }, "labels": { "show": true, "offsetY": -5, "rounding": 0, "color": "#1A1A1Aff", "formatter": null }, "serieName": { "show": false, "offsetY": -6, "useAbbreviation": true, "abbreviationSize": 3, "useSerieColor": true, "color": "#1A1A1Aff", "bold": false } }, } const dataset = datas.map((data, i) => { return { "name": legend[i], "series": data, "color": colors[i], "type": "bar", scaleSteps: 10, scaleLabel: "Blue circles" } }) return { config, dataset } } export function getLine2Data({ xAxis = [] as any[], datas = [] as number[][], legend = [] as string[], suffix = '', width = 500, height = 300, color = 'rgb(1, 191, 236)' }) { const max = 100 const config = { theme: getTheme(), "responsive": false, "chart": { "fontFamily": "inherit", "paddingTop": 0, "backgroundColor": "transparent", "color": "#888888", height, width, "zoom": { "show": false }, "padding": { "top": 10, "right": 24, "bottom": 30, "left": 24 }, "grid": { "position": "start", "labels": { "color": "#888888", "fontSize": 14, "axis": { "fontSize": 14 }, "yAxis": { "commonScaleSteps": 10, "scaleMin": 0, "scaleMax": max, }, "xAxisLabels": { "show": true, "color": "#888888", "values": xAxis, "fontSize": 14, "modulo": 112, "showOnlyFirstAndLast": false, "yOffset": 8 } } }, "labels": { "fontSize": 14, "prefix": "", suffix }, "legend": { "show": legend.length > 1, "color": "#888888", "fontSize": 14 }, "title": { "text": " ", "show": false }, "userOptions": { "show": false } }, "line": { "radius": 3, "useGradient": true, "strokeWidth": 2, "labels": { "rounding": 22, }, "area": { "useGradient": true, "opacity": "26" } }, } const dataset = datas.map((data, i) => { return { "name": legend[i], "series": data, "color": color, "type": "line", "shape": "circle", "useArea": true, "useProgression": false, "dataLabels": true, "smooth": true, "dashed": false, "useTag": "none" } }) return { config, dataset } } export function getPieData({ datas = [] as number[][], legend = [] as string[], types = [] as number[], width = 500, height = 1300, responsive = false }) { const colorList = ['#4285F4', '#2ecc71', '#FBBB04', '#e67e22', '#FF0000'].reverse() const config = { theme: getTheme(), "responsive": responsive, "backgroundColor": "transparent", style: { "backgroundColor": "transparent", chart: { "fontFamily": "inherit", "paddingTop": 0, "backgroundColor": "transparent", height, width, "padding": { "top": 0, "right": 0, "bottom": 0, "left": 0 }, "title": { "text": " ", "show": false, }, "legend": { "show": true, "bold": false, "backgroundColor": "transparent", "fontSize": 14, "roundingValue": 0, "roundingPercentage": 0 }, "layout": { "labels": { value: { rounding: 0, show: true, formatter: null }, percentage: { bold: true, fontSize: 14, rounding: 0, formatter: null, }, name: { bold: false, fontSize: 14 }, "hollow": { "total": { "fontSize": 18, "text": "总计", "value": { "fontSize": 18, } }, "average": { "show": false, }, }, }, }, }, }, "userOptions": { "show": false }, } // const dataset = [{ "name": "Series 1", "values": [100] }, { "name": "Series 2", "values": [50] }, { "name": "Series 3", "values": [25] }, { "name": "Series 4", "values": [12.5] }] const dataset = datas.map((data, i) => { return { "name": legend[i], "values": data, color: colorList[types[i] - 1] } }) return { config, dataset } } export function getPieSmallData({ datas = [] as number[][], legend = [] as string[], colors = ['#2ecc71', '#4285F4', '#FBBB04', '#FF0000', '#e67e22'].reverse() as string[], width = 500, height = 1300, responsive = false }) { const config = { theme: getTheme(), "responsive": responsive, "backgroundColor": "transparent", style: { "backgroundColor": "transparent", chart: { "fontFamily": "inherit", "paddingTop": 0, "gradientIntensity": "0", "backgroundColor": "transparent", height, width, "padding": { "top": 0, "right": 0, "bottom": 0, "left": 0 }, "title": { "text": "", "show": false, }, "legend": { "show": true, "bold": false, "backgroundColor": "transparent", "fontSize": 14, "roundingValue": 0, "roundingPercentage": 0 }, "layout": { "donut": { "strokeWidth": "40", "borderWidth": "2", "useShadow": false, }, "labels": { "dataLabels": { "show": true, "useLabelSlots": false, "hideUnderValue": 0, "prefix": "", "suffix": "" }, value: { rounding: 0, show: true, formatter: null }, percentage: { bold: true, fontSize: 14, rounding: 0, formatter: null, }, name: { bold: false, fontSize: 14 }, "hollow": { "total": { "fontSize": 18, "text": "总计", "value": { "fontSize": 18, } }, "average": { "show": false, }, }, }, }, }, }, "userOptions": { "show": false }, } // const dataset = [{ "name": "Series 1", "values": [100] }, { "name": "Series 2", "values": [50] }, { "name": "Series 3", "values": [25] }, { "name": "Series 4", "values": [12.5] }] const dataset = datas.map((data, i) => { return { "name": legend[i], "values": data, color: colors[i] } }) return { config, dataset } } export function getGaugeData({ value = 50 }) { const config = { theme: getTheme(), "responsive": false, "customPalette": [], "style": { "fontFamily": "inherit", "chart": { "backgroundColor": "#FFFFFFff", "color": "#1A1A1Aff", "animation": { "use": true, "speed": 0.5, "acceleration": 0.5 }, "layout": { "track": { "size": 1, "useGradient": true, "gradientIntensity": 20 }, "markers": { "color": "#1A1A1Aff", "bold": true, "fontSizeRatio": 1, "offsetY": 0, "roundingValue": 0 }, "pointer": { "type": "pointy", "size": 1, "stroke": "#1A1A1Aff", "strokeWidth": 12, "useRatingColor": true, "color": "#CCCCCCff", "circle": { "radius": 10, "stroke": "#1A1A1Aff", "strokeWidth": 2, "color": "#FFFFFFff" } } }, "legend": { "fontSize": 48, "prefix": "", "suffix": "%", "roundingValue": 2, "showPlusSymbol": false, "useRatingColor": true, "color": "#1A1A1Aff", "formatter": null }, "title": { "text": " ", "show": true, } } }, "userOptions": { "show": false, }, "translations": { "base": "Base" } } const dataset = { "series": [{ "from": 0, "to": 25, "color": "#4DABF7", "id": "111" }, { "from": 25, "to": 50, "color": "#69DB7C", "id": "111" }, { "from": 50, "to": 75, "color": "#FFA94D", "id": "111" }, { "from": 75, "to": 100, "color": "#FF6B6B", "id": "222" }], value } return { config, dataset } }