Skip to content

Commit 4557020

Browse files
Imiss-U1025Imiss-U1025
committed
Added styles to gaugeChart.
1 parent 4a913bc commit 4557020

File tree

4 files changed

+81
-26
lines changed

4 files changed

+81
-26
lines changed

‎client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -265,12 +265,14 @@ let chartJsonModeChildren: any = {
265265
top:withDefault(NumberControl,trans('gaugeChart.defaultTop')),
266266
bottom:withDefault(NumberControl,trans('gaugeChart.defaultBottom')),
267267
width:withDefault(NumberControl,trans('gaugeChart.defaultWidth')),
268+
radius:withDefault(NumberControl,trans('gaugeChart.defaultRadius')),
268269
min:withDefault(NumberControl,trans('gaugeChart.defaultMin')),
269270
max:withDefault(NumberControl,trans('gaugeChart.defaultMax')),
270271
gap:withDefault(NumberControl,trans('gaugeChart.defaultGap')),
271272
startAngle:withDefault(NumberControl,trans('gaugeChart.defaultStartAngle')),
272273
endAngle:withDefault(NumberControl,trans('gaugeChart.defaultEndAngle')),
273274
splitNumber:withDefault(NumberControl,trans('gaugeChart.defaultSplitNumber')),
275+
274276
}
275277
if (EchartsStyle) {
276278
chartJsonModeChildren = {

‎client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export function gaugeChartPropertyView(
3737
{children.top.propertyView({ label: trans("gaugeChart.top") })}
3838
{children.bottom.propertyView({ label: trans("gaugeChart.bottom") })}
3939
{children.width.propertyView({ label: trans("gaugeChart.width") })} */}
40+
{children.radius.propertyView({ label: trans("gaugeChart.radius") })}
4041
{children.min.propertyView({ label: trans("gaugeChart.min") })}
4142
{children.max.propertyView({ label: trans("gaugeChart.max") })}
4243
{children.startAngle.propertyView({ label: trans("gaugeChart.startAngle") })}

‎client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts

Lines changed: 76 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s
1212
import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig";
1313
import Big from "big.js";
1414
import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls";
15+
import opacityToHex from "../../util/opacityToHex";
1516

1617
export function transformData(
1718
originData: JSONObject[],
@@ -133,23 +134,51 @@ export function getEchartsConfig(
133134
chartSize?: ChartSize,
134135
theme?: any,
135136
): EChartsOptionWithMap {
137+
138+
const backgroundColor = props?.chartStyle?.chartBackgroundColor || theme?.chartStyle?.backgroundColor || "#FFFFFF";
139+
const gradientColor = props?.chartStyle?.chartGradientColor || theme?.chartStyle?.gradientColor;
140+
const opacity = props?.chartStyle?.chartOpacity || theme?.chartStyle?.opacity;
141+
const direction = props?.chartStyle?.direction || theme?.chartStyle?.direction;
142+
136143
if (props.mode === "json") {
137144
let opt={
138-
"title": {
139-
"text": props.echartsTitle,
140-
'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
141-
"left":props.echartsTitleConfig.top
142-
},
143-
"backgroundColor": props?.style?.background || theme?.style?.background,
144-
"color": props.echartsOption.data?.map(data => data.color),
145-
"tooltip": props.tooltip&&{
146-
"trigger": "item",
147-
"formatter": "{a} <br/>{b} : {c}%"
148-
},
149-
"series": [
145+
"title": {
146+
"text": props.echartsTitle,
147+
'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
148+
"left":props.echartsTitleConfig.top,
149+
"textStyle": {
150+
"fontFamily": props?.titleStyle?.chartFontFamily || theme?.titleStyle?.fontFamily,
151+
"fontSize": props?.titleStyle?.chartTextSize || theme?.titleStyle?.fontSize,
152+
"fontWeight": props?.titleStyle?.chartTextWeight || theme?.titleStyle?.fontWeight,
153+
"color": props?.titleStyle?.chartTextColor || theme?.titleStyle?.fontColor || "#000000",
154+
"fontStyle": props?.titleStyle?.chartFontStyle || theme?.titleStyle?.fontStyle,
155+
"textShadowColor": props?.titleStyle?.chartShadowColor || theme?.titleStyle?.shadowColor,
156+
"textShadowBlur": props?.titleStyle?.chartBoxShadow?.split('px')[0] || theme?.titleStyle?.boxShadow?.split('px')[0],
157+
"textShadowOffsetX": props?.titleStyle?.chartBoxShadow?.split('px')[1] || theme?.titleStyle?.boxShadow?.split('px')[1],
158+
"textShadowOffsetY": props?.titleStyle?.chartBoxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow?.split('px')[2]
159+
},
160+
},
161+
"backgroundColor": gradientColor && backgroundColor
162+
? {
163+
"x": direction?.split(' ')[0],
164+
"y": direction?.split(' ')[1],
165+
"x2": direction?.split(' ')[2],
166+
"y2": direction?.split(' ')[3],
167+
"colorStops": [
168+
{ "offset": 0, "color": backgroundColor + opacityToHex(opacity)},
169+
{ "offset": 1, "color": gradientColor + opacityToHex(opacity)}
170+
]
171+
}
172+
: backgroundColor + opacityToHex(opacity),
173+
"tooltip": props.tooltip&&{
174+
"trigger": "item",
175+
"formatter": "{a} <br/>{b} : {c}%"
176+
},
177+
"series": [
150178
{
151179
"name": props.echartsConfig.type,
152180
"type": props.echartsConfig.type,
181+
"radius": `${props.radius}%`,
153182
"left": `${props.left}%`,
154183
"top": props.top,
155184
"bottom": props.bottom,
@@ -160,26 +189,47 @@ export function getEchartsConfig(
160189
"startAngle": props.startAngle,
161190
"endAngle": props.endAngle,
162191
"splitNumber": props.splitNumber,
192+
"itemStyle": {
193+
"color": props.echartsOption.data?.map(data => data.color),
194+
"opacity": props.opacity,
195+
"borderColor": props?.chartStyle?.chartBorderColor || theme?.chartStyle?.borderColor,
196+
"borderWidth": props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth,
197+
"borderType": props?.chartStyle?.chartBorderStyle || theme?.chartStyle?.borderType,
198+
"borderRadius": props?.chartStyle?.chartBorderRadius || theme?.chartStyle?.borderRadius,
199+
"shadowColor": props?.chartStyle?.chartShadowColor || theme?.chartStyle?.shadowColor,
200+
"shadowBlur": props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow?.split('px')[0],
201+
"shadowOffsetX": props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow?.split('px')[1],
202+
"shadowOffsetY": props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow?.split('px')[2]
203+
},
163204
'detail': {
164-
"backgroundColor": props?.style?.background, "formatter": "{value}%"
205+
"fontFamily": props?.legendStyle?.chartFontFamily || theme?.legendStyle?.fontFamily,
206+
"fontSize": props?.legendStyle?.chartTextSize || theme?.legendStyle?.fontSize,
207+
"fontWeight": props?.legendStyle?.chartTextWeight || theme?.legendStyle?.fontWeight,
208+
"color": props?.legendStyle?.chartTextColor || theme?.legendStyle?.fontColor || "#000000",
209+
"fontStyle": props?.legendStyle?.chartFontStyle || theme?.legendStyle?.fontStyle,
210+
"textShadowColor": props?.legendStyle?.chartShadowColor || theme?.legendStyle?.shadowColor,
211+
"textShadowBlur": props?.legendStyle?.chartBoxShadow?.split('px')[0] || theme?.legendStyle?.boxShadow?.split('px')[0],
212+
"textShadowOffsetX": props?.legendStyle?.chartBoxShadow?.split('px')[1] || theme?.legendStyle?.boxShadow?.split('px')[1],
213+
"textShadowOffsetY": props?.legendStyle?.chartBoxShadow?.split('px')[2] || theme?.legendStyle?.boxShadow?.split('px')[2]
165214
},
166215
"label": {
167216
"show": props.label,
168217
"position": props.echartsLabelConfig.top,
169-
"fontFamily": props?.labelStyle?.chartFontFamily || theme?.labelStyle?.fontFamily,
170-
"fontSize": props?.labelStyle?.chartTextSize || theme?.labelStyle?.fontSize,
171-
"fontWeight": props?.labelStyle?.chartTextWeight || theme?.labelStyle?.fontWeight,
172-
"color": props?.labelStyle?.chartTextColor || theme?.labelStyle?.fontColor || "#000000",
173-
"fontStyle": props?.labelStyle?.chartFontStyle || theme?.labelStyle?.fontStyle,
174-
"textShadowColor": props?.labelStyle?.chartShadowColor || theme?.labelStyle?.shadowColor,
175-
"textShadowBlur": props?.labelStyle?.chartBoxShadow?.split('px')[0] || theme?.labelStyle?.boxShadow?.split('px')[0],
176-
"textShadowOffsetX": props?.labelStyle?.chartBoxShadow?.split('px')[1] || theme?.labelStyle?.boxShadow?.split('px')[1],
177-
"textShadowOffsetY": props?.labelStyle?.chartBoxShadow?.split('px')[2] || theme?.labelStyle?.boxShadow?.split('px')[2]
178218
},
179-
/*"detail": {
180-
"formatter": "{value}%"
181-
}, */
182-
"data": props.echartsOption.data
219+
"data": props.echartsOption.data?.map(item => ({
220+
...item,
221+
title: {
222+
"fontFamily": props?.labelStyle?.chartFontFamily || theme?.labelStyle?.fontFamily,
223+
"fontSize": props?.labelStyle?.chartTextSize || theme?.labelStyle?.fontSize,
224+
"fontWeight": props?.labelStyle?.chartTextWeight || theme?.labelStyle?.fontWeight,
225+
"color": props?.labelStyle?.chartTextColor || theme?.labelStyle?.fontColor || "#000000",
226+
"fontStyle": props?.labelStyle?.chartFontStyle || theme?.labelStyle?.fontStyle,
227+
"textShadowColor": props?.labelStyle?.chartShadowColor || theme?.labelStyle?.shadowColor,
228+
"textShadowBlur": props?.labelStyle?.chartBoxShadow?.split('px')[0] || theme?.labelStyle?.boxShadow?.split('px')[0],
229+
"textShadowOffsetX": props?.labelStyle?.chartBoxShadow?.split('px')[1] || theme?.labelStyle?.boxShadow?.split('px')[1],
230+
"textShadowOffsetY": props?.labelStyle?.chartBoxShadow?.split('px')[2] || theme?.labelStyle?.boxShadow?.split('px')[2]
231+
}
232+
}))
183233
}
184234
]
185235
}

‎client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,8 @@ export const en = {
109109
endAngle: 'End Angle',
110110
defaultSplitNumber: '10',
111111
splitNumber: 'Split Number',
112+
radius: 'Radius',
113+
defaultRadius: '60%',
112114
label:'Label',
113115

114116
},

0 commit comments

Comments
 (0)