forked from github/dataease
Merge pull request #134 from dataease/pr@dev@饼图标签增加引导线选项
feat: 饼图标签增加引导线设置
This commit is contained in:
XiaJunjie2020
GitHub
commit
a4b210fb51
@ -736,7 +736,10 @@ export default {
|
||||
change_ds: 'Change Dataset',
|
||||
change_ds_tip: 'Tips：Change Dataset will change fields,you need rebuild chart',
|
||||
axis_name_color: 'Name Color',
|
||||
axis_name_fontsize: 'Name Fontsize'
|
||||
axis_name_fontsize: 'Name Fontsize',
|
||||
pie_label_line_show: 'Line',
|
||||
outside: 'Outside',
|
||||
center: 'Center'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
|
||||
|
||||
@ -778,7 +778,10 @@ export default {
|
||||
change_ds: '更換數據集',
|
||||
change_ds_tip: '提示：更換數據集將導致字段發生變化，需重新製作視圖',
|
||||
axis_name_color: '名稱顏色',
|
||||
axis_name_fontsize: '名稱字體'
|
||||
axis_name_fontsize: '名稱字體',
|
||||
pie_label_line_show: '引導線',
|
||||
outside: '外',
|
||||
center: '中心'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: '有多個sheet頁面，默認抽取第一個',
|
||||
|
||||
@ -736,7 +736,10 @@ export default {
|
||||
change_ds: '更换数据集',
|
||||
change_ds_tip: '提示：更换数据集将导致字段发生变化，需重新制作视图',
|
||||
axis_name_color: '名称颜色',
|
||||
axis_name_fontsize: '名称字体'
|
||||
axis_name_fontsize: '名称字体',
|
||||
pie_label_line_show: '引导线',
|
||||
outside: '外',
|
||||
center: '中心'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: '有多个 Sheet 页，默认抽取第一个',
|
||||
|
||||
@ -20,7 +20,7 @@ export const DEFAULT_SIZE = {
|
||||
lineSmooth: false,
|
||||
lineArea: false,
|
||||
pieInnerRadius: 0,
|
||||
pieOuterRadius: 60,
|
||||
pieOuterRadius: 80,
|
||||
pieRoseType: 'radius',
|
||||
pieRoseRadius: 5,
|
||||
funnelWidth: 80,
|
||||
@ -45,7 +45,10 @@ export const DEFAULT_LABEL = {
|
||||
color: '#909399',
|
||||
fontSize: '10',
|
||||
formatter: '{c}',
|
||||
gaugeFormatter: '{value}'
|
||||
gaugeFormatter: '{value}',
|
||||
labelLine: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
export const DEFAULT_TOOLTIP = {
|
||||
show: true,
|
||||
|
||||
@ -29,6 +29,7 @@ export function basePieOption(chart_option, chart) {
|
||||
// label
|
||||
if (customAttr.label) {
|
||||
chart_option.series[0].label = customAttr.label
|
||||
chart_option.series[0].labelLine = customAttr.label.labelLine
|
||||
}
|
||||
const valueArr = chart.data.series[0].data
|
||||
for (let i = 0; i < valueArr.length; i++) {
|
||||
|
||||
@ -12,6 +12,9 @@
|
||||
<!-- <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.pie_label_line_show')" class="form-item">
|
||||
<el-checkbox v-model="labelForm.labelLine.show" @change="changeLabelAttr">{{ $t('chart.pie_label_line_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" />
|
||||
@ -21,13 +24,9 @@
|
||||
<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 :label="$t('chart.label_position')" class="form-item">
|
||||
<el-radio-group v-model="labelForm.position" size="mini" @change="changeLabelAttr">
|
||||
<el-radio-button label="inside">{{ $t('chart.inside') }}</el-radio-button>
|
||||
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
|
||||
<el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
|
||||
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
|
||||
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
<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">
|
||||
<span slot="label">
|
||||
@ -35,7 +34,7 @@
|
||||
<span>{{ $t('chart.content_formatter') }}</span>
|
||||
<el-tooltip class="item" effect="dark" placement="bottom">
|
||||
<div slot="content">
|
||||
字符串支持用 \n 换行<br>字符串模板 模板变量有：<br>{a}：系列名。<br>{b}：数据名。<br>{c}：数据值。
|
||||
字符串支持用 \n 换行<br>字符串模板 模板变量有：<br>{a}：系列名。<br>{b}：数据名。<br>{c}：数据值。<br>{d}：百分比（用于饼图等）。
|
||||
</div>
|
||||
<i class="el-icon-info" style="cursor: pointer;" />
|
||||
</el-tooltip>
|
||||
@ -97,7 +96,16 @@ export default {
|
||||
return {
|
||||
labelForm: JSON.parse(JSON.stringify(DEFAULT_LABEL)),
|
||||
fontSize: [],
|
||||
isSetting: false
|
||||
isSetting: false,
|
||||
labelPosition: [
|
||||
{ name: this.$t('chart.inside'), value: 'inside' },
|
||||
{ name: this.$t('chart.outside'), value: 'outside' },
|
||||
{ name: this.$t('chart.center'), value: 'center' },
|
||||
{ name: this.$t('chart.text_pos_top'), value: 'top' },
|
||||
{ name: this.$t('chart.text_pos_bottom'), value: 'bottom' },
|
||||
{ name: this.$t('chart.text_pos_left'), value: 'left' },
|
||||
{ name: this.$t('chart.text_pos_right'), value: 'right' }
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -113,6 +121,9 @@ export default {
|
||||
}
|
||||
if (customAttr.label) {
|
||||
this.labelForm = customAttr.label
|
||||
if (!this.labelForm.labelLine) {
|
||||
this.labelForm.labelLine = JSON.parse(JSON.stringify(DEFAULT_LABEL.labelLine))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user