mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-03 12:29:24 +08:00
cxd 配置图表主题 (#1215)
This commit is contained in:
liaoxuezhi
GitHub
parent
1a722e67e3
commit
a3a2b89dd4
@ -36,6 +36,11 @@ export interface ChartSchema extends BaseSchema {
|
||||
*/
|
||||
type: 'chart';
|
||||
|
||||
/**
|
||||
* Chart 主题配置
|
||||
*/
|
||||
chartTheme?: any;
|
||||
|
||||
/**
|
||||
* 图表配置接口
|
||||
*/
|
||||
@ -244,6 +249,8 @@ export class Chart extends React.Component<ChartProps> {
|
||||
|
||||
refFn(ref: any) {
|
||||
const chartRef = this.props.chartRef;
|
||||
const {chartTheme} = this.props;
|
||||
|
||||
if (ref) {
|
||||
Promise.all([
|
||||
import('echarts'),
|
||||
@ -259,7 +266,14 @@ export class Chart extends React.Component<ChartProps> {
|
||||
]).then(([echarts, dataTool]: any) => {
|
||||
(window as any).echarts = echarts;
|
||||
echarts.dataTool = dataTool;
|
||||
this.echarts = echarts.init(ref);
|
||||
let theme = 'default';
|
||||
|
||||
if (chartTheme) {
|
||||
echarts.registerTheme('custom', chartTheme);
|
||||
theme = 'custom';
|
||||
}
|
||||
|
||||
this.echarts = echarts.init(ref, theme);
|
||||
this.echarts.on('click', this.handleClick);
|
||||
this.unSensor = resizeSensor(ref, () => {
|
||||
const width = ref.offsetWidth;
|
||||
|
||||
@ -41,6 +41,415 @@ theme('cxd', {
|
||||
'range-control': {
|
||||
showInput: true,
|
||||
clearable: true
|
||||
},
|
||||
|
||||
'chart': {
|
||||
chartTheme: {
|
||||
color: [
|
||||
'#108cee',
|
||||
'#545fc8',
|
||||
'#f38900',
|
||||
'#ea2e2e',
|
||||
'#8a58bc',
|
||||
'#04c1ba',
|
||||
'#fbbe04',
|
||||
'#5fb333',
|
||||
'#0a7eb4',
|
||||
'#304069',
|
||||
'#c4ccd3'
|
||||
],
|
||||
backgroundColor: '#f5f5f5',
|
||||
textStyle: {},
|
||||
title: {
|
||||
textStyle: {
|
||||
color: '#333'
|
||||
},
|
||||
subtextStyle: {
|
||||
color: '#999999'
|
||||
}
|
||||
},
|
||||
line: {
|
||||
itemStyle: {
|
||||
borderWidth: 1
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
symbolSize: 4,
|
||||
symbol: 'emptyCircle',
|
||||
smooth: false
|
||||
},
|
||||
radar: {
|
||||
itemStyle: {
|
||||
borderWidth: 1
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
symbolSize: 4,
|
||||
symbol: 'emptyCircle',
|
||||
smooth: false
|
||||
},
|
||||
bar: {
|
||||
itemStyle: {
|
||||
barBorderWidth: 0,
|
||||
barBorderColor: '#ccc'
|
||||
}
|
||||
},
|
||||
pie: {
|
||||
itemStyle: {
|
||||
borderWidth: 0,
|
||||
borderColor: '#ccc'
|
||||
}
|
||||
},
|
||||
scatter: {
|
||||
itemStyle: {
|
||||
borderWidth: 0,
|
||||
borderColor: '#ccc'
|
||||
}
|
||||
},
|
||||
boxplot: {
|
||||
itemStyle: {
|
||||
borderWidth: 0,
|
||||
borderColor: '#ccc'
|
||||
}
|
||||
},
|
||||
parallel: {
|
||||
itemStyle: {
|
||||
borderWidth: 0,
|
||||
borderColor: '#ccc'
|
||||
}
|
||||
},
|
||||
sankey: {
|
||||
itemStyle: {
|
||||
borderWidth: 0,
|
||||
borderColor: '#ccc'
|
||||
}
|
||||
},
|
||||
funnel: {
|
||||
itemStyle: {
|
||||
borderWidth: 0,
|
||||
borderColor: '#ccc'
|
||||
}
|
||||
},
|
||||
gauge: {
|
||||
itemStyle: {
|
||||
borderWidth: 0,
|
||||
borderColor: '#ccc'
|
||||
}
|
||||
},
|
||||
candlestick: {
|
||||
itemStyle: {
|
||||
color: '#c23531',
|
||||
color0: '#314656',
|
||||
borderColor: '#c23531',
|
||||
borderColor0: '#314656',
|
||||
borderWidth: 1
|
||||
}
|
||||
},
|
||||
graph: {
|
||||
itemStyle: {
|
||||
borderWidth: 0,
|
||||
borderColor: '#ccc'
|
||||
},
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#aaa'
|
||||
},
|
||||
symbolSize: 4,
|
||||
symbol: 'emptyCircle',
|
||||
smooth: false,
|
||||
color: [
|
||||
'#108cee',
|
||||
'#545fc8',
|
||||
'#f38900',
|
||||
'#ea2e2e',
|
||||
'#8a58bc',
|
||||
'#04c1ba',
|
||||
'#fbbe04',
|
||||
'#5fb333',
|
||||
'#0a7eb4',
|
||||
'#304069',
|
||||
'#c4ccd3'
|
||||
],
|
||||
label: {
|
||||
color: '#f5f5f5'
|
||||
}
|
||||
},
|
||||
map: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#eee',
|
||||
borderColor: '#444',
|
||||
borderWidth: 0.5
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: 'rgba(255,215,0,0.8)',
|
||||
borderColor: '#444',
|
||||
borderWidth: 1
|
||||
}
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
color: '#000'
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
textStyle: {
|
||||
color: 'rgb(100,0,0)'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
geo: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#eee',
|
||||
borderColor: '#444',
|
||||
borderWidth: 0.5
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: 'rgba(255,215,0,0.8)',
|
||||
borderColor: '#444',
|
||||
borderWidth: 1
|
||||
}
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
color: '#000'
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
textStyle: {
|
||||
color: 'rgb(100,0,0)'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
categoryAxis: {
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#999999'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#999999'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#999999'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: ['#ccc']
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
areaStyle: {
|
||||
color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
|
||||
}
|
||||
}
|
||||
},
|
||||
valueAxis: {
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#999999'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#999999'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#999999'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: ['#eeeeee']
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
areaStyle: {
|
||||
color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
|
||||
}
|
||||
}
|
||||
},
|
||||
logAxis: {
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#999999'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#999999'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#999999'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: ['#eeeeee']
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
areaStyle: {
|
||||
color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
|
||||
}
|
||||
}
|
||||
},
|
||||
timeAxis: {
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#999999'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#999999'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#999999'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: ['#eeeeee']
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
areaStyle: {
|
||||
color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
|
||||
}
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
iconStyle: {
|
||||
normal: {
|
||||
borderColor: '#999'
|
||||
},
|
||||
emphasis: {
|
||||
borderColor: '#666'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: '#ccc',
|
||||
width: 1
|
||||
},
|
||||
crossStyle: {
|
||||
color: '#ccc',
|
||||
width: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
timeline: {
|
||||
lineStyle: {
|
||||
color: '#293c55',
|
||||
width: 1
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#293c55',
|
||||
borderWidth: 1
|
||||
},
|
||||
emphasis: {
|
||||
color: '#a9334c'
|
||||
}
|
||||
},
|
||||
controlStyle: {
|
||||
normal: {
|
||||
color: '#293c55',
|
||||
borderColor: '#293c55',
|
||||
borderWidth: 0.5
|
||||
},
|
||||
emphasis: {
|
||||
color: '#293c55',
|
||||
borderColor: '#293c55',
|
||||
borderWidth: 0.5
|
||||
}
|
||||
},
|
||||
checkpointStyle: {
|
||||
color: '#e43c59',
|
||||
borderColor: 'rgba(194,53,49, 0.5)'
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
color: '#293c55'
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
textStyle: {
|
||||
color: '#293c55'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
visualMap: {
|
||||
color: ['#bf444c', '#d88273', '#f6efa6']
|
||||
},
|
||||
dataZoom: {
|
||||
backgroundColor: 'rgba(47,69,84,0)',
|
||||
dataBackgroundColor: 'rgba(47,69,84,0.3)',
|
||||
fillerColor: 'rgba(167,183,204,0.4)',
|
||||
handleColor: '#a7b7cc',
|
||||
handleSize: '100%',
|
||||
textStyle: {
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
markPoint: {
|
||||
label: {
|
||||
color: '#f5f5f5'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
color: '#f5f5f5'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user