forked from github/dataease
Merge pull request #736 from dataease/pr@dev@feat_chart_mix
feat: 视图增加组合图
This commit is contained in:
XiaJunjie2020
GitHub
commit
bd361131f1
@ -44,4 +44,6 @@ public class ChartViewFieldDTO implements Serializable {
|
||||
private String datePattern;
|
||||
|
||||
private Integer extField;
|
||||
|
||||
private String chartType;
|
||||
}
|
||||
|
||||
@ -427,6 +427,8 @@ public class ChartViewService {
|
||||
} else if (StringUtils.containsIgnoreCase(view.getType(), "text")
|
||||
|| StringUtils.containsIgnoreCase(view.getType(), "gauge")) {
|
||||
mapChart = transNormalChartData(xAxis, yAxis, view, data, isDrill);
|
||||
} else if (StringUtils.containsIgnoreCase(view.getType(), "chart-mix")) {
|
||||
mapChart = transMixChartData(xAxis, yAxis, view, data, isDrill);
|
||||
} else {
|
||||
mapChart = transChartData(xAxis, yAxis, view, data, isDrill);
|
||||
}
|
||||
@ -561,6 +563,67 @@ public class ChartViewService {
|
||||
return map;
|
||||
}
|
||||
|
||||
// 组合图形
|
||||
private Map<String, Object> transMixChartData(List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, ChartViewWithBLOBs view, List<String[]> data, boolean isDrill) {
|
||||
Map<String, Object> map = new HashMap<>();
|
||||
|
||||
List<String> x = new ArrayList<>();
|
||||
List<Series> series = new ArrayList<>();
|
||||
for (ChartViewFieldDTO y : yAxis) {
|
||||
Series series1 = new Series();
|
||||
series1.setName(y.getName());
|
||||
series1.setType(y.getChartType());
|
||||
series1.setData(new ArrayList<>());
|
||||
series.add(series1);
|
||||
}
|
||||
for (int i1 = 0; i1 < data.size(); i1++) {
|
||||
String[] d = data.get(i1);
|
||||
|
||||
StringBuilder a = new StringBuilder();
|
||||
for (int i = xAxis.size(); i < xAxis.size() + yAxis.size(); i++) {
|
||||
List<ChartDimensionDTO> dimensionList = new ArrayList<>();
|
||||
List<ChartQuotaDTO> quotaList = new ArrayList<>();
|
||||
AxisChartDataDTO axisChartDataDTO = new AxisChartDataDTO();
|
||||
|
||||
for (int j = 0; j < xAxis.size(); j++) {
|
||||
ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO();
|
||||
chartDimensionDTO.setId(xAxis.get(j).getId());
|
||||
chartDimensionDTO.setValue(d[j]);
|
||||
dimensionList.add(chartDimensionDTO);
|
||||
}
|
||||
axisChartDataDTO.setDimensionList(dimensionList);
|
||||
|
||||
int j = i - xAxis.size();
|
||||
ChartQuotaDTO chartQuotaDTO = new ChartQuotaDTO();
|
||||
chartQuotaDTO.setId(yAxis.get(j).getId());
|
||||
quotaList.add(chartQuotaDTO);
|
||||
axisChartDataDTO.setQuotaList(quotaList);
|
||||
try {
|
||||
axisChartDataDTO.setValue(new BigDecimal(StringUtils.isEmpty(d[i]) ? "0" : d[i]));
|
||||
} catch (Exception e) {
|
||||
axisChartDataDTO.setValue(new BigDecimal(0));
|
||||
}
|
||||
series.get(j).getData().add(axisChartDataDTO);
|
||||
}
|
||||
if (isDrill) {
|
||||
a.append(d[xAxis.size() - 1]);
|
||||
} else {
|
||||
for (int i = 0; i < xAxis.size(); i++) {
|
||||
if (i == xAxis.size() - 1) {
|
||||
a.append(d[i]);
|
||||
} else {
|
||||
a.append(d[i]).append("\n");
|
||||
}
|
||||
}
|
||||
}
|
||||
x.add(a.toString());
|
||||
}
|
||||
|
||||
map.put("x", x);
|
||||
map.put("series", series);
|
||||
return map;
|
||||
}
|
||||
|
||||
// 常规图形
|
||||
private Map<String, Object> transNormalChartData(List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, ChartViewWithBLOBs view, List<String[]> data, boolean isDrill) {
|
||||
Map<String, Object> map = new HashMap<>();
|
||||
|
||||
1
frontend/src/icons/svg/chart-mix.svg
Normal file
1
frontend/src/icons/svg/chart-mix.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1630391478183" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="839" width="200" height="200"><path d="M64 104.1c0-1.3 0.5-2.6 1.5-3.6s2.3-1.5 3.6-1.5H101c1.3 0 2.6 0.5 3.6 1.5s1.5 2.3 1.5 3.6V883H955c1.3 0 2.6 0.5 3.6 1.5s1.5 2.3 1.5 3.6V920c0 1.3-0.5 2.6-1.5 3.6s-2.3 1.5-3.6 1.5H64v-821z" p-id="840"></path><path d="M792 454.2c0-3.9 1.5-7.7 4.4-10.7s6.8-4.4 10.7-4.4h137.7c3.9 0 7.7 1.5 10.7 4.4 3 3 4.4 6.8 4.4 10.7V827H792V454.2zM601.5 577.6L374.8 378.1 223.9 567.5 162 518.3l203.3-254.5 227.9 201.4L900.1 99l60 50.5-358.6 428.1zM162 648.1c0-3.9 1.5-7.7 4.4-10.7s6.8-4.4 10.7-4.4h137.7c3.9 0 7.7 1.5 10.7 4.4 3 3 4.4 6.8 4.4 10.7V827H162V648.1z" p-id="841"></path><path d="M372 586.8c0-3.9 1.5-7.7 4.4-10.7s6.8-4.4 10.7-4.4h137.7c3.9 0 7.7 1.5 10.7 4.4 3 3 4.4 6.8 4.4 10.7V827H372V586.8zM582 714.4c0-3.9 1.5-7.7 4.4-10.7s6.8-4.4 10.7-4.4h137.7c3.9 0 7.7 1.5 10.7 4.4 3 3 4.4 6.8 4.4 10.7V827H582V714.4z" p-id="842"></path></svg>
|
||||
|
After Width: | Height: | Size: 986 B |
@ -848,7 +848,8 @@ export default {
|
||||
system_case: 'System',
|
||||
custom_case: 'Custom',
|
||||
last_layer: 'This Is The Last Layer',
|
||||
radar_size: 'Size'
|
||||
radar_size: 'Size',
|
||||
chart_mix: 'Mix'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
|
||||
|
||||
@ -847,7 +847,8 @@ export default {
|
||||
system_case: '系統方案',
|
||||
custom_case: '自定義',
|
||||
last_layer: '當前已經是最後一級',
|
||||
radar_size: '大小'
|
||||
radar_size: '大小',
|
||||
chart_mix: '組合圖'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: '有多個sheet頁面，默認抽取第一個',
|
||||
|
||||
@ -847,7 +847,8 @@ export default {
|
||||
system_case: '系统方案',
|
||||
custom_case: '自定义',
|
||||
last_layer: '当前已经是最后一级',
|
||||
radar_size: '大小'
|
||||
radar_size: '大小',
|
||||
chart_mix: '组合图'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: '有多个 Sheet 页，默认抽取第一个',
|
||||
|
||||
@ -51,7 +51,7 @@ export function componentStyle(chart_option, chart) {
|
||||
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.type.includes('scatter'))) {
|
||||
if (customStyle.xAxis && (chart.type.includes('bar') || chart.type.includes('line') || chart.type.includes('scatter') || chart.type === 'chart-mix')) {
|
||||
chart_option.xAxis.show = customStyle.xAxis.show
|
||||
chart_option.xAxis.position = customStyle.xAxis.position
|
||||
chart_option.xAxis.name = customStyle.xAxis.name
|
||||
@ -61,8 +61,12 @@ export function componentStyle(chart_option, chart) {
|
||||
|
||||
chart_option.xAxis.axisLabel.showMaxLabel = true
|
||||
chart_option.xAxis.axisLabel.showMinLabel = true
|
||||
|
||||
if (!customStyle.xAxis.show) {
|
||||
chart_option.xAxis.axisLabel.show = false
|
||||
}
|
||||
}
|
||||
if (customStyle.yAxis && (chart.type.includes('bar') || chart.type.includes('line') || chart.type.includes('scatter'))) {
|
||||
if (customStyle.yAxis && (chart.type.includes('bar') || chart.type.includes('line') || chart.type.includes('scatter') || chart.type === 'chart-mix')) {
|
||||
chart_option.yAxis.show = customStyle.yAxis.show
|
||||
chart_option.yAxis.position = customStyle.yAxis.position
|
||||
chart_option.yAxis.name = customStyle.yAxis.name
|
||||
@ -70,8 +74,12 @@ export function componentStyle(chart_option, chart) {
|
||||
chart_option.yAxis.splitLine = customStyle.yAxis.splitLine
|
||||
chart_option.yAxis.nameTextStyle = customStyle.yAxis.nameTextStyle
|
||||
|
||||
chart_option.xAxis.axisLabel.showMaxLabel = true
|
||||
chart_option.xAxis.axisLabel.showMinLabel = true
|
||||
chart_option.yAxis.axisLabel.showMaxLabel = true
|
||||
chart_option.yAxis.axisLabel.showMinLabel = true
|
||||
|
||||
if (!customStyle.yAxis.show) {
|
||||
chart_option.yAxis.axisLabel.show = false
|
||||
}
|
||||
}
|
||||
if (customStyle.split && chart.type.includes('radar')) {
|
||||
chart_option.radar.name = customStyle.split.name
|
||||
|
||||
73
frontend/src/views/chart/chart/mix/mix.js
Normal file
73
frontend/src/views/chart/chart/mix/mix.js
Normal file
@ -0,0 +1,73 @@
|
||||
import { hexColorToRGBA } from '@/views/chart/chart/util'
|
||||
import { componentStyle } from '../common/common'
|
||||
|
||||
export function baseMixOption(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
|
||||
chart_option.xAxis.data = chart.data.x
|
||||
for (let i = 0; i < chart.data.series.length; i++) {
|
||||
const y = chart.data.series[i]
|
||||
y.type = y.type ? y.type : 'bar'
|
||||
// color
|
||||
y.itemStyle = {
|
||||
color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha)
|
||||
}
|
||||
// size
|
||||
if (customAttr.size) {
|
||||
// bar
|
||||
if (y.type === 'bar') {
|
||||
if (customAttr.size.barDefault) {
|
||||
y.barWidth = null
|
||||
y.barGap = null
|
||||
} else {
|
||||
y.barWidth = customAttr.size.barWidth
|
||||
y.barGap = customAttr.size.barGap
|
||||
}
|
||||
}
|
||||
// line
|
||||
if (y.type === 'line') {
|
||||
y.symbol = customAttr.size.lineSymbol
|
||||
y.symbolSize = customAttr.size.lineSymbolSize
|
||||
y.lineStyle = {
|
||||
width: customAttr.size.lineWidth,
|
||||
type: customAttr.size.lineType
|
||||
}
|
||||
y.smooth = customAttr.size.lineSmooth
|
||||
y.areaStyle = {
|
||||
opacity: customAttr.size.lineArea ? 0.6 : 0
|
||||
}
|
||||
}
|
||||
// scatter
|
||||
if (y.type === 'scatter') {
|
||||
y.symbol = customAttr.size.scatterSymbol ? customAttr.size.scatterSymbol : 'circle'
|
||||
y.symbolSize = customAttr.size.scatterSymbolSize ? customAttr.size.scatterSymbolSize : 20
|
||||
}
|
||||
}
|
||||
// label
|
||||
if (customAttr.label) {
|
||||
y.label = customAttr.label
|
||||
}
|
||||
chart_option.legend.data.push(y.name)
|
||||
chart_option.series.push(y)
|
||||
}
|
||||
}
|
||||
// console.log(chart_option);
|
||||
componentStyle(chart_option, chart)
|
||||
return chart_option
|
||||
}
|
||||
@ -6,7 +6,18 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { BASE_BAR, BASE_LINE, HORIZONTAL_BAR, BASE_PIE, BASE_FUNNEL, BASE_RADAR, BASE_GAUGE, BASE_MAP, BASE_SCATTER, BASE_TREEMAP } from '../chart/chart'
|
||||
import {
|
||||
BASE_BAR,
|
||||
BASE_LINE,
|
||||
HORIZONTAL_BAR,
|
||||
BASE_PIE,
|
||||
BASE_FUNNEL,
|
||||
BASE_RADAR,
|
||||
BASE_GAUGE,
|
||||
BASE_MAP,
|
||||
BASE_SCATTER,
|
||||
BASE_TREEMAP
|
||||
} 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'
|
||||
@ -16,6 +27,7 @@ import { baseRadarOption } from '../chart/radar/radar'
|
||||
import { baseGaugeOption } from '../chart/gauge/gauge'
|
||||
import { baseScatterOption } from '../chart/scatter/scatter'
|
||||
import { baseTreemapOption } from '../chart/treemap/treemap'
|
||||
import { baseMixOption } from '@/views/chart/chart/mix/mix'
|
||||
// import eventBus from '@/components/canvas/utils/eventBus'
|
||||
import { uuid } from 'vue-uuid'
|
||||
import { geoJson } from '@/api/map/map'
|
||||
@ -139,6 +151,8 @@ export default {
|
||||
chart_option = baseScatterOption(JSON.parse(JSON.stringify(BASE_SCATTER)), chart)
|
||||
} else if (chart.type === 'treemap') {
|
||||
chart_option = baseTreemapOption(JSON.parse(JSON.stringify(BASE_TREEMAP)), chart)
|
||||
} else if (chart.type === 'chart-mix') {
|
||||
chart_option = baseMixOption(JSON.parse(JSON.stringify(BASE_BAR)), chart)
|
||||
}
|
||||
|
||||
if (chart.type === 'map') {
|
||||
|
||||
@ -6,6 +6,9 @@
|
||||
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
|
||||
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
|
||||
<svg-icon v-if="item.chartType === 'bar'" icon-class="bar" class-name="field-icon-sort" />
|
||||
<svg-icon v-if="item.chartType === 'line'" icon-class="line" class-name="field-icon-sort" />
|
||||
<svg-icon v-if="item.chartType === 'scatter'" icon-class="scatter" class-name="field-icon-sort" />
|
||||
<svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
|
||||
<svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
|
||||
</span>
|
||||
@ -20,6 +23,9 @@
|
||||
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
|
||||
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
|
||||
<svg-icon v-if="item.chartType === 'bar'" icon-class="bar" class-name="field-icon-sort" />
|
||||
<svg-icon v-if="item.chartType === 'line'" icon-class="line" class-name="field-icon-sort" />
|
||||
<svg-icon v-if="item.chartType === 'scatter'" icon-class="scatter" class-name="field-icon-sort" />
|
||||
<svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
|
||||
<svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
|
||||
</span>
|
||||
@ -28,7 +34,23 @@
|
||||
<i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
|
||||
</el-tag>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>
|
||||
<el-dropdown-item v-show="chart.type ==='chart-mix'">
|
||||
<el-dropdown placement="right-start" size="mini" style="width: 100%" @command="switchChartType">
|
||||
<span class="el-dropdown-link inner-dropdown-menu">
|
||||
<span>
|
||||
<i class="el-icon-s-data" />
|
||||
<span>{{ $t('chart.chart_type') }}</span>
|
||||
</span>
|
||||
<i class="el-icon-arrow-right el-icon--right" />
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item :command="beforeSwitch('bar')">{{ $t('chart.chart_bar') }}</el-dropdown-item>
|
||||
<el-dropdown-item :command="beforeSwitch('line')">{{ $t('chart.chart_line') }}</el-dropdown-item>
|
||||
<el-dropdown-item :command="beforeSwitch('scatter')">{{ $t('chart.chart_scatter') }}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item divided>
|
||||
<el-dropdown placement="right-start" size="mini" style="width: 100%" @command="summary">
|
||||
<span class="el-dropdown-link inner-dropdown-menu">
|
||||
<span>
|
||||
@ -112,6 +134,10 @@ export default {
|
||||
index: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
chart: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -157,6 +183,17 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
switchChartType(param) {
|
||||
// console.log(param)
|
||||
this.item.chartType = param.type
|
||||
this.$emit('onQuotaItemChange', this.item)
|
||||
},
|
||||
beforeSwitch(type) {
|
||||
return {
|
||||
type: type
|
||||
}
|
||||
},
|
||||
|
||||
quickCalc(param) {
|
||||
|
||||
},
|
||||
@ -237,7 +274,7 @@ export default {
|
||||
|
||||
.item-span-style{
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
width: 70px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
@ -151,7 +151,7 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.bubble_size')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="20" @change="changeBarSizeCase" />
|
||||
<el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="40" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
@ -163,6 +163,61 @@
|
||||
<el-slider v-model="sizeForm.treemapHeight" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && chart.type === 'chart-mix'" ref="sizeFormBar" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.adapt')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase">{{ $t('chart.adapt') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.bar_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.bar_gap')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.line_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_type')" class="form-item">
|
||||
<el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase">
|
||||
<el-radio-button label="solid">{{ $t('chart.line_type_solid') }}</el-radio-button>
|
||||
<el-radio-button label="dashed">{{ $t('chart.line_type_dashed') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_symbol')" class="form-item">
|
||||
<el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
|
||||
<el-option
|
||||
v-for="item in lineSymbolOptions"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_symbol_size')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.lineSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_smooth')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase">{{ $t('chart.line_smooth') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_area')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.lineArea" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.bubble_symbol')" class="form-item">
|
||||
<el-select v-model="sizeForm.scatterSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
|
||||
<el-option
|
||||
v-for="item in lineSymbolOptions"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.bubble_size')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="40" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</div>
|
||||
</template>
|
||||
@ -268,4 +323,7 @@ export default {
|
||||
.el-form-item{
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.el-divider--horizontal {
|
||||
margin: 10px 0
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -168,13 +168,18 @@
|
||||
<svg-icon icon-class="scatter" class="chart-icon" />
|
||||
</span>
|
||||
</el-radio>
|
||||
<el-radio value="chart-mix" label="chart-mix">
|
||||
<span :title="$t('chart.chart_mix')">
|
||||
<svg-icon icon-class="chart-mix" class="chart-icon" />
|
||||
</span>
|
||||
</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="map" label="map">
|
||||
<span :title="$t('chart.chart_map')">
|
||||
<svg-icon icon-class="map" class="chart-icon" />
|
||||
</span>
|
||||
</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="radar" label="radar">
|
||||
<span :title="$t('chart.chart_radar')">
|
||||
<svg-icon icon-class="radar" class="chart-icon" />
|
||||
@ -195,13 +200,13 @@
|
||||
<svg-icon icon-class="pie-rose" class="chart-icon" />
|
||||
</span>
|
||||
</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">
|
||||
<span :title="$t('chart.chart_funnel')">
|
||||
<svg-icon icon-class="funnel" class="chart-icon" />
|
||||
</span>
|
||||
</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="treemap" label="treemap">
|
||||
<span :title="$t('chart.chart_treemap')">
|
||||
<svg-icon icon-class="treemap" class="chart-icon" />
|
||||
@ -210,7 +215,6 @@
|
||||
<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="" 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>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
@ -250,7 +254,7 @@
|
||||
<el-row v-if="view.type !=='text' && view.type !== 'gauge'" class="padding-lr">
|
||||
<span style="width: 80px;text-align: right;">
|
||||
<span v-if="view.type && view.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
|
||||
<span v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter'))">{{ $t('chart.drag_block_type_axis') }}</span>
|
||||
<span v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix')">{{ $t('chart.drag_block_type_axis') }}</span>
|
||||
<span v-else-if="view.type && view.type.includes('pie')">{{ $t('chart.drag_block_pie_label') }}</span>
|
||||
<span v-else-if="view.type && view.type.includes('funnel')">{{ $t('chart.drag_block_funnel_split') }}</span>
|
||||
<span v-else-if="view.type && view.type.includes('radar')">{{ $t('chart.drag_block_radar_label') }}</span>
|
||||
@ -280,7 +284,7 @@
|
||||
<el-row class="padding-lr" style="margin-top: 6px;">
|
||||
<span style="width: 80px;text-align: right;">
|
||||
<span v-if="view.type && view.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
|
||||
<span v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter'))">{{ $t('chart.drag_block_value_axis') }}</span>
|
||||
<span v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix')">{{ $t('chart.drag_block_value_axis') }}</span>
|
||||
<span v-else-if="view.type && view.type.includes('pie')">{{ $t('chart.drag_block_pie_angel') }}</span>
|
||||
<span v-else-if="view.type && view.type.includes('funnel')">{{ $t('chart.drag_block_funnel_width') }}</span>
|
||||
<span v-else-if="view.type && view.type.includes('radar')">{{ $t('chart.drag_block_radar_length') }}</span>
|
||||
@ -302,7 +306,7 @@
|
||||
@update="save(true)"
|
||||
>
|
||||
<transition-group class="draggable-group">
|
||||
<quota-item v-for="(item,index) in view.yaxis" :key="item.id" :param="param" :index="index" :item="item" @onQuotaItemChange="quotaItemChange" @onQuotaItemRemove="quotaItemRemove" @editItemFilter="showQuotaEditFilter" @onNameEdit="showRename" />
|
||||
<quota-item v-for="(item,index) in view.yaxis" :key="item.id" :param="param" :index="index" :item="item" :chart="chart" @onQuotaItemChange="quotaItemChange" @onQuotaItemRemove="quotaItemRemove" @editItemFilter="showQuotaEditFilter" @onNameEdit="showRename" />
|
||||
</transition-group>
|
||||
</draggable>
|
||||
<div v-if="!view.yaxis || view.yaxis.length === 0" class="drag-placeholder-style">
|
||||
@ -453,10 +457,10 @@
|
||||
<el-row>
|
||||
<span class="padding-lr">{{ $t('chart.module_style') }}</span>
|
||||
<el-collapse v-model="styleActiveNames" class="style-collapse">
|
||||
<el-collapse-item v-show="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter'))" name="xAxis" :title="$t('chart.xAxis')">
|
||||
<el-collapse-item v-show="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix')" name="xAxis" :title="$t('chart.xAxis')">
|
||||
<x-axis-selector :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item v-show="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter'))" name="yAxis" :title="$t('chart.yAxis')">
|
||||
<el-collapse-item v-show="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix')" name="yAxis" :title="$t('chart.yAxis')">
|
||||
<y-axis-selector :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item v-show="view.type && view.type.includes('radar')" name="split" :title="$t('chart.split')">
|
||||
@ -860,6 +864,9 @@ export default {
|
||||
view.yaxis = [view.yaxis[0]]
|
||||
}
|
||||
view.yaxis.forEach(function(ele) {
|
||||
if (!ele.chartType) {
|
||||
ele.chartType = 'bar'
|
||||
}
|
||||
if (!ele.summary || ele.summary === '') {
|
||||
if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) {
|
||||
ele.summary = 'count'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user