提交 d2e40baf authored 作者: junjie's avatar junjie

feat:增加默认颜色等

上级 92bd7041
<svg t="1634698675666" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2280" width="200" height="200"><path d="M437.333333 224C437.333333 183.466667 471.466667 149.333333 512 149.333333s74.666667 34.133333 74.666667 74.666667S552.533333 298.666667 512 298.666667s-74.666667-34.133333-74.666667-74.666667zM439.466667 512c0-40.533333 34.133333-74.666667 74.666666-74.666667s74.666667 34.133333 74.666667 74.666667-34.133333 74.666667-74.666667 74.666667-74.666667-34.133333-74.666666-74.666667zM437.333333 800c0-40.533333 34.133333-74.666667 74.666667-74.666667s74.666667 34.133333 74.666667 74.666667S552.533333 874.666667 512 874.666667s-74.666667-34.133333-74.666667-74.666667z" p-id="2281"></path></svg>
......@@ -853,3 +853,16 @@ export const BASE_MIX = {
}
]
}
export const COLOR_PANEL = [
'#ff4500',
'#ff8c00',
'#ffd700',
'#90ee90',
'#00ced1',
'#1e90ff',
'#c71585',
'#999999',
'#ffffff',
'#000000'
]
......@@ -145,8 +145,6 @@ export default {
this.myChart = baseAreaOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
} else if (chart.type === 'scatter') {
this.myChart = baseScatterOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
} else if (chart.type === 'chart-mix') {
this.myChart = baseMixOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
} else if (chart.type === 'radar') {
this.myChart = baseRadarOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
} else if (chart.type === 'gauge') {
......
......@@ -3,7 +3,7 @@
<el-col>
<el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini" :disabled="param && !hasDataPermission('manage',param.privileges)">
<el-form-item :label="$t('chart.color')" class="form-item">
<el-color-picker v-model="colorForm.color" class="color-picker-style" @change="changeBackgroundStyle" />
<el-color-picker v-model="colorForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeBackgroundStyle" />
</el-form-item>
<el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">
<el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />
......@@ -18,7 +18,7 @@
</template>
<script>
import { DEFAULT_BACKGROUND_COLOR } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_BACKGROUND_COLOR } from '../../chart/chart'
export default {
name: 'BackgroundColorSelector',
......@@ -34,7 +34,8 @@ export default {
},
data() {
return {
colorForm: JSON.parse(JSON.stringify(DEFAULT_BACKGROUND_COLOR))
colorForm: JSON.parse(JSON.stringify(DEFAULT_BACKGROUND_COLOR)),
predefineColors: COLOR_PANEL
}
},
watch: {
......
......@@ -28,7 +28,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" @change="changeLegendStyle" />
<el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeLegendStyle" />
</el-form-item>
<el-form-item :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">
......@@ -51,7 +51,7 @@
</template>
<script>
import { DEFAULT_LEGEND_STYLE } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_LEGEND_STYLE } from '../../chart/chart'
export default {
name: 'LegendSelector',
......@@ -77,7 +77,8 @@ export default {
{ name: this.$t('chart.line_symbol_triangle'), value: 'triangle' },
{ name: this.$t('chart.line_symbol_diamond'), value: 'diamond' }
],
isSetting: false
isSetting: false,
predefineColors: COLOR_PANEL
}
},
watch: {
......
......@@ -28,7 +28,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" @change="changeLegendStyle" />
<el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeLegendStyle" />
</el-form-item>
<el-form-item :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">
......@@ -51,7 +51,7 @@
</template>
<script>
import { DEFAULT_LEGEND_STYLE } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_LEGEND_STYLE } from '../../chart/chart'
export default {
name: 'LegendSelectorAntV',
......@@ -75,7 +75,8 @@ export default {
{ name: this.$t('chart.line_symbol_triangle'), value: 'triangle' },
{ name: this.$t('chart.line_symbol_diamond'), value: 'diamond' }
],
isSetting: false
isSetting: false,
predefineColors: COLOR_PANEL
}
},
watch: {
......
......@@ -6,7 +6,7 @@
<el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.color')" class="form-item">
<el-color-picker v-model="splitForm.name.color" class="color-picker-style" @change="changeSplitStyle" />
<el-color-picker v-model="splitForm.name.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
</el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
<el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle">
......@@ -17,13 +17,13 @@
<el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" @change="changeSplitStyle" />
<el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label')" class="form-item">
<el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="splitForm.axisLabel.color" class="color-picker-style" @change="changeSplitStyle" />
<el-color-picker v-model="splitForm.axisLabel.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
</el-form-item>
<el-form-item :label="$t('chart.label_fontsize')" class="form-item form-item-slider">
<el-select v-model="splitForm.axisLabel.fontSize" :placeholder="$t('chart.label_fontsize')" @change="changeSplitStyle">
......@@ -34,7 +34,7 @@
<el-checkbox v-model="splitForm.splitLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.split_color')" class="form-item">
<el-color-picker v-model="splitForm.splitLine.lineStyle.color" class="color-picker-style" @change="changeSplitStyle" />
<el-color-picker v-model="splitForm.splitLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
</el-form-item>
<el-form-item :label="$t('chart.shadow')" class="form-item">
<el-checkbox v-model="splitForm.splitArea.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
......@@ -45,7 +45,7 @@
</template>
<script>
import { DEFAULT_SPLIT } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_SPLIT } from '../../chart/chart'
export default {
name: 'SplitSelector',
......@@ -63,7 +63,8 @@ export default {
return {
splitForm: JSON.parse(JSON.stringify(DEFAULT_SPLIT)),
isSetting: false,
fontSize: []
fontSize: [],
predefineColors: COLOR_PANEL
}
},
watch: {
......
......@@ -6,7 +6,7 @@
<el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.color')" class="form-item">
<el-color-picker v-model="splitForm.name.color" class="color-picker-style" @change="changeSplitStyle" />
<el-color-picker v-model="splitForm.name.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
</el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
<el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle">
......@@ -17,7 +17,7 @@
<!-- <el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
<!-- </el-form-item>-->
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" @change="changeSplitStyle" />
<el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
</el-form-item>
<!-- <el-form-item :label="$t('chart.axis_label')" class="form-item">-->
<!-- <el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
......@@ -45,7 +45,7 @@
</template>
<script>
import { DEFAULT_SPLIT } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_SPLIT } from '../../chart/chart'
export default {
name: 'SplitSelectorAntV',
......@@ -63,7 +63,8 @@ export default {
return {
splitForm: JSON.parse(JSON.stringify(DEFAULT_SPLIT)),
isSetting: false,
fontSize: []
fontSize: [],
predefineColors: COLOR_PANEL
}
},
watch: {
......
......@@ -22,7 +22,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="titleForm.color" class="color-picker-style" @change="changeTitleStyle" />
<el-color-picker v-model="titleForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle" />
</el-form-item>
<el-form-item v-show="chart.type && chart.type !== 'liquid'" :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">
......@@ -49,7 +49,7 @@
</template>
<script>
import { DEFAULT_TITLE_STYLE } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
export default {
name: 'TitleSelector',
......@@ -67,7 +67,8 @@ export default {
return {
titleForm: JSON.parse(JSON.stringify(DEFAULT_TITLE_STYLE)),
fontSize: [],
isSetting: false
isSetting: false,
predefineColors: COLOR_PANEL
}
},
watch: {
......
......@@ -22,7 +22,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="titleForm.color" class="color-picker-style" @change="changeTitleStyle" />
<el-color-picker v-model="titleForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle" />
</el-form-item>
<el-form-item v-show="chart.type && chart.type !== 'liquid'" :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">
......@@ -42,7 +42,7 @@
</template>
<script>
import { DEFAULT_TITLE_STYLE } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
export default {
name: 'TitleSelectorAntV',
......@@ -60,7 +60,8 @@ export default {
return {
titleForm: JSON.parse(JSON.stringify(DEFAULT_TITLE_STYLE)),
fontSize: [],
isSetting: false
isSetting: false,
predefineColors: COLOR_PANEL
}
},
watch: {
......
......@@ -16,7 +16,7 @@
<el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" @change="changeXAxisStyle" />
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle">
......@@ -59,7 +59,7 @@
</el-form-item>
<span v-show="axisForm.splitLine.show">
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" @change="changeXAxisStyle" />
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle" />
......@@ -78,7 +78,7 @@
</el-form-item>
<span v-show="axisForm.axisLabel.show">
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" @change="changeXAxisStyle" />
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />
......@@ -100,7 +100,7 @@
</template>
<script>
import { DEFAULT_XAXIS_STYLE } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_XAXIS_STYLE } from '../../chart/chart'
export default {
name: 'XAxisSelector',
......@@ -118,7 +118,8 @@ export default {
return {
axisForm: JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE)),
isSetting: false,
fontSize: []
fontSize: [],
predefineColors: COLOR_PANEL
}
},
watch: {
......
......@@ -16,7 +16,7 @@
<el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" @change="changeXAxisStyle" />
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle">
......@@ -59,7 +59,7 @@
</el-form-item>
<span v-show="axisForm.splitLine.show">
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" @change="changeXAxisStyle" />
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle" />
......@@ -71,7 +71,7 @@
</el-form-item>
<span v-show="axisForm.axisLabel.show">
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" @change="changeXAxisStyle" />
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />
......@@ -89,7 +89,7 @@
</template>
<script>
import { DEFAULT_XAXIS_STYLE } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_XAXIS_STYLE } from '../../chart/chart'
export default {
name: 'XAxisSelectorAntV',
......@@ -107,7 +107,8 @@ export default {
return {
axisForm: JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE)),
isSetting: false,
fontSize: []
fontSize: [],
predefineColors: COLOR_PANEL
}
},
watch: {
......
......@@ -16,7 +16,7 @@
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
......@@ -59,7 +59,7 @@
</el-form-item>
<span v-show="axisForm.splitLine.show">
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
......@@ -78,7 +78,7 @@
</el-form-item>
<span v-show="axisForm.axisLabel.show">
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
......@@ -100,7 +100,7 @@
</template>
<script>
import { DEFAULT_YAXIS_EXT_STYLE } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_YAXIS_EXT_STYLE } from '../../chart/chart'
export default {
name: 'YAxisExtSelector',
......@@ -118,7 +118,8 @@ export default {
return {
axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE)),
isSetting: false,
fontSize: []
fontSize: [],
predefineColors: COLOR_PANEL
}
},
watch: {
......
......@@ -16,7 +16,7 @@
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
......@@ -59,7 +59,7 @@
</el-form-item>
<span v-show="axisForm.splitLine.show">
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
......@@ -71,7 +71,7 @@
</el-form-item>
<span v-show="axisForm.axisLabel.show">
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
......@@ -89,7 +89,7 @@
</template>
<script>
import { DEFAULT_YAXIS_EXT_STYLE } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_YAXIS_EXT_STYLE } from '../../chart/chart'
export default {
name: 'YAxisExtSelectorAntV',
......@@ -107,7 +107,8 @@ export default {
return {
axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE)),
isSetting: false,
fontSize: []
fontSize: [],
predefineColors: COLOR_PANEL
}
},
watch: {
......
......@@ -16,7 +16,7 @@
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
......@@ -59,7 +59,7 @@
</el-form-item>
<span v-show="axisForm.splitLine.show">
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
......@@ -78,7 +78,7 @@
</el-form-item>
<span v-show="axisForm.axisLabel.show">
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
......@@ -100,7 +100,7 @@
</template>
<script>
import { DEFAULT_YAXIS_STYLE } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_YAXIS_STYLE } from '../../chart/chart'
export default {
name: 'YAxisSelector',
......@@ -118,7 +118,8 @@ export default {
return {
axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE)),
isSetting: false,
fontSize: []
fontSize: [],
predefineColors: COLOR_PANEL
}
},
watch: {
......
......@@ -16,7 +16,7 @@
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
......@@ -70,7 +70,7 @@
</el-form-item>
<span v-show="axisForm.splitLine.show">
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
......@@ -82,7 +82,7 @@
</el-form-item>
<span v-show="axisForm.axisLabel.show">
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
......@@ -100,7 +100,7 @@
</template>
<script>
import { DEFAULT_YAXIS_STYLE } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_YAXIS_STYLE } from '../../chart/chart'
export default {
name: 'YAxisSelectorAntV',
......@@ -118,7 +118,8 @@ export default {
return {
axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE)),
isSetting: false,
fontSize: []
fontSize: [],
predefineColors: COLOR_PANEL
}
},
watch: {
......
......@@ -36,7 +36,7 @@
<div style="display: flex;align-items: center;margin-top: 10px;">
<span class="color-label" />
<span>
<el-color-picker v-model="customColor" class="color-picker-style" @change="switchColorCase" />
<el-color-picker v-model="customColor" class="color-picker-style" :predefine="predefineColors" @change="switchColorCase" />
</span>
</div>
</div>
......@@ -47,21 +47,21 @@
</el-form-item>
<el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.quota_color')" class="form-item">
<el-color-picker v-model="colorForm.quotaColor" class="color-picker-style" @change="changeColorCase" />
<el-color-picker v-model="colorForm.quotaColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
</el-form-item>
<el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.dimension_color')" class="form-item">
<el-color-picker v-model="colorForm.dimensionColor" class="color-picker-style" @change="changeColorCase" />
<el-color-picker v-model="colorForm.dimensionColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
</el-form-item>
</div>
<div v-if="sourceType==='view' || sourceType==='panelTable'">
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_header_bg')" class="form-item">
<el-color-picker v-model="colorForm.tableHeaderBgColor" class="color-picker-style" @change="changeColorCase" />
<el-color-picker v-model="colorForm.tableHeaderBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
</el-form-item>
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_bg')" class="form-item">
<el-color-picker v-model="colorForm.tableItemBgColor" class="color-picker-style" @change="changeColorCase" />
<el-color-picker v-model="colorForm.tableItemBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
</el-form-item>
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_font_color')" class="form-item">
<el-color-picker v-model="colorForm.tableFontColor" class="color-picker-style" @change="changeColorCase" />
<el-color-picker v-model="colorForm.tableFontColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
</el-form-item>
<!-- 暂时不支持该功能-->
<!-- <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.stripe')" class="form-item">-->
......@@ -78,7 +78,7 @@
</template>
<script>
import { DEFAULT_COLOR_CASE } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_COLOR_CASE } from '../../chart/chart'
export default {
name: 'ColorSelector',
......@@ -183,7 +183,8 @@ export default {
],
colorForm: JSON.parse(JSON.stringify(DEFAULT_COLOR_CASE)),
customColor: null,
colorIndex: 0
colorIndex: 0,
predefineColors: COLOR_PANEL
}
},
watch: {
......
......@@ -15,7 +15,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="labelForm.color" class="color-picker-style" @change="changeLabelAttr" />
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
</el-form-item>
<el-form-item v-show="chart.type && chart.type !== 'liquid'" :label="$t('chart.label_position')" class="form-item">
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
......@@ -49,7 +49,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="labelForm.color" class="color-picker-style" @change="changeLabelAttr" />
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
</el-form-item>
<el-form-item class="form-item">
<span slot="label">
......@@ -65,7 +65,7 @@
</template>
<script>
import { DEFAULT_LABEL } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_LABEL } from '../../chart/chart'
export default {
name: 'LabelSelector',
......@@ -92,7 +92,8 @@ export default {
{ name: this.$t('chart.text_pos_bottom'), value: 'bottom' },
{ name: this.$t('chart.text_pos_left'), value: 'left' },
{ name: this.$t('chart.text_pos_right'), value: 'right' }
]
],
predefineColors: COLOR_PANEL
}
},
watch: {
......
......@@ -15,7 +15,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="labelForm.color" class="color-picker-style" @change="changeLabelAttr" />
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
</el-form-item>
<el-form-item v-show="chart.type && chart.type !== 'liquid' && chart.type !== 'pie-rose'" :label="$t('chart.label_position')" class="form-item">
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
......@@ -35,7 +35,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="labelForm.color" class="color-picker-style" @change="changeLabelAttr" />
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
</el-form-item>
</el-form>
</el-col>
......@@ -43,7 +43,7 @@
</template>
<script>
import { DEFAULT_LABEL } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_LABEL } from '../../chart/chart'
export default {
name: 'LabelSelectorAntV',
......@@ -70,7 +70,8 @@ export default {
{ name: this.$t('chart.text_pos_bottom'), value: 'bottom' },
{ name: this.$t('chart.text_pos_left'), value: 'left' },
{ name: this.$t('chart.text_pos_right'), value: 'right' }
]
],
predefineColors: COLOR_PANEL
}
},
watch: {
......
......@@ -18,7 +18,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" @change="changeTooltipAttr" />
<el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr" />
</el-form-item>
<el-form-item class="form-item">
<span slot="label">
......@@ -53,7 +53,7 @@
</template>
<script>
import { DEFAULT_TOOLTIP } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_TOOLTIP } from '../../chart/chart'
export default {
name: 'TooltipSelector',
......@@ -71,7 +71,8 @@ export default {
return {
tooltipForm: JSON.parse(JSON.stringify(DEFAULT_TOOLTIP)),
fontSize: [],
isSetting: false
isSetting: false,
predefineColors: COLOR_PANEL
}
},
watch: {
......
......@@ -12,7 +12,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" @change="changeTooltipAttr" />
<el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr" />
</el-form-item>
</div>
</el-form>
......@@ -21,7 +21,7 @@
</template>
<script>
import { DEFAULT_TOOLTIP } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_TOOLTIP } from '../../chart/chart'
export default {
name: 'TooltipSelectorAntV',
......@@ -39,7 +39,8 @@ export default {
return {
tooltipForm: JSON.parse(JSON.stringify(DEFAULT_TOOLTIP)),
fontSize: [],
isSetting: false
isSetting: false,
predefineColors: COLOR_PANEL
}
},
watch: {
......
......@@ -880,11 +880,14 @@ export default {
// if (this.tDs && this.tDs.type === 'group') {
// return
// }
this.dsForm.sceneId = this.tDs.id
const oldSceneId = this.dsForm.sceneId
const newSceneId = this.tDs.id
this.dsForm.sceneId = newSceneId
post('/chart/view/save', this.dsForm).then(res => {
this.closeMoveDs()
// this.tableTree()
this.refreshNodeBy(this.dsForm.sceneId)
this.refreshNodeBy(oldSceneId)
this.refreshNodeBy(newSceneId)
})
},
targetDs(val) {
......
......@@ -3,6 +3,7 @@
<!-- <span v-show="false">{{ vId }}</span>-->
<!-- <el-row style="height: 40px;background-color: white" class="padding-lr"> -->
<el-row style="height: 40px;" class="padding-lr">
<span class="title-text" style="line-height: 40px;">{{ view.name }}</span>
<el-popover
placement="right-start"
width="400"
......@@ -11,7 +12,7 @@
@hide="hideTab"
>
<dataset-chart-detail type="chart" :data="view" :tab-status="tabStatus" />
<span slot="reference" class="title-text" style="line-height: 40px;cursor: pointer;">{{ view.name }}</span>
<svg-icon slot="reference" icon-class="more_v" style="cursor: pointer;" />
</el-popover>
<span style="float: right;line-height: 40px;">
<!-- <el-button v-if="hasDataPermission('manage',param.privileges)" size="mini" @click="changeDs">-->
......@@ -927,6 +928,7 @@ export default {
view.extStack = JSON.stringify(view.extStack)
view.drillFields = JSON.stringify(view.drillFields)
view.extBubble = JSON.stringify(view.extBubble)
delete view.data
post('/chart/view/save', view).then(response => {
// this.get(response.data.id);
// this.getData(response.data.id)
......
......@@ -56,16 +56,16 @@
</el-radio>
</div>
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
<el-radio value="chart-mix" label="chart-mix">
<span :title="$t('chart.chart_mix')">
<svg-icon icon-class="chart-mix" class="chart-icon" />
</span>
</el-radio>
<el-radio value="map" label="map">
<span :title="$t('chart.chart_map')">
<svg-icon icon-class="map" class="chart-icon" />
</span>
</el-radio>
<!-- <el-radio value="chart-mix" label="chart-mix">-->
<!-- <span :title="$t('chart.chart_mix')">-->
<!-- <svg-icon icon-class="chart-mix" class="chart-icon" />-->
<!-- </span>-->
<!-- </el-radio>-->
<!-- <el-radio value="map" label="map">-->
<!-- <span :title="$t('chart.chart_map')">-->
<!-- <svg-icon icon-class="map" class="chart-icon" />-->
<!-- </span>-->
<!-- </el-radio>-->
<el-radio value="radar" label="radar">
<span :title="$t('chart.chart_radar')">
<svg-icon icon-class="radar" class="chart-icon" />
......@@ -81,8 +81,6 @@
<svg-icon icon-class="pie" class="chart-icon" />
</span>
</el-radio>
</div>
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
<el-radio value="pie-rose" label="pie-rose">
<span :title="$t('chart.chart_pie_rose')">
<svg-icon icon-class="pie-rose" class="chart-icon" />
......@@ -93,6 +91,8 @@
<svg-icon icon-class="funnel" class="chart-icon" />
</span>
</el-radio>
</div>
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
<el-radio value="treemap" label="treemap">
<span :title="$t('chart.chart_treemap')">
<svg-icon icon-class="treemap" class="chart-icon" />
......@@ -104,6 +104,8 @@
</span>
</el-radio>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
</div>
</div>
<div v-else-if="chart.render && chart.render === 'echarts'">
......
......@@ -2,6 +2,9 @@
<el-row style="height: 100%;overflow-y: hidden;width: 100%;">
<!-- <span v-show="false">{{ tableRefresh }}</span>-->
<el-row style="height: 26px;">
<span class="title-text" style="line-height: 26px;">
{{ table.name }}
</span>
<el-popover
placement="right-start"
width="400"
......@@ -10,9 +13,7 @@
@hide="hideTab"
>
<dataset-chart-detail type="dataset" :data="table" :tab-status="tabStatus" />
<span slot="reference" class="title-text" style="line-height: 26px;cursor: pointer;">
{{ table.name }}
</span>
<svg-icon slot="reference" icon-class="more_v" style="cursor: pointer;" />
</el-popover>
<el-row v-if="hasDataPermission('manage',param.privileges)" style="float: right">
<el-dropdown v-if="table.type ==='excel'" style="margin-right: 10px;" size="small" trigger="click" @command="clickEditExcel">
......
......@@ -770,11 +770,14 @@ export default {
}
},
saveMoveDs() {
this.dsForm.sceneId = this.tDs.id
const oldSceneId = this.dsForm.sceneId
const newSceneId = this.tDs.id
this.dsForm.sceneId = newSceneId
this.dsForm.isRename = true
alter(this.dsForm).then(res => {
this.closeMoveDs()
this.refreshNodeBy(this.dsForm.sceneId)
this.refreshNodeBy(oldSceneId)
this.refreshNodeBy(newSceneId)
})
},
targetDs(val) {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论