github/dataease
github/dataease
3
0
Fork 1
mirror of https://github.com/dataease/dataease.git synced 2025-02-25 20:42:55 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Merge branch 'dev' of github.com:dataease/dataease into dev

Browse Source
This commit is contained in:
taojinlong 2022-05-23 13:51:21 +08:00
commit 8401f4e14f
12 changed files with 644 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
backend/src/main/java/io/dataease/service/chart/ChartViewService.java
View File

@ -54,6 +54,7 @@ import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;
import javax.annotation.Resource;
import java.lang.reflect.Type;
import java.math.BigDecimal;
import java.math.RoundingMode;
import java.text.SimpleDateFormat;
@ -128,6 +129,9 @@ public class ChartViewService {
}
public ChartViewWithBLOBs newOne(ChartViewWithBLOBs chartView) {
if (StringUtils.isBlank(chartView.getViewFields())) {
chartView.setViewFields("[]");
}
long timestamp = System.currentTimeMillis();
chartView.setUpdateTime(timestamp);
chartView.setId(UUID.randomUUID().toString());
@ -300,23 +304,23 @@ public class ChartViewService {
if (ObjectUtils.isEmpty(view)) {
throw new RuntimeException(Translator.get("i18n_chart_delete"));
}
List<ChartViewFieldDTO> xAxis = new Gson().fromJson(view.getXAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
List<ChartViewFieldDTO> xAxis = gson.fromJson(view.getXAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
}.getType());
if (StringUtils.equalsIgnoreCase(view.getType(), "table-pivot")) {
List<ChartViewFieldDTO> xAxisExt = new Gson().fromJson(view.getXAxisExt(), new TypeToken<List<ChartViewFieldDTO>>() {
List<ChartViewFieldDTO> xAxisExt = gson.fromJson(view.getXAxisExt(), new TypeToken<List<ChartViewFieldDTO>>() {
}.getType());
xAxis.addAll(xAxisExt);
}
List<ChartViewFieldDTO> yAxis = new Gson().fromJson(view.getYAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
List<ChartViewFieldDTO> yAxis = gson.fromJson(view.getYAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
}.getType());
if (StringUtils.equalsIgnoreCase(view.getType(), "chart-mix")) {
List<ChartViewFieldDTO> yAxisExt = new Gson().fromJson(view.getYAxisExt(), new TypeToken<List<ChartViewFieldDTO>>() {
List<ChartViewFieldDTO> yAxisExt = gson.fromJson(view.getYAxisExt(), new TypeToken<List<ChartViewFieldDTO>>() {
}.getType());
yAxis.addAll(yAxisExt);
}
List<ChartViewFieldDTO> extStack = new Gson().fromJson(view.getExtStack(), new TypeToken<List<ChartViewFieldDTO>>() {
List<ChartViewFieldDTO> extStack = gson.fromJson(view.getExtStack(), new TypeToken<List<ChartViewFieldDTO>>() {
}.getType());
List<ChartViewFieldDTO> extBubble = new Gson().fromJson(view.getExtBubble(), new TypeToken<List<ChartViewFieldDTO>>() {
List<ChartViewFieldDTO> extBubble = gson.fromJson(view.getExtBubble(), new TypeToken<List<ChartViewFieldDTO>>() {
}.getType());
List<ChartFieldCustomFilterDTO> fieldCustomFilter = new ArrayList<ChartFieldCustomFilterDTO>();
List<ChartViewFieldDTO> drill = new ArrayList<ChartViewFieldDTO>();
@ -401,7 +405,7 @@ public class ChartViewService {
// 如果是插件视图 走插件内部的逻辑
if (ObjectUtils.isNotEmpty(view.getIsPlugin()) && view.getIsPlugin()) {
Map<String, List<ChartViewFieldDTO>> fieldMap = new HashMap<>();
List<ChartViewFieldDTO> xAxisExt = new Gson().fromJson(view.getXAxisExt(), new TypeToken<List<ChartViewFieldDTO>>() {
List<ChartViewFieldDTO> xAxisExt = gson.fromJson(view.getXAxisExt(), new TypeToken<List<ChartViewFieldDTO>>() {
}.getType());
fieldMap.put("xAxisExt", xAxisExt);
fieldMap.put("xAxis", xAxis);
@ -434,7 +438,7 @@ public class ChartViewService {
}
// DatasourceProvider datasourceProvider = ProviderFactory.getProvider(ds.getType());
datasourceRequest.setDatasource(ds);
DataTableInfoDTO dataTableInfoDTO = new Gson().fromJson(table.getInfo(), DataTableInfoDTO.class);
DataTableInfoDTO dataTableInfoDTO = gson.fromJson(table.getInfo(), DataTableInfoDTO.class);
QueryProvider qp = ProviderFactory.getQueryProvider(ds.getType());
if (StringUtils.equalsIgnoreCase(table.getType(), "db")) {
datasourceRequest.setTable(dataTableInfoDTO.getTable());
@ -462,7 +466,7 @@ public class ChartViewService {
datasourceRequest.setQuery(qp.getSQLAsTmp(dataTableInfoDTO.getSql(), xAxis, yAxis, fieldCustomFilter, extFilterList, view));
}
} else if (StringUtils.equalsIgnoreCase(table.getType(), "custom")) {
DataTableInfoDTO dt = new Gson().fromJson(table.getInfo(), DataTableInfoDTO.class);
DataTableInfoDTO dt = gson.fromJson(table.getInfo(), DataTableInfoDTO.class);
List<DataSetTableUnionDTO> list = dataSetTableUnionService.listByTableId(dt.getList().get(0).getTableId());
String sql = dataSetTableService.getCustomSQLDatasource(dt, list, ds);
if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType()) || StringUtils.equalsIgnoreCase("liquid", view.getType())) {
@ -477,7 +481,7 @@ public class ChartViewService {
datasourceRequest.setQuery(qp.getSQLAsTmp(sql, xAxis, yAxis, fieldCustomFilter, extFilterList, view));
}
} else if (StringUtils.equalsIgnoreCase(table.getType(), "union")) {
DataTableInfoDTO dt = new Gson().fromJson(table.getInfo(), DataTableInfoDTO.class);
DataTableInfoDTO dt = gson.fromJson(table.getInfo(), DataTableInfoDTO.class);
Map<String, Object> sqlMap = dataSetTableService.getUnionSQLDatasource(dt, ds);
String sql = (String) sqlMap.get("sql");
@ -538,28 +542,30 @@ public class ChartViewService {
if (ObjectUtils.isEmpty(view)) {
throw new RuntimeException(Translator.get("i18n_chart_delete"));
}
List<ChartViewFieldDTO> xAxis = new Gson().fromJson(view.getXAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
}.getType());
Type tokenType = new TypeToken<List<ChartViewFieldDTO>>() {}.getType();
Type filterTokenType = new TypeToken<List<ChartFieldCustomFilterDTO>>() {}.getType();
List<ChartViewFieldDTO> viewFields = gson.fromJson(view.getViewFields(), tokenType);
Map<String, List<ChartViewFieldDTO>> extFieldsMap = null;
if (CollectionUtils.isNotEmpty(viewFields)) {
extFieldsMap = viewFields.stream().collect(Collectors.groupingBy(ChartViewFieldDTO::getBusiType));
}
List<ChartViewFieldDTO> xAxis = gson.fromJson(view.getXAxis(), tokenType);
if (StringUtils.equalsIgnoreCase(view.getType(), "table-pivot")) {
List<ChartViewFieldDTO> xAxisExt = new Gson().fromJson(view.getXAxisExt(), new TypeToken<List<ChartViewFieldDTO>>() {
}.getType());
List<ChartViewFieldDTO> xAxisExt = gson.fromJson(view.getXAxisExt(), tokenType);
xAxis.addAll(xAxisExt);
}
List<ChartViewFieldDTO> yAxis = new Gson().fromJson(view.getYAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
}.getType());
List<ChartViewFieldDTO> yAxis = gson.fromJson(view.getYAxis(), tokenType);
if (StringUtils.equalsIgnoreCase(view.getType(), "chart-mix")) {
List<ChartViewFieldDTO> yAxisExt = new Gson().fromJson(view.getYAxisExt(), new TypeToken<List<ChartViewFieldDTO>>() {
}.getType());
List<ChartViewFieldDTO> yAxisExt = gson.fromJson(view.getYAxisExt(), tokenType);
yAxis.addAll(yAxisExt);
}
List<ChartViewFieldDTO> extStack = new Gson().fromJson(view.getExtStack(), new TypeToken<List<ChartViewFieldDTO>>() {
}.getType());
List<ChartViewFieldDTO> extBubble = new Gson().fromJson(view.getExtBubble(), new TypeToken<List<ChartViewFieldDTO>>() {
}.getType());
List<ChartFieldCustomFilterDTO> fieldCustomFilter = new Gson().fromJson(view.getCustomFilter(), new TypeToken<List<ChartFieldCustomFilterDTO>>() {
}.getType());
List<ChartViewFieldDTO> drill = new Gson().fromJson(view.getDrillFields(), new TypeToken<List<ChartViewFieldDTO>>() {
}.getType());
List<ChartViewFieldDTO> extStack = gson.fromJson(view.getExtStack(), tokenType);
List<ChartViewFieldDTO> extBubble = gson.fromJson(view.getExtBubble(), tokenType);
List<ChartFieldCustomFilterDTO> fieldCustomFilter = gson.fromJson(view.getCustomFilter(), filterTokenType);
List<ChartViewFieldDTO> drill = gson.fromJson(view.getDrillFields(), tokenType);
DatasetTableField datasetTableFieldObj = DatasetTableField.builder().tableId(view.getTableId()).checked(Boolean.TRUE).build();
@ -741,14 +747,12 @@ public class ChartViewService {
// 如果是插件视图 走插件内部的逻辑
if (ObjectUtils.isNotEmpty(view.getIsPlugin()) && view.getIsPlugin()) {
Map<String, List<ChartViewFieldDTO>> fieldMap = new HashMap<>();
List<ChartViewFieldDTO> xAxisExt = new Gson().fromJson(view.getXAxisExt(), new TypeToken<List<ChartViewFieldDTO>>() {
}.getType());
fieldMap.put("xAxisExt", xAxisExt);
fieldMap.put("xAxis", xAxis);
Map<String, List<ChartViewFieldDTO>> fieldMap = ObjectUtils.isEmpty(extFieldsMap) ? new HashMap<>() : extFieldsMap;
fieldMap.put("yAxis", yAxis);
fieldMap.put("extStack", extStack);
fieldMap.put("extBubble", extBubble);
fieldMap.put("xAxis", xAxis);
PluginViewParam pluginViewParam = buildPluginParam(fieldMap, fieldCustomFilter, extFilterList, ds, table, view);
String sql = pluginViewSql(pluginViewParam, view);
if (StringUtils.isBlank(sql)) {
@ -775,7 +779,7 @@ public class ChartViewService {
}
// DatasourceProvider datasourceProvider = ProviderFactory.getProvider(ds.getType());
datasourceRequest.setDatasource(ds);
DataTableInfoDTO dataTableInfoDTO = new Gson().fromJson(table.getInfo(), DataTableInfoDTO.class);
DataTableInfoDTO dataTableInfoDTO = gson.fromJson(table.getInfo(), DataTableInfoDTO.class);
QueryProvider qp = ProviderFactory.getQueryProvider(ds.getType());
if (StringUtils.equalsIgnoreCase(table.getType(), "db")) {
datasourceRequest.setTable(dataTableInfoDTO.getTable());
@ -803,7 +807,7 @@ public class ChartViewService {
datasourceRequest.setQuery(qp.getSQLAsTmp(dataTableInfoDTO.getSql(), xAxis, yAxis, fieldCustomFilter, extFilterList, view));
}
} else if (StringUtils.equalsIgnoreCase(table.getType(), "custom")) {
DataTableInfoDTO dt = new Gson().fromJson(table.getInfo(), DataTableInfoDTO.class);
DataTableInfoDTO dt = gson.fromJson(table.getInfo(), DataTableInfoDTO.class);
List<DataSetTableUnionDTO> list = dataSetTableUnionService.listByTableId(dt.getList().get(0).getTableId());
String sql = dataSetTableService.getCustomSQLDatasource(dt, list, ds);
if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType()) || StringUtils.equalsIgnoreCase("liquid", view.getType())) {
@ -818,7 +822,7 @@ public class ChartViewService {
datasourceRequest.setQuery(qp.getSQLAsTmp(sql, xAxis, yAxis, fieldCustomFilter, extFilterList, view));
}
} else if (StringUtils.equalsIgnoreCase(table.getType(), "union")) {
DataTableInfoDTO dt = new Gson().fromJson(table.getInfo(), DataTableInfoDTO.class);
DataTableInfoDTO dt = gson.fromJson(table.getInfo(), DataTableInfoDTO.class);
Map<String, Object> sqlMap = dataSetTableService.getUnionSQLDatasource(dt, ds);
String sql = (String) sqlMap.get("sql");
@ -1376,7 +1380,7 @@ public class ChartViewService {
public List<String> getFieldData(String id, ChartExtRequest requestList, boolean cache, String fieldId) throws Exception {
ChartViewDTO view = getOne(id, requestList.getQueryFrom());
List<String[]> sqlData = sqlData(view, requestList, cache, fieldId);
List<ChartViewFieldDTO> xAxis = new Gson().fromJson(view.getXAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
List<ChartViewFieldDTO> xAxis = gson.fromJson(view.getXAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
}.getType());
DatasetTableField field = dataSetTableFieldsService.get(fieldId);

5
frontend/src/views/chart/chart/bar/bar_antv.js
View File

@ -10,6 +10,7 @@ import {
getSlider,
getAnalyse
} from '@/views/chart/chart/common/common_antv'
import { antVCustomColor } from '@/views/chart/chart/util'
export function baseBarOptionAntV(plot, container, chart, action, isGroup, isStack) {
// theme
@ -98,6 +99,8 @@ export function baseBarOptionAntV(plot, container, chart, action, isGroup, isSta
} else {
delete options.isStack
}
// custom color
options.color = antVCustomColor(chart)
// 开始渲染
if (plot) {
@ -198,6 +201,8 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt
} else {
delete options.isStack
}
// custom color
options.color = antVCustomColor(chart)
// 开始渲染
if (plot) {

3
frontend/src/views/chart/chart/funnel/funnel_antv.js
View File

@ -1,5 +1,6 @@
import { getLabel, getLegend, getPadding, getTheme, getTooltip } from '@/views/chart/chart/common/common_antv'
import { Funnel } from '@antv/g2plot'
import { antVCustomColor } from '@/views/chart/chart/util'
export function baseFunnelOptionAntV(plot, container, chart, action) {
// theme
@ -62,6 +63,8 @@ export function baseFunnelOptionAntV(plot, container, chart, action) {
const s = JSON.parse(JSON.stringify(customAttr.size))
}
}
// custom color
options.color = antVCustomColor(chart)
// 开始渲染
if (plot) {

5
frontend/src/views/chart/chart/line/line_antv.js
View File

@ -10,6 +10,7 @@ import {
getSlider,
getAnalyse
} from '@/views/chart/chart/common/common_antv'
import { antVCustomColor } from '@/views/chart/chart/util'
export function baseLineOptionAntV(plot, container, chart, action) {
// theme
@ -90,6 +91,8 @@ export function baseLineOptionAntV(plot, container, chart, action) {
}
}
}
// custom color
options.color = antVCustomColor(chart)
// 开始渲染
if (plot) {
@ -184,6 +187,8 @@ export function baseAreaOptionAntV(plot, container, chart, action) {
}
}
}
// custom color
options.color = antVCustomColor(chart)
// 开始渲染
if (plot) {

5
frontend/src/views/chart/chart/pie/pie_antv.js
View File

@ -7,6 +7,7 @@ import {
} from '@/views/chart/chart/common/common_antv'
import { Pie, Rose } from '@antv/g2plot'
import { antVCustomColor } from '@/views/chart/chart/util'
export function basePieOptionAntV(plot, container, chart, action) {
// theme
@ -84,6 +85,8 @@ export function basePieOptionAntV(plot, container, chart, action) {
options.innerRadius = parseFloat(parseInt(s.pieInnerRadius) / 100)
}
}
// custom color
options.color = antVCustomColor(chart)
// 开始渲染
if (plot) {
@ -165,6 +168,8 @@ export function basePieRoseOptionAntV(plot, container, chart, action) {
options.innerRadius = parseFloat(parseInt(s.pieInnerRadius) / 100)
}
}
// custom color
options.color = antVCustomColor(chart)
// 开始渲染
if (plot) {

4
frontend/src/views/chart/chart/radar/radar_antv.js
View File

@ -1,5 +1,6 @@
import { getLabel, getLegend, getPadding, getTheme, getTooltip } from '@/views/chart/chart/common/common_antv'
import { Radar } from '@antv/g2plot'
import { antVCustomColor } from '@/views/chart/chart/util'
export function baseRadarOptionAntV(plot, container, chart, action) {
// theme
@ -132,6 +133,9 @@ export function baseRadarOptionAntV(plot, container, chart, action) {
options.xAxis = xAxis
options.yAxis = yAxis
// custom color
options.color = antVCustomColor(chart)
// 开始渲染
if (plot) {
plot.destroy()

3
frontend/src/views/chart/chart/scatter/scatter_antv.js
View File

@ -11,6 +11,7 @@ import {
} from '@/views/chart/chart/common/common_antv'
import { Scatter } from '@antv/g2plot'
import { antVCustomColor } from '@/views/chart/chart/util'
export function baseScatterOptionAntV(plot, container, chart, action) {
// theme
@ -86,6 +87,8 @@ export function baseScatterOptionAntV(plot, container, chart, action) {
options.shape = s.scatterSymbol
}
}
// custom color
options.color = antVCustomColor(chart)
// 开始渲染
if (plot) {

123
frontend/src/views/chart/chart/util.js
View File

@ -397,7 +397,7 @@ export const TYPE_CONFIGS = [
'color-selector',
'size-selector',
'label-selector',
'title-selector',
'title-selector'
]
},
@ -665,3 +665,124 @@ export function customSort(custom, data) {
return joinArr.concat(subArr)
}
export function customColor(custom, res, colors) {
const result = []
for (let i = 0; i < res.length; i++) {
const r = res[i]
let flag = false
for (let j = 0; j < custom.length; j++) {
const c = custom[j]
if (r.name === c.name) {
flag = true
result.push(c)
}
}
if (!flag) {
result.push(r)
}
}
return result
}
export function getColors(chart, colors, reset) {
// 自定义颜色，先按照没有设定的情况，并排好序，当做最终结果
let seriesColors = []
let series
if (chart.type.includes('stack')) {
if (chart.data) {
const data = chart.data.datas
const stackData = []
for (let i = 0; i < data.length; i++) {
const s = data[i]
stackData.push(s.category)
}
const sArr = stackData.filter(function(item, index, stackData) {
return stackData.indexOf(item, 0) === index
})
for (let i = 0; i < sArr.length; i++) {
const s = sArr[i]
seriesColors.push({
name: s,
color: colors[i % colors.length],
isCustom: false
})
}
}
} else if (chart.type.includes('bar') || chart.type.includes('line') || chart.type.includes('scatter') || chart.type.includes('radar')) {
if (Object.prototype.toString.call(chart.yaxis) === '[object Array]') {
series = JSON.parse(JSON.stringify(chart.yaxis))
} else {
series = JSON.parse(chart.yaxis)
}
for (let i = 0; i < series.length; i++) {
const s = series[i]
seriesColors.push({
name: s.name,
color: colors[i % colors.length],
isCustom: false
})
}
} else {
if (chart.data) {
const data = chart.data.datas
// data 的维度值，需要根据自定义顺序排序
// let customSortData
// if (Object.prototype.toString.call(chart.customSort) === '[object Array]') {
// customSortData = JSON.parse(JSON.stringify(chart.customSort))
// } else {
// customSortData = JSON.parse(chart.customSort)
// }
// if (customSortData && customSortData.length > 0) {
// data = customSort(customSortData, data)
// }
for (let i = 0; i < data.length; i++) {
const s = data[i]
seriesColors.push({
name: s.field,
color: colors[i % colors.length],
isCustom: false
})
}
}
}
// 如果有自定义，则与上述中的结果合并。
// res，custom，以custom为准，去掉res中不存在的，并将custom中name一样的color赋值给res，不存在的name，即新增值，使用i % colors.length，从配色方案中选
if (!reset) {
let sc = null
if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
sc = JSON.parse(JSON.stringify(chart.customAttr)).color.seriesColors
} else {
sc = JSON.parse(chart.customAttr).color.seriesColors
}
if (sc && sc.length > 0) {
seriesColors = customColor(sc, seriesColors)
}
// 根据isCustom字段，修正color
for (let i = 0; i < seriesColors.length; i++) {
if (!seriesColors[i].isCustom) {
seriesColors[i].color = colors[i % colors.length]
}
}
}
return seriesColors
}
export function antVCustomColor(chart) {
const colors = []
if (chart.customAttr) {
const customAttr = JSON.parse(chart.customAttr)
// color
if (customAttr.color) {
const c = JSON.parse(JSON.stringify(customAttr.color))
const customColors = getColors(chart, c.colors, false)
for (let i = 0; i < customColors.length; i++) {
colors.push(hexColorToRGBA(customColors[i].color, c.alpha))
}
}
}
return colors
}

416
frontend/src/views/chart/components/shape-attr/ColorSelectorExt.vue Normal file
View File

@ -0,0 +1,416 @@
<template>
<div style="width: 100%">
<el-col>
<el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
<div>
<el-form-item
v-show="chart.type && !chart.type.includes('table') && !chart.type.includes('text') && chart.type !== 'label'"
:label="$t('chart.color_case')"
class="form-item"
>
<el-popover
placement="bottom"
width="400"
trigger="click"
>
<div style="padding: 6px 10px;">
<div>
<span class="color-label">{{ $t('chart.system_case') }}</span>
<el-select
v-model="colorForm.value"
:placeholder="$t('chart.pls_slc_color_case')"
size="mini"
@change="changeColorOption"
>
<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">
<span
v-for="(c,index) in option.colors"
:key="index"
:style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}"
/>
</div>
<span style="margin-left: 4px;">{{ option.name }}</span>
</el-option>
</el-select>
<el-button size="mini" type="text" style="margin-left: 2px;" @click="resetCustomColor">
{{ $t('commons.reset') }}
</el-button>
</div>
<div style="display: flex;align-items: center;margin-top: 10px;">
<span class="color-label" />
<span>
<!-- 色系自定义-->
<!-- <el-radio-group v-model="customColor" class="color-type">-->
<!-- <el-radio v-for="(c,index) in colorForm.colors" :key="index" :label="c" style="padding: 2px;" @change="switchColor(index)">-->
<!-- <span :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />-->
<!-- </el-radio>-->
<!-- </el-radio-group>-->
<span v-for="(c,index) in colorForm.colors" :key="index" style="padding: 2px;">
<span :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
</span>
</span>
</div>
<!-- 色系自定义-->
<!-- <div style="display: flex;align-items: center;margin-top: 10px;">-->
<!-- <span class="color-label" />-->
<!-- <span>-->
<!-- <el-color-picker v-model="customColor" class="color-picker-style" :predefine="predefineColors" @change="switchColorCase" />-->
<!-- </span>-->
<!-- </div>-->
<div class="custom-color-style">
<div
v-for="(item,index) in colorForm.seriesColors"
:key="index"
style="display: flex;align-items: center;margin: 2px 0;"
>
<span class="span-label" :title="item.name">{{ item.name }}</span>
<el-color-picker
v-model="item.color"
class="color-picker-style"
:predefine="predefineColors"
@change="switchCustomColor(index)"
/>
</div>
</div>
</div>
<div slot="reference" style="cursor: pointer;margin-top: 2px;width: 180px;">
<span
v-for="(c,index) in colorForm.colors"
:key="index"
:style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}"
/>
</div>
</el-popover>
</el-form-item>
<el-form-item
v-show="(chart.type && (chart.type.includes('text') || chart.type === 'label')) || sourceType==='panelTable'"
:label="$t('chart.quota_color')"
class="form-item"
>
<el-color-picker
v-model="colorForm.quotaColor"
class="color-picker-style"
:predefine="predefineColors"
@change="changeColorCase"
/>
</el-form-item>
<el-form-item
v-show="(chart.type && chart.type.includes('text') || chart.type === 'label') || sourceType==='panelTable'"
:label="$t('chart.dimension_color')"
class="form-item"
>
<el-color-picker
v-model="colorForm.dimensionColor"
class="color-picker-style"
:predefine="predefineColors"
@change="changeColorCase"
/>
</el-form-item>
</div>
<el-form-item
v-show="chart.type && !chart.type.includes('text') && chart.type !== 'label'"
: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>
</el-col>
</div>
</template>
<script>
import { COLOR_PANEL, DEFAULT_COLOR_CASE } from '../../chart/chart'
import { getColors } from '@/views/chart/chart/util'
export default {
name: 'ColorSelectorExt',
props: {
param: {
type: Object,
required: false
},
chart: {
type: Object,
required: true
},
sourceType: {
type: String,
default: 'view',
required: false
}
},
data() {
return {
colorCases: [
{
name: this.$t('chart.color_default'),
value: 'default',
colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
},
{
name: this.$t('chart.color_retro'),
value: 'retro',
colors: ['#0780cf', '#765005', '#fa6d1d', '#0e2c82', '#b6b51f', '#da1f18', '#701866', '#f47a75', '#009db2']
},
{
name: this.$t('chart.color_elegant'),
value: 'elegant',
colors: ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#434348']
},
{
name: this.$t('chart.color_future'),
value: 'future',
colors: ['#63b2ee', '#76da91', '#f8cb7f', '#f89588', '#7cd6cf', '#9192ab', '#7898e1', '#efa666', '#eddd86']
},
{
name: this.$t('chart.color_gradual'),
value: 'gradual',
colors: ['#71ae46', '#96b744', '#c4cc38', '#ebe12a', '#eab026', '#e3852b', '#d85d2a', '#ce2626', '#ac2026']
},
{
name: this.$t('chart.color_simple'),
value: 'simple',
colors: ['#929fff', '#9de0ff', '#ffa897', '#af87fe', '#7dc3fe', '#bb60b2', '#433e7c', '#f47a75', '#009db2']
},
{
name: this.$t('chart.color_business'),
value: 'business',
colors: ['#194f97', '#555555', '#bd6b08', '#00686b', '#c82d31', '#625ba1', '#898989', '#9c9800', '#007f54']
},
{
name: this.$t('chart.color_gentle'),
value: 'gentle',
colors: ['#5b9bd5', '#ed7d31', '#70ad47', '#ffc000', '#4472c4', '#91d024', '#b235e6', '#02ae75', '#5b9bd5']
},
{
name: this.$t('chart.color_technology'),
value: 'technology',
colors: ['#05f8d6', '#0082fc', '#fdd845', '#22ed7c', '#09b0d3', '#1d27c9', '#f9e264', '#f47a75', '#009db2']
},
{
name: this.$t('chart.color_light'),
value: 'light',
colors: ['#884898', '#808080', '#82ae46', '#00a3af', '#ef8b07', '#007bbb', '#9d775f', '#fae800', '#5f9b3c']
},
{
name: this.$t('chart.color_classical'),
value: 'classical',
colors: ['#007bbb', '#ffdb4f', '#dd4b4b', '#2ca9e1', '#ef8b07', '#4a488e', '#82ae46', '#dd4b4b', '#bb9581']
},
{
name: this.$t('chart.color_fresh'),
value: 'fresh',
colors: ['#5f9b3c', '#75c24b', '#83d65f', '#aacf53', '#c7dc68', '#d8e698', '#e0ebaf', '#bbc8e6', '#e5e5e5']
},
{
name: this.$t('chart.color_energy'),
value: 'energy',
colors: ['#ef8b07', '#2a83a2', '#f07474', '#c55784', '#274a78', '#7058a3', '#0095d9', '#75c24b', '#808080']
},
{
name: this.$t('chart.color_red'),
value: 'red',
colors: ['#ff0000', '#ef8b07', '#4c6cb3', '#f8e944', '#69821b', '#9c5ec3', '#00ccdf', '#f07474', '#bb9581']
},
{
name: this.$t('chart.color_fast'),
value: 'fast',
colors: ['#fae800', '#00c039', '#0482dc', '#bb9581', '#ff7701', '#9c5ec3', '#00ccdf', '#00c039', '#ff7701']
},
{
name: this.$t('chart.color_spiritual'),
value: 'spiritual',
colors: ['#00a3af', '#4da798', '#57baaa', '#62d0bd', '#6ee4d0', '#86e7d6', '#aeede1', '#bde1e6', '#e5e5e5']
}
],
colorForm: JSON.parse(JSON.stringify(DEFAULT_COLOR_CASE)),
customColor: null,
colorIndex: 0,
predefineColors: COLOR_PANEL
}
},
computed: {
panelInfo() {
return this.$store.state.panel.panelInfo
}
},
watch: {
'chart.id': {
handler: function() {
this.customColor = null
this.colorIndex = 0
}
},
'chart': {
handler: function() {
this.init()
}
}
},
mounted() {
this.init()
},
methods: {
changeColorOption() {
const that = this
const items = this.colorCases.filter(ele => {
return ele.value === that.colorForm.value
})
// const val = JSON.parse(JSON.stringify(this.colorForm))
// val.value = items[0].value
// val.colors = items[0].colors
// this.colorForm.value = items[0].value
this.colorForm.colors = JSON.parse(JSON.stringify(items[0].colors))
this.customColor = this.colorForm.colors[0]
this.colorIndex = 0
// reset custom color
this.colorForm.seriesColors = []
this.initCustomColor(true)
this.changeColorCase()
},
changeColorCase() {
this.$emit('onColorChange', this.colorForm)
// this.customColor = null
// this.colorIndex = 0
},
init() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customAttr) {
let customAttr = null
if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
customAttr = JSON.parse(JSON.stringify(chart.customAttr))
} else {
customAttr = JSON.parse(chart.customAttr)
}
if (customAttr.color) {
this.colorForm = customAttr.color
if (!this.customColor) {
this.customColor = this.colorForm.colors[0]
this.colorIndex = 0
}
this.colorForm.tableBorderColor = this.colorForm.tableBorderColor ? this.colorForm.tableBorderColor : DEFAULT_COLOR_CASE.tableBorderColor
this.initCustomColor()
}
}
},
switchColor(index) {
this.colorIndex = index
},
switchColorCase() {
this.colorForm.colors[this.colorIndex] = this.customColor
this.$emit('onColorChange', this.colorForm)
},
switchCustomColor(index) {
this.colorForm.seriesColors[index].isCustom = true
this.switchColorCase()
},
resetCustomColor() {
this.changeColorOption()
},
initCustomColor(reset) {
const chart = JSON.parse(JSON.stringify(this.chart))
this.colorForm.seriesColors = getColors(chart, this.colorForm.colors, reset)
}
}
}
</script>
<style scoped>
.shape-item {
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center
}
.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;
}
.color-picker-style {
cursor: pointer;
z-index: 1003;
}
.color-label {
display: inline-block;
width: 60px;
}
.color-type >>> .el-radio__input {
display: none;
}
.el-radio {
margin: 0 2px 0 0 !important;
border: 1px solid transparent;
}
.el-radio >>> .el-radio__label {
padding-left: 0;
}
.el-radio.is-checked {
border: 1px solid #0a7be0;
}
.span-label {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.custom-color-style {
height: 300px;
overflow-y: auto;
padding: 4px;
border: 1px solid #e6e6e6;
}
</style>

1
frontend/src/views/chart/group/Group.vue
View File

@ -822,6 +822,7 @@ export default {
view.customFilter = JSON.stringify([])
view.drillFields = JSON.stringify([])
view.extBubble = JSON.stringify([])
view.viewFields = JSON.stringify([])
this.setChartDefaultOptions(view)
const _this = this
post('/chart/view/newOne/' + this.panelInfo.id, view, true).then(response => {

20
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -652,11 +652,13 @@
</el-tab-pane>
<el-tab-pane :label="$t('chart.chart_style')" class="padding-tab" style="width: 300px">
<chart-style
v-if="chartProperties"
v-if="chartProperties || view.isPlugin"
:param="param"
:view="view"
:chart="chart"
:properties="chartProperties"
:dimension-data="dimensionData"
:quota-data="quotaData"
@calcStyle="calcStyle"
@onColorChange="onColorChange"
@onSizeChange="onSizeChange"
@ -1082,6 +1084,7 @@ export default {
yaxisExt: [],
extStack: [],
drillFields: [],
viewFields: [],
extBubble: [],
show: true,
type: 'bar',
@ -1172,12 +1175,12 @@ export default {
if (_this.chart && _this.chart.render) {
const viewConfig = this.allViewRender.filter(item => item.render === _this.chart.render && item.value === _this.chart.type)
if (viewConfig && viewConfig.length) {
return viewConfig[0].properties
return viewConfig[0].properties || []
} else {
return null
return []
}
} else {
return null
return []
}
},
chartType() {
@ -1528,6 +1531,7 @@ export default {
this.view = JSON.parse(JSON.stringify(view))
// stringify json param
view.xaxis = JSON.stringify(view.xaxis)
view.viewFields = JSON.stringify(view.viewFields)
view.xaxisExt = JSON.stringify(view.xaxisExt)
view.yaxis = JSON.stringify(view.yaxis)
view.yaxisExt = JSON.stringify(view.yaxisExt)
@ -1587,6 +1591,7 @@ export default {
const view = this.buildParam(true, 'chart', false, switchType)
if (!view) return
viewEditSave(this.panelInfo.id, view).then(() => {
this.getData(this.param.id)
bus.$emit('view-in-cache', { type: 'propChange', viewId: this.param.id })
})
},
@ -1595,6 +1600,7 @@ export default {
// 将视图传入echart...组件
const view = JSON.parse(JSON.stringify(this.view))
view.xaxis = JSON.stringify(this.view.xaxis)
view.viewFields = JSON.stringify(this.view.viewFields)
view.xaxisExt = JSON.stringify(this.view.xaxisExt)
view.yaxis = JSON.stringify(this.view.yaxis)
view.yaxisExt = JSON.stringify(this.view.yaxisExt)
@ -1659,6 +1665,7 @@ export default {
}).then(response => {
this.initTableData(response.data.tableId)
this.view = JSON.parse(JSON.stringify(response.data))
this.view.viewFields = this.view.viewFields ? JSON.parse(this.view.viewFields) : []
this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
this.view.xaxisExt = this.view.xaxisExt ? JSON.parse(this.view.xaxisExt) : []
this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
@ -1709,6 +1716,7 @@ export default {
this.initTableData(response.data.tableId)
}
this.view = JSON.parse(JSON.stringify(response.data))
this.view.viewFields = this.view.viewFields ? JSON.parse(this.view.viewFields) : []
this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
this.view.xaxisExt = this.view.xaxisExt ? JSON.parse(this.view.xaxisExt) : []
this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
@ -2369,7 +2377,7 @@ export default {
resetViewCacheCallBack(_this.param.id, _this.panelInfo.id, function(rsp) {
_this.changeEditStatus(false)
_this.getChart(_this.param.id, 'panel')
// _this.getData(_this.param.id)
_this.getData(_this.param.id)
bus.$emit('view-in-cache', { type: 'propChange', viewId: _this.param.id })
})
},
@ -2405,6 +2413,8 @@ export default {
this.view.customAttr.label.position = 'middle'
}
}
// reset custom colors
this.view.customAttr.color.seriesColors = []
},
valueFormatter(item) {

29
frontend/src/views/chart/view/ChartStyle.vue
View File

@ -5,7 +5,7 @@
style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;"
class="attr-style theme-border-class"
:component-name="view.type + '-style'"
:obj="{view, param, chart}"
:obj="{view, param, chart, dimensionData, quotaData}"
/>
<div
v-else
@ -30,7 +30,15 @@
<span class="padding-lr">{{ $t('chart.shape_attr') }}</span>
<el-collapse v-model="attrActiveNames" class="style-collapse">
<el-collapse-item name="color" :title="$t('chart.color')">
<color-selector-ext
v-if="view.render && view.render === 'antv' && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('pie') || view.type === 'funnel' || view.type === 'radar' || view.type === 'scatter')"
:param="param"
class="attr-selector"
:chart="chart"
@onColorChange="onColorChange"
/>
<color-selector
v-else
:param="param"
class="attr-selector"
:chart="chart"
@ -254,6 +262,7 @@
<script>
import PluginCom from '@/views/system/plugin/PluginCom'
import ColorSelector from '@/views/chart/components/shape-attr/ColorSelector'
import ColorSelectorExt from '@/views/chart/components/shape-attr/ColorSelectorExt'
import SizeSelector from '@/views/chart/components/shape-attr/SizeSelector'
import SizeSelectorAntV from '@/views/chart/components/shape-attr/SizeSelectorAntV'
import LabelSelector from '@/views/chart/components/shape-attr/LabelSelector'
@ -295,7 +304,13 @@ export default {
TotalCfg,
TooltipSelectorAntV,
TooltipSelector,
LabelSelectorAntV, LabelSelector, SizeSelectorAntV, SizeSelector, ColorSelector, PluginCom
LabelSelectorAntV,
LabelSelector,
SizeSelectorAntV,
SizeSelector,
ColorSelector,
PluginCom,
ColorSelectorExt
},
props: {
chart: {
@ -313,6 +328,14 @@ export default {
properties: {
type: Array,
required: true
},
dimensionData: {
type: Array,
required: true
},
quotaData: {
type: Array,
required: true
}
},
data() {
@ -331,7 +354,7 @@ export default {
},
methods: {
showProperties(property) {
return this.properties.includes(property)
return this.properties && this.properties.length && this.properties.includes(property)
},
showPropertiesCollapse(propertiesInfo) {
let includeCount = 0