public/dataease
1
0
Fork 0
mirror of https://github.com/dataease/dataease.git synced 2026-05-24 06:18:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(视图):图表类型新增：gauge

Browse Source
This commit is contained in:
junjie
2021-05-14 18:21:03 +08:00
parent 2e0a4e2ee7
commit c55b7dfe01
10 changed files with 153 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,12 +5,13 @@
</template>
<script>
import { BASE_BAR, BASE_LINE, HORIZONTAL_BAR, BASE_PIE, BASE_FUNNEL, BASE_RADAR } from '../chart/chart'
import { BASE_BAR, BASE_LINE, HORIZONTAL_BAR, BASE_PIE, BASE_FUNNEL, BASE_RADAR, BASE_GAUGE } from '../chart/chart'
import { baseBarOption, stackBarOption, horizontalBarOption, horizontalStackBarOption } from '../chart/bar/bar'
import { baseLineOption, stackLineOption } from '../chart/line/line'
import { basePieOption, rosePieOption } from '../chart/pie/pie'
import { baseFunnelOption } from '../chart/funnel/funnel'
import { baseRadarOption } from '../chart/radar/radar'
import { baseGaugeOption } from '../chart/gauge/gauge'
import eventBus from '@/components/canvas/utils/eventBus'
import { uuid } from 'vue-uuid'
@@ -91,6 +92,8 @@ export default {
chart_option = baseFunnelOption(JSON.parse(JSON.stringify(BASE_FUNNEL)), chart)
} else if (chart.type === 'radar') {
chart_option = baseRadarOption(JSON.parse(JSON.stringify(BASE_RADAR)), chart)
} else if (chart.type === 'gauge') {
chart_option = baseGaugeOption(JSON.parse(JSON.stringify(BASE_GAUGE)), chart)
}
this.myEcharts(chart_option)
},

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

@@ -7,7 +7,7 @@
trigger="click"
>
<el-col>
<el-form ref="labelForm" :model="labelForm" label-width="80px" size="mini">
<el-form v-show="chart.type && !chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
@@ -43,6 +43,28 @@
<el-input v-model="labelForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />
</el-form-item>
</el-form>
<el-form v-show="chart.type && chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<colorPicker v-model="labelForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLabelAttr" />
</el-form-item>
<el-form-item class="form-item">
<span slot="label">
<span class="span-box">
<span>{{ $t('chart.content_formatter') }}</span>
</span>
</span>
<el-input v-model="labelForm.gaugeFormatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />
</el-form-item>
</el-form>
</el-col>
<el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.label') }}<i class="el-icon-setting el-icon--right" /></el-button>

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

@@ -98,6 +98,21 @@
</el-select>
</el-form-item>
</el-form>
<el-form v-show="chart.type && chart.type.includes('gauge')" ref="sizeFormGauge" :model="sizeForm" label-width="100px" size="mini">
<el-form-item :label="$t('chart.min')" class="form-item form-item-slider">
<el-input-number v-model="sizeForm.gaugeMin" size="mini" @change="changeBarSizeCase" />
</el-form-item>
<el-form-item :label="$t('chart.max')" class="form-item form-item-slider">
<el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase" />
</el-form-item>
<el-form-item :label="$t('chart.start_angle')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.gaugeStartAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
</el-form-item>
<el-form-item :label="$t('chart.end_angle')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.gaugeEndAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
</el-form-item>
</el-form>
</el-col>
<el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.size') }}<i class="el-icon-setting el-icon--right" /></el-button>