Skip to content

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

feat(视图):增加标题文字图标

上级 f8e1a1a7
隐藏空白字符变更
内嵌 并排
正在显示 包含 205 行增加 和 14 行删除
frontend/src/icons/svg/text.svg
浏览文件 @ e27baac6
<?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>
frontend/src/lang/zh.js
浏览文件 @ e27baac6
......@@ -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: '数据集',
......
frontend/src/views/chart/chart/chart.js
浏览文件 @ e27baac6
......@@ -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,
......
frontend/src/views/chart/chart/gauge/gauge.js
浏览文件 @ e27baac6
......@@ -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
......
frontend/src/views/chart/components/normal/LabelNormal.vue 0 → 100644
浏览文件 @ e27baac6
<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>
frontend/src/views/chart/components/shape-attr/ColorSelector.vue
浏览文件 @ e27baac6
......@@ -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>
......
frontend/src/views/chart/components/shape-attr/SizeSelector.vue
浏览文件 @ e27baac6
......@@ -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>
......
frontend/src/views/chart/view/ChartEdit.vue
浏览文件 @ e27baac6
......@@ -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,
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论