fix: add seperate config for different axes
diff --git a/src/App.vue b/src/App.vue
index 54ce8f5..5554096 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,6 +23,12 @@
}
});
+window.onresize = () => {
+ if (preview.value) {
+ preview.value.resize();
+ }
+};
+
function onConfigChange() {
renderPreview(config.value.getTheme());
}
@@ -34,7 +40,7 @@
<style scoped lang="scss">
#echarts-spa-app {
- font-family: Avenir, Helvetica, Arial, sans-serif;
+ font-family: 'Open Sans', 'PingFang SC', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
diff --git a/src/components/EConfig.vue b/src/components/EConfig.vue
index 2466d98..4ef0da5 100644
--- a/src/components/EConfig.vue
+++ b/src/components/EConfig.vue
@@ -58,7 +58,7 @@
</el-input>
</el-col>
</el-row>
- <h5>{{ $t('seriesNumber') }}</h5>
+ <h5>{{ $t('colorPalette') }}</h5>
<div style="text-align: center">
<div
class="theme-group"
@@ -91,7 +91,12 @@
:key="item.name"
:name="$t(item.name)"
>
- <el-col :span="columnSize.left">
+ <div v-if="item.type === 'head'" class="item-header">
+ <h5>
+ {{ $t(item.name) }}
+ </h5>
+ </div>
+ <el-col :span="columnSize.left" v-if="item.type !== 'head'">
<el-checkbox
v-if="item.showOptionPath"
v-model="item.isShow"
@@ -101,7 +106,7 @@
</el-checkbox>
<h5 v-else>{{ $t(item.name) }}</h5>
</el-col>
- <el-col :span="columnSize.right">
+ <el-col :span="columnSize.right" v-if="item.type !== 'head'">
<el-checkbox
v-if="item.type === 'boolean'"
v-model="item.value"
@@ -139,13 +144,19 @@
</div>
</div>
<div class="color-operations">
- <el-button @click="addColor(item)" size="small">
+ <el-button
+ @click="addColor(item)"
+ size="small"
+ class="icon-btn"
+ >
<el-icon><plus /></el-icon>
- {{ $t('increase') }}
</el-button>
- <el-button @click="removeColor(item)" size="small">
+ <el-button
+ @click="removeColor(item)"
+ size="small"
+ class="icon-btn"
+ >
<el-icon><minus /></el-icon>
- {{ $t('decrease') }}
</el-button>
</div>
</div>
@@ -271,6 +282,9 @@
if (configs.value) {
for (let group of configs.value) {
for (let item of group.items) {
+ if (item.type === 'head') {
+ continue;
+ }
let isAlias = false;
for (let alias of optionPathAlias) {
const optionPath = item.optionPath;
@@ -446,11 +460,24 @@
h5 {
margin: 8px 0;
font-size: 13px;
+ font-weight: normal;
color: #666;
}
.el-checkbox {
margin: 5px 0;
+ --el-checkbox-font-size: 13px;
+}
+
+.icon-btn {
+ padding: 5px 2px 5px 5px;
+}
+
+.item-header {
+ width: 100%;
+ border-top: 1px dashed #ddd;
+ padding-top: 5px;
+ margin-top: 10px;
}
.color-picker {
@@ -478,8 +505,9 @@
.theme-group {
display: inline-block;
margin: 5px;
+ height: 19px;
border-radius: 6px;
- padding: 8px 4px 0 6px;
+ padding: 5px;
border: 1px solid #eee;
cursor: pointer;
}
@@ -491,4 +519,8 @@
border-radius: 4px;
margin-right: 4px;
}
+
+.theme-group-item:nth-child(6) {
+ margin-right: 0;
+}
</style>
diff --git a/src/components/EPreview.vue b/src/components/EPreview.vue
index 2f585b8..915e76b 100644
--- a/src/components/EPreview.vue
+++ b/src/components/EPreview.vue
@@ -19,7 +19,8 @@
import { Theme } from '../data/themeConfigs';
defineExpose({
- render
+ render,
+ resize
});
let options = getPreviewOptions(4);
@@ -39,6 +40,14 @@
}
}
}
+
+function resize() {
+ for (let i = 0; i < charts.length; ++i) {
+ if (charts[i]) {
+ charts[i].resize();
+ }
+ }
+}
</script>
<style scoped>
diff --git a/src/data/themeConfigs.ts b/src/data/themeConfigs.ts
index 8d98951..45de968 100644
--- a/src/data/themeConfigs.ts
+++ b/src/data/themeConfigs.ts
@@ -1,9 +1,9 @@
export type ThemeConfigItem = {
name: string;
- type: 'string' | 'number' | 'boolean' | 'select' | 'color';
- value: string | number | boolean | string[];
+ type: 'string' | 'number' | 'boolean' | 'select' | 'color' | 'head';
+ value?: string | number | boolean | string[];
selectOptions?: { name: string; value: string }[];
- optionPath: string;
+ optionPath?: string;
multipleColor?: boolean;
isShow?: boolean;
showOptionPath?: number;
@@ -71,10 +71,14 @@
groupName: 'axis',
items: [
{
+ name: 'axisCategoryHead',
+ type: 'head'
+ },
+ {
name: 'axisLine',
type: 'color',
value: '#6e7079',
- optionPath: '{axis}.axisLine.lineStyle.color',
+ optionPath: 'categoryAxis.axisLine.lineStyle.color',
isShow: true,
showOptionPath: -3
},
@@ -82,7 +86,7 @@
name: 'axisTick',
type: 'color',
value: '#6e7079',
- optionPath: '{axis}.axisTick.lineStyle.color',
+ optionPath: 'categoryAxis.axisTick.lineStyle.color',
isShow: true,
showOptionPath: -3
},
@@ -91,7 +95,53 @@
type: 'color',
multipleColor: true,
value: ['#e0e6f1'],
- optionPath: '{axis}.splitLine.lineStyle.color',
+ optionPath: 'categoryAxis.splitLine.lineStyle.color',
+ isShow: false,
+ showOptionPath: -3
+ },
+ {
+ name: 'axisArea',
+ type: 'color',
+ multipleColor: true,
+ value: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'],
+ optionPath: 'categoryAxis.splitArea.areaStyle.color',
+ isShow: false,
+ showOptionPath: -3
+ },
+ {
+ name: 'axisLabel',
+ type: 'color',
+ value: '#6e7079',
+ optionPath: 'categoryAxis.axisLabel.color',
+ isShow: true,
+ showOptionPath: -2
+ },
+ {
+ name: 'axisValueHead',
+ type: 'head'
+ },
+ {
+ name: 'axisLine',
+ type: 'color',
+ value: '#6e7079',
+ optionPath: 'valueAxis.axisLine.lineStyle.color',
+ isShow: false,
+ showOptionPath: -3
+ },
+ {
+ name: 'axisTick',
+ type: 'color',
+ value: '#6e7079',
+ optionPath: 'valueAxis.axisTick.lineStyle.color',
+ isShow: false,
+ showOptionPath: -3
+ },
+ {
+ name: 'axisSplitLine',
+ type: 'color',
+ multipleColor: true,
+ value: ['#e0e6f1'],
+ optionPath: 'valueAxis.splitLine.lineStyle.color',
isShow: true,
showOptionPath: -3
},
@@ -100,7 +150,7 @@
type: 'color',
multipleColor: true,
value: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'],
- optionPath: '{axis}.splitArea.areaStyle.color',
+ optionPath: 'valueAxis.splitArea.areaStyle.color',
isShow: false,
showOptionPath: -3
},
@@ -108,7 +158,99 @@
name: 'axisLabel',
type: 'color',
value: '#6e7079',
- optionPath: '{axis}.axisLabel.color',
+ optionPath: 'valueAxis.axisLabel.color',
+ isShow: true,
+ showOptionPath: -2
+ },
+ {
+ name: 'axisLogHead',
+ type: 'head'
+ },
+ {
+ name: 'axisLine',
+ type: 'color',
+ value: '#6e7079',
+ optionPath: 'logAxis.axisLine.lineStyle.color',
+ isShow: false,
+ showOptionPath: -3
+ },
+ {
+ name: 'axisTick',
+ type: 'color',
+ value: '#6e7079',
+ optionPath: 'logAxis.axisTick.lineStyle.color',
+ isShow: false,
+ showOptionPath: -3
+ },
+ {
+ name: 'axisSplitLine',
+ type: 'color',
+ multipleColor: true,
+ value: ['#e0e6f1'],
+ optionPath: 'logAxis.splitLine.lineStyle.color',
+ isShow: true,
+ showOptionPath: -3
+ },
+ {
+ name: 'axisArea',
+ type: 'color',
+ multipleColor: true,
+ value: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'],
+ optionPath: 'logAxis.splitArea.areaStyle.color',
+ isShow: false,
+ showOptionPath: -3
+ },
+ {
+ name: 'axisLabel',
+ type: 'color',
+ value: '#6e7079',
+ optionPath: 'logAxis.axisLabel.color',
+ isShow: true,
+ showOptionPath: -2
+ },
+ {
+ name: 'axisTimeHead',
+ type: 'head'
+ },
+ {
+ name: 'axisLine',
+ type: 'color',
+ value: '#6e7079',
+ optionPath: 'timeAxis.axisLine.lineStyle.color',
+ isShow: true,
+ showOptionPath: -3
+ },
+ {
+ name: 'axisTick',
+ type: 'color',
+ value: '#6e7079',
+ optionPath: 'timeAxis.axisTick.lineStyle.color',
+ isShow: true,
+ showOptionPath: -3
+ },
+ {
+ name: 'axisSplitLine',
+ type: 'color',
+ multipleColor: true,
+ value: ['#e0e6f1'],
+ optionPath: 'timeAxis.splitLine.lineStyle.color',
+ isShow: false,
+ showOptionPath: -3
+ },
+ {
+ name: 'axisArea',
+ type: 'color',
+ multipleColor: true,
+ value: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'],
+ optionPath: 'timeAxis.splitArea.areaStyle.color',
+ isShow: false,
+ showOptionPath: -3
+ },
+ {
+ name: 'axisLabel',
+ type: 'color',
+ value: '#6e7079',
+ optionPath: 'timeAxis.axisLabel.color',
isShow: true,
showOptionPath: -2
}
@@ -401,9 +543,10 @@
}
];
-export function getMergedConfigs(
- version1Config: object
-): { configs: ThemeConfig[]; name: string } {
+export function getMergedConfigs(version1Config: object): {
+ configs: ThemeConfig[];
+ name: string;
+} {
const mergedConfigs: ThemeConfig[] = [];
const nameMaps = {
backgroundColor: 'backgroundColor',
@@ -444,24 +587,7 @@
for (let j = 0; j < themeConfigs[i].items.length; j++) {
const item = themeConfigs[i].items[j];
const newItem = Object.assign({}, item);
- if (item.optionPath.startsWith('{axis}')) {
- const axisMap = {
- '{axis}.axisLine.lineStyle.color': 'axisLineColor',
- '{axis}.axisTick.lineStyle.color': 'axisTickColor',
- '{axis}.splitLine.lineStyle.color': 'splitLineColor',
- '{axis}.splitArea.areaStyle.color': 'splitAreaColor',
- '{axis}.axisLabel.color': 'axisLabelColor'
- };
- if (
- axisMap.hasOwnProperty(item.optionPath) &&
- // @ts-ignore
- version1Config.theme.axes.length > 0
- ) {
- newItem.value =
- // @ts-ignore
- version1Config.theme.axes[0][axisMap[item.optionPath]];
- }
- } else if (nameMaps.hasOwnProperty(item.optionPath)) {
+ if (item.optionPath && nameMaps.hasOwnProperty(item.optionPath)) {
// @ts-ignore
newItem.value = version1Config.theme[nameMaps[item.optionPath]];
}
diff --git a/src/i18n/en-US.ts b/src/i18n/en-US.ts
index b2fff6b..a623476 100644
--- a/src/i18n/en-US.ts
+++ b/src/i18n/en-US.ts
@@ -6,6 +6,7 @@
exportTheme: 'Export',
themeName: 'Theme Name',
seriesNumber: 'Series Number',
+ colorPalette: 'Color Palette',
builtinDesigns: 'Built-in Designs',
increase: 'Add',
decrease: 'Remove',
@@ -16,6 +17,10 @@
themeColors: 'Theme Colors',
visualMap: 'Visual Map',
axis: 'Axis',
+ axisCategoryHead: 'Category',
+ axisValueHead: 'Value',
+ axisLogHead: 'Log',
+ axisTimeHead: 'Time',
axisLine: 'Axis Line',
axisTick: 'Axis Tick',
axisSplitLine: 'Axis Split Line',
@@ -45,12 +50,12 @@
timelineControlBorderColor: 'Control Border Color',
timelineControlBorderWidth: 'Control Border Width',
timelineLabelColor: 'Text color',
- lineCharts: 'line chart',
- lineSmooth: 'smooth curve',
- lineWidth: 'line width',
- borderColor: 'stroke color',
+ lineCharts: 'Line',
+ lineSmooth: 'Smooth curve',
+ lineWidth: 'Line width',
+ borderColor: 'Stroke color',
symbolSize: 'Graph size',
- symbol: 'shape',
+ symbol: 'Shape',
circle: 'circle',
emptyCircle: 'Empty Circle',
rect: 'rectangle',
diff --git a/src/i18n/zh-CN.ts b/src/i18n/zh-CN.ts
index 74d5293..c419c67 100644
--- a/src/i18n/zh-CN.ts
+++ b/src/i18n/zh-CN.ts
@@ -10,6 +10,7 @@
exportTheme: '导出主题',
themeName: '主题名称',
seriesNumber: '系列数量',
+ colorPalette: '主题配色',
builtinDesigns: '内置设计',
increase: '增加',
decrease: '减少',
@@ -20,6 +21,10 @@
themeColors: '主题颜色',
visualMap: '视觉映射',
axis: '坐标轴',
+ axisCategoryHead: '类目轴',
+ axisValueHead: '数值轴',
+ axisLogHead: '对数轴',
+ axisTimeHead: '时间轴',
axisLine: '轴线颜色',
axisTick: '刻度线颜色',
axisSplitLine: '网格颜色',
