dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' of github.com:dataease/dataease into dev

Browse Source
This commit is contained in:
taojinlong 2022-06-28 12:45:29 +08:00
commit 27aa14b6ca
16 changed files with 76 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/views/chart/chart/bar/bar.js
View File

@ -1,8 +1,8 @@
import { hexColorToRGBA } from '../util.js'
import { componentStyle, seniorCfg } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
import { BASE_ECHARTS_SELECT, DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function baseBarOption(chart_option, chart) {
export function baseBarOption(chart_option, chart, activeParam) {
// 处理shape attr
let customAttr = {}
if (chart.customAttr) {
@ -47,6 +47,8 @@ export function baseBarOption(chart_option, chart) {
y.label = customAttr.label
}
y.type = 'bar'
y.selectedMode = true
y.select = BASE_ECHARTS_SELECT
chart_option.legend.data.push(y.name)
chart_option.series.push(y)
}
@ -113,6 +115,8 @@ export function horizontalBarOption(chart_option, chart) {
y.label = customAttr.label
}
y.type = 'bar'
y.selectedMode = true
y.select = BASE_ECHARTS_SELECT
chart_option.legend.data.push(y.name)
chart_option.series.push(y)
}

6
frontend/src/views/chart/chart/chart.js
View File

@ -958,3 +958,9 @@ export const COLOR_PANEL = [
'#000000',
'#FFFFFF'
]
export const BASE_ECHARTS_SELECT = {
itemStyle: {
shadowBlur: 2
}
}

4
frontend/src/views/chart/chart/funnel/funnel.js
View File

@ -1,6 +1,6 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
import { BASE_ECHARTS_SELECT, DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function baseFunnelOption(chart_option, chart) {
// 处理shape attr
@ -47,6 +47,8 @@ export function baseFunnelOption(chart_option, chart) {
y.itemStyle = {
color: hexColorToRGBA(customAttr.color.colors[i % customAttr.color.colors.length], customAttr.color.alpha)
}
y.selectedMode = true
y.select = BASE_ECHARTS_SELECT
// y.type = 'funnel'
chart_option.series[0].data.push(y)
}

4
frontend/src/views/chart/chart/gauge/gauge.js
View File

@ -1,6 +1,6 @@
import { componentStyle } from '../common/common'
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { DEFAULT_THRESHOLD } from '@/views/chart/chart/chart'
import { BASE_ECHARTS_SELECT, DEFAULT_THRESHOLD } from '@/views/chart/chart/chart'
import { getScaleValue } from '@/components/canvas/utils/style'
export function baseGaugeOption(chart_option, chart, scale = 1) {
@ -44,6 +44,8 @@ export function baseGaugeOption(chart_option, chart, scale = 1) {
chart_option.series[0].itemStyle = {
color: hexColorToRGBA(customAttr.color.colors[0], customAttr.color.alpha)
}
chart_option.series[0].selectedMode = true
chart_option.series[0].select = BASE_ECHARTS_SELECT
// data只取第一个
const y = {
// name: chart.data.x[0],

4
frontend/src/views/chart/chart/line/line.js
View File

@ -1,6 +1,6 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle, seniorCfg } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
import { BASE_ECHARTS_SELECT, DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function baseLineOption(chart_option, chart) {
// 处理shape attr
@ -49,6 +49,8 @@ export function baseLineOption(chart_option, chart) {
delete y.areaStyle
}
}
y.selectedMode = true
y.select = BASE_ECHARTS_SELECT
// label
if (customAttr.label) {
y.label = customAttr.label

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

@ -1,6 +1,6 @@
// import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle, reverseColor } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
import { BASE_ECHARTS_SELECT, DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function baseMapOption(chart_option, chart, themeStyle) {
// 处理shape attr
@ -33,6 +33,8 @@ export function baseMapOption(chart_option, chart, themeStyle) {
chart_option.title.text = chart.title
if (chart.data.series && chart.data.series.length > 0) {
chart_option.series[0].name = chart.data.series[0].name
chart_option.series[0].selectedMode = true
chart_option.series[0].select = BASE_ECHARTS_SELECT
// label
if (customAttr.label) {
const text = customAttr.label.formatter

5
frontend/src/views/chart/chart/mix/mix.js
View File

@ -1,6 +1,6 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle, seniorCfg } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
import { BASE_ECHARTS_SELECT, DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function baseMixOption(chart_option, chart) {
// 处理shape attr
@ -68,6 +68,9 @@ export function baseMixOption(chart_option, chart) {
}
chart_option.legend.data.push(y.name)
i >= yAxis.length ? (y.yAxisIndex = 1) : (y.yAxisIndex = 0)
y.selectedMode = true
y.select = BASE_ECHARTS_SELECT
chart_option.series.push(y)
}
}

6
frontend/src/views/chart/chart/pie/pie.js
View File

@ -1,6 +1,6 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
import { BASE_ECHARTS_SELECT, DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function basePieOption(chart_option, chart) {
// 处理shape attr
@ -27,6 +27,8 @@ export function basePieOption(chart_option, chart) {
chart_option.title.text = chart.title
if (chart.data.series.length > 0) {
chart_option.series[0].name = chart.data.series[0].name
chart_option.series[0].selectedMode = true
chart_option.series[0].select = BASE_ECHARTS_SELECT
// size
if (customAttr.size) {
chart_option.series[0].radius = [customAttr.size.pieInnerRadius + '%', customAttr.size.pieOuterRadius + '%']
@ -79,6 +81,8 @@ export function rosePieOption(chart_option, chart) {
chart_option.title.text = chart.title
if (chart.data.series.length > 0) {
chart_option.series[0].name = chart.data.series[0].name
chart_option.series[0].selectedMode = true
chart_option.series[0].select = BASE_ECHARTS_SELECT
// size
if (customAttr.size) {
chart_option.series[0].radius = [customAttr.size.pieInnerRadius + '%', customAttr.size.pieOuterRadius + '%']

4
frontend/src/views/chart/chart/radar/radar.js
View File

@ -1,6 +1,6 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
import { BASE_ECHARTS_SELECT, DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function baseRadarOption(chart_option, chart) {
// 处理shape attr
@ -58,6 +58,8 @@ export function baseRadarOption(chart_option, chart) {
]
}
y.value = JSON.parse(JSON.stringify(y.data))
chart_option.series[0].selectedMode = true
chart_option.series[0].select = BASE_ECHARTS_SELECT
chart_option.series.push(d)
maxValues.push(Math.max.apply(null, y.value))

4
frontend/src/views/chart/chart/scatter/scatter.js
View File

@ -1,6 +1,6 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle, seniorCfg } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
import {BASE_ECHARTS_SELECT, DEFAULT_TOOLTIP} from '@/views/chart/chart/chart'
let bubbleArray = []
let terminalType = 'pc'
@ -56,6 +56,8 @@ export function baseScatterOption(chart_option, chart, terminal = 'pc') {
y.label = customAttr.label
}
y.type = 'scatter'
y.selectedMode = true
y.select = BASE_ECHARTS_SELECT
chart_option.legend.data.push(y.name)
chart_option.series.push(y)
}

4
frontend/src/views/chart/chart/treemap/treemap.js
View File

@ -1,6 +1,6 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
import {BASE_ECHARTS_SELECT, DEFAULT_TOOLTIP} from '@/views/chart/chart/chart'
export function baseTreemapOption(chart_option, chart) {
// 处理shape attr
@ -52,6 +52,8 @@ export function baseTreemapOption(chart_option, chart) {
y.itemStyle = {
color: hexColorToRGBA(customAttr.color.colors[i % customAttr.color.colors.length], customAttr.color.alpha)
}
chart_option.series[0].selectedMode = true
chart_option.series[0].select = BASE_ECHARTS_SELECT
// y.type = 'treemap'
chart_option.series[0].data.push(y)
}

3
frontend/src/views/chart/chart/util.js
View File

@ -240,7 +240,8 @@ export const TYPE_CONFIGS = [
'gaugeMin',
'gaugeMax',
'gaugeStartAngle',
'gaugeEndAngle'
'gaugeEndAngle',
'gaugeTickCount'
],
'label-selector-ant-v': [
'labelGauge'

49
frontend/src/views/chart/components/ChartComponent.vue
View File

@ -74,7 +74,6 @@ import {
import {
baseMixOption
} from '@/views/chart/chart/mix/mix'
// import eventBus from '@/components/canvas/utils/eventBus'
import {
uuid
} from 'vue-uuid'
@ -82,6 +81,7 @@ import {
geoJson
} from '@/api/map/map'
import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
import eventBus from '@/components/canvas/utils/eventBus'
export default {
name: 'ChartComponent',
@ -138,10 +138,10 @@ export default {
top: '0px'
},
pointParam: null,
dynamicAreaCode: null,
borderRadius: '0px',
mapCenter: null
mapCenter: null,
linkageActiveParam: null
}
},
@ -168,6 +168,17 @@ export default {
this.myChart.dispose()
},
methods: {
reDrawView() {
this.myChart.dispatchAction({ type: 'unselect', seriesIndex: this.linkageActiveParam.seriesIndex, name: this.linkageActiveParam.name })
this.myChart.dispatchAction({ type: 'downplay', seriesIndex: this.linkageActiveParam.seriesIndex, name: this.linkageActiveParam.name })
this.linkageActiveParam = null
},
linkageActive() {
if (this.linkageActiveParam) {
this.myChart.dispatchAction({ type: 'select', seriesIndex: this.linkageActiveParam.seriesIndex, name: this.linkageActiveParam.name })
this.myChart.dispatchAction({ type: 'highlight', seriesIndex: this.linkageActiveParam.seriesIndex, name: this.linkageActiveParam.name })
}
},
preDraw() {
// 基于准备好的dom，初始化echarts实例
// 渲染echart等待dom加载完毕,渲染之前先尝试销毁具有相同id的echart 放置多次切换仪表板有重复id情况
@ -185,6 +196,13 @@ export default {
this.myChart.off('click')
this.myChart.on('click', function(param) {
that.pointParam = param
if (that.linkageActiveParam) {
that.reDrawView()
}
that.linkageActiveParam = {
seriesIndex: that.pointParam.seriesIndex,
name: that.pointParam.name
}
if (that.trackMenu.length < 2) { // 只有一个事件直接调用
that.trackClick(that.trackMenu[0])
} else { // 视图关联多个事件
@ -195,7 +213,7 @@ export default {
})
})
},
drawEcharts() {
drawEcharts(activeParam) {
const chart = this.chart
let chart_option = {}
// type
@ -231,7 +249,6 @@ export default {
if (this.myChart && this.searchCount > 0) {
chart_option.animation = false
}
if (chart.type === 'map') {
const customAttr = JSON.parse(chart.customAttr)
if (!customAttr.areaCode) {
@ -256,33 +273,14 @@ export default {
return
}
this.myEcharts(chart_option)
this.$nextTick(() => (this.linkageActive()))
},
registerDynamicMap(areaCode) {
this.dynamicAreaCode = areaCode
// if (this.$store.getters.geoMap[areaCode]) {
// const json = this.$store.getters.geoMap[areaCode]
// this.myChart.dispose()
// this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
// this.$echarts.registerMap('MAP', json)
// return
// }
// geoJson(areaCode).then(res => {
// this.$store.dispatch('map/setGeo', {
// key: areaCode,
// value: res
// }).then(() => {
// this.myChart.dispose()
// this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
// this.$echarts.registerMap('MAP', res)
// })
// }).catch(() => {
// this.downOrUp = true
// })
},
initMapChart(geoJson, chart) {
this.$echarts.registerMap('MAP', geoJson)
// this.$echarts.getMap('MAP') || this.$echarts.registerMap('MAP', geoJson)
const base_json = JSON.parse(JSON.stringify(BASE_MAP))
let themeStyle = null
if (this.themeStyle) {
@ -351,6 +349,7 @@ export default {
this.$emit('onChartClick', this.pointParam)
break
case 'linkage':
this.linkageActive()
this.$store.commit('addViewTrackFilter', linkageParam)
break
case 'jump':

2
frontend/src/views/chart/components/ChartComponentG2.vue
View File

@ -132,7 +132,7 @@ export default {
},
linkageActive() {
this.linkageActiveHistory = true
this.myChart.setState('selected', (param) => {
this.myChart.setState('active', (param) => {
if (Array.isArray(param)) {
return false
} else {

2
frontend/src/views/chart/components/ChartComponentS2.vue
View File

@ -389,7 +389,7 @@ export default {
this.myChart.store.set('scrollY', this.scrollTop)
this.myChart.render()
if (senior.scroll && senior.scrollCfg.open && (this.chart.type === 'table-normal' || (this.chart.type === 'table-info' && !this.showPage))) {
if (senior.scrollCfg && senior.scrollCfg.open && (this.chart.type === 'table-normal' || (this.chart.type === 'table-info' && !this.showPage))) {
const rowHeight = customAttr.size.tableItemHeight
const headerHeight = customAttr.size.tableTitleHeight

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

@ -277,7 +277,7 @@
<!--table-end-->
<!--gauge-begin-->
<el-form v-show="chart.type && chart.type.includes('gauge')" ref="sizeFormGauge" :model="sizeForm" label-width="100px" size="mini">
<el-form ref="sizeFormGauge" :model="sizeForm" label-width="100px" size="mini">
<el-form-item v-show="showProperty('gaugeMin')" :label="$t('chart.min')" class="form-item form-item-slider">
<el-input-number v-model="sizeForm.gaugeMin" size="mini" @change="changeBarSizeCase" />
</el-form-item>
@ -314,22 +314,15 @@
@change="changeBarSizeCase('gaugeEndAngle')"
/>
</el-form-item>
<el-form-item v-show="showProperty('quotaFontSize')" :label="$t('chart.quota_font_size')" class="form-item">
<el-select
v-model="sizeForm.quotaFontSize"
:placeholder="$t('chart.quota_font_size')"
@change="changeBarSizeCase('quotaFontSize')"
/>
</el-form-item>
<el-form-item :label="$t('chart.tick_count')" class="form-item form-item-slider">
<el-input-number v-model="sizeForm.gaugeTickCount" :min="1" :step="1" :precision="0" size="mini" @change="changeBarSizeCase" />
<el-form-item v-show="showProperty('gaugeTickCount')" :label="$t('chart.tick_count')" class="form-item form-item-slider">
<el-input-number v-model="sizeForm.gaugeTickCount" :min="1" :step="1" :precision="0" size="mini" @change="changeBarSizeCase('gaugeTickCount')" />
</el-form-item>
</el-form>
<!--gauge-end-->
<el-form v-show="chart.type && (chart.type.includes('text') || chart.type === 'label')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
<el-form-item :label="$t('chart.quota_font_size')" class="form-item">
<el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase">
<el-form ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
<el-form-item v-show="showProperty('quotaFontSize')" :label="$t('chart.quota_font_size')" class="form-item">
<el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase('quotaFontSize')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>