-
{{ item.value }}
+
{{ item.value }}
{{ item.min }} ≤{{ t('chart.drag_block_label_value') }}≤ {{ item.max }}
@@ -498,8 +500,8 @@ init()
@@ -556,7 +558,7 @@ init()
!item.term.includes('empty') &&
item.term !== 'between'
"
- :title="item.value"
+ :title="item.value + ''"
>{{ item.value }}
-import { computed, reactive } from 'vue'
+import { PropType, reactive } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { COLOR_PANEL } from '../../../util/chart'
import { fieldType } from '@/utils/attr'
-import _ from 'lodash'
const { t } = useI18n()
const props = defineProps({
chart: {
- type: Object,
+ type: Object as PropType,
required: true
},
threshold: {
@@ -164,17 +163,17 @@ const valueOptions = [
const predefineColors = COLOR_PANEL
const state = reactive({
- thresholdArr: [],
+ thresholdArr: [] as TableThreshold[],
fields: [],
thresholdObj: {
fieldId: '',
field: {},
conditions: []
- }
+ } as TableThreshold
})
const init = () => {
- state.thresholdArr = JSON.parse(JSON.stringify(props.threshold))
+ state.thresholdArr = JSON.parse(JSON.stringify(props.threshold)) as TableThreshold[]
initFields()
}
const initOptions = item => {
@@ -193,33 +192,20 @@ const initOptions = item => {
}
}
const initFields = () => {
- // 暂时支持指标
+ let fields = []
if (props.chart.type === 'table-info') {
- if (Object.prototype.toString.call(props.chart.xAxis) === '[object Array]') {
- state.fields = JSON.parse(JSON.stringify(props.chart.xAxis))
- } else {
- state.fields = JSON.parse(props.chart.xAxis)
- }
+ fields = JSON.parse(JSON.stringify(props.chart.xAxis))
} else if (props.chart.type === 'table-pivot') {
- if (Object.prototype.toString.call(props.chart.yAxis) === '[object Array]') {
- state.fields = JSON.parse(JSON.stringify(props.chart.yAxis))
- } else {
- state.fields = JSON.parse(props.chart.yAxis)
- }
+ const xAxis = JSON.parse(JSON.stringify(props.chart.xAxis))
+ const xAxisExt = JSON.parse(JSON.stringify(props.chart.xAxisExt))
+ const yAxis = JSON.parse(JSON.stringify(props.chart.yAxis))
+ fields = [...xAxis, ...xAxisExt, ...yAxis]
} else {
- if (Object.prototype.toString.call(props.chart.xAxis) === '[object Array]') {
- state.fields = state.fields.concat(JSON.parse(JSON.stringify(props.chart.xAxis)))
- } else {
- state.fields = state.fields.concat(JSON.parse(props.chart.xAxis))
- }
- if (Object.prototype.toString.call(props.chart.yAxis) === '[object Array]') {
- state.fields = state.fields.concat(JSON.parse(JSON.stringify(props.chart.yAxis)))
- } else {
- state.fields = state.fields.concat(JSON.parse(props.chart.yAxis))
- }
+ const xAxis = JSON.parse(JSON.stringify(props.chart.xAxis))
+ const yAxis = JSON.parse(JSON.stringify(props.chart.yAxis))
+ fields = [...xAxis, ...yAxis]
}
- // 暂不支持时间
- // this.fields = this.fields.filter(ele => ele.deType !== 1)
+ state.fields.splice(0, state.fields.length, ...fields)
}
const addThreshold = () => {
state.thresholdArr.push(JSON.parse(JSON.stringify(state.thresholdObj)))
@@ -243,9 +229,6 @@ const removeCondition = (item, index) => {
changeThreshold()
}
-const computedFields = computed(() => {
- return _.filter(state.fields, f => f.deType === 2 || f.deType === 3)
-})
const addField = item => {
// get field
if (state.fields && state.fields.length > 0) {
@@ -280,7 +263,7 @@ init()
+
@@ -355,14 +347,16 @@ init()
-
+
+
+
@@ -372,43 +366,49 @@ init()
-
+
+
+
{{ t('chart.textColor') }}
-
+
+
+
{{ t('chart.backgroundColor') }}
-
+
+
+
i.dataeaseName)
if (conditions?.length > 0) {
- const { tableCell, basicStyle } = parseJson(chart.customAttr)
- const valueColor = tableCell.tableFontColor
- let valueBgColor = hexColorToRGBA(tableCell.tableItemBgColor, basicStyle.alpha)
+ const { tableCell, basicStyle, tableHeader } = parseJson(chart.customAttr)
const enableTableCrossBG = tableCell.enableTableCrossBG
- if (enableTableCrossBG) {
- valueBgColor = null
- }
+ const valueColor = tableCell.tableFontColor
+ const valueBgColor = enableTableCrossBG
+ ? null
+ : hexColorToRGBA(tableCell.tableItemBgColor, basicStyle.alpha)
+ const headerValueColor = tableHeader.tableHeaderFontColor
+ const headerValueBgColor = hexColorToRGBA(tableHeader.tableHeaderBgColor, basicStyle.alpha)
for (let i = 0; i < conditions.length; i++) {
const field = conditions[i]
+ let defaultValueColor = valueColor
+ let defaultBgColor = valueBgColor
+ // 透视表表头颜色配置
+ if (chart.type === 'table-pivot' && dimFields.includes(field.field.dataeaseName)) {
+ defaultValueColor = headerValueColor
+ defaultBgColor = headerValueBgColor
+ }
res.text.push({
field: field.field.dataeaseName,
- mapping(value) {
+ mapping(value, rowData) {
+ // 总计小计
+ if (rowData?.isTotals) {
+ return null
+ }
+ // 表头
+ if (rowData?.id && rowData?.field === rowData.id) {
+ return null
+ }
return {
- fill: mappingColor(value, valueColor, field, 'color')
+ fill: mappingColor(value, defaultValueColor, field, 'color')
}
}
})
res.background.push({
field: field.field.dataeaseName,
- mapping(value) {
- const fill = mappingColor(value, valueBgColor, field, 'backgroundColor')
+ mapping(value, rowData) {
+ if (rowData?.isTotals) {
+ return null
+ }
+ if (rowData?.id && rowData?.field === rowData.id) {
+ return null
+ }
+ const fill = mappingColor(value, defaultBgColor, field, 'backgroundColor')
return fill ? { fill } : null
}
})