Skip to content

D
dataease
提交 df759a6a authored 作者: junjun's avatar junjun
浏览文件
操作

feat: 自定义颜色

上级 c657f56c
隐藏空白字符变更
内嵌 并排
正在显示 包含 136 行增加 和 13 行删除
frontend/src/views/chart/chart/util.js
浏览文件 @ df759a6a
...@@ -228,6 +228,7 @@ export const TYPE_CONFIGS = [ ...@@ -228,6 +228,7 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'custom',
'alpha' 'alpha'
], ],
'size-selector-ant-v': [ 'size-selector-ant-v': [
...@@ -265,6 +266,7 @@ export const TYPE_CONFIGS = [ ...@@ -265,6 +266,7 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'custom',
'alpha' 'alpha'
], ],
'size-selector-ant-v': [ 'size-selector-ant-v': [
...@@ -307,6 +309,8 @@ export const TYPE_CONFIGS = [ ...@@ -307,6 +309,8 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'colorPanel',
'customColor',
'alpha' 'alpha'
], ],
'size-selector-ant-v': [ 'size-selector-ant-v': [
...@@ -378,6 +382,8 @@ export const TYPE_CONFIGS = [ ...@@ -378,6 +382,8 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'colorPanel',
'customColor',
'alpha' 'alpha'
], ],
'size-selector-ant-v': [ 'size-selector-ant-v': [
...@@ -450,6 +456,8 @@ export const TYPE_CONFIGS = [ ...@@ -450,6 +456,8 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'colorPanel',
'customColor',
'alpha' 'alpha'
], ],
'size-selector-ant-v': [ 'size-selector-ant-v': [
...@@ -520,6 +528,8 @@ export const TYPE_CONFIGS = [ ...@@ -520,6 +528,8 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'colorPanel',
'customColor',
'alpha' 'alpha'
], ],
'size-selector-ant-v': [ 'size-selector-ant-v': [
...@@ -588,6 +598,7 @@ export const TYPE_CONFIGS = [ ...@@ -588,6 +598,7 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'custom',
'alpha' 'alpha'
], ],
'label-selector-ant-v': [ 'label-selector-ant-v': [
...@@ -647,6 +658,8 @@ export const TYPE_CONFIGS = [ ...@@ -647,6 +658,8 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'colorPanel',
'customColor',
'alpha' 'alpha'
], ],
'size-selector-ant-v': [ 'size-selector-ant-v': [
...@@ -718,6 +731,8 @@ export const TYPE_CONFIGS = [ ...@@ -718,6 +731,8 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'colorPanel',
'customColor',
'alpha' 'alpha'
], ],
'size-selector-ant-v': [ 'size-selector-ant-v': [
...@@ -788,6 +803,8 @@ export const TYPE_CONFIGS = [ ...@@ -788,6 +803,8 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'colorPanel',
'customColor',
'alpha' 'alpha'
], ],
'size-selector-ant-v': [ 'size-selector-ant-v': [
...@@ -838,6 +855,8 @@ export const TYPE_CONFIGS = [ ...@@ -838,6 +855,8 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'colorPanel',
'customColor',
'alpha' 'alpha'
], ],
'size-selector-ant-v': [ 'size-selector-ant-v': [
...@@ -888,6 +907,8 @@ export const TYPE_CONFIGS = [ ...@@ -888,6 +907,8 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'colorPanel',
'customColor',
'alpha' 'alpha'
], ],
'size-selector-ant-v': [ 'size-selector-ant-v': [
...@@ -937,6 +958,7 @@ export const TYPE_CONFIGS = [ ...@@ -937,6 +958,7 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'custom',
'alpha' 'alpha'
], ],
'label-selector-ant-v': [ 'label-selector-ant-v': [
...@@ -1015,6 +1037,8 @@ export const TYPE_CONFIGS = [ ...@@ -1015,6 +1037,8 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'colorPanel',
'customColor',
'alpha' 'alpha'
], ],
'size-selector-ant-v': [ 'size-selector-ant-v': [
...@@ -1081,6 +1105,8 @@ export const TYPE_CONFIGS = [ ...@@ -1081,6 +1105,8 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'colorPanel',
'customColor',
'alpha' 'alpha'
], ],
'label-selector-ant-v': [ 'label-selector-ant-v': [
...@@ -1269,6 +1295,7 @@ export const TYPE_CONFIGS = [ ...@@ -1269,6 +1295,7 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'custom',
'alpha' 'alpha'
], ],
'size-selector': [ 'size-selector': [
...@@ -1317,6 +1344,7 @@ export const TYPE_CONFIGS = [ ...@@ -1317,6 +1344,7 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'custom',
'alpha' 'alpha'
], ],
'size-selector': [ 'size-selector': [
...@@ -1390,6 +1418,7 @@ export const TYPE_CONFIGS = [ ...@@ -1390,6 +1418,7 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'custom',
'alpha' 'alpha'
], ],
'size-selector': [ 'size-selector': [
...@@ -1464,6 +1493,7 @@ export const TYPE_CONFIGS = [ ...@@ -1464,6 +1493,7 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'custom',
'alpha' 'alpha'
], ],
'size-selector': [ 'size-selector': [
...@@ -1552,6 +1582,7 @@ export const TYPE_CONFIGS = [ ...@@ -1552,6 +1582,7 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'custom',
'alpha' 'alpha'
], ],
'size-selector': [ 'size-selector': [
...@@ -1625,6 +1656,7 @@ export const TYPE_CONFIGS = [ ...@@ -1625,6 +1656,7 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'custom',
'alpha' 'alpha'
], ],
'size-selector': [ 'size-selector': [
...@@ -1698,6 +1730,7 @@ export const TYPE_CONFIGS = [ ...@@ -1698,6 +1730,7 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'custom',
'alpha' 'alpha'
], ],
'size-selector': [ 'size-selector': [
...@@ -1772,6 +1805,7 @@ export const TYPE_CONFIGS = [ ...@@ -1772,6 +1805,7 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'custom',
'alpha' 'alpha'
], ],
'size-selector': [ 'size-selector': [
...@@ -1846,6 +1880,7 @@ export const TYPE_CONFIGS = [ ...@@ -1846,6 +1880,7 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'custom',
'alpha' 'alpha'
], ],
'size-selector': [ 'size-selector': [
...@@ -1903,6 +1938,7 @@ export const TYPE_CONFIGS = [ ...@@ -1903,6 +1938,7 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'custom',
'alpha' 'alpha'
], ],
'size-selector': [ 'size-selector': [
...@@ -1962,6 +1998,7 @@ export const TYPE_CONFIGS = [ ...@@ -1962,6 +1998,7 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'custom',
'alpha' 'alpha'
], ],
'size-selector': [ 'size-selector': [
...@@ -2024,6 +2061,7 @@ export const TYPE_CONFIGS = [ ...@@ -2024,6 +2061,7 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'custom',
'alpha' 'alpha'
], ],
'size-selector': [ 'size-selector': [
...@@ -2074,6 +2112,7 @@ export const TYPE_CONFIGS = [ ...@@ -2074,6 +2112,7 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'custom',
'alpha' 'alpha'
], ],
'size-selector': [ 'size-selector': [
...@@ -2144,6 +2183,7 @@ export const TYPE_CONFIGS = [ ...@@ -2144,6 +2183,7 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'custom',
'alpha' 'alpha'
], ],
'size-selector': [ 'size-selector': [
...@@ -2199,6 +2239,7 @@ export const TYPE_CONFIGS = [ ...@@ -2199,6 +2239,7 @@ export const TYPE_CONFIGS = [
propertyInner: { propertyInner: {
'color-selector': [ 'color-selector': [
'value', 'value',
'custom',
'alpha' 'alpha'
], ],
'size-selector': [ 'size-selector': [
......
frontend/src/views/chart/components/shape-attr/ColorSelector.vue
浏览文件 @ df759a6a
...@@ -3,14 +3,14 @@ ...@@ -3,14 +3,14 @@
<el-col> <el-col>
<el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini"> <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
<div> <div>
<el-form-item v-show="showProperty('value')" :label="$t('chart.color_case')" class="form-item"> <el-form-item :label="$t('chart.color_case')" class="form-item">
<el-popover <el-popover
placement="bottom" placement="bottom"
width="400" width="400"
trigger="click" trigger="click"
> >
<div style="padding: 6px 10px;"> <div style="padding: 6px 10px;">
<div> <div v-show="showProperty('value')">
<span class="color-label">{{ $t('chart.system_case') }}</span> <span class="color-label">{{ $t('chart.system_case') }}</span>
<el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorOption('value')"> <el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorOption('value')">
<el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;"> <el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
...@@ -22,23 +22,58 @@ ...@@ -22,23 +22,58 @@
</el-select> </el-select>
<el-button size="mini" type="text" style="margin-left: 2px;" @click="resetCustomColor">{{ $t('commons.reset') }}</el-button> <el-button size="mini" type="text" style="margin-left: 2px;" @click="resetCustomColor">{{ $t('commons.reset') }}</el-button>
</div> </div>
<div style="display: flex;align-items: center;margin-top: 10px;"> <!--自定义配色方案-->
<span class="color-label">{{ $t('chart.custom_case') }}</span> <div
<span> v-show="showProperty('custom')"
<el-radio-group v-model="customColor" class="color-type"> >
<el-radio v-for="(c,index) in colorForm.colors" :key="index" :label="c" style="padding: 2px;" @change="switchColor(index)"> <div style="display: flex;align-items: center;margin-top: 10px;">
<span :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" /> <span class="color-label">{{ $t('chart.custom_case') }}</span>
</el-radio> <span>
</el-radio-group> <el-radio-group v-model="customColor" class="color-type">
</span> <el-radio v-for="(c,index) in colorForm.colors" :key="index" :label="c" style="padding: 2px;" @change="switchColor(index)">
<span :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
</el-radio>
</el-radio-group>
</span>
</div>
<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" :predefine="predefineColors" @change="switchColorCase" />
</span>
</div>
</div> </div>
<div style="display: flex;align-items: center;margin-top: 10px;"> <!--自定义系列或维度枚举值颜色-->
<div v-show="showProperty('colorPanel')" style="display: flex;align-items: center;margin-top: 10px;">
<span class="color-label" /> <span class="color-label" />
<span> <span>
<el-color-picker v-model="customColor" class="color-picker-style" :predefine="predefineColors" @change="switchColorCase" /> <span v-for="(c,index) in colorForm.colors" :key="index" style="padding: 2px;">
<span :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
</span>
</span> </span>
</div> </div>
</div> </div>
<div
v-if="!batchOptStatus"
v-show="showProperty('customColor')"
class="custom-color-style"
>
<div
v-for="(item,index) in colorForm.seriesColors"
:key="index"
style="display: flex;align-items: center;margin: 2px 0;"
>
<span class="span-label" :title="item.name">{{ item.name }}</span>
<el-color-picker
v-model="item.color"
class="color-picker-style"
:predefine="predefineColors"
@change="switchCustomColor(index)"
/>
</div>
</div>
<div slot="reference" style="cursor: pointer;margin-top: 2px;width: 180px;"> <div slot="reference" style="cursor: pointer;margin-top: 2px;width: 180px;">
<span v-for="(c,index) in colorForm.colors" :key="index" :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" /> <span v-for="(c,index) in colorForm.colors" :key="index" :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
</div> </div>
...@@ -81,6 +116,8 @@ ...@@ -81,6 +116,8 @@
<script> <script>
import { COLOR_PANEL, DEFAULT_COLOR_CASE } from '../../chart/chart' import { COLOR_PANEL, DEFAULT_COLOR_CASE } from '../../chart/chart'
import { getColors } from '@/views/chart/chart/util'
import { mapState } from 'vuex'
export default { export default {
name: 'ColorSelector', name: 'ColorSelector',
...@@ -209,6 +246,11 @@ export default { ...@@ -209,6 +246,11 @@ export default {
} }
} }
}, },
computed: {
...mapState([
'batchOptStatus'
])
},
mounted() { mounted() {
this.init() this.init()
}, },
...@@ -227,6 +269,10 @@ export default { ...@@ -227,6 +269,10 @@ export default {
this.customColor = this.colorForm.colors[0] this.customColor = this.colorForm.colors[0]
this.colorIndex = 0 this.colorIndex = 0
// reset custom color
this.colorForm.seriesColors = []
this.initCustomColor(true)
this.changeColorCase(modifyName) this.changeColorCase(modifyName)
}, },
changeColorCase(modifyName) { changeColorCase(modifyName) {
...@@ -254,6 +300,8 @@ export default { ...@@ -254,6 +300,8 @@ export default {
} }
this.colorForm.tableBorderColor = this.colorForm.tableBorderColor ? this.colorForm.tableBorderColor : DEFAULT_COLOR_CASE.tableBorderColor this.colorForm.tableBorderColor = this.colorForm.tableBorderColor ? this.colorForm.tableBorderColor : DEFAULT_COLOR_CASE.tableBorderColor
this.initCustomColor()
} }
} }
}, },
...@@ -273,6 +321,24 @@ export default { ...@@ -273,6 +321,24 @@ export default {
}, },
showProperty(property) { showProperty(property) {
return this.propertyInner.includes(property) return this.propertyInner.includes(property)
},
switchCustomColor(index) {
this.colorForm.seriesColors[index].isCustom = true
this.switchColorCase()
},
initCustomColor(reset) {
if (this.chart.render && this.chart.render === 'antv' &&
(this.chart.type.includes('bar') ||
this.chart.type.includes('line') ||
this.chart.type.includes('pie') ||
this.chart.type === 'funnel' ||
this.chart.type === 'radar' ||
this.chart.type === 'scatter')) {
const chart = JSON.parse(JSON.stringify(this.chart))
this.colorForm.seriesColors = getColors(chart, this.colorForm.colors, reset)
}
} }
} }
} }
...@@ -326,4 +392,19 @@ export default { ...@@ -326,4 +392,19 @@ export default {
.el-radio.is-checked{ .el-radio.is-checked{
border: 1px solid #0a7be0; border: 1px solid #0a7be0;
} }
.span-label {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.custom-color-style {
height: 300px;
overflow-y: auto;
padding: 4px;
border: 1px solid #e6e6e6;
}
</style> </style>
frontend/src/views/chart/view/ChartEdit.vue
浏览文件 @ df759a6a
...@@ -1282,6 +1282,7 @@ export default { ...@@ -1282,6 +1282,7 @@ export default {
this.resetDrill() this.resetDrill()
this.initFromPanel() this.initFromPanel()
this.getChart(this.param.id) this.getChart(this.param.id)
this.getData(this.param.id)
}, },
bindPluginEvent() { bindPluginEvent() {
bus.$on('show-dimension-edit-filter', this.showDimensionEditFilter) bus.$on('show-dimension-edit-filter', this.showDimensionEditFilter)
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论