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

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

File diff suppressed because it is too large Load Diff

6
frontend/src/components/GradientColorSelector/base.js
View File

@ -88,8 +88,8 @@ export const gradientColorCases = [
name: '渐变色1', name: '渐变色1',
value: 'gradient1', value: 'gradient1',
colors: [ colors: [
['rgba(144,202,249,0.5)', 'rgba(1,87,155,0.9)'], ['rgba(144,202,249,0.5)', 'rgba(1,87,155,0.9)'],
['rgba(127,222,234,1)', 'rgba(0,77,65,1)'], ['rgba(127,222,234,1)', 'rgba(0,77,65,1)'],
['rgba(129,199,132,1)', 'rgba(26,94,32,1)'], ['rgba(129,199,132,1)', 'rgba(26,94,32,1)'],
['rgba(255,213,79,1)', 'rgba(230,81,0,1)'], ['rgba(255,213,79,1)', 'rgba(230,81,0,1)'],
['rgba(186,105,200,1)', 'rgba(74,20,140,1)'], ['rgba(186,105,200,1)', 'rgba(74,20,140,1)'],
@ -100,4 +100,4 @@ export const gradientColorCases = [
export const isGradientValue = value => { export const isGradientValue = value => {
return value && gradientColorCases.some(item => item.value === value) return value && gradientColorCases.some(item => item.value === value)
} }

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

@ -1,13 +1,28 @@
<template> <template>
<div> <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;"> <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> </div>
<span style="margin-left: 4px;"> <span style="margin-left: 4px;" />
</span> <span
<span class="reset-span" @click="reset"> class="reset-span"
<el-tooltip class="item" effect="dark" content="重置" placement="top"> @click="reset"
>
<el-tooltip
class="item"
effect="dark"
content="重置"
placement="top"
>
<i class="el-icon-refresh" /> <i class="el-icon-refresh" />
</el-tooltip> </el-tooltip>
</span> </span>
@ -17,41 +32,88 @@
popper-class="gradient-popper" popper-class="gradient-popper"
:width="popWidth" :width="popWidth"
:append-to-body="true" :append-to-body="true"
@show="whenShow"
trigger="click" trigger="click"
@show="whenShow"
> >
<div class="custom-switch-div"> <div class="custom-switch-div">
<el-switch <el-switch
v-model="enableCustom" v-model="enableCustom"
active-text="自定义" active-text="自定义"
inactive-text=""> inactive-text=""
</el-switch> />
</div> </div>
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tabs
<el-tab-pane v-for="(pane, i) in tabPanes" :key="i" :label="pane.label" :name="pane.name"> v-model="activeName"
<div class="color-tab-content" :id="'color-tab-content-' + i" @click="handler"> @tab-click="handleClick"
<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;"> <el-tab-pane
<span v-for="(c,index) in option.colors" :key="index" class="color-span-base" :style="{background: formatBgColor(c)}" /> 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> </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" > <span
<el-color-picker v-if="i === 0" v-model="option.colors[index]" @change="switchColorItem(option.colors, index)"/> v-for="(co,index) in option.colors"
<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)"/> 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> </span>
</div> </div>
</div> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<el-select <el-select
ref="colorSelect" ref="colorSelect"
slot="reference" slot="reference"
v-model="colorDto.value" v-model="colorDto.value"
class="form-gender-select" class="form-gender-select"
popper-class="gradient-tree-select" popper-class="gradient-tree-select"
:placeholder="$t('commons.please_select')" :placeholder="$t('commons.please_select')"
@ -63,16 +125,16 @@
:label="item.label" :label="item.label"
:value="item.id" :value="item.id"
/> />
</el-select> </el-select>
</el-popover> </el-popover>
</div> </div>
</template> </template>
<script> <script>
import {colorCases, gradientColorCases} from './base' import { colorCases, gradientColorCases } from './base'
import DeColorPicker from './DeColorPicker' import DeColorPicker from './DeColorPicker'
export default{ export default {
name: 'GradientColorSelector', name: 'GradientColorSelector',
components: { components: {
DeColorPicker DeColorPicker
@ -113,7 +175,7 @@ export default{
} }
}, },
computed: { computed: {
}, },
mounted() { mounted() {
this._updateH() this._updateH()
@ -130,10 +192,10 @@ export default{
}, },
scrollToSelected() { scrollToSelected() {
const index = this.activeName === 'simple' ? 0 : 1 const index = this.activeName === 'simple' ? 0 : 1
const parents = document.getElementById("color-tab-content-" + index) const parents = document.getElementById('color-tab-content-' + index)
if(!parents) return if (!parents) return
const items = parents.getElementsByClassName("color-div-base selected") const items = parents.getElementsByClassName('color-div-base selected')
if(items && items.length) { if (items && items.length) {
const top = items[0].offsetTop || 0 const top = items[0].offsetTop || 0
parents.scrollTo(0, top) parents.scrollTo(0, top)
} }
@ -149,8 +211,8 @@ export default{
this.colorDto.colors = this.colorCases[0].colors this.colorDto.colors = this.colorCases[0].colors
haspPropValue = false haspPropValue = false
} }
this.activeName = this.colorCases.some(item => item.value === this.colorDto.value) ? 'simple' : 'gradient' 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 => { this.tabPanes[this.activeName === 'simple' ? 0 : 1].datas.forEach(item => {
if (item.value === this.colorDto.value) { if (item.value === this.colorDto.value) {
item.colors = JSON.parse(JSON.stringify(this.colorDto.colors)) item.colors = JSON.parse(JSON.stringify(this.colorDto.colors))
@ -160,24 +222,22 @@ export default{
}, },
handler(e) { handler(e) {
const whiteClassName = 'c__block el-popover__reference' const whiteClassName = 'c__block el-popover__reference'
if(!e || !e.target || !e.target.className) return if (!e || !e.target || !e.target.className) return
if(!this.$refs || !this.$refs['de-color-picker']) return if (!this.$refs || !this.$refs['de-color-picker']) return
let id = null let id = null
if (e.target.className === whiteClassName) { 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 id = e.target.parentElement.parentElement.parentElement.id
} }
const widget = this.$refs['de-color-picker']
if (Array.isArray(widget)) {
const widget = this.$refs['de-color-picker']
if (Array.isArray(widget)) {
widget.forEach(item => { widget.forEach(item => {
(!id || id !== item.$el.id) && item.triggerHide && item.triggerHide() (!id || id !== item.$el.id) && item.triggerHide && item.triggerHide()
}) })
return return
} }
(!id || id !== widget.$el.id) && widget.triggerHide && widget.triggerHide() (!id || id !== widget.$el.id) && widget.triggerHide && widget.triggerHide()
}, },
handleClick() { handleClick() {
this.enableCustom = false this.enableCustom = false
@ -185,9 +245,8 @@ export default{
this.scrollToSelected() this.scrollToSelected()
}) })
const widget = this.$refs['de-color-picker'] const widget = this.$refs['de-color-picker']
if(!widget) return if (!widget) return
if (Array.isArray(widget)) { if (Array.isArray(widget)) {
widget.forEach(item => { widget.forEach(item => {
item.triggerHide && item.triggerHide() item.triggerHide && item.triggerHide()
}) })
@ -215,10 +274,10 @@ export default{
}, },
formatBgColor(color, useValue) { formatBgColor(color, useValue) {
let activeName = this.activeName let activeName = this.activeName
if(useValue) { if (useValue) {
activeName = this.colorCases.some(item => item.value === this.colorDto.value) ? 'simple' : 'gradient' activeName = this.colorCases.some(item => item.value === this.colorDto.value) ? 'simple' : 'gradient'
} }
if(activeName === 'simple') { if (activeName === 'simple') {
return color return color
} }
return 'linear-gradient(0.0deg,' + color[0] + ' 0.0,' + color[1] + ' 100.0%)' 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))) this.$emit('color-change', JSON.parse(JSON.stringify(this.colorDto)))
}, },
reset() { reset() {
if(this.colorDto.value) { if (this.colorDto.value) {
let activeName = 'simple' 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 = 'gradient'
} }
(activeName === 'simple' ? colorCases : gradientColorCases).forEach(curcase => { (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.colorDto.colors = JSON.parse(JSON.stringify(curcase.colors))
this.$emit('color-change', JSON.parse(JSON.stringify(this.colorDto))) this.$emit('color-change', JSON.parse(JSON.stringify(this.colorDto)))
} }
@ -250,7 +309,7 @@ export default{
} }
} }
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
@ -263,7 +322,7 @@ export default{
margin-top: 1px !important; margin-top: 1px !important;
border-top: none; border-top: none;
height: 300px; height: 300px;
.popper__arrow { .popper__arrow {
display: none; display: none;
} }
@ -321,4 +380,4 @@ export default{
} }
} }
} }
</style> </style>

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

@ -10,20 +10,19 @@ const linearCOlor = (start, end) => {
x2: 0, x2: 0,
y2: 1, y2: 1,
colorStops: [ colorStops: [
{offset: 0, color: start}, { offset: 0, color: start },
{offset: 1, color: end}, { offset: 1, color: end }
], ],
global: false global: false
} }
} }
const fillGradientColor = (data, colors) => { const fillGradientColor = (data, colors) => {
if(!data || !data.length) return data if (!data || !data.length) return data
const dataLen = data.length
const colorLen = colors.length const colorLen = colors.length
data.forEach((item, index) => { data.forEach((item, index) => {
const colorIndex = index % colorLen const colorIndex = index % colorLen
const colorArr = colors[colorIndex] const colorArr = colors[colorIndex]
if(Array.isArray(colorArr)) { if (Array.isArray(colorArr)) {
item.itemStyle = { item.itemStyle = {
normal: { normal: {
areaColor: linearCOlor(colorArr[0], colorArr[1]), areaColor: linearCOlor(colorArr[0], colorArr[1]),
@ -44,7 +43,7 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
let isGradient = false let isGradient = false
if (chart.customAttr) { if (chart.customAttr) {
customAttr = JSON.parse(chart.customAttr) customAttr = JSON.parse(chart.customAttr)
if (customAttr.color) { if (customAttr.color) {
const colorValue = customAttr.color.value const colorValue = customAttr.color.value
isGradient = isGradientValue(colorValue) isGradient = isGradientValue(colorValue)
@ -99,8 +98,7 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
} }
const valueArr = chart.data.series[0].data const valueArr = chart.data.series[0].data
// visualMap // visualMap
if(!isGradient) { if (!isGradient) {
if (valueArr && valueArr.length > 0) { if (valueArr && valueArr.length > 0) {
const values = [] const values = []
valueArr.forEach(function(ele) { valueArr.forEach(function(ele) {
@ -124,11 +122,10 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
chart_option.visualMap.inRange.colorAlpha = customAttr.color.alpha / 100 chart_option.visualMap.inRange.colorAlpha = customAttr.color.alpha / 100
} }
if (themeStyle) { if (themeStyle) {
chart_option.visualMap.textStyle = { color: themeStyle } chart_option.visualMap.textStyle = { color: themeStyle }
} }
} }
for (let i = 0; i < valueArr.length; i++) { for (let i = 0; i < valueArr.length; i++) {
const y = valueArr[i] const y = valueArr[i]
y.name = chart.data.x[i] y.name = chart.data.x[i]
@ -138,7 +135,7 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
chart_option.series[0].data = fillGradientColor(chart_option.series[0].data, customAttr.color.colors) chart_option.series[0].data = fillGradientColor(chart_option.series[0].data, customAttr.color.colors)
delete chart_option.visualMap delete chart_option.visualMap
} }
if (chart.senior) { if (chart.senior) {
const senior = JSON.parse(chart.senior) const senior = JSON.parse(chart.senior)

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

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