Skip to content

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

feat: 自定义颜色

上级 13aff751
隐藏空白字符变更
内嵌 并排
正在显示 包含 436 行增加 和 2 行删除
frontend/src/views/chart/components/shape-attr/ColorSelectorExt.vue 0 → 100644
浏览文件 @ 4fe718bb
<template>
<div style="width: 100%">
<el-col>
<el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
<div>
<el-form-item
v-show="chart.type && !chart.type.includes('table') && !chart.type.includes('text') && chart.type !== 'label'"
:label="$t('chart.color_case')"
class="form-item"
>
<el-popover
placement="bottom"
width="400"
trigger="click"
>
<div style="padding: 6px 10px;">
<div>
<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"
>
<el-option
v-for="option in colorCases"
:key="option.value"
:label="option.name"
:value="option.value"
style="display: flex;align-items: center;"
>
<div style="float: left">
<span
v-for="(c,index) in option.colors"
:key="index"
:style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}"
/>
</div>
<span style="margin-left: 4px;">{{ option.name }}</span>
</el-option>
</el-select>
<el-button size="mini" type="text" style="margin-left: 2px;" @click="resetCustomColor">
{{ $t('commons.reset') }}
</el-button>
</div>
<div style="display: flex;align-items: center;margin-top: 10px;">
<span class="color-label" />
<span>
<!-- 色系自定义-->
<!-- <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)">-->
<!-- <span :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />-->
<!-- </el-radio>-->
<!-- </el-radio-group>-->
<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>
</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 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>
<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}"
/>
</div>
</el-popover>
</el-form-item>
<el-form-item
v-show="(chart.type && (chart.type.includes('text') || chart.type === 'label')) || sourceType==='panelTable'"
:label="$t('chart.quota_color')"
class="form-item"
>
<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') || chart.type === 'label') || sourceType==='panelTable'"
:label="$t('chart.dimension_color')"
class="form-item"
>
<el-color-picker
v-model="colorForm.dimensionColor"
class="color-picker-style"
:predefine="predefineColors"
@change="changeColorCase"
/>
</el-form-item>
</div>
<el-form-item
v-show="chart.type && !chart.type.includes('text') && chart.type !== 'label'"
: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="changeColorCase"
/>
</el-form-item>
</el-form>
</el-col>
</div>
</template>
<script>
import { COLOR_PANEL, DEFAULT_COLOR_CASE } from '../../chart/chart'
import { getColors } from '@/views/chart/chart/util'
export default {
name: 'ColorSelectorExt',
props: {
param: {
type: Object,
required: false
},
chart: {
type: Object,
required: true
},
sourceType: {
type: String,
default: 'view',
required: false
}
},
data() {
return {
colorCases: [
{
name: this.$t('chart.color_default'),
value: 'default',
colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
},
{
name: this.$t('chart.color_retro'),
value: 'retro',
colors: ['#0780cf', '#765005', '#fa6d1d', '#0e2c82', '#b6b51f', '#da1f18', '#701866', '#f47a75', '#009db2']
},
{
name: this.$t('chart.color_elegant'),
value: 'elegant',
colors: ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#434348']
},
{
name: this.$t('chart.color_future'),
value: 'future',
colors: ['#63b2ee', '#76da91', '#f8cb7f', '#f89588', '#7cd6cf', '#9192ab', '#7898e1', '#efa666', '#eddd86']
},
{
name: this.$t('chart.color_gradual'),
value: 'gradual',
colors: ['#71ae46', '#96b744', '#c4cc38', '#ebe12a', '#eab026', '#e3852b', '#d85d2a', '#ce2626', '#ac2026']
},
{
name: this.$t('chart.color_simple'),
value: 'simple',
colors: ['#929fff', '#9de0ff', '#ffa897', '#af87fe', '#7dc3fe', '#bb60b2', '#433e7c', '#f47a75', '#009db2']
},
{
name: this.$t('chart.color_business'),
value: 'business',
colors: ['#194f97', '#555555', '#bd6b08', '#00686b', '#c82d31', '#625ba1', '#898989', '#9c9800', '#007f54']
},
{
name: this.$t('chart.color_gentle'),
value: 'gentle',
colors: ['#5b9bd5', '#ed7d31', '#70ad47', '#ffc000', '#4472c4', '#91d024', '#b235e6', '#02ae75', '#5b9bd5']
},
{
name: this.$t('chart.color_technology'),
value: 'technology',
colors: ['#05f8d6', '#0082fc', '#fdd845', '#22ed7c', '#09b0d3', '#1d27c9', '#f9e264', '#f47a75', '#009db2']
},
{
name: this.$t('chart.color_light'),
value: 'light',
colors: ['#884898', '#808080', '#82ae46', '#00a3af', '#ef8b07', '#007bbb', '#9d775f', '#fae800', '#5f9b3c']
},
{
name: this.$t('chart.color_classical'),
value: 'classical',
colors: ['#007bbb', '#ffdb4f', '#dd4b4b', '#2ca9e1', '#ef8b07', '#4a488e', '#82ae46', '#dd4b4b', '#bb9581']
},
{
name: this.$t('chart.color_fresh'),
value: 'fresh',
colors: ['#5f9b3c', '#75c24b', '#83d65f', '#aacf53', '#c7dc68', '#d8e698', '#e0ebaf', '#bbc8e6', '#e5e5e5']
},
{
name: this.$t('chart.color_energy'),
value: 'energy',
colors: ['#ef8b07', '#2a83a2', '#f07474', '#c55784', '#274a78', '#7058a3', '#0095d9', '#75c24b', '#808080']
},
{
name: this.$t('chart.color_red'),
value: 'red',
colors: ['#ff0000', '#ef8b07', '#4c6cb3', '#f8e944', '#69821b', '#9c5ec3', '#00ccdf', '#f07474', '#bb9581']
},
{
name: this.$t('chart.color_fast'),
value: 'fast',
colors: ['#fae800', '#00c039', '#0482dc', '#bb9581', '#ff7701', '#9c5ec3', '#00ccdf', '#00c039', '#ff7701']
},
{
name: this.$t('chart.color_spiritual'),
value: 'spiritual',
colors: ['#00a3af', '#4da798', '#57baaa', '#62d0bd', '#6ee4d0', '#86e7d6', '#aeede1', '#bde1e6', '#e5e5e5']
}
],
colorForm: JSON.parse(JSON.stringify(DEFAULT_COLOR_CASE)),
customColor: null,
colorIndex: 0,
predefineColors: COLOR_PANEL
}
},
computed: {
panelInfo() {
return this.$store.state.panel.panelInfo
}
},
watch: {
'chart.id': {
handler: function() {
this.customColor = null
this.colorIndex = 0
}
},
'chart': {
handler: function() {
this.init()
}
}
},
mounted() {
this.init()
},
methods: {
changeColorOption() {
const that = this
const items = this.colorCases.filter(ele => {
return ele.value === that.colorForm.value
})
// const val = JSON.parse(JSON.stringify(this.colorForm))
// val.value = items[0].value
// val.colors = items[0].colors
// this.colorForm.value = items[0].value
this.colorForm.colors = JSON.parse(JSON.stringify(items[0].colors))
this.customColor = this.colorForm.colors[0]
this.colorIndex = 0
// reset custom color
this.colorForm.seriesColors = []
this.initCustomColor(true)
this.changeColorCase()
},
changeColorCase() {
this.$emit('onColorChange', this.colorForm)
// this.customColor = null
// this.colorIndex = 0
},
init() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customAttr) {
let customAttr = null
if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
customAttr = JSON.parse(JSON.stringify(chart.customAttr))
} else {
customAttr = JSON.parse(chart.customAttr)
}
if (customAttr.color) {
this.colorForm = customAttr.color
if (!this.customColor) {
this.customColor = this.colorForm.colors[0]
this.colorIndex = 0
}
this.colorForm.tableBorderColor = this.colorForm.tableBorderColor ? this.colorForm.tableBorderColor : DEFAULT_COLOR_CASE.tableBorderColor
this.initCustomColor()
}
}
},
switchColor(index) {
this.colorIndex = index
},
switchColorCase() {
this.colorForm.colors[this.colorIndex] = this.customColor
this.$emit('onColorChange', this.colorForm)
},
switchCustomColor(index) {
this.colorForm.seriesColors[index].isCustom = true
this.switchColorCase()
},
resetCustomColor() {
this.changeColorOption()
},
initCustomColor(reset) {
const chart = JSON.parse(JSON.stringify(this.chart))
this.colorForm.seriesColors = getColors(chart, this.colorForm.colors, reset)
}
}
}
</script>
<style scoped>
.shape-item {
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center
}
.form-item-slider >>> .el-form-item__label {
font-size: 12px;
line-height: 38px;
}
.form-item >>> .el-form-item__label {
font-size: 12px;
}
.el-select-dropdown__item {
padding: 0 20px;
}
span {
font-size: 12px
}
.el-form-item {
margin-bottom: 6px;
}
.color-picker-style {
cursor: pointer;
z-index: 1003;
}
.color-label {
display: inline-block;
width: 60px;
}
.color-type >>> .el-radio__input {
display: none;
}
.el-radio {
margin: 0 2px 0 0 !important;
border: 1px solid transparent;
}
.el-radio >>> .el-radio__label {
padding-left: 0;
}
.el-radio.is-checked {
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>
frontend/src/views/chart/view/ChartEdit.vue
浏览文件 @ 4fe718bb
...@@ -1587,6 +1587,7 @@ export default { ...@@ -1587,6 +1587,7 @@ export default {
const view = this.buildParam(true, 'chart', false, switchType) const view = this.buildParam(true, 'chart', false, switchType)
if (!view) return if (!view) return
viewEditSave(this.panelInfo.id, view).then(() => { viewEditSave(this.panelInfo.id, view).then(() => {
this.getData(this.param.id)
bus.$emit('view-in-cache', { type: 'propChange', viewId: this.param.id }) bus.$emit('view-in-cache', { type: 'propChange', viewId: this.param.id })
}) })
}, },
...@@ -2369,7 +2370,7 @@ export default { ...@@ -2369,7 +2370,7 @@ export default {
resetViewCacheCallBack(_this.param.id, _this.panelInfo.id, function(rsp) { resetViewCacheCallBack(_this.param.id, _this.panelInfo.id, function(rsp) {
_this.changeEditStatus(false) _this.changeEditStatus(false)
_this.getChart(_this.param.id, 'panel') _this.getChart(_this.param.id, 'panel')
// _this.getData(_this.param.id) _this.getData(_this.param.id)
bus.$emit('view-in-cache', { type: 'propChange', viewId: _this.param.id }) bus.$emit('view-in-cache', { type: 'propChange', viewId: _this.param.id })
}) })
}, },
...@@ -2405,6 +2406,8 @@ export default { ...@@ -2405,6 +2406,8 @@ export default {
this.view.customAttr.label.position = 'middle' this.view.customAttr.label.position = 'middle'
} }
} }
// reset custom colors
this.view.customAttr.color.seriesColors = []
}, },
valueFormatter(item) { valueFormatter(item) {
......
frontend/src/views/chart/view/ChartStyle.vue
浏览文件 @ 4fe718bb
...@@ -30,7 +30,15 @@ ...@@ -30,7 +30,15 @@
<span class="padding-lr">{{ $t('chart.shape_attr') }}</span> <span class="padding-lr">{{ $t('chart.shape_attr') }}</span>
<el-collapse v-model="attrActiveNames" class="style-collapse"> <el-collapse v-model="attrActiveNames" class="style-collapse">
<el-collapse-item name="color" :title="$t('chart.color')"> <el-collapse-item name="color" :title="$t('chart.color')">
<color-selector-ext
v-if="view.render && view.render === 'antv' && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('pie') || view.type === 'funnel' || view.type === 'radar' || view.type === 'scatter')"
:param="param"
class="attr-selector"
:chart="chart"
@onColorChange="onColorChange"
/>
<color-selector <color-selector
v-else
:param="param" :param="param"
class="attr-selector" class="attr-selector"
:chart="chart" :chart="chart"
...@@ -254,6 +262,7 @@ ...@@ -254,6 +262,7 @@
<script> <script>
import PluginCom from '@/views/system/plugin/PluginCom' import PluginCom from '@/views/system/plugin/PluginCom'
import ColorSelector from '@/views/chart/components/shape-attr/ColorSelector' import ColorSelector from '@/views/chart/components/shape-attr/ColorSelector'
import ColorSelectorExt from '@/views/chart/components/shape-attr/ColorSelectorExt'
import SizeSelector from '@/views/chart/components/shape-attr/SizeSelector' import SizeSelector from '@/views/chart/components/shape-attr/SizeSelector'
import SizeSelectorAntV from '@/views/chart/components/shape-attr/SizeSelectorAntV' import SizeSelectorAntV from '@/views/chart/components/shape-attr/SizeSelectorAntV'
import LabelSelector from '@/views/chart/components/shape-attr/LabelSelector' import LabelSelector from '@/views/chart/components/shape-attr/LabelSelector'
...@@ -295,7 +304,13 @@ export default { ...@@ -295,7 +304,13 @@ export default {
TotalCfg, TotalCfg,
TooltipSelectorAntV, TooltipSelectorAntV,
TooltipSelector, TooltipSelector,
LabelSelectorAntV, LabelSelector, SizeSelectorAntV, SizeSelector, ColorSelector, PluginCom LabelSelectorAntV,
LabelSelector,
SizeSelectorAntV,
SizeSelector,
ColorSelector,
PluginCom,
ColorSelectorExt
}, },
props: { props: {
chart: { chart: {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论