themeElement Type documentation¶

{ name: 'element', style: () => { animationDuration: 700, axisPointer: { handle: { color: 'rgba(0,0,0,0)', margin: 0 }, label: { backgroundColor: elementUi1, color: elementTextInverse, fontFamily: (undefined | string), fontSize: axisFontSize, lineHeight: axisLineHeight }, lineStyle: { color: elementUi3, width: 2 } }, backgroundColor: 'transparent', bar: { barGap: 0, label: { color: elementTextSecondary, fontFamily: (undefined | string), fontSize: number } }, candlestick: { itemStyle: { borderColor: candlestickBull, borderColor0: candlestickBear, color: candlestickBull, color0: candlestickBear } }, categoryAxis: { axisLabel: { color: textColor, fontFamily: (undefined | string), fontSize: axisFontSize, hideOverlap: true, lineHeight: axisLineHeight }, axisLine: { lineStyle: { color: axisLineColor }, show: true }, axisTick: { alignWithLabel: true }, inverse: rtl, nameTextStyle: { color: elementTextSecondary, fontFamily: (undefined | string) }, splitLine: { lineStyle: { color: axisLineColor } } }, color: colorPalettes.default, dataZoom: { borderColor: elementUi4, brushStyle: { color: dataZoomBrushColor }, dataBackground: { areaStyle: { color: dataZoomAreaColor }, lineStyle: { color: dataZoomLineColor } }, emphasis: { handleStyle: { borderColor: elementUi4, color: elementUi0Hover }, moveHandleStyle: { color: elementUi0Hover, opacity: 1 } }, fillerColor: dataZoomFillerColor, handleIcon: dataZoomHandleIcon, handleStyle: { borderColor: elementUi4, color: dataZoomHandleColor }, moveHandleStyle: { color: elementUi4, opacity: 1 }, selectedDataBackground: { areaStyle: { color: dataZoomLineColor }, lineStyle: { color: dataZoomLineColor } }, textStyle: { color: textColor, fontFamily: (undefined | string), fontSize: axisFontSize, lineHeight: axisLineHeight } }, gauge: { axisLabel: { color: elementTextPrimary, fontFamily: (undefined | string) }, axisTick: { lineStyle: { color: axisLineColor } }, detail: { color: elementTextPrimary, rich: { unit: { color: elementTextPrimary }, value: { color: elementTextPrimary } } }, splitLine: { lineStyle: { color: axisLineColor } } }, gradientColor: gradientColors.default, graph: { color: colorPalettes.default }, grid: { bottom: 30, containLabel: true, left: 32, right: 32, top: 85 }, legend: { backgroundColor: 'transparent', icon: 'circle', inactiveColor: elementUi3, itemStyle: { borderWidth: 0, itemGap: 12 }, left: 'auto', pageTextStyle: { color: textColor }, right: 20, textStyle: { color: textColor, fontFamily: (undefined | string), fontSize: number, lineHeight: number }, top: 35 }, line: { areaStyle: { opacity: 0.3 }, symbol: 'circle' }, pie: { itemStyle: { borderColor: elementBase1, borderWidth: 2 }, label: { color: elementTextSecondary, fontFamily: (undefined | string), fontSize: number, formatter: '{d}%', lineHeight: number }, labelLine: { lineStyle: { color: elementTextSecondary } } }, sankey: { label: { color: textColor, fontFamily: (undefined | string), textBorderColor: 'transparent' } }, simpl: { colorPalettes: { default: string[] }, customLegend: { grid: { top: 64 } }, dataZoom: { grid: { bottom: 80 }, options: { bottom: 20, height: 36 } }, externalZoomSlider: { grid: { bottom: 10 } }, gauge: { defaultColor: elementUi0, grey: elementBase0, unit: elementUi3, value: elementTextPrimary }, legendLeft: { left: 10, width: '45%' }, legendRight: { right: 20, width: '45%' }, noTitle: { grid: { top: 60 }, legend: { top: 15 } }, progress: { grey: elementUi4, itemGap: 6, itemWidth: 6 }, progressBar: { grid: { containLabel: true, left: 16, right: 52 }, itemWidth: 20, labelColor: textColor }, subTitle: { grid: { top: 110 }, legend: { top: 65 } }, timeRangeBar: { height: 32 } }, sunburst: { label: { color: textColor, fontFamily: (undefined | string), textBorderColor: 'transparent' } }, textStyle: { fontFamily: (undefined | string) }, timeAxis: { axisLabel: { color: textColor, fontFamily: (undefined | string), fontSize: axisFontSize, hideOverlap: true, lineHeight: axisLineHeight }, axisLine: { lineStyle: { color: axisLineColor }, show: true }, axisTick: { alignWithLabel: true }, inverse: rtl, nameTextStyle: { color: elementTextSecondary, fontFamily: (undefined | string) }, splitLine: { lineStyle: { color: axisLineColor } } }, title: { padding: number[], subtextStyle: { color: elementTextSecondary, fontFamily: (undefined | string), fontSize: number, lineHeight: number }, textStyle: { color: textColor, fontFamily: (undefined | string), fontSize: number, lineHeight: number } }, toolbox: { feature: { dataZoom: { brushStyle: { color: dataZoomFillerColor } } } }, tooltip: { axisPointer: { crossStyle: { color: elementUi3, width: 1 } }, backgroundColor: tooltipBackground, borderWidth: 0, formatter: tooltipFormatter, padding: number[], textStyle: { color: 'var(--element-text-inverse)', fontFamily: (undefined | string), fontWeight: 400 } }, valueAxis: { axisLabel: { color: textColor, fontFamily: (undefined | string), fontSize: axisFontSize, hideOverlap: true, lineHeight: axisLineHeight }, axisLine: { lineStyle: { color: axisLineColor }, show: true }, axisTick: { alignWithLabel: true }, nameTextStyle: { color: elementTextSecondary, fontFamily: (undefined | string) }, splitLine: { lineStyle: { color: axisLineColor } } } } } = ...¶