Skip to content

D
dataease
提交 4c920bdc authored 作者: junjie's avatar junjie
浏览文件
操作

refactor(视图): 增加 标签、tooltip、坐标轴 设置

上级 fb23a459
隐藏空白字符变更
内嵌 并排
正在显示 包含 665 行增加 和 16 行删除
frontend/src/lang/zh.js
浏览文件 @ 4c920bdc
...@@ -658,7 +658,21 @@ export default { ...@@ -658,7 +658,21 @@ export default {
legend: '图例', legend: '图例',
shape: '形状', shape: '形状',
polygon: '多边形', polygon: '多边形',
circle: '圆形' circle: '圆形',
label: '标签',
label_position: '标签位置',
content_formatter: '内容格式',
inside: '内',
tooltip: '提示',
tooltip_item: '数据项',
tooltip_axis: '坐标轴',
formatter_plc: '内容格式为空时，显示默认格式',
xAxis: '横轴',
yAxis: '纵轴',
position: '位置',
rotate: '角度',
name: '名称',
icon: '图标'
}, },
dataset: { dataset: {
datalist: '数据集', datalist: '数据集',
......
frontend/src/views/chart/chart/bar/bar.js
浏览文件 @ 4c920bdc
...@@ -9,6 +9,13 @@ export function baseBarOption(chart_option, chart) { ...@@ -9,6 +9,13 @@ export function baseBarOption(chart_option, chart) {
if (customAttr.color) { if (customAttr.color) {
chart_option.color = customAttr.color.colors chart_option.color = customAttr.color.colors
} }
// tooltip
if (customAttr.tooltip) {
const tooltip = JSON.parse(JSON.stringify(customAttr.tooltip))
const reg = new RegExp('\n', 'g')
tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
chart_option.tooltip = tooltip
}
} }
// 处理data // 处理data
if (chart.data) { if (chart.data) {
...@@ -30,6 +37,10 @@ export function baseBarOption(chart_option, chart) { ...@@ -30,6 +37,10 @@ export function baseBarOption(chart_option, chart) {
y.barGap = customAttr.size.barGap y.barGap = customAttr.size.barGap
} }
} }
// label
if (customAttr.label) {
y.label = customAttr.label
}
y.type = 'bar' y.type = 'bar'
chart_option.legend.data.push(y.name) chart_option.legend.data.push(y.name)
chart_option.series.push(y) chart_option.series.push(y)
...@@ -61,6 +72,12 @@ export function horizontalBarOption(chart_option, chart) { ...@@ -61,6 +72,12 @@ export function horizontalBarOption(chart_option, chart) {
if (customAttr.color) { if (customAttr.color) {
chart_option.color = customAttr.color.colors chart_option.color = customAttr.color.colors
} }
if (customAttr.tooltip) {
const tooltip = JSON.parse(JSON.stringify(customAttr.tooltip))
const reg = new RegExp('\n', 'g')
tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
chart_option.tooltip = tooltip
}
} }
// 处理data // 处理data
if (chart.data) { if (chart.data) {
...@@ -82,6 +99,10 @@ export function horizontalBarOption(chart_option, chart) { ...@@ -82,6 +99,10 @@ export function horizontalBarOption(chart_option, chart) {
y.barGap = customAttr.size.barGap y.barGap = customAttr.size.barGap
} }
} }
// label
if (customAttr.label) {
y.label = customAttr.label
}
y.type = 'bar' y.type = 'bar'
chart_option.legend.data.push(y.name) chart_option.legend.data.push(y.name)
chart_option.series.push(y) chart_option.series.push(y)
......
frontend/src/views/chart/chart/chart.js
浏览文件 @ 4c920bdc
...@@ -18,10 +18,26 @@ export const DEFAULT_SIZE = { ...@@ -18,10 +18,26 @@ export const DEFAULT_SIZE = {
funnelWidth: 80, funnelWidth: 80,
radarShape: 'polygon' radarShape: 'polygon'
} }
export const DEFAULT_LABEL = {
show: false,
position: 'top',
color: '#909399',
fontSize: '10',
formatter: '{c}'
}
export const DEFAULT_TOOLTIP = {
show: true,
trigger: 'item',
textStyle: {
fontSize: '10',
color: '#909399'
},
formatter: ''
}
export const DEFAULT_TITLE_STYLE = { export const DEFAULT_TITLE_STYLE = {
show: true, show: true,
fontSize: '18', fontSize: '18',
color: '#000000', color: '#303133',
hPosition: 'center', hPosition: 'center',
vPosition: 'top', vPosition: 'top',
isItalic: false isItalic: false
...@@ -30,8 +46,30 @@ export const DEFAULT_LEGEND_STYLE = { ...@@ -30,8 +46,30 @@ export const DEFAULT_LEGEND_STYLE = {
show: true, show: true,
hPosition: 'center', hPosition: 'center',
vPosition: 'bottom', vPosition: 'bottom',
orient: 'horizontal' orient: 'horizontal',
icon: 'rect',
textStyle: {
color: '#333333',
fontSize: '12'
}
}
export const DEFAULT_XAXIS_STYLE = {
show: true,
position: 'bottom',
name: '',
axisLabel: {
rotate: 0
}
}
export const DEFAULT_YAXIS_STYLE = {
show: true,
position: 'left',
name: '',
axisLabel: {
rotate: 0
}
} }
// chart config
export const BASE_BAR = { export const BASE_BAR = {
title: { title: {
text: '' text: ''
...@@ -40,6 +78,9 @@ export const BASE_BAR = { ...@@ -40,6 +78,9 @@ export const BASE_BAR = {
legend: { legend: {
show: true, show: true,
type: 'scroll', type: 'scroll',
itemWidth: 10,
itemHeight: 10,
icon: 'rect',
data: [] data: []
}, },
xAxis: { xAxis: {
...@@ -63,6 +104,9 @@ export const HORIZONTAL_BAR = { ...@@ -63,6 +104,9 @@ export const HORIZONTAL_BAR = {
legend: { legend: {
show: true, show: true,
type: 'scroll', type: 'scroll',
itemWidth: 10,
itemHeight: 10,
icon: 'rect',
data: [] data: []
}, },
xAxis: { xAxis: {
...@@ -87,6 +131,9 @@ export const BASE_LINE = { ...@@ -87,6 +131,9 @@ export const BASE_LINE = {
legend: { legend: {
show: true, show: true,
type: 'scroll', type: 'scroll',
itemWidth: 10,
itemHeight: 10,
icon: 'rect',
data: [] data: []
}, },
xAxis: { xAxis: {
...@@ -108,13 +155,13 @@ export const BASE_PIE = { ...@@ -108,13 +155,13 @@ export const BASE_PIE = {
title: { title: {
text: '' text: ''
}, },
tooltip: { tooltip: {},
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: { legend: {
show: true, show: true,
type: 'scroll' type: 'scroll',
itemWidth: 10,
itemHeight: 10,
icon: 'rect'
}, },
series: [ series: [
{ {
...@@ -143,7 +190,10 @@ export const BASE_FUNNEL = { ...@@ -143,7 +190,10 @@ export const BASE_FUNNEL = {
}, },
legend: { legend: {
show: true, show: true,
type: 'scroll' type: 'scroll',
itemWidth: 10,
itemHeight: 10,
icon: 'rect'
}, },
series: [ series: [
{ {
...@@ -190,6 +240,11 @@ export const BASE_RADAR = { ...@@ -190,6 +240,11 @@ export const BASE_RADAR = {
}, },
tooltip: {}, tooltip: {},
legend: { legend: {
show: true,
type: 'scroll',
itemWidth: 10,
itemHeight: 10,
icon: 'rect',
data: [] data: []
}, },
radar: { radar: {
......
frontend/src/views/chart/chart/common/common.js
浏览文件 @ 4c920bdc
...@@ -16,6 +16,20 @@ export function componentStyle(chart_option, chart) { ...@@ -16,6 +16,20 @@ export function componentStyle(chart_option, chart) {
chart_option.legend.left = customStyle.legend.hPosition chart_option.legend.left = customStyle.legend.hPosition
chart_option.legend.top = customStyle.legend.vPosition chart_option.legend.top = customStyle.legend.vPosition
chart_option.legend.orient = customStyle.legend.orient chart_option.legend.orient = customStyle.legend.orient
chart_option.legend.icon = customStyle.legend.icon
chart_option.legend.textStyle = customStyle.legend.textStyle
}
if (customStyle.xAxis && (chart.type.includes('bar') || chart.type.includes('line'))) {
chart_option.xAxis.show = customStyle.xAxis.show
chart_option.xAxis.position = customStyle.xAxis.position
chart_option.xAxis.name = customStyle.xAxis.name
chart_option.xAxis.axisLabel = customStyle.xAxis.axisLabel
}
if (customStyle.yAxis && (chart.type.includes('bar') || chart.type.includes('line'))) {
chart_option.yAxis.show = customStyle.yAxis.show
chart_option.yAxis.position = customStyle.yAxis.position
chart_option.yAxis.name = customStyle.yAxis.name
chart_option.yAxis.axisLabel = customStyle.yAxis.axisLabel
} }
} }
} }
frontend/src/views/chart/chart/funnel/funnel.js
浏览文件 @ 4c920bdc
...@@ -9,6 +9,13 @@ export function baseFunnelOption(chart_option, chart) { ...@@ -9,6 +9,13 @@ export function baseFunnelOption(chart_option, chart) {
if (customAttr.color) { if (customAttr.color) {
chart_option.color = customAttr.color.colors chart_option.color = customAttr.color.colors
} }
// tooltip
if (customAttr.tooltip) {
const tooltip = JSON.parse(JSON.stringify(customAttr.tooltip))
const reg = new RegExp('\n', 'g')
tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
chart_option.tooltip = tooltip
}
} }
// 处理data // 处理data
if (chart.data) { if (chart.data) {
...@@ -19,6 +26,10 @@ export function baseFunnelOption(chart_option, chart) { ...@@ -19,6 +26,10 @@ export function baseFunnelOption(chart_option, chart) {
if (customAttr.size) { if (customAttr.size) {
chart_option.series[0].width = customAttr.size.funnelWidth + '%' chart_option.series[0].width = customAttr.size.funnelWidth + '%'
} }
// label
if (customAttr.label) {
chart_option.series[0].label = customAttr.label
}
const valueArr = chart.data.series[0].data const valueArr = chart.data.series[0].data
// max value // max value
chart_option.series[0].max = Math.max.apply(Math, valueArr) chart_option.series[0].max = Math.max.apply(Math, valueArr)
......
frontend/src/views/chart/chart/line/line.js
浏览文件 @ 4c920bdc
...@@ -9,6 +9,13 @@ export function baseLineOption(chart_option, chart) { ...@@ -9,6 +9,13 @@ export function baseLineOption(chart_option, chart) {
if (customAttr.color) { if (customAttr.color) {
chart_option.color = customAttr.color.colors chart_option.color = customAttr.color.colors
} }
// tooltip
if (customAttr.tooltip) {
const tooltip = JSON.parse(JSON.stringify(customAttr.tooltip))
const reg = new RegExp('\n', 'g')
tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
chart_option.tooltip = tooltip
}
} }
// 处理data // 处理data
if (chart.data) { if (chart.data) {
...@@ -31,6 +38,10 @@ export function baseLineOption(chart_option, chart) { ...@@ -31,6 +38,10 @@ export function baseLineOption(chart_option, chart) {
y.smooth = customAttr.size.lineSmooth y.smooth = customAttr.size.lineSmooth
customAttr.size.lineArea ? y.areaStyle = { opacity: 0.6 } : { opacity: 0 } customAttr.size.lineArea ? y.areaStyle = { opacity: 0.6 } : { opacity: 0 }
} }
// label
if (customAttr.label) {
y.label = customAttr.label
}
y.type = 'line' y.type = 'line'
chart_option.legend.data.push(y.name) chart_option.legend.data.push(y.name)
chart_option.series.push(y) chart_option.series.push(y)
......
frontend/src/views/chart/chart/pie/pie.js
浏览文件 @ 4c920bdc
...@@ -9,6 +9,13 @@ export function basePieOption(chart_option, chart) { ...@@ -9,6 +9,13 @@ export function basePieOption(chart_option, chart) {
if (customAttr.color) { if (customAttr.color) {
chart_option.color = customAttr.color.colors chart_option.color = customAttr.color.colors
} }
// tooltip
if (customAttr.tooltip) {
const tooltip = JSON.parse(JSON.stringify(customAttr.tooltip))
const reg = new RegExp('\n', 'g')
tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
chart_option.tooltip = tooltip
}
} }
// 处理data // 处理data
if (chart.data) { if (chart.data) {
...@@ -19,6 +26,10 @@ export function basePieOption(chart_option, chart) { ...@@ -19,6 +26,10 @@ export function basePieOption(chart_option, chart) {
if (customAttr.size) { if (customAttr.size) {
chart_option.series[0].radius = [customAttr.size.pieInnerRadius + '%', customAttr.size.pieOuterRadius + '%'] chart_option.series[0].radius = [customAttr.size.pieInnerRadius + '%', customAttr.size.pieOuterRadius + '%']
} }
// label
if (customAttr.label) {
chart_option.series[0].label = customAttr.label
}
const valueArr = chart.data.series[0].data const valueArr = chart.data.series[0].data
for (let i = 0; i < valueArr.length; i++) { for (let i = 0; i < valueArr.length; i++) {
const y = { const y = {
......
frontend/src/views/chart/chart/radar/radar.js
浏览文件 @ 4c920bdc
...@@ -13,6 +13,13 @@ export function baseRadarOption(chart_option, chart) { ...@@ -13,6 +13,13 @@ export function baseRadarOption(chart_option, chart) {
if (customAttr.size) { if (customAttr.size) {
chart_option.radar.shape = customAttr.size.radarShape chart_option.radar.shape = customAttr.size.radarShape
} }
// tooltip
if (customAttr.tooltip) {
const tooltip = JSON.parse(JSON.stringify(customAttr.tooltip))
const reg = new RegExp('\n', 'g')
tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
chart_option.tooltip = tooltip
}
} }
// 处理data // 处理data
if (chart.data) { if (chart.data) {
...@@ -26,6 +33,10 @@ export function baseRadarOption(chart_option, chart) { ...@@ -26,6 +33,10 @@ export function baseRadarOption(chart_option, chart) {
y.itemStyle = { y.itemStyle = {
color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha) color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha)
} }
// label
if (customAttr.label) {
y.label = customAttr.label
}
chart_option.legend.data.push(y.name) chart_option.legend.data.push(y.name)
y.value = JSON.parse(JSON.stringify(y.data)) y.value = JSON.parse(JSON.stringify(y.data))
chart_option.series[0].data.push(y) chart_option.series[0].data.push(y)
......
frontend/src/views/chart/components/ChartComponent.vue
浏览文件 @ 4c920bdc
...@@ -46,7 +46,7 @@ export default { ...@@ -46,7 +46,7 @@ export default {
drawEcharts() { drawEcharts() {
const chart = this.chart const chart = this.chart
let chart_option = {} let chart_option = {}
// todo type // type
if (chart.type === 'bar') { if (chart.type === 'bar') {
chart_option = baseBarOption(JSON.parse(JSON.stringify(BASE_BAR)), chart) chart_option = baseBarOption(JSON.parse(JSON.stringify(BASE_BAR)), chart)
} else if (chart.type === 'bar-stack') { } else if (chart.type === 'bar-stack') {
......
frontend/src/views/chart/components/component_style/LegendSelector.vue
浏览文件 @ 4c920bdc
...@@ -11,12 +11,30 @@ ...@@ -11,12 +11,30 @@
<el-form-item :label="$t('chart.show')" class="form-item"> <el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="legendForm.show" @change="changeLegendStyle">{{ $t('chart.show') }}</el-checkbox> <el-checkbox v-model="legendForm.show" @change="changeLegendStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.icon')" class="form-item">
<el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle">
<el-option
v-for="item in iconSymbolOptions"
:key="item.value"
:label="item.name"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.orient')" class="form-item"> <el-form-item :label="$t('chart.orient')" class="form-item">
<el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle"> <el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle">
<el-radio-button label="horizontal">{{ $t('chart.horizontal') }}</el-radio-button> <el-radio-button label="horizontal">{{ $t('chart.horizontal') }}</el-radio-button>
<el-radio-button label="vertical">{{ $t('chart.vertical') }}</el-radio-button> <el-radio-button label="vertical">{{ $t('chart.vertical') }}</el-radio-button>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle">
<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="legendForm.textStyle.color" style="padding-top: 6px;cursor: pointer;z-index: 999" @change="changeLegendStyle" />
</el-form-item>
<el-form-item :label="$t('chart.text_h_position')" class="form-item"> <el-form-item :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle"> <el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button> <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
...@@ -53,7 +71,16 @@ export default { ...@@ -53,7 +71,16 @@ export default {
}, },
data() { data() {
return { return {
legendForm: JSON.parse(JSON.stringify(DEFAULT_LEGEND_STYLE)) legendForm: JSON.parse(JSON.stringify(DEFAULT_LEGEND_STYLE)),
fontSize: [],
iconSymbolOptions: [
{ name: this.$t('chart.line_symbol_emptyCircle'), value: 'emptyCircle' },
{ name: this.$t('chart.line_symbol_circle'), value: 'circle' },
{ name: this.$t('chart.line_symbol_rect'), value: 'rect' },
{ name: this.$t('chart.line_symbol_roundRect'), value: 'roundRect' },
{ name: this.$t('chart.line_symbol_triangle'), value: 'triangle' },
{ name: this.$t('chart.line_symbol_diamond'), value: 'diamond' }
]
} }
}, },
watch: { watch: {
...@@ -70,8 +97,19 @@ export default { ...@@ -70,8 +97,19 @@ export default {
} }
}, },
mounted() { mounted() {
this.init()
}, },
methods: { methods: {
init() {
const arr = []
for (let i = 10; i <= 60; i = i + 2) {
arr.push({
name: i + '',
value: i + ''
})
}
this.fontSize = arr
},
changeLegendStyle() { changeLegendStyle() {
this.$emit('onLegendChange', this.legendForm) this.$emit('onLegendChange', this.legendForm)
} }
......
frontend/src/views/chart/components/component_style/XAxisSelector.vue 0 → 100644
浏览文件 @ 4c920bdc
<template>
<div>
<div style="width:100%;height: 32px;margin:0;padding:0 4px;border-radius: 4px;border: 1px solid #DCDFE6;display: flex;align-items: center;">
<el-popover
placement="right"
width="400"
trigger="click"
>
<el-col>
<el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="axisForm.show" @change="changeXAxisStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.position')" class="form-item">
<el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle">
<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-group>
</el-form-item>
<el-form-item :label="$t('chart.name')" class="form-item">
<el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />
</el-form-item>
</el-form>
</el-col>
<el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.xAxis') }}<i class="el-icon-setting el-icon--right" /></el-button>
</el-popover>
</div>
</div>
</template>
<script>
import { DEFAULT_XAXIS_STYLE } from '../../chart/chart'
export default {
name: 'XAxisSelector',
props: {
chart: {
type: Object,
required: true
}
},
data() {
return {
axisForm: JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE))
}
},
watch: {
'chart': {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customStyle) {
const customStyle = JSON.parse(chart.customStyle)
if (customStyle.xAxis) {
this.axisForm = customStyle.xAxis
}
}
}
}
},
mounted() {
},
methods: {
changeXAxisStyle() {
this.$emit('onChangeXAxisForm', this.axisForm)
}
}
}
</script>
<style scoped lang="scss">
.shape-item{
padding: 6px;
border: none;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.el-form-item{
margin-bottom: 6px;
}
</style>
frontend/src/views/chart/components/component_style/YAxisSelector.vue 0 → 100644
浏览文件 @ 4c920bdc
<template>
<div>
<div style="width:100%;height: 32px;margin:0;padding:0 4px;border-radius: 4px;border: 1px solid #DCDFE6;display: flex;align-items: center;">
<el-popover
placement="right"
width="400"
trigger="click"
>
<el-col>
<el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.position')" class="form-item">
<el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">
<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-form-item>
<el-form-item :label="$t('chart.name')" class="form-item">
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
</el-form-item>
</el-form>
</el-col>
<el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.yAxis') }}<i class="el-icon-setting el-icon--right" /></el-button>
</el-popover>
</div>
</div>
</template>
<script>
import { DEFAULT_YAXIS_STYLE } from '../../chart/chart'
export default {
name: 'YAxisSelector',
props: {
chart: {
type: Object,
required: true
}
},
data() {
return {
axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE))
}
},
watch: {
'chart': {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customStyle) {
const customStyle = JSON.parse(chart.customStyle)
if (customStyle.yAxis) {
this.axisForm = customStyle.yAxis
}
}
}
}
},
mounted() {
},
methods: {
changeYAxisStyle() {
this.$emit('onChangeYAxisForm', this.axisForm)
}
}
}
</script>
<style scoped lang="scss">
.shape-item{
padding: 6px;
border: none;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.el-form-item{
margin-bottom: 6px;
}
</style>
frontend/src/views/chart/components/shape_attr/LabelSelector.vue 0 → 100644
浏览文件 @ 4c920bdc
<template>
<div>
<div style="width:100%;height: 32px;margin:0;padding:0 4px;border-radius: 4px;border: 1px solid #DCDFE6;display: flex;align-items: center;">
<el-popover
placement="right"
width="400"
trigger="click"
>
<el-col>
<el-form 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="padding-top: 6px;cursor: pointer;z-index: 999" @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-form-item>
<el-form-item :label="$t('chart.content_formatter')" class="form-item">
<el-input v-model="labelForm.formatter" 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>
</el-popover>
</div>
</div>
</template>
<script>
import { DEFAULT_LABEL } from '../../chart/chart'
export default {
name: 'LabelSelector',
props: {
chart: {
type: Object,
required: true
}
},
data() {
return {
labelForm: JSON.parse(JSON.stringify(DEFAULT_LABEL)),
fontSize: []
}
},
watch: {
'chart': {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customAttr) {
const customAttr = JSON.parse(chart.customAttr)
if (customAttr.label) {
this.labelForm = customAttr.label
}
}
}
}
},
mounted() {
this.init()
},
methods: {
init() {
const arr = []
for (let i = 10; i <= 20; i = i + 2) {
arr.push({
name: i + '',
value: i + ''
})
}
this.fontSize = arr
},
changeLabelAttr() {
this.$emit('onLabelChange', this.labelForm)
}
}
}
</script>
<style scoped lang="scss">
.shape-item{
padding: 6px;
border: none;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.el-form-item{
margin-bottom: 6px;
}
</style>
frontend/src/views/chart/components/shape_attr/TooltipSelector.vue 0 → 100644
浏览文件 @ 4c920bdc
<template>
<div>
<div style="width:100%;height: 32px;margin:0;padding:0 4px;border-radius: 4px;border: 1px solid #DCDFE6;display: flex;align-items: center;">
<el-popover
placement="right"
width="400"
trigger="click"
>
<el-col>
<el-form ref="tooltipForm" :model="tooltipForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.label_position')" class="form-item">
<el-radio-group v-model="tooltipForm.trigger" size="mini" @change="changeTooltipAttr">
<el-radio-button label="item">{{ $t('chart.tooltip_item') }}</el-radio-button>
<el-radio-button label="axis">{{ $t('chart.tooltip_axis') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="tooltipForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTooltipAttr">
<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="tooltipForm.textStyle.color" style="padding-top: 6px;cursor: pointer;z-index: 999" @change="changeTooltipAttr" />
</el-form-item>
<el-form-item :label="$t('chart.content_formatter')" class="form-item">
<el-input v-model="tooltipForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" :placeholder="$t('chart.formatter_plc')" @blur="changeTooltipAttr" />
</el-form-item>
</el-form>
</el-col>
<el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.tooltip') }}<i class="el-icon-setting el-icon--right" /></el-button>
</el-popover>
</div>
</div>
</template>
<script>
import { DEFAULT_TOOLTIP } from '../../chart/chart'
export default {
name: 'TooltipSelector',
props: {
chart: {
type: Object,
required: true
}
},
data() {
return {
tooltipForm: JSON.parse(JSON.stringify(DEFAULT_TOOLTIP)),
fontSize: []
}
},
watch: {
'chart': {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customAttr) {
const customAttr = JSON.parse(chart.customAttr)
if (customAttr.tooltip) {
this.tooltipForm = customAttr.tooltip
}
}
}
}
},
mounted() {
this.init()
},
methods: {
init() {
const arr = []
for (let i = 10; i <= 20; i = i + 2) {
arr.push({
name: i + '',
value: i + ''
})
}
this.fontSize = arr
},
changeTooltipAttr() {
this.$emit('onTooltipChange', this.tooltipForm)
}
}
}
</script>
<style scoped lang="scss">
.shape-item{
padding: 6px;
border: none;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.el-form-item{
margin-bottom: 6px;
}
</style>
frontend/src/views/chart/group/Group.vue
浏览文件 @ 4c920bdc
...@@ -211,7 +211,14 @@ ...@@ -211,7 +211,14 @@
<script> <script>
import { post } from '@/api/chart/chart' import { post } from '@/api/chart/chart'
import TableSelector from '../view/TableSelector' import TableSelector from '../view/TableSelector'
import { DEFAULT_COLOR_CASE, DEFAULT_LEGEND_STYLE, DEFAULT_SIZE, DEFAULT_TITLE_STYLE } from '../chart/chart' import {
DEFAULT_COLOR_CASE,
DEFAULT_LABEL,
DEFAULT_LEGEND_STYLE,
DEFAULT_SIZE,
DEFAULT_TITLE_STYLE,
DEFAULT_TOOLTIP
} from '../chart/chart'
export default { export default {
name: 'Group', name: 'Group',
...@@ -507,7 +514,9 @@ export default { ...@@ -507,7 +514,9 @@ export default {
view.type = 'bar' view.type = 'bar'
view.customAttr = JSON.stringify({ view.customAttr = JSON.stringify({
color: DEFAULT_COLOR_CASE, color: DEFAULT_COLOR_CASE,
size: DEFAULT_SIZE size: DEFAULT_SIZE,
label: DEFAULT_LABEL,
tooltip: DEFAULT_TOOLTIP
}) })
view.customStyle = JSON.stringify({ view.customStyle = JSON.stringify({
text: DEFAULT_TITLE_STYLE, text: DEFAULT_TITLE_STYLE,
......
frontend/src/views/chart/view/ChartEdit.vue
浏览文件 @ 4c920bdc
...@@ -106,10 +106,14 @@ ...@@ -106,10 +106,14 @@
<el-tab-pane :label="$t('chart.shape_attr')" class="padding-lr"> <el-tab-pane :label="$t('chart.shape_attr')" class="padding-lr">
<color-selector class="attr-selector" :chart="chart" @onColorChange="onColorChange" /> <color-selector class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
<size-selector class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" /> <size-selector class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
<label-selector class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
<tooltip-selector class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('chart.module_style')" class="padding-lr"> <el-tab-pane :label="$t('chart.module_style')" class="padding-lr">
<title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" /> <title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
<legend-selector class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" /> <legend-selector class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
<x-axis-selector v-if="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
<y-axis-selector v-if="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
...@@ -168,15 +172,26 @@ import DimensionItem from '../components/DimensionItem' ...@@ -168,15 +172,26 @@ import DimensionItem from '../components/DimensionItem'
import QuotaItem from '../components/QuotaItem' import QuotaItem from '../components/QuotaItem'
import ChartComponent from '../components/ChartComponent' import ChartComponent from '../components/ChartComponent'
// shape attr,component style // shape attr,component style
import { DEFAULT_COLOR_CASE, DEFAULT_SIZE, DEFAULT_TITLE_STYLE, DEFAULT_LEGEND_STYLE } from '../chart/chart' import {
DEFAULT_COLOR_CASE,
DEFAULT_SIZE,
DEFAULT_TITLE_STYLE,
DEFAULT_LEGEND_STYLE,
DEFAULT_LABEL,
DEFAULT_TOOLTIP
} from '../chart/chart'
import ColorSelector from '../components/shape_attr/ColorSelector' import ColorSelector from '../components/shape_attr/ColorSelector'
import SizeSelector from '../components/shape_attr/SizeSelector' import SizeSelector from '../components/shape_attr/SizeSelector'
import LabelSelector from '../components/shape_attr/LabelSelector'
import TitleSelector from '../components/component_style/TitleSelector' import TitleSelector from '../components/component_style/TitleSelector'
import LegendSelector from '../components/component_style/LegendSelector' import LegendSelector from '../components/component_style/LegendSelector'
import TooltipSelector from '../components/shape_attr/TooltipSelector'
import XAxisSelector from '../components/component_style/XAxisSelector'
import YAxisSelector from '../components/component_style/YAxisSelector'
export default { export default {
name: 'ChartEdit', name: 'ChartEdit',
components: { LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable }, components: { XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
data() { data() {
return { return {
table: {}, table: {},
...@@ -190,7 +205,9 @@ export default { ...@@ -190,7 +205,9 @@ export default {
title: '', title: '',
customAttr: { customAttr: {
color: DEFAULT_COLOR_CASE, color: DEFAULT_COLOR_CASE,
size: DEFAULT_SIZE size: DEFAULT_SIZE,
label: DEFAULT_LABEL,
tooltip: DEFAULT_TOOLTIP
}, },
customStyle: { customStyle: {
text: DEFAULT_TITLE_STYLE, text: DEFAULT_TITLE_STYLE,
...@@ -417,6 +434,26 @@ export default { ...@@ -417,6 +434,26 @@ export default {
onLegendChange(val) { onLegendChange(val) {
this.view.customStyle.legend = val this.view.customStyle.legend = val
this.save() this.save()
},
onLabelChange(val) {
this.view.customAttr.label = val
this.save()
},
onTooltipChange(val) {
this.view.customAttr.tooltip = val
this.save()
},
onChangeXAxisForm(val) {
this.view.customStyle.xAxis = val
this.save()
},
onChangeYAxisForm(val) {
this.view.customStyle.yAxis = val
this.save()
} }
} }
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论