center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

perf(视图-地图): 格式化渐变色代码

Browse Source
This commit is contained in:
fit2cloud-chenyw 2022-10-12 16:41:21 +08:00
parent be18d50957
commit c075010807
5 changed files with 663 additions and 542 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

982
frontend/src/components/GradientColorSelector/DeColorPicker.vue
View File

File diff suppressed because it is too large Load Diff

135
frontend/src/components/GradientColorSelector/index.vue
View File

@ -1,13 +1,28 @@
<template>
<div>
<div v-if="colorDto.value" class="color-div-base selected-div">
<div
v-if="colorDto.value"
class="color-div-base selected-div"
>
<div style="float: left;display: flex;align-items: center;">
<span v-for="(c,index) in colorDto.colors" :key="index" class="color-span-base" :style="{background: formatBgColor(c, true)}" />
<span
v-for="(c,index) in colorDto.colors"
:key="index"
class="color-span-base"
:style="{background: formatBgColor(c, true)}"
/>
</div>
<span style="margin-left: 4px;">
</span>
<span class="reset-span" @click="reset">
<el-tooltip class="item" effect="dark" content="重置" placement="top">
<span style="margin-left: 4px;" />
<span
class="reset-span"
@click="reset"
>
<el-tooltip
class="item"
effect="dark"
content="重置"
placement="top"
>
<i class="el-icon-refresh" />
</el-tooltip>
</span>
@ -17,28 +32,75 @@
popper-class="gradient-popper"
:width="popWidth"
:append-to-body="true"
@show="whenShow"
trigger="click"
@show="whenShow"
>
<div class="custom-switch-div">
<el-switch
v-model="enableCustom"
active-text="自定义"
inactive-text="">
</el-switch>
inactive-text=""
/>
</div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane v-for="(pane, i) in tabPanes" :key="i" :label="pane.label" :name="pane.name">
<div class="color-tab-content" :id="'color-tab-content-' + i" @click="handler">
<div v-for="option in pane.datas" :key="option.value" class="el-select-dropdown__item color-div-base" :class="option.value === colorDto.value ? 'selected hover editor' : ''" @click="selectNode(option)">
<div v-if="option.value !== colorDto.value || !enableCustom" style="float: left;display: flex;align-items: center;">
<span v-for="(c,index) in option.colors" :key="index" class="color-span-base" :style="{background: formatBgColor(c)}" />
<el-tabs
v-model="activeName"
@tab-click="handleClick"
>
<el-tab-pane
v-for="(pane, i) in tabPanes"
:key="i"
:label="pane.label"
:name="pane.name"
>
<div
:id="'color-tab-content-' + i"
class="color-tab-content"
@click="handler"
>
<div
v-for="option in pane.datas"
:key="option.value"
class="el-select-dropdown__item color-div-base"
:class="option.value === colorDto.value ? 'selected hover editor' : ''"
@click="selectNode(option)"
>
<div
v-if="option.value !== colorDto.value || !enableCustom"
style="float: left;display: flex;align-items: center;"
>
<span
v-for="(c,index) in option.colors"
:key="index"
class="color-span-base"
:style="{background: formatBgColor(c)}"
/>
</div>
<span v-if="option.value !== colorDto.value || !enableCustom" style="margin-left: 4px;">{{ option.name }}</span>
<span
v-if="option.value !== colorDto.value || !enableCustom"
style="margin-left: 4px;"
>{{ option.name }}</span>
<span v-else v-for="(co,index) in option.colors" :key="index" class="color-span-base is-editor" >
<el-color-picker v-if="i === 0" v-model="option.colors[index]" @change="switchColorItem(option.colors, index)"/>
<de-color-picker ref="de-color-picker" :id="option.value + index" :base-id="option.value + index" show-alpha color-format="rgb" v-else v-model="option.colors[index]" @change="switchColorItem(option.colors, index)"/>
<span
v-for="(co,index) in option.colors"
v-else
:key="index"
class="color-span-base is-editor"
>
<el-color-picker
v-if="i === 0"
v-model="option.colors[index]"
@change="switchColorItem(option.colors, index)"
/>
<de-color-picker
v-else
:id="option.value + index"
ref="de-color-picker"
v-model="option.colors[index]"
:base-id="option.value + index"
show-alpha
color-format="rgb"
@change="switchColorItem(option.colors, index)"
/>
</span>
</div>
@ -70,9 +132,9 @@
</template>
<script>
import {colorCases, gradientColorCases} from './base'
import { colorCases, gradientColorCases } from './base'
import DeColorPicker from './DeColorPicker'
export default{
export default {
name: 'GradientColorSelector',
components: {
DeColorPicker
@ -130,10 +192,10 @@ export default{
},
scrollToSelected() {
const index = this.activeName === 'simple' ? 0 : 1
const parents = document.getElementById("color-tab-content-" + index)
if(!parents) return
const items = parents.getElementsByClassName("color-div-base selected")
if(items && items.length) {
const parents = document.getElementById('color-tab-content-' + index)
if (!parents) return
const items = parents.getElementsByClassName('color-div-base selected')
if (items && items.length) {
const top = items[0].offsetTop || 0
parents.scrollTo(0, top)
}
@ -150,7 +212,7 @@ export default{
haspPropValue = false
}
this.activeName = this.colorCases.some(item => item.value === this.colorDto.value) ? 'simple' : 'gradient'
if(haspPropValue) {
if (haspPropValue) {
this.tabPanes[this.activeName === 'simple' ? 0 : 1].datas.forEach(item => {
if (item.value === this.colorDto.value) {
item.colors = JSON.parse(JSON.stringify(this.colorDto.colors))
@ -160,24 +222,22 @@ export default{
},
handler(e) {
const whiteClassName = 'c__block el-popover__reference'
if(!e || !e.target || !e.target.className) return
if(!this.$refs || !this.$refs['de-color-picker']) return
if (!e || !e.target || !e.target.className) return
if (!this.$refs || !this.$refs['de-color-picker']) return
let id = null
if (e.target.className === whiteClassName) {
if(!e.target.parentElement || !e.target.parentElement.parentElement || !e.target.parentElement.parentElement.parentElement || !e.target.parentElement.parentElement.parentElement.id) return
if (!e.target.parentElement || !e.target.parentElement.parentElement || !e.target.parentElement.parentElement.parentElement || !e.target.parentElement.parentElement.parentElement.id) return
id = e.target.parentElement.parentElement.parentElement.id
}
const widget = this.$refs['de-color-picker']
if (Array.isArray(widget)) {
widget.forEach(item => {
(!id || id !== item.$el.id) && item.triggerHide && item.triggerHide()
})
return
}
(!id || id !== widget.$el.id) && widget.triggerHide && widget.triggerHide()
},
handleClick() {
this.enableCustom = false
@ -185,9 +245,8 @@ export default{
this.scrollToSelected()
})
const widget = this.$refs['de-color-picker']
if(!widget) return
if (!widget) return
if (Array.isArray(widget)) {
widget.forEach(item => {
item.triggerHide && item.triggerHide()
})
@ -215,10 +274,10 @@ export default{
},
formatBgColor(color, useValue) {
let activeName = this.activeName
if(useValue) {
if (useValue) {
activeName = this.colorCases.some(item => item.value === this.colorDto.value) ? 'simple' : 'gradient'
}
if(activeName === 'simple') {
if (activeName === 'simple') {
return color
}
return 'linear-gradient(0.0deg,' + color[0] + ' 0.0,' + color[1] + ' 100.0%)'
@ -236,13 +295,13 @@ export default{
this.$emit('color-change', JSON.parse(JSON.stringify(this.colorDto)))
},
reset() {
if(this.colorDto.value) {
if (this.colorDto.value) {
let activeName = 'simple'
if(this.gradientColorCases.some(item => item.value === this.colorDto.value)) {
if (this.gradientColorCases.some(item => item.value === this.colorDto.value)) {
activeName = 'gradient'
}
(activeName === 'simple' ? colorCases : gradientColorCases).forEach(curcase => {
if(curcase.value === this.colorDto.value) {
if (curcase.value === this.colorDto.value) {
this.colorDto.colors = JSON.parse(JSON.stringify(curcase.colors))
this.$emit('color-change', JSON.parse(JSON.stringify(this.colorDto)))
}

13
frontend/src/views/chart/chart/map/map.js
View File

@ -10,20 +10,19 @@ const linearCOlor = (start, end) => {
x2: 0,
y2: 1,
colorStops: [
{offset: 0, color: start},
{offset: 1, color: end},
{ offset: 0, color: start },
{ offset: 1, color: end }
],
global: false
}
}
const fillGradientColor = (data, colors) => {
if(!data || !data.length) return data
const dataLen = data.length
if (!data || !data.length) return data
const colorLen = colors.length
data.forEach((item, index) => {
const colorIndex = index % colorLen
const colorArr = colors[colorIndex]
if(Array.isArray(colorArr)) {
if (Array.isArray(colorArr)) {
item.itemStyle = {
normal: {
areaColor: linearCOlor(colorArr[0], colorArr[1]),
@ -99,8 +98,7 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
}
const valueArr = chart.data.series[0].data
// visualMap
if(!isGradient) {
if (!isGradient) {
if (valueArr && valueArr.length > 0) {
const values = []
valueArr.forEach(function(ele) {
@ -124,7 +122,6 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
chart_option.visualMap.inRange.colorAlpha = customAttr.color.alpha / 100
}
if (themeStyle) {
chart_option.visualMap.textStyle = { color: themeStyle }
}
}

19
frontend/src/views/chart/components/shape-attr/ColorSelector.vue
View File

@ -8,10 +8,21 @@
size="mini"
>
<div>
<el-form-item v-show="showProperty('value') && showProperty('gradient-color')" :label="$t('chart.color_case')" class="form-item">
<gradient-color-selector :color-dto="colorForm" @color-change="gradientColorChange"/>
<el-form-item
v-show="showProperty('value') && showProperty('gradient-color')"
:label="$t('chart.color_case')"
class="form-item"
>
<gradient-color-selector
:color-dto="colorForm"
@color-change="gradientColorChange"
/>
</el-form-item>
<el-form-item v-show="showProperty('value') && !showProperty('gradient-color')" :label="$t('chart.color_case')" class="form-item">
<el-form-item
v-show="showProperty('value') && !showProperty('gradient-color')"
:label="$t('chart.color_case')"
class="form-item"
>
<el-popover
placement="bottom"
width="400"
@ -267,7 +278,7 @@ import bus from '@/utils/bus'
export default {
name: 'ColorSelector',
components: {GradientColorSelector},
components: { GradientColorSelector },
props: {
param: {
type: Object,