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

feat(视图): 尝试接入G2制作视图；增加水波图

Browse Source
This commit is contained in:
junjie 2021-09-08 17:17:24 +08:00
parent a68b7d28c0
commit b5bb3bf574
15 changed files with 416 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
backend/src/main/java/io/dataease/service/chart/ChartViewService.java
View File

@ -327,7 +327,7 @@ public class ChartViewService {
QueryProvider qp = ProviderFactory.getQueryProvider(ds.getType());
if (StringUtils.equalsIgnoreCase(table.getType(), "db")) {
datasourceRequest.setTable(dataTableInfoDTO.getTable());
if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType())) {
if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType()) || StringUtils.equalsIgnoreCase("liquid", view.getType())) {
datasourceRequest.setQuery(qp.getSQLSummary(dataTableInfoDTO.getTable(), yAxis, customFilter, extFilterList));
} else if (StringUtils.containsIgnoreCase(view.getType(), "stack")) {
datasourceRequest.setQuery(qp.getSQLStack(dataTableInfoDTO.getTable(), xAxis, yAxis, customFilter, extFilterList, extStack, ds));
@ -339,7 +339,7 @@ public class ChartViewService {
datasourceRequest.setQuery(qp.getSQL(dataTableInfoDTO.getTable(), xAxis, yAxis, customFilter, extFilterList, ds));
}
} else if (StringUtils.equalsIgnoreCase(table.getType(), "sql")) {
if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType())) {
if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType()) || StringUtils.equalsIgnoreCase("liquid", view.getType())) {
datasourceRequest.setQuery(qp.getSQLSummaryAsTmp(dataTableInfoDTO.getSql(), yAxis, customFilter, extFilterList));
} else if (StringUtils.containsIgnoreCase(view.getType(), "stack")) {
datasourceRequest.setQuery(qp.getSQLAsTmpStack(dataTableInfoDTO.getSql(), xAxis, yAxis, customFilter, extFilterList, extStack));
@ -354,7 +354,7 @@ public class ChartViewService {
DataTableInfoDTO dt = new Gson().fromJson(table.getInfo(), DataTableInfoDTO.class);
List<DataSetTableUnionDTO> list = dataSetTableUnionService.listByTableId(dt.getList().get(0).getTableId());
String sql = dataSetTableService.getCustomSQLDatasource(dt, list, ds);
if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType())) {
if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType()) || StringUtils.equalsIgnoreCase("liquid", view.getType())) {
datasourceRequest.setQuery(qp.getSQLSummaryAsTmp(sql, yAxis, customFilter, extFilterList));
} else if (StringUtils.containsIgnoreCase(view.getType(), "stack")) {
datasourceRequest.setQuery(qp.getSQLAsTmpStack(sql, xAxis, yAxis, customFilter, extFilterList, extStack));
@ -386,7 +386,7 @@ public class ChartViewService {
String tableName = "ds_" + table.getId().replaceAll("-", "_");
datasourceRequest.setTable(tableName);
QueryProvider qp = ProviderFactory.getQueryProvider(ds.getType());
if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType())) {
if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType()) || StringUtils.equalsIgnoreCase("liquid", view.getType())) {
datasourceRequest.setQuery(qp.getSQLSummary(tableName, yAxis, customFilter, extFilterList));
} else if (StringUtils.containsIgnoreCase(view.getType(), "stack")) {
datasourceRequest.setQuery(qp.getSQLStack(tableName, xAxis, yAxis, customFilter, extFilterList, extStack, ds));

1
frontend/package.json
View File

@ -15,6 +15,7 @@
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
},
"dependencies": {
"@antv/g2plot": "^2.3.32",
"@riophae/vue-treeselect": "0.4.0",
"@tinymce/tinymce-vue": "^3.2.8",
"axios": "^0.21.1",

14
frontend/src/components/canvas/custom-component/UserView.vue
View File

@ -16,7 +16,8 @@
{{ $t('chart.chart_error_tips') }}
</div>
</div>
<chart-component v-if="httpRequest.status &&chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :ref="element.propValue.id" class="chart-class" :chart="chart" :track-menu="trackMenu" @onChartClick="chartClick" />
<chart-component v-if="httpRequest.status &&chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'echarts'" :ref="element.propValue.id" class="chart-class" :chart="chart" :track-menu="trackMenu" @onChartClick="chartClick" />
<chart-component-g2 v-if="httpRequest.status &&chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'g2'" :ref="element.propValue.id" class="chart-class" :chart="chart" :track-menu="trackMenu" @onChartClick="chartClick" />
<!-- <chart-component :ref="element.propValue.id" class="chart-class" :chart="chart" :track-menu="trackMenu" @onChartClick="chartClick" />-->
<table-normal v-if="httpRequest.status &&chart.type && chart.type.includes('table')" :ref="element.propValue.id" :show-summary="chart.type === 'table-normal'" :chart="chart" class="table-class" />
<label-normal v-if="httpRequest.status && chart.type && chart.type.includes('text')" :ref="element.propValue.id" :chart="chart" class="table-class" />
@ -43,9 +44,10 @@ import { deepCopy } from '@/components/canvas/utils/utils'
import { getToken, getLinkToken } from '@/utils/auth'
import DrillPath from '@/views/chart/view/DrillPath'
import { areaMapping } from '@/api/map/map'
import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
export default {
name: 'UserView',
components: { ChartComponent, TableNormal, LabelNormal, DrillPath },
components: { ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
props: {
element: {
type: Object,
@ -434,6 +436,14 @@ export default {
this.destroyTimeMachine()
}, 200)
}
},
renderComponent() {
if (this.chart.type === 'liquid') {
return 'g2'
} else {
return 'echarts'
}
}
}
}

1
frontend/src/icons/svg/liquid.svg Normal file
View File

@ -0,0 +1 @@
<svg t="1631072907294" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3122" width="200" height="200"><path d="M512 51.2C257.504 51.2 51.2 257.504 51.2 512S257.504 972.8 512 972.8 972.8 766.496 972.8 512 766.496 51.2 512 51.2m0 42.624c230.592 0 418.176 187.584 418.176 418.176 0 230.592-187.584 418.176-418.176 418.176-230.592 0-418.176-187.584-418.176-418.176C93.824 281.408 281.408 93.824 512 93.824" p-id="3123"></path><path d="M757.92 598.88c-56.704 0-113.856-13.6-164.352-39.296-37.408-19.04-70.016-46.016-100.224-74.848-29.536-28.16-58.944-52.8-98.944-64.992-17.472-5.312-69.76-20.448-129.472 1.024a190.624 190.624 0 0 0-75.872 50.304A187.264 187.264 0 0 0 153.6 528.96c10.88 190.304 168.32 341.44 361.536 341.44 175.328 0 321.568-124.32 355.264-289.504a362.048 362.048 0 0 1-112.48 17.984" p-id="3124"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 867 B

15
frontend/src/lang/en.js
View File

@ -862,7 +862,20 @@ export default {
yAxis_main: 'Main Vertical Axis',
yAxis_ext: 'Ext Vertical Axis',
total: 'Total',
items: 'Items'
items: 'Items',
chart_liquid: 'Liquid',
drag_block_progress: 'Progress',
liquid_max: 'End Value',
liquid_outline_border: 'Border Width',
liquid_outline_distance: 'Border Distance',
liquid_wave_length: 'Wave Length',
liquid_wave_count: 'Wave Count',
liquid_shape: 'Shape',
liquid_shape_circle: 'Circle',
liquid_shape_diamond: 'Diamond',
liquid_shape_triangle: 'Triangle',
liquid_shape_pin: 'Pin',
liquid_shape_rect: 'Rect'
},
dataset: {
sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',

15
frontend/src/lang/tw.js
View File

@ -861,7 +861,20 @@ export default {
yAxis_main: '主縱軸',
yAxis_ext: '副縱軸',
total: '共',
items: '條數據'
items: '條數據',
chart_liquid: '水波圖',
drag_block_progress: '進度指示',
liquid_max: '目標值',
liquid_outline_border: '邊框粗細',
liquid_outline_distance: '邊框間隔',
liquid_wave_length: '水波長度',
liquid_wave_count: '水波數量',
liquid_shape: '形狀',
liquid_shape_circle: '圓形',
liquid_shape_diamond: '菱形',
liquid_shape_triangle: '三角形',
liquid_shape_pin: '氣球',
liquid_shape_rect: '矩形'
},
dataset: {
sheet_warn: '有多個sheet頁面，默認抽取第一個',

15
frontend/src/lang/zh.js
View File

@ -893,7 +893,20 @@ export default {
yAxis_main: '主纵轴',
yAxis_ext: '副纵轴',
total: '共',
items: '条数据'
items: '条数据',
chart_liquid: '水波图',
drag_block_progress: '进度指示',
liquid_max: '目标值',
liquid_outline_border: '边框粗细',
liquid_outline_distance: '边框间隔',
liquid_wave_length: '水波长度',
liquid_wave_count: '水波数量',
liquid_shape: '形状',
liquid_shape_circle: '圆形',
liquid_shape_diamond: '菱形',
liquid_shape_triangle: '三角形',
liquid_shape_pin: '气球',
liquid_shape_rect: '矩形'
},
dataset: {
sheet_warn: '有多个 Sheet 页，默认抽取第一个',

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

@ -42,7 +42,14 @@ export const DEFAULT_SIZE = {
scatterSymbol: 'circle',
scatterSymbolSize: 20,
treemapWidth: 80,
treemapHeight: 80
treemapHeight: 80,
liquidMax: 100,
liquidSize: 80,
liquidOutlineBorder: 4,
liquidOutlineDistance: 8,
liquidWaveLength: 128,
liquidWaveCount: 3,
liquidShape: 'circle'
}
export const DEFAULT_LABEL = {
show: false,

95
frontend/src/views/chart/chart/liquid/liquid.js Normal file
View File

@ -0,0 +1,95 @@
import { Liquid } from '@antv/g2plot'
import { digToHex } from '@/views/chart/chart/util'
import { DEFAULT_SIZE } from '@/views/chart/chart/chart'
export function baseLiquid(plot, container, chart) {
let value = 0
const colors = []
let max
let radius
let outlineBorder
let outlineDistance
let waveLength
let waveCount
let bgColor
let shape
let labelContent
if (chart.data) {
if (chart.data.series.length > 0) {
value = chart.data.series[0].data[0].value
}
}
let customAttr = {}
if (chart.customAttr) {
customAttr = JSON.parse(chart.customAttr)
// color
if (customAttr.color) {
const c = JSON.parse(JSON.stringify(customAttr.color))
const alpha = digToHex(parseInt(c.alpha))
c.colors.forEach(ele => {
colors.push(ele.concat(alpha))
})
}
// size
if (customAttr.size) {
const size = JSON.parse(JSON.stringify(customAttr.size))
max = size.liquidMax ? size.liquidMax : DEFAULT_SIZE.liquidMax
radius = parseFloat((size.liquidSize ? size.liquidSize : DEFAULT_SIZE.liquidSize) / 100)
outlineBorder = parseInt(size.liquidOutlineBorder ? size.liquidOutlineBorder : DEFAULT_SIZE.liquidOutlineBorder)
outlineDistance = parseInt(size.liquidOutlineDistance ? size.liquidOutlineDistance : DEFAULT_SIZE.liquidOutlineDistance)
waveLength = parseInt(size.liquidWaveLength ? size.liquidWaveLength : DEFAULT_SIZE.liquidWaveLength)
waveCount = parseInt(size.liquidWaveCount ? size.liquidWaveCount : DEFAULT_SIZE.liquidWaveCount)
shape = size.liquidShape ? size.liquidShape : DEFAULT_SIZE.liquidShape
}
// label
if (customAttr.label) {
const label = JSON.parse(JSON.stringify(customAttr.label))
if (label.show) {
labelContent = {
style: ({ percent }) => ({
fontSize: parseInt(label.fontSize),
color: label.color
})
}
} else {
labelContent = false
}
}
}
let customStyle
if (chart.customStyle) {
customStyle = JSON.parse(chart.customStyle)
if (customStyle.background) {
bgColor = customStyle.background.color.concat(digToHex(parseInt(customStyle.background.alpha)))
}
}
// 开始渲染
if (plot) {
plot.destroy()
}
plot = new Liquid(container, {
theme: {
styleSheet: {
brandColor: colors[0],
paletteQualitative10: colors,
backgroundColor: bgColor
}
},
percent: (parseFloat(value) / parseFloat(max)),
radius: radius,
shape: shape,
outline: {
border: outlineBorder,
distance: outlineDistance
},
wave: {
length: waveLength,
count: waveCount
},
statistic: {
content: labelContent
}
})
plot.render()
return plot
}

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

@ -17,3 +17,12 @@ export function hexColorToRGBA(hex, alpha) {
return 'rgb(0,0,0)'
}
}
export function digToHex(dig) {
let prefix = ''
const num = parseInt(dig * 2.55)
if (num < 16) {
prefix = '0'
}
return prefix.concat(num.toString(16).toUpperCase())
}

162
frontend/src/views/chart/components/ChartComponentG2.vue Normal file
View File

@ -0,0 +1,162 @@
<template>
<div style="display: flex;">
<view-track-bar ref="viewTrack" :track-menu="trackMenu" class="track-bar" :style="trackBarStyleTime" @trackClick="trackClick" />
<div :id="chartId" style="width: 100%;height: 100%;overflow: hidden;" :style="{ borderRadius: borderRadius}" />
</div>
</template>
<script>
import { baseLiquid } from '@/views/chart/chart/liquid/liquid'
// import eventBus from '@/components/canvas/utils/eventBus'
import { uuid } from 'vue-uuid'
import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
export default {
name: 'ChartComponentG2',
components: { ViewTrackBar },
props: {
chart: {
type: Object,
required: true
},
filter: {
type: Object,
required: false,
default: function() {
return {}
}
},
trackMenu: {
type: Array,
required: false,
default: function() {
return ['drill']
}
}
},
data() {
return {
myChart: null,
chartId: uuid.v1(),
showTrackBar: true,
trackBarStyle: {
position: 'absolute',
left: '0px',
top: '0px'
},
pointParam: null,
dynamicAreaCode: null,
borderRadius: '0px'
}
},
computed: {
trackBarStyleTime() {
return this.trackBarStyle
}
},
watch: {
chart: {
handler(newVal, oldVla) {
this.preDraw()
},
deep: true
},
resize() {
this.drawEcharts()
}
},
mounted() {
this.preDraw()
},
methods: {
preDraw() {
// 基于准备好的dom，初始化echarts实例
// 渲染echart等待dom加载完毕,渲染之前先尝试销毁具有相同id的echart 放置多次切换仪表板有重复id情况
new Promise((resolve) => { resolve() }).then(() => {
// 此dom为echarts图标展示dom
// this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
// if (!this.myChart) {
// this.myChart = this.$echarts.init(document.getElementById(this.chartId))
// }
this.drawEcharts()
// this.myChart.off('click')
// this.myChart.on('click', function(param) {
// that.pointParam = param
// if (that.trackMenu.length < 2) { // 只有一个事件直接调用
// that.trackClick(that.trackMenu[0])
// } else { // 视图关联多个事件
// that.trackBarStyle.left = param.event.offsetX + 'px'
// that.trackBarStyle.top = (param.event.offsetY - 15) + 'px'
// that.$refs.viewTrack.trackButtonClick()
// }
// })
})
},
drawEcharts() {
const chart = this.chart
// type
if (chart.type === 'liquid') {
this.myChart = baseLiquid(this.myChart, this.chartId, chart)
}
this.setBackGroundBorder()
// console.log(JSON.stringify(chart_option))
},
// myEcharts(option) {
// // 指定图表的配置项和数据
// const chart = this.myChart
// this.setBackGroundBorder()
// setTimeout(chart.setOption(option, true), 500)
// window.onresize = function() {
// chart.resize()
// }
// },
setBackGroundBorder() {
if (this.chart.customStyle) {
const customStyle = JSON.parse(this.chart.customStyle)
if (customStyle.background) {
this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
}
}
},
chartResize() {
// 指定图表的配置项和数据
// const chart = this.myChart
// chart.resize()
},
trackClick(trackAction) {
const param = this.pointParam
if (!param || !param.data || !param.data.dimensionList) {
// 地图提示没有关联字段 其他没有维度信息的 直接返回
if (this.chart.type === 'map') {
this.$warning(this.$t('panel.no_drill_field'))
}
return
}
const linkageParam = {
viewId: this.chart.id,
dimensionList: this.pointParam.data.dimensionList,
quotaList: this.pointParam.data.quotaList
}
switch (trackAction) {
case 'drill':
this.$emit('onChartClick', this.pointParam)
break
case 'linkage':
this.$store.commit('addViewTrackFilter', linkageParam)
break
default:
break
}
}
}
}
</script>
<style scoped>
</style>

6
frontend/src/views/chart/components/shape-attr/LabelSelector.vue
View File

@ -17,12 +17,12 @@
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="labelForm.color" class="color-picker-style" @change="changeLabelAttr" />
</el-form-item>
<el-form-item :label="$t('chart.label_position')" class="form-item">
<el-form-item v-show="chart.type && chart.type !== 'liquid'" :label="$t('chart.label_position')" class="form-item">
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
<el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item class="form-item">
<el-form-item v-show="chart.type && chart.type !== 'liquid'" class="form-item">
<span slot="label">
<span class="span-box">
<span>{{ $t('chart.content_formatter') }}</span>
@ -126,7 +126,7 @@ export default {
},
init() {
const arr = []
for (let i = 10; i <= 20; i = i + 2) {
for (let i = 10; i <= 40; i = i + 2) {
arr.push({
name: i + '',
value: i + ''

46
frontend/src/views/chart/components/shape-attr/SizeSelector.vue
View File

@ -218,6 +218,37 @@
<el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="40" @change="changeBarSizeCase" />
</el-form-item>
</el-form>
<el-form v-show="chart.type && chart.type === 'liquid'" ref="sizeFormLine" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.liquid_shape')" class="form-item">
<el-select v-model="sizeForm.liquidShape" :placeholder="$t('chart.liquid_shape')" @change="changeBarSizeCase">
<el-option
v-for="item in liquidShapeOptions"
:key="item.value"
:label="item.name"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.liquid_max')" class="form-item form-item-slider">
<el-input-number v-model="sizeForm.liquidMax" :min="1" size="mini" @change="changeBarSizeCase" />
</el-form-item>
<el-form-item :label="$t('chart.radar_size')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.liquidSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
</el-form-item>
<el-form-item :label="$t('chart.liquid_outline_border')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.liquidOutlineBorder" show-input :show-input-controls="false" input-size="mini" :min="1" :max="20" @change="changeBarSizeCase" />
</el-form-item>
<el-form-item :label="$t('chart.liquid_outline_distance')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.liquidOutlineDistance" show-input :show-input-controls="false" input-size="mini" :min="1" :max="20" @change="changeBarSizeCase" />
</el-form-item>
<el-form-item :label="$t('chart.liquid_wave_length')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.liquidWaveLength" show-input :show-input-controls="false" input-size="mini" :min="1" :max="500" @change="changeBarSizeCase" />
</el-form-item>
<el-form-item :label="$t('chart.liquid_wave_count')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.liquidWaveCount" show-input :show-input-controls="false" input-size="mini" :min="1" :max="10" @change="changeBarSizeCase" />
</el-form-item>
</el-form>
</el-col>
</div>
</template>
@ -250,6 +281,13 @@ export default {
{ name: this.$t('chart.line_symbol_pin'), value: 'pin' },
{ name: this.$t('chart.line_symbol_arrow'), value: 'arrow' }
],
liquidShapeOptions: [
{ name: this.$t('chart.liquid_shape_circle'), value: 'circle' },
{ name: this.$t('chart.liquid_shape_diamond'), value: 'diamond' },
{ name: this.$t('chart.liquid_shape_triangle'), value: 'triangle' },
{ name: this.$t('chart.liquid_shape_pin'), value: 'pin' },
{ name: this.$t('chart.liquid_shape_rect'), value: 'rect' }
],
fontSize: []
}
},
@ -279,6 +317,14 @@ export default {
this.sizeForm.treemapWidth = this.sizeForm.treemapWidth ? this.sizeForm.treemapWidth : 80
this.sizeForm.treemapHeight = this.sizeForm.treemapHeight ? this.sizeForm.treemapHeight : 80
this.sizeForm.radarSize = this.sizeForm.radarSize ? this.sizeForm.radarSize : 80
this.sizeForm.liquidShape = this.sizeForm.liquidShape ? this.sizeForm.liquidShape : DEFAULT_SIZE.liquidShape
this.sizeForm.liquidMax = this.sizeForm.liquidMax ? this.sizeForm.liquidMax : DEFAULT_SIZE.liquidMax
this.sizeForm.liquidSize = this.sizeForm.liquidSize ? this.sizeForm.liquidSize : DEFAULT_SIZE.liquidSize
this.sizeForm.liquidOutlineBorder = this.sizeForm.liquidOutlineBorder ? this.sizeForm.liquidOutlineBorder : DEFAULT_SIZE.liquidOutlineBorder
this.sizeForm.liquidOutlineDistance = this.sizeForm.liquidOutlineDistance ? this.sizeForm.liquidOutlineDistance : DEFAULT_SIZE.liquidOutlineDistance
this.sizeForm.liquidWaveLength = this.sizeForm.liquidWaveLength ? this.sizeForm.liquidWaveLength : DEFAULT_SIZE.liquidWaveLength
this.sizeForm.liquidWaveCount = this.sizeForm.liquidWaveCount ? this.sizeForm.liquidWaveCount : DEFAULT_SIZE.liquidWaveCount
}
}
},

2
frontend/src/views/chart/components/table/TableNormal.vue
View File

@ -33,7 +33,7 @@
<el-row v-show="chart.type === 'table-info'" class="table-page">
<span class="total-style">
{{ $t('chart.total') }}
<span>{{ chart.data.tableRow.length }}</span>
<span>{{ (chart.data && chart.data.tableRow)?chart.data.tableRow.length:0 }}</span>
{{ $t('chart.items') }}
</span>
<el-pagination

41
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -189,18 +189,23 @@
<svg-icon icon-class="radar" class="chart-icon" />
</span>
</el-radio>
<el-radio value="liquid" label="liquid">
<span :title="$t('chart.chart_liquid')">
<svg-icon icon-class="liquid" class="chart-icon" />
</span>
</el-radio>
<el-radio value="gauge" label="gauge">
<span :title="$t('chart.chart_gauge')">
<svg-icon icon-class="gauge" class="chart-icon" />
</span>
</el-radio>
</div>
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
<el-radio value="pie" label="pie">
<span :title="$t('chart.chart_pie')">
<svg-icon icon-class="pie" class="chart-icon" />
</span>
</el-radio>
</div>
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
<el-radio value="pie-rose" label="pie-rose">
<span :title="$t('chart.chart_pie_rose')">
<svg-icon icon-class="pie-rose" class="chart-icon" />
@ -217,8 +222,14 @@
</span>
</el-radio>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
</div>
<!-- <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">-->
<!-- <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>-->
<!-- <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>-->
<!-- <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>-->
<!-- <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>-->
<!-- <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>-->
<!-- </div>-->
</el-radio-group>
</div>
</el-row>
@ -254,7 +265,7 @@
/>
</span>
</el-row>
<el-row v-if="view.type !=='text' && view.type !== 'gauge'" class="padding-lr">
<el-row v-if="view.type !=='text' && view.type !== 'gauge' && view.type !== 'liquid'" class="padding-lr">
<span style="width: 80px;text-align: right;">
<span v-if="view.type && view.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
<span v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix')">{{ $t('chart.drag_block_type_axis') }}</span>
@ -296,6 +307,7 @@
<span v-else-if="view.type && view.type === 'map'">{{ $t('chart.chart_data') }}</span>
<span v-else-if="view.type && view.type.includes('tree')">{{ $t('chart.drag_block_treemap_size') }}</span>
<span v-else-if="view.type && view.type === 'chart-mix'">{{ $t('chart.drag_block_value_axis_main') }}</span>
<span v-else-if="view.type && view.type === 'liquid'">{{ $t('chart.drag_block_progress') }}</span>
/
<span>{{ $t('chart.quota') }}</span>
</span>
@ -418,7 +430,7 @@
<span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
</div>
</el-row>
<el-row v-if="view.type && view.type !== 'treemap' && !view.type.includes('table') && !view.type.includes('text') && !view.type.includes('radar') && !view.type.includes('gauge')" class="padding-lr" style="margin-top: 6px;">
<el-row v-if="view.type && view.type !== 'treemap' && !view.type.includes('table') && !view.type.includes('text') && !view.type.includes('radar') && !view.type.includes('gauge') && view.type !== 'liquid'" class="padding-lr" style="margin-top: 6px;">
<span style="width: 80px;text-align: right;">
<span>{{ $t('chart.drill') }}</span>
/
@ -471,7 +483,7 @@
<el-collapse-item v-show="!view.type.includes('table') && !view.type.includes('text')" name="label" :title="$t('chart.label')">
<label-selector :param="param" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
</el-collapse-item>
<el-collapse-item v-show="!view.type.includes('table') && !view.type.includes('text')" name="tooltip" :title="$t('chart.tooltip')">
<el-collapse-item v-show="!view.type.includes('table') && !view.type.includes('text') && view.type !== 'liquid'" name="tooltip" :title="$t('chart.tooltip')">
<tooltip-selector :param="param" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
</el-collapse-item>
</el-collapse>
@ -491,10 +503,10 @@
<el-collapse-item v-show="view.type && view.type.includes('radar')" name="split" :title="$t('chart.split')">
<split-selector :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />
</el-collapse-item>
<el-collapse-item name="title" :title="$t('chart.title')">
<el-collapse-item v-show="view.type && view.type !== 'liquid'" name="title" :title="$t('chart.title')">
<title-selector :param="param" class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
</el-collapse-item>
<el-collapse-item v-show="view.type && view.type !== 'map' && !view.type.includes('table') && !view.type.includes('text') && chart.type !== 'treemap'" name="legend" :title="$t('chart.legend')">
<el-collapse-item v-show="view.type && view.type !== 'map' && !view.type.includes('table') && !view.type.includes('text') && chart.type !== 'treemap' && view.type !== 'liquid'" name="legend" :title="$t('chart.legend')">
<legend-selector :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
</el-collapse-item>
<el-collapse-item name="background" :title="$t('chart.background')">
@ -510,7 +522,8 @@
<el-col style="height: 100%;min-width: 500px;border-top: 1px solid #E6E6E6;">
<el-row style="width: 100%;height: 100%;" class="padding-lr">
<div ref="imageWrapper" style="height: 100%">
<chart-component v-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text')" ref="dynamicChart" :chart-id="chart.id" :chart="chart" class="chart-class" @onChartClick="chartClick" />
<chart-component v-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'echarts'" ref="dynamicChart" :chart-id="chart.id" :chart="chart" class="chart-class" @onChartClick="chartClick" />
<chart-component-g2 v-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'g2'" ref="dynamicChart" :chart-id="chart.id" :chart="chart" class="chart-class" />
<table-normal v-if="httpRequest.status && chart.type && chart.type.includes('table')" :show-summary="chart.type === 'table-normal'" :chart="chart" class="table-class" />
<label-normal v-if="httpRequest.status && chart.type && chart.type.includes('text')" :chart="chart" class="table-class" />
<div v-if="!httpRequest.status" class="chart-error-class">
@ -670,9 +683,11 @@ import FieldEdit from '../../dataset/data/FieldEdit'
import { areaMapping } from '@/api/map/map'
import QuotaExtItem from '@/views/chart/components/drag-item/QuotaExtItem'
import YAxisExtSelector from '@/views/chart/components/component-style/YAxisExtSelector'
import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
export default {
name: 'ChartEdit',
components: {
ChartComponentG2,
YAxisExtSelector,
QuotaExtItem,
FilterItem,
@ -1593,6 +1608,14 @@ export default {
if (temp) return temp
}
}
},
renderComponent() {
if (this.chart.type === 'liquid') {
return 'g2'
} else {
return 'echarts'
}
}
}