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

feat: 矩形树图

Browse Source
This commit is contained in:
junjie 2021-08-10 11:00:38 +08:00
parent 91749926d4
commit 20fc994cac
7 changed files with 32 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -837,7 +837,10 @@ export default {
drill: 'Drill',
drag_block_treemap_label: 'Color Label',
drag_block_treemap_size: 'Color Size',
bubble_symbol: 'Shape'
bubble_symbol: 'Shape',
gap_width: 'Gap Width',
width: 'Width',
height: 'Height'
},
dataset: {
sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',

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

@ -837,7 +837,10 @@ export default {
drill: '鉆取',
drag_block_treemap_label: '色塊標簽',
drag_block_treemap_size: '色塊大小',
bubble_symbol: '圖形'
bubble_symbol: '圖形',
gap_width: '間隔',
width: '寬度',
height: '高度'
},
dataset: {
sheet_warn: '有多個sheet頁面，默認抽取第一個',

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

@ -837,7 +837,10 @@ export default {
drill: '钻取',
drag_block_treemap_label: '色块标签',
drag_block_treemap_size: '色块大小',
bubble_symbol: '图形'
bubble_symbol: '图形',
gap_width: '间隔',
width: '宽度',
height: '高度'
},
dataset: {
sheet_warn: '有多个 Sheet 页，默认抽取第一个',

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

@ -39,7 +39,9 @@ export const DEFAULT_SIZE = {
dimensionShow: true,
quotaShow: true,
scatterSymbol: 'circle',
scatterSymbolSize: 20
scatterSymbolSize: 20,
treemapWidth: 80,
treemapHeight: 80
}
export const DEFAULT_LABEL = {
show: false,

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

@ -24,12 +24,13 @@ export function baseTreemapOption(chart_option, chart) {
// chart_option.series[0].name = chart.data.series[0].name
// size
if (customAttr.size) {
// chart_option.series[0].radius = [customAttr.size.pieInnerRadius + '%', customAttr.size.pieOuterRadius + '%']
chart_option.series[0].width = (customAttr.size.treemapWidth ? customAttr.size.treemapWidth : 80) + '%'
chart_option.series[0].height = (customAttr.size.treemapHeight ? customAttr.size.treemapHeight : 80) + '%'
}
// label
if (customAttr.label) {
// chart_option.series[0].label = customAttr.label
}
// if (customAttr.label) {
// chart_option.series[0].label = customAttr.label
// }
const valueArr = chart.data.series[0].data
for (let i = 0; i < valueArr.length; i++) {
// const y = {

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

@ -151,6 +151,15 @@
<el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="20" @change="changeBarSizeCase" />
</el-form-item>
</el-form>
<el-form v-show="chart.type && chart.type === 'treemap'" ref="sizeFormLine" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.width')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.treemapWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
</el-form-item>
<el-form-item :label="$t('chart.height')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.treemapHeight" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
</el-form-item>
</el-form>
</el-col>
<!-- <el-popover-->
<!-- placement="right"-->
@ -353,6 +362,8 @@ export default {
}
if (customAttr.size) {
this.sizeForm = customAttr.size
this.sizeForm.treemapWidth = this.sizeForm.treemapWidth ? this.sizeForm.treemapWidth : 80
this.sizeForm.treemapHeight = this.sizeForm.treemapHeight ? this.sizeForm.treemapHeight : 80
}
}
},

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

@ -427,7 +427,7 @@
<el-collapse-item name="color" :title="$t('chart.color')">
<color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
</el-collapse-item>
<el-collapse-item v-show="chart.type !== 'map' && chart.type !== 'treemap'" name="size" :title="$t('chart.size')">
<el-collapse-item v-show="chart.type !== 'map'" name="size" :title="$t('chart.size')">
<size-selector :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
</el-collapse-item>
<el-collapse-item v-show="!view.type.includes('table') && !view.type.includes('text') && view.type !== 'treemap'" name="label" :title="$t('chart.label')">