feat(视图):增加标题文字图标
This commit is contained in:
junjie
parent
f8e1a1a7a3
commit
e27baac6fd
@ -1 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1620975566611" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10896" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M324.004571 749.44h278.729143c17.097143 0 27.830857-10.733714 27.830857-26.843429 0-16.091429-10.733714-27.172571-27.830857-27.172571H379.355429v-1.664l131.145142-128.457143c79.488-77.494857 103.314286-117.741714 103.314286-169.051428 0-77.147429-68.096-135.844571-158.994286-135.844572-71.442286 0-132.498286 38.912-152.96 97.938286-3.675429 11.062857-5.686857 20.790857-5.686857 29.184 0 16.768 10.057143 27.830857 26.496 27.830857 15.762286 0 22.473143-7.369143 27.501715-24.137143 2.688-10.404571 6.363429-20.114286 11.739428-28.525714 17.773714-30.171429 50.980571-48.969143 92.891429-48.969143 54.345143 0 97.609143 38.253714 97.609143 85.869714 0 38.582857-15.762286 64.402286-82.176 130.139429l-156.964572 156.982857c-14.08 13.750857-18.450286 22.454857-18.450286 34.541714 0 17.444571 11.410286 28.16 29.184 28.16z m523.574858 7.369143c102.637714 0 176.420571-60.032 176.420571-141.878857 0-66.413714-47.616-110.006857-124.105143-115.035429v-1.353143c63.725714-10.733714 103.314286-53.321143 103.314286-113.024 0-72.448-65.737143-125.110857-157.312-125.110857-68.754286 0-124.763429 30.537143-148.571429 80.493714a76.928 76.928 0 0 0-9.069714 36.900572c0 15.762286 10.733714 26.496 26.148571 26.496 15.104 0 22.162286-6.363429 27.190858-21.796572 14.409143-43.940571 51.309714-69.101714 102.290285-69.101714 60.050286 0 98.614857 31.524571 98.614857 79.835429 0 50.304-41.252571 83.510857-101.302857 83.510857h-36.882285c-15.762286 0-26.514286 9.728-26.514286 25.161143 0 15.085714 10.752 25.142857 26.514286 25.142857h37.558857c74.459429 0 118.729143 31.542857 118.729143 87.552 0 51.657143-46.262857 87.881143-112.694858 87.881143-57.691429 0-99.273143-25.490286-114.377142-69.778286-5.028571-14.409143-13.403429-21.12-27.501715-21.12-17.444571 0-28.836571 11.062857-28.836571 28.507429 0 11.739429 3.017143 22.473143 9.380571 34.194285 27.849143 53.010286 86.198857 82.523429 161.005715 82.523429z m-676.516572-0.658286c18.450286 0 30.848-12.068571 30.848-30.537143V296.96c0-21.796571-13.750857-33.865143-34.870857-33.865143-15.104 0-23.826286 4.699429-37.906286 13.750857L17.444571 349.293714C4.352 358.016 0 365.714286 0 376.795429c0 13.750857 10.057143 23.808 25.161143 23.808 8.722286 0 13.074286-2.669714 19.456-6.710858l95.250286-60.032h1.334857v391.753143c0 18.468571 11.410286 30.537143 29.860571 30.537143z" p-id="10897"></path></svg>
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1621224495563" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7328" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M376.795429 691.2c15.616 0 27.008-10.733714 27.008-27.337143v-46.848h1.316571c20.809143 45.878857 63.451429 74.514286 117.449143 74.514286 88.832 0 147.072-70.619429 147.072-179.620572s-58.569143-179.620571-146.413714-179.620571c-53.028571 0-96 28.964571-116.169143 74.203429h-1.627429v-166.290286c0-17.554286-11.062857-28.946286-27.337143-28.946286-16.274286 0-27.318857 11.373714-27.318857 28.946286v423.68c0 16.914286 10.422857 27.318857 26.020572 27.318857z m490.697142 0.329143c64.091429 0 118.765714-35.145143 137.325715-84.937143 1.938286-5.522286 2.925714-10.733714 2.925714-15.286857 0-13.988571-9.764571-23.753143-23.442286-23.753143-12.361143 0-18.870857 4.882286-26.020571 19.2-17.261714 37.101714-46.537143 57.270857-90.459429 57.270857-63.451429 0-105.106286-50.432-105.106285-131.785143 0-80.694857 41.654857-132.443429 105.106285-132.443428 41.965714 0 72.228571 19.858286 89.782857 57.929143 6.857143 13.659429 13.348571 18.541714 25.398858 18.541714 13.988571 0 23.753143-9.106286 23.753142-23.424 0-3.913143-0.969143-8.777143-2.267428-13.019429-16.274286-49.792-71.917714-87.533714-137.984-87.533714-96.950857 0-160.091429 71.259429-160.091429 180.278857 0 109.659429 63.780571 178.962286 161.078857 178.962286zM116.169143 691.2c49.444571 0 96.310857-27.008 115.84-68.662857h0.969143v42.313143c0.658286 15.926857 11.392 26.678857 26.697143 26.678857 15.597714 0 26.331429-10.733714 26.331428-27.977143v-215.405714c0-70.290286-51.401143-115.529143-133.394286-115.529143-60.854857 0-111.286857 26.697143-130.157714 68.022857-3.584 8.118857-5.851429 15.926857-5.851428 22.765714 0 14.317714 10.404571 23.424 24.722285 23.424 10.093714 0 17.554286-3.584 22.784-12.690285 17.554286-37.412571 45.220571-54.674286 87.204572-54.674286 50.102857 0 79.725714 27.977143 79.725714 73.216v27.337143l-103.808 5.851428C45.531429 491.428571 0 528.201143 0 588.068571 0 650.203429 47.506286 691.2 116.169143 691.2z m394.057143-47.177143c-61.184 0-104.777143-52.388571-104.777143-131.785143 0-79.725714 43.593143-132.114286 104.777143-132.114285 63.104 0 102.802286 51.090286 102.802285 131.785142 0 81.353143-39.68 132.114286-102.820571 132.114286z m-381.037715 1.956572c-43.611429 0-72.905143-23.771429-72.905142-58.898286 0-34.176 27.337143-56.630857 77.769142-60.196572l96.969143-6.180571v33.828571c0 51.419429-45.220571 91.428571-101.851428 91.428572z m700.891429 249.892571a39.168 39.168 0 0 0 39.04-39.058286 39.168 39.168 0 0 0-39.058286-39.04c-21.467429 0-39.04 17.572571-39.04 39.058286 0 21.467429 17.554286 39.04 39.058286 39.04z m154.88 0A39.168 39.168 0 0 0 1024 856.813714c0-21.467429-17.554286-39.04-39.04-39.04-21.485714 0-39.058286 17.572571-39.058286 39.058286 0 21.467429 17.572571 39.04 39.058286 39.04z m-309.76 0a38.948571 38.948571 0 0 0 39.04-39.058286 38.948571 38.948571 0 0 0-39.058286-39.04c-21.467429 0-39.04 17.572571-39.04 39.058286 0 21.467429 17.554286 39.04 39.04 39.04z m-154.898286 0a38.948571 38.948571 0 0 0 39.04-39.058286 38.948571 38.948571 0 0 0-39.04-39.04c-21.485714 0-39.058286 17.572571-39.058285 39.058286 0 21.467429 17.572571 39.04 39.058285 39.04z m-154.88 0a38.948571 38.948571 0 0 0 39.04-39.058286 38.948571 38.948571 0 0 0-39.058285-39.04c-21.467429 0-39.04 17.572571-39.04 39.058286 0 21.467429 17.572571 39.04 39.058285 39.04z m-154.88 0a39.241143 39.241143 0 0 0 39.350857-39.058286 39.222857 39.222857 0 0 0-78.409142 0c0 21.485714 17.554286 39.058286 39.04 39.058286z m-155.227428 0a38.948571 38.948571 0 0 0 39.04-39.058286 38.948571 38.948571 0 0 0-39.04-39.04c-21.467429 0-39.04 17.572571-39.04 39.058286 0 21.467429 17.554286 39.04 39.04 39.04z" p-id="7329"></path></svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 3.9 KiB |
@ -710,7 +710,14 @@ export default {
|
||||
start_angle: '起始角度',
|
||||
end_angle: '结束角度',
|
||||
style_priority: '样式优先级',
|
||||
dashboard: '仪表盘'
|
||||
dashboard: '仪表盘',
|
||||
dimension_color: '维度颜色',
|
||||
quota_color: '指标颜色',
|
||||
dimension_font_size: '维度字体大小',
|
||||
quota_font_size: '指标字体大小',
|
||||
space_split: '维度/指标间隔',
|
||||
only_one_quota: '仅支持1个指标',
|
||||
only_one_result: '仅显示第1个计算结果'
|
||||
},
|
||||
dataset: {
|
||||
datalist: '数据集',
|
||||
|
||||
@ -5,7 +5,9 @@ export const DEFAULT_COLOR_CASE = {
|
||||
tableHeaderBgColor: '#4e81bb',
|
||||
tableItemBgColor: '#c6d9f0',
|
||||
tableFontColor: '#000000',
|
||||
tableStripe: true
|
||||
tableStripe: true,
|
||||
dimensionColor: '#000000',
|
||||
quotaColor: '#000000'
|
||||
}
|
||||
export const DEFAULT_SIZE = {
|
||||
barDefault: true,
|
||||
@ -28,7 +30,10 @@ export const DEFAULT_SIZE = {
|
||||
gaugeMin: 0,
|
||||
gaugeMax: 100,
|
||||
gaugeStartAngle: 225,
|
||||
gaugeEndAngle: -45
|
||||
gaugeEndAngle: -45,
|
||||
dimensionFontSize: 18,
|
||||
quotaFontSize: 18,
|
||||
spaceSplit: 10
|
||||
}
|
||||
export const DEFAULT_LABEL = {
|
||||
show: false,
|
||||
|
||||
@ -32,8 +32,10 @@ export function baseGaugeOption(chart_option, chart) {
|
||||
// detail
|
||||
if (customAttr.label) {
|
||||
const label = JSON.parse(JSON.stringify(customAttr.label))
|
||||
label.formatter = label.gaugeFormatter
|
||||
chart_option.series[0].detail = label
|
||||
chart_option.series[0].detail.show = label.show
|
||||
chart_option.series[0].detail.fontSize = label.fontSize
|
||||
chart_option.series[0].detail.color = label.color
|
||||
chart_option.series[0].detail.formatter = label.gaugeFormatter
|
||||
}
|
||||
chart_option.series[0].type = 'gauge'
|
||||
// color
|
||||
|
||||
139
frontend/src/views/chart/components/normal/LabelNormal.vue
Normal file
139
frontend/src/views/chart/components/normal/LabelNormal.vue
Normal file
@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<div ref="tableContainer" :style="bg_class">
|
||||
<p v-show="title_show" ref="title" :style="title_class">{{ chart.title }}</p>
|
||||
<div
|
||||
v-if="chart.data && chart.data.x && chart.data.x.length > 0 && chart.data.series && chart.data.series.length > 0 && chart.data.series[0].data && chart.data.series[0].data.length > 0"
|
||||
id="label-content"
|
||||
:style="content_class"
|
||||
>
|
||||
<p :style="label_class">
|
||||
{{ chart.data.x[0] }}
|
||||
</p>
|
||||
<span :style="label_space">
|
||||
<p v-for="item in chart.data.series" :key="item.name" :style="label_content_class">
|
||||
{{ item.data[0] }}
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { hexColorToRGBA } from '../../chart/util'
|
||||
|
||||
export default {
|
||||
name: 'LabelNormal',
|
||||
props: {
|
||||
chart: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
filter: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
height: 'auto',
|
||||
splitHeight: '10px',
|
||||
title_class: {
|
||||
margin: '0 0',
|
||||
width: '100%',
|
||||
fontSize: '18px',
|
||||
color: '#303133',
|
||||
textAlign: 'left',
|
||||
fontStyle: 'normal'
|
||||
},
|
||||
content_class: {
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: 'auto'
|
||||
},
|
||||
label_class: {
|
||||
margin: 0
|
||||
},
|
||||
label_content_class: {
|
||||
margin: 0
|
||||
},
|
||||
label_space: {
|
||||
marginTop: '10px',
|
||||
textAlign: 'center'
|
||||
},
|
||||
bg_class: {
|
||||
background: hexColorToRGBA('#ffffff', 0)
|
||||
},
|
||||
title_show: true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chart() {
|
||||
this.init()
|
||||
this.calcHeight()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
this.calcHeight()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
const that = this
|
||||
this.initStyle()
|
||||
window.onresize = function() {
|
||||
that.calcHeight()
|
||||
}
|
||||
},
|
||||
calcHeight() {
|
||||
const that = this
|
||||
setTimeout(function() {
|
||||
// const currentHeight = document.documentElement.clientHeight
|
||||
// const tableMaxHeight = currentHeight - 56 - 40 - 84 - that.$refs.title.offsetHeight - 20
|
||||
const currentHeight = that.$refs.tableContainer.offsetHeight
|
||||
const contentHeight = currentHeight - that.$refs.title.offsetHeight
|
||||
that.height = contentHeight + 'px'
|
||||
that.content_class.height = that.height
|
||||
}, 10)
|
||||
},
|
||||
initStyle() {
|
||||
if (this.chart.customAttr) {
|
||||
const customAttr = JSON.parse(this.chart.customAttr)
|
||||
if (customAttr.color) {
|
||||
this.label_class.color = customAttr.color.dimensionColor
|
||||
this.label_content_class.color = customAttr.color.quotaColor
|
||||
}
|
||||
if (customAttr.size) {
|
||||
this.label_class.fontSize = customAttr.size.dimensionFontSize + 'px'
|
||||
this.label_content_class.fontSize = customAttr.size.quotaFontSize + 'px'
|
||||
this.label_space.marginTop = customAttr.size.spaceSplit + 'px'
|
||||
}
|
||||
}
|
||||
if (this.chart.customStyle) {
|
||||
const customStyle = JSON.parse(this.chart.customStyle)
|
||||
if (customStyle.text) {
|
||||
this.title_show = customStyle.text.show
|
||||
this.title_class.fontSize = customStyle.text.fontSize + 'px'
|
||||
this.title_class.color = customStyle.text.color
|
||||
this.title_class.textAlign = customStyle.text.hPosition
|
||||
this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
|
||||
}
|
||||
if (customStyle.background) {
|
||||
this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-class>>>.body--wrapper{
|
||||
background: rgba(1,1,1,0);
|
||||
}
|
||||
</style>
|
||||
@ -9,7 +9,7 @@
|
||||
<el-col>
|
||||
<el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
|
||||
<div v-if="sourceType==='view' || sourceType==='panelEchart'">
|
||||
<el-form-item v-show="chart.type && !chart.type.includes('table')" :label="$t('chart.color_case')" class="form-item">
|
||||
<el-form-item v-show="chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :label="$t('chart.color_case')" class="form-item">
|
||||
<el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase">
|
||||
<el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
|
||||
<div style="float: left">
|
||||
@ -19,6 +19,13 @@
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.dimension_color')" class="form-item">
|
||||
<colorPicker v-model="colorForm.dimensionColor" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeColorCase" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.quota_color')" class="form-item">
|
||||
<colorPicker v-model="colorForm.quotaColor" style="margin-top: 6px;cursor: pointer;z-index: 1003;border: solid 1px black" @change="changeColorCase" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-if="sourceType==='view' || sourceType==='panelTable'">
|
||||
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_header_bg')" class="form-item">
|
||||
@ -35,7 +42,7 @@
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">
|
||||
<el-form-item v-show="chart.type && !chart.type.includes('text')" :label="$t('chart.not_alpha')" class="form-item form-item-slider">
|
||||
<el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeColorCase" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
@ -113,6 +113,22 @@
|
||||
<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-form v-show="chart.type && chart.type.includes('text')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
|
||||
<el-form-item :label="$t('chart.dimension_font_size')" class="form-item">
|
||||
<el-select v-model="sizeForm.dimensionFontSize" :placeholder="$t('chart.dimension_font_size')" @change="changeBarSizeCase">
|
||||
<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.quota_font_size')" class="form-item">
|
||||
<el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase">
|
||||
<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.space_split')" class="form-item">
|
||||
<el-input-number v-model="sizeForm.spaceSplit" size="mini" @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>
|
||||
|
||||
@ -89,7 +89,7 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div style="height: 30%;overflow:auto" class="padding-lr">
|
||||
<div style="height: 25%;overflow:auto" class="padding-lr">
|
||||
<span>{{ $t('chart.chart_type') }}</span>
|
||||
<el-row>
|
||||
<div class="chart-type">
|
||||
@ -125,6 +125,19 @@
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-row style="padding: 4px 6px;color: #909399;">
|
||||
<span>
|
||||
<span v-show="chart.type && (chart.type.includes('pie') || chart.type.includes('funnel'))">
|
||||
Tips: {{ $t('chart.only_one_quota') }}
|
||||
</span>
|
||||
<span v-show="chart.type && (chart.type.includes('text'))">
|
||||
Tips: {{ $t('chart.only_one_result') }}
|
||||
</span>
|
||||
<span v-show="chart.type && chart.type.includes('gauge')">
|
||||
Tips: {{ $t('chart.only_one_quota') }},{{ $t('chart.only_one_result') }}
|
||||
</span>
|
||||
</span>
|
||||
</el-row>
|
||||
<div style="height: 40%;overflow:hidden;border-top: 1px solid #e6e6e6">
|
||||
<el-row class="padding-lr">
|
||||
<span>{{ $t('chart.style_priority') }}</span>
|
||||
@ -137,12 +150,12 @@
|
||||
<el-tab-pane :label="$t('chart.shape_attr')" class="padding-lr">
|
||||
<color-selector class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
|
||||
<size-selector class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
|
||||
<label-selector v-show="!view.type.includes('table')" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
|
||||
<tooltip-selector v-show="!view.type.includes('table')" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
|
||||
<label-selector v-show="!view.type.includes('table') && !view.type.includes('text')" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
|
||||
<tooltip-selector v-show="!view.type.includes('table') && !view.type.includes('text')" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('chart.module_style')" class="padding-lr">
|
||||
<title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
|
||||
<legend-selector v-show="!view.type.includes('table')" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
|
||||
<legend-selector v-show="!view.type.includes('table') && !view.type.includes('text')" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
|
||||
<x-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
|
||||
<y-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
|
||||
<background-color-selector class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
|
||||
@ -203,8 +216,9 @@
|
||||
</el-row>
|
||||
</el-row>
|
||||
<div ref="imageWrapper" style="height: 100%">
|
||||
<chart-component v-if="chart.type && !chart.type.includes('table')" :chart-id="chart.id" :chart="chart" class="chart-class" />
|
||||
<chart-component v-if="chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :chart-id="chart.id" :chart="chart" class="chart-class" />
|
||||
<table-normal v-if="chart.type && chart.type.includes('table')" :chart="chart" class="table-class" />
|
||||
<label-normal v-if="chart.type && chart.type.includes('text')" :chart="chart" class="table-class" />
|
||||
</div>
|
||||
</el-row>
|
||||
</el-col>
|
||||
@ -289,11 +303,12 @@ import BackgroundColorSelector from '../components/component-style/BackgroundCol
|
||||
import QuotaFilterEditor from '../components/filter/QuotaFilterEditor'
|
||||
import DimensionFilterEditor from '../components/filter/DimensionFilterEditor'
|
||||
import TableNormal from '../components/table/TableNormal'
|
||||
import LabelNormal from '../components/normal/LabelNormal'
|
||||
import html2canvas from 'html2canvas'
|
||||
|
||||
export default {
|
||||
name: 'ChartEdit',
|
||||
components: { DimensionFilterEditor, TableNormal, DatasetChartDetail, QuotaFilterEditor, BackgroundColorSelector, FilterItem, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
|
||||
components: { LabelNormal, DimensionFilterEditor, TableNormal, DatasetChartDetail, QuotaFilterEditor, BackgroundColorSelector, FilterItem, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
|
||||
props: {
|
||||
param: {
|
||||
type: Object,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user