Skip to content

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

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

上级 2e0a4e2e
隐藏空白字符变更
内嵌 并排
正在显示 包含 153 行增加 和 12 行删除
frontend/src/icons/svg/gauge.svg 0 → 100644
浏览文件 @ c55b7dfe
<?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="1620973439943" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="859" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M284.281905 870.936381c-85.162667-74.532571-134.339048-184.58819-134.339048-300.592762 0-215.79581 168.082286-391.168 374.881524-391.168s374.808381 175.37219 374.808381 391.168c0.073143 116.150857-49.371429 226.304-134.924191 300.592762L839.68 975.238095C952.124952 879.420952 1024 733.988571 1024 570.343619 1024 282.160762 800.329143 48.761905 524.166095 48.761905 248.003048 48.761905 24.380952 282.185143 24.380952 570.343619 24.84419 727.405714 92.696381 876.007619 209.334857 975.238095l74.971429-104.301714z" p-id="860"></path><path d="M148.821333 570.343619c0-215.79581 167.375238-391.168 373.321143-391.168 77.141333 0 148.699429 24.746667 208.432762 66.486857L804.571429 140.678095C723.72419 82.651429 626.639238 48.761905 522.142476 48.761905 247.125333 48.761905 24.380952 282.185143 24.380952 570.343619 24.380952 733.379048 95.963429 879.420952 207.945143 975.238095l74.654476-104.301714c-84.821333-74.532571-133.802667-184.58819-133.778286-300.592762z" p-id="861"></path><path d="M569.61219 627.492571c5.022476-7.119238 8.777143-15.11619 11.093334-23.576381L731.428571 268.190476 470.503619 523.873524a80.700952 80.700952 0 0 0-18.285714 18.139428c-23.113143 32.914286-15.408762 79.09181 16.822857 102.64381 32.256 23.576381 77.507048 15.725714 100.62019-17.164191h-0.048762z" p-id="862"></path></svg>
frontend/src/icons/svg/scatter.svg 0 → 100644
浏览文件 @ c55b7dfe
<?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="1620974835472" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="863" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M84.94909 930.182095V70.265905A40.521143 40.521143 0 0 0 44.671756 28.769524 40.521143 40.521143 0 0 0 4.370042 70.290286v901.193143c0 22.869333 17.16419 43.641905 39.936 43.641904h906.044952a42.130286 42.130286 0 0 0 41.155048-42.422857c0-22.869333-18.407619-42.398476-41.155048-42.398476H84.94909v-0.121905z" p-id="864"></path><path d="M44.306042 1019.367619c-24.380952 0-44.30019-21.528381-44.300191-48.030476V70.265905a45.348571 45.348571 0 0 1 12.702477-32.182857A45.543619 45.543619 0 0 1 44.647375 24.380952c12.092952 0.121905 23.771429 5.12 32.109715 13.677715 8.338286 8.582095 12.921905 20.406857 12.678095 32.329143V925.988571h861.037714c25.112381 0 45.519238 20.894476 45.519238 46.762667a46.665143 46.665143 0 0 1-45.397333 46.738286L44.306042 1019.367619z m0.243809-986.282667c-9.581714 0.121905-19.017143 4.096-25.746285 11.068953a36.425143 36.425143 0 0 0-10.191238 26.112v901.217524c0 21.625905 15.920762 39.277714 35.547428 39.277714h906.069334a37.936762 37.936762 0 0 0 36.815238-37.912381c0-21.016381-16.554667-38.058667-36.815238-38.058667H80.60928V70.265905c0.24381-9.703619-3.486476-19.260952-10.191238-26.233905a37.156571 37.156571 0 0 0-25.868191-10.947048zM877.939566 781.897143c-40.521143 0-73.362286-33.206857-73.362286-73.996191C804.57728 666.989714 837.418423 633.904762 877.963947 633.904762c40.521143 0 73.362286 33.084952 73.362285 73.99619 0 40.911238-32.841143 73.99619-73.386666 73.996191zM661.119756 394.630095c-63.146667 0-114.395429-51.736381-114.395428-115.395047 0-63.536762 51.346286-115.273143 114.395428-115.273143 63.049143 0 114.41981 51.736381 114.41981 115.273143 0 63.658667-51.370667 115.395048-114.41981 115.395047z" p-id="865"></path><path d="M479.115947 469.577143c-78.57981 0-142.506667 64.414476-142.506667 143.62819a143.262476 143.262476 0 0 0 142.384762 143.628191 140.921905 140.921905 0 0 0 86.479238-29.574095 143.896381 143.896381 0 0 0 55.905524-114.054096c0.121905-79.238095-63.780571-143.62819-142.262857-143.62819zM195.29728 855.04C154.727375 855.04 121.910613 821.833143 121.910613 781.04381 121.910613 740.132571 154.751756 707.047619 195.29728 707.047619c40.521143 0 73.362286 33.084952 73.362286 73.996191 0 40.911238-32.963048 73.99619-73.386667 73.99619z" p-id="866"></path></svg>
frontend/src/icons/svg/text.svg 0 → 100644
浏览文件 @ c55b7dfe
<?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>
frontend/src/lang/zh.js
浏览文件 @ c55b7dfe
......@@ -706,7 +706,9 @@ export default {
table_header_bg: '表头背景',
table_item_bg: '表格背景',
table_item_font_color: '字体颜色',
stripe: '斑马纹'
stripe: '斑马纹',
start_angle: '起始角度',
end_angle: '结束角度'
},
dataset: {
datalist: '数据集',
......
frontend/src/views/chart/chart/chart.js
浏览文件 @ c55b7dfe
......@@ -24,14 +24,19 @@ export const DEFAULT_SIZE = {
funnelWidth: 80,
radarShape: 'polygon',
tableTitleFontSize: 12,
tableItemFontSize: 12
tableItemFontSize: 12,
gaugeMin: 0,
gaugeMax: 100,
gaugeStartAngle: 225,
gaugeEndAngle: -45
}
export const DEFAULT_LABEL = {
show: false,
position: 'top',
color: '#909399',
fontSize: '10',
formatter: '{c}'
formatter: '{c}',
gaugeFormatter: '{value}'
}
export const DEFAULT_TOOLTIP = {
show: true,
......@@ -297,3 +302,39 @@ export const BASE_RADAR = {
data: []
}]
}
export const BASE_GAUGE = {
title: {
text: ''
},
// grid: {
// containLabel: true
// },
tooltip: {},
legend: {
show: true,
type: 'scroll',
itemWidth: 10,
itemHeight: 10,
icon: 'rect'
},
series: [
{
name: '',
type: 'gauge',
startAngle: 225,
endAngle: -45,
min: 0,
max: 100,
progress: {
show: true
},
detail: {
show: true,
valueAnimation: true,
formatter: '{value}'
},
data: []
}
]
}
frontend/src/views/chart/chart/gauge/gauge.js 0 → 100644
浏览文件 @ c55b7dfe
import { componentStyle } from '../common/common'
import { hexColorToRGBA } from '@/views/chart/chart/util'
export function baseGaugeOption(chart_option, chart) {
// 处理shape attr
let customAttr = {}
if (chart.customAttr) {
customAttr = JSON.parse(chart.customAttr)
if (customAttr.color) {
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
if (chart.data) {
chart_option.title.text = chart.title
if (chart.data.series.length > 0) {
chart_option.series[0].name = chart.data.series[0].name
// size
if (customAttr.size) {
chart_option.series[0].min = customAttr.size.gaugeMin
chart_option.series[0].max = customAttr.size.gaugeMax
chart_option.series[0].startAngle = customAttr.size.gaugeStartAngle
chart_option.series[0].endAngle = customAttr.size.gaugeEndAngle
}
// 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].type = 'gauge'
// color
chart_option.series[0].itemStyle = {
color: hexColorToRGBA(customAttr.color.colors[0], customAttr.color.alpha)
}
// data只取第一个
const y = {
name: chart.data.x[0],
value: chart.data.series[0].data[0]
}
chart_option.series[0].data.push(y)
}
}
// console.log(chart_option);
componentStyle(chart_option, chart)
return chart_option
}
frontend/src/views/chart/components/ChartComponent.vue
浏览文件 @ c55b7dfe
......@@ -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)
},
......
frontend/src/views/chart/components/shape-attr/LabelSelector.vue
浏览文件 @ c55b7dfe
......@@ -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>
......
frontend/src/views/chart/components/shape-attr/SizeSelector.vue
浏览文件 @ c55b7dfe
......@@ -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>
......
frontend/src/views/chart/view/ChartEdit.vue
浏览文件 @ c55b7dfe
......@@ -100,23 +100,24 @@
@change="save(true)"
>
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
<el-radio value="table-normal" label="table-normal"><svg-icon icon-class="table-normal" class="chart-icon" /></el-radio>
<el-radio value="text" label="text"><svg-icon icon-class="text" class="chart-icon" /></el-radio>
<el-radio value="bar" label="bar"><svg-icon icon-class="bar" class="chart-icon" /></el-radio>
<el-radio value="bar-stack" label="bar-stack"><svg-icon icon-class="bar-stack" class="chart-icon" /></el-radio>
<el-radio value="bar-horizontal" label="bar-horizontal"><svg-icon icon-class="bar-horizontal" class="chart-icon" /></el-radio>
<el-radio value="bar-stack-horizontal" label="bar-stack-horizontal"><svg-icon icon-class="bar-stack-horizontal" class="chart-icon" /></el-radio>
<el-radio value="line" label="line"><svg-icon icon-class="line" class="chart-icon" /></el-radio>
</div>
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
<el-radio value="bar-stack-horizontal" label="bar-stack-horizontal"><svg-icon icon-class="bar-stack-horizontal" class="chart-icon" /></el-radio>
<el-radio value="line" label="line"><svg-icon icon-class="line" class="chart-icon" /></el-radio>
<el-radio value="line-stack" label="line-stack"><svg-icon icon-class="line-stack" class="chart-icon" /></el-radio>
<el-radio value="pie" label="pie"><svg-icon icon-class="pie" class="chart-icon" /></el-radio>
<el-radio value="pie-rose" label="pie-rose"><svg-icon icon-class="pie-rose" class="chart-icon" /></el-radio>
</div>
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
<el-radio value="funnel" label="funnel"><svg-icon icon-class="funnel" class="chart-icon" /></el-radio>
<el-radio value="radar" label="radar"><svg-icon icon-class="radar" class="chart-icon" /></el-radio>
</div>
<div>
<el-radio value="table-normal" label="table-normal"><svg-icon icon-class="table-normal" class="chart-icon" /></el-radio>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
<el-radio value="gauge" label="gauge"><svg-icon icon-class="gauge" class="chart-icon" /></el-radio>
<!-- <el-radio value="scatter" label="scatter"><svg-icon icon-class="scatter" class="chart-icon" /></el-radio>-->
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
</div>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论