Skip to content

D
dataease
Unverified 提交 13ccfb20 authored 作者: fit2cloud-chenyw's avatar fit2cloud-chenyw 提交者： GitHub
浏览文件
操作

Merge pull request #269 from dataease/pr@dev@feat_图标类型地图

feat: 替换缩略图
上级 b03598db 57155637
隐藏空白字符变更
内嵌 并排
正在显示 包含 240 行增加 和 27 行删除
backend/src/main/java/io/dataease/map/dto/entity/AreaEntity.java
浏览文件 @ 13ccfb20
package io.dataease.map.dto.entity;
import com.fasterxml.jackson.annotation.JsonInclude;
import lombok.Builder;
import lombok.Data;
......@@ -10,6 +11,7 @@ import java.util.Optional;
@Data
@Builder
@JsonInclude(JsonInclude.Include.NON_NULL)
public class AreaEntity implements Serializable {
private static final long serialVersionUID = -1326667005437020282L;
......
backend/src/main/java/io/dataease/map/server/MapServer.java
浏览文件 @ 13ccfb20
......@@ -5,6 +5,7 @@ import io.dataease.map.api.MapApi;
import io.dataease.map.dto.entity.AreaEntity;
import io.dataease.map.service.MapService;
import io.dataease.map.utils.MapUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
......@@ -40,7 +41,9 @@ public class MapServer implements MapApi {
@Override
public List<AreaEntity> areaEntitys(@PathVariable String pcode) {
List<AreaEntity> areaEntities = mapService.areaEntities();
if (StringUtils.equals(pcode, "0")) {
return areaEntities;
}
return mapService.entitysByPid(areaEntities, pcode);
}
......
frontend/src/api/map/map.js 0 → 100644
浏览文件 @ 13ccfb20
import request from '@/utils/request'
export const areaMapping = () => {
return request({
url: '/api/map/areaEntitys/0',
method: 'get',
loading: true
})
}
export function geoJson(areaCode) {
return request({
url: '/api/map/resourceFull/' + areaCode,
method: 'get',
loading: true
})
}
frontend/src/icons/svg/map.svg 0 → 100644
浏览文件 @ 13ccfb20
<svg t="1626859344070" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="819" width="200" height="200"><path d="M948.3 170.5c-7.2-6.1-17.4-8.7-26.6-7.2l-237.1 42-60.4-20c-17.4-5.6-35.8 3.6-41.5 20.5-5.6 16.9 3.6 35.8 20.5 41.5l68.6 22.5c1.5 0.5 3.1 1 4.6 1v265.7L541.2 495c-11.8-3.6-23.6 3.1-27.1 14.3s3.1 23.6 14.3 27.1l148 45.6v273.9L392.8 776V652.8c0-12.3-9.7-22-22-22s-22 9.7-22 22v123.9L130.7 811V195.1c0-17.9-14.8-32.8-32.8-32.8s-32.8 14.8-32.8 32.8v654.3c0 9.7 4.1 18.4 11.3 25.1 7.2 6.1 16.9 9.2 26.1 7.7l270.8-42.5 304.1 85.5c3.1 1 5.6 1 8.7 1 2 0 4.1 0 5.6-0.5l240.1-43.5c15.4-3.1 26.6-16.4 26.6-32.3V195.6c1.7-9.7-2.9-19-10.1-25.1z" p-id="820"></path><path d="M376.4 97.8c-102.4 0-185.3 82.9-185.3 185.3 0 28.2 6.7 55.8 20.5 82.9 10.8 21 109.1 159.7 138.8 201.7 6.1 8.7 15.9 13.8 26.6 13.8 10.8 0 20.5-5.1 26.6-13.8 29.7-42.5 127.5-181.8 137.7-201.2 13.3-25.6 20.5-54.8 20.5-83.5 0-102.3-83-185.2-185.4-185.2z m0.5 240.1c-30.2 0-54.8-24.6-54.8-54.8s24.1-54.8 54.8-54.8c30.2 0 54.8 24.6 54.8 54.8s-24.6 54.8-54.8 54.8z" p-id="821"></path></svg>
\ No newline at end of file
frontend/src/lang/en.js
浏览文件 @ 13ccfb20
......@@ -750,6 +750,7 @@ export default {
chart_funnel: 'Funnel',
chart_radar: 'Radar',
chart_gauge: 'Gauge',
chart_map: 'Map',
dateStyle: 'Date Style',
datePattern: 'Date Format',
y: 'Year',
......@@ -817,7 +818,10 @@ export default {
drag_block_funnel_width: 'Funnel Width',
drag_block_funnel_split: 'Funnel Split',
drag_block_radar_length: 'Branch Length',
drag_block_radar_label: 'Branch Label'
drag_block_radar_label: 'Branch Label',
map_range: 'Map range',
select_map_range: 'Please select map range',
area: 'Area'
},
dataset: {
sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
......
frontend/src/lang/tw.js
浏览文件 @ 13ccfb20
......@@ -750,6 +750,7 @@ export default {
chart_funnel: '漏鬥圖',
chart_radar: '雷達圖',
chart_gauge: '儀表盤',
chart_map: '地圖',
dateStyle: '日期顯示',
datePattern: '日期格式',
y: '年',
......@@ -817,7 +818,10 @@ export default {
drag_block_funnel_width: '漏鬥層寬',
drag_block_funnel_split: '漏鬥分層',
drag_block_radar_length: '分支長度',
drag_block_radar_label: '分支標簽'
drag_block_radar_label: '分支標簽',
map_range: '地圖範圍',
select_map_range: '請選擇地圖範圍',
area: '地區'
},
dataset: {
sheet_warn: '有多個sheet頁面，默認抽取第一個',
......
frontend/src/lang/zh.js
浏览文件 @ 13ccfb20
......@@ -750,6 +750,7 @@ export default {
chart_funnel: '漏斗图',
chart_radar: '雷达图',
chart_gauge: '仪表盘',
chart_map: '地图',
dateStyle: '日期显示',
datePattern: '日期格式',
y: '年',
......@@ -817,7 +818,10 @@ export default {
drag_block_funnel_width: '漏斗层宽',
drag_block_funnel_split: '漏斗分层',
drag_block_radar_length: '分支长度',
drag_block_radar_label: '分支标签'
drag_block_radar_label: '分支标签',
map_range: '地图范围',
select_map_range: '请选择地图范围',
area: '地区'
},
dataset: {
sheet_warn: '有多个 Sheet 页，默认抽取第一个',
......
frontend/src/views/chart/chart/chart.js
浏览文件 @ 13ccfb20
......@@ -528,3 +528,37 @@ export const BASE_CHART = {
},
customFilter: []
}
export const BASE_MAP = {
title: {
text: '',
textStyle: {
fontWeight: 'normal'
}
},
tooltip: {},
visualMap: {
min: 50,
max: 52,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
}
},
// legend: {},
series: [
{
name: '',
type: 'map',
map: 'HK',
roam: true,
// label: {
// show: true
// },
data: []
}
]
}
frontend/src/views/chart/chart/common/common.js
浏览文件 @ 13ccfb20
......@@ -29,7 +29,7 @@ export function componentStyle(chart_option, chart) {
customStyle.text.isBolder ? style.fontWeight = 'bold' : style.fontWeight = 'normal'
chart_option.title.textStyle = style
}
if (customStyle.legend) {
if (customStyle.legend && chart_option.legend) {
chart_option.legend.show = customStyle.legend.show
// 水平方向
if (customStyle.legend.hPosition === 'left') {
......
frontend/src/views/chart/chart/map/map.js 0 → 100644
浏览文件 @ 13ccfb20
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle } from '../common/common'
export function baseMapOption(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].radius = [customAttr.size.pieInnerRadius + '%', customAttr.size.pieOuterRadius + '%']
}
// label
if (customAttr.label) {
chart_option.series[0].label = customAttr.label
chart_option.series[0].labelLine = customAttr.label.labelLine
}
// visualMap
const valueArr = chart.data.series[0].data
chart_option.visualMap.min = Math.min(...valueArr)
chart_option.visualMap.max = Math.max(...valueArr)
if (customAttr.color && customAttr.color.colors) {
chart_option.visualMap.inRange.color = customAttr.color.colors
}
for (let i = 0; i < valueArr.length; i++) {
const y = {
name: chart.data.x[i],
value: valueArr[i]
}
// color
y.itemStyle = {
color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha),
borderRadius: 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
浏览文件 @ 13ccfb20
......@@ -5,15 +5,17 @@
</template>
<script>
import { BASE_BAR, BASE_LINE, HORIZONTAL_BAR, BASE_PIE, BASE_FUNNEL, BASE_RADAR, BASE_GAUGE } from '../chart/chart'
import { BASE_BAR, BASE_LINE, HORIZONTAL_BAR, BASE_PIE, BASE_FUNNEL, BASE_RADAR, BASE_GAUGE, BASE_MAP } 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 { baseMapOption } from '../chart/map/map'
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 eventBus from '@/components/canvas/utils/eventBus'
import { uuid } from 'vue-uuid'
import { geoJson } from '@/api/map/map'
export default {
name: 'ChartComponent',
......@@ -93,6 +95,29 @@ export default {
} else if (chart.type === 'gauge') {
chart_option = baseGaugeOption(JSON.parse(JSON.stringify(BASE_GAUGE)), chart)
}
if (chart.type === 'map') {
const customAttr = JSON.parse(chart.customAttr)
if (!customAttr.areaCode) return
let areaJson
if ((areaJson = localStorage.getItem('areaJson' + customAttr.areaCode)) !== null) {
this.initMapChart(areaJson, chart)
return
}
geoJson(customAttr.areaCode).then(res => {
this.initMapChart(res.data, chart)
// localStorage最大容量只有5M，先取消缓存
// localStorage.setItem('areaJson' + customAttr.areaCode, res.data)
})
return
}
this.myEcharts(chart_option)
},
initMapChart(geoJson, chart) {
this.$echarts.registerMap('HK', geoJson)
const base_json = JSON.parse(JSON.stringify(BASE_MAP))
const chart_option = baseMapOption(base_json, chart)
this.myEcharts(chart_option)
},
myEcharts(option) {
......
frontend/src/views/chart/view/ChartEdit.vue
浏览文件 @ 13ccfb20
......@@ -190,6 +190,11 @@
<svg-icon icon-class="gauge" class="chart-icon" />
</span>
</el-radio>
<el-radio value="map" label="map">
<span :title="$t('chart.chart_map')">
<svg-icon icon-class="map" class="chart-icon" />
</span>
</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>
......@@ -212,13 +217,31 @@
</div>
<div style="overflow:auto;border-top: 1px solid #e6e6e6" class="attr-style">
<el-row style="height: 100%;">
<el-row v-if="chart.type ==='map'" class="padding-lr">
<span style="width: 80px;text-align: right;">
<span>{{ $t('chart.map_range') }}</span>
</span>
<span class="tree-select-span">
<treeselect
ref="mapSelector"
v-model="view.customAttr.areaCode"
:options="places"
:placeholder="$t('chart.select_map_range')"
:normalizer="normalizer"
@input="save"
@deselect="save"
/>
</span>
</el-row>
<el-row v-if="chart.type !=='text' && chart.type !== 'gauge'" class="padding-lr">
<span style="width: 80px;text-align: right;">
<span v-if="chart.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
<span v-else-if="chart.type.includes('bar') || chart.type.includes('line')">{{ $t('chart.drag_block_type_axis') }}</span>
<span v-else-if="chart.type.includes('pie')">{{ $t('chart.drag_block_pie_label') }}</span>
<span v-else-if="chart.type.includes('funnel')">{{ $t('chart.drag_block_funnel_split') }}</span>
<span v-else-if="chart.type.includes('radar')">{{ $t('chart.drag_block_radar_label') }}</span>
<span v-if="chart.type && chart.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
<span v-else-if="chart.type && (chart.type.includes('bar') || chart.type.includes('line'))">{{ $t('chart.drag_block_type_axis') }}</span>
<span v-else-if="chart.type && chart.type.includes('pie')">{{ $t('chart.drag_block_pie_label') }}</span>
<span v-else-if="chart.type && chart.type.includes('funnel')">{{ $t('chart.drag_block_funnel_split') }}</span>
<span v-else-if="chart.type && chart.type.includes('radar')">{{ $t('chart.drag_block_radar_label') }}</span>
<span v-else-if="chart.type && chart.type.includes('map')">{{ $t('chart.area') }}</span>
/
<span>{{ $t('chart.dimension') }}</span>
</span>
......@@ -238,13 +261,14 @@
</el-row>
<el-row class="padding-lr" style="margin-top: 6px;">
<span style="width: 80px;text-align: right;">
<span v-if="chart.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
<span v-else-if="chart.type.includes('bar') || chart.type.includes('line')">{{ $t('chart.drag_block_value_axis') }}</span>
<span v-else-if="chart.type.includes('pie')">{{ $t('chart.drag_block_pie_angel') }}</span>
<span v-else-if="chart.type.includes('funnel')">{{ $t('chart.drag_block_funnel_width') }}</span>
<span v-else-if="chart.type.includes('radar')">{{ $t('chart.drag_block_radar_length') }}</span>
<span v-else-if="chart.type.includes('gauge')">{{ $t('chart.drag_block_gauge_angel') }}</span>
<span v-else-if="chart.type.includes('text')">{{ $t('chart.drag_block_label_value') }}</span>
<span v-if="chart.type && chart.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
<span v-else-if="chart.type && (chart.type.includes('bar') || chart.type.includes('line'))">{{ $t('chart.drag_block_value_axis') }}</span>
<span v-else-if="chart.type && chart.type.includes('pie')">{{ $t('chart.drag_block_pie_angel') }}</span>
<span v-else-if="chart.type && chart.type.includes('funnel')">{{ $t('chart.drag_block_funnel_width') }}</span>
<span v-else-if="chart.type && chart.type.includes('radar')">{{ $t('chart.drag_block_radar_length') }}</span>
<span v-else-if="chart.type && chart.type.includes('gauge')">{{ $t('chart.drag_block_gauge_angel') }}</span>
<span v-else-if="chart.type && chart.type.includes('text')">{{ $t('chart.drag_block_label_value') }}</span>
<span v-else-if="chart.type && chart.type.includes('map')">{{ $t('chart.chart_data') }}</span>
/
<span>{{ $t('chart.quota') }}</span>
</span>
......@@ -301,7 +325,7 @@
<span>{{ $t('chart.shape_attr') }}</span>
<el-row>
<color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
<size-selector :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
<size-selector v-show="chart.type !== 'map'" :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
<label-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
<tooltip-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
</el-row>
......@@ -309,11 +333,11 @@
<el-row class="padding-lr">
<span>{{ $t('chart.module_style') }}</span>
<el-row>
<x-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
<y-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
<split-selector v-show="view.type.includes('radar')" :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />
<x-axis-selector v-show="view.type && (view.type.includes('bar') || view.type.includes('line'))" :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
<y-axis-selector v-show="view.type && (view.type.includes('bar') || view.type.includes('line'))" :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
<split-selector v-show="view.type && view.type.includes('radar')" :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />
<title-selector :param="param" class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
<legend-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
<legend-selector v-show="view.type && !view.type.includes('map') && !view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
<background-color-selector :param="param" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
</el-row>
</el-row>
......@@ -468,7 +492,7 @@ import LabelNormal from '../components/normal/LabelNormal'
import html2canvas from 'html2canvasde'
import TableSelector from './TableSelector'
import FieldEdit from '../../dataset/data/FieldEdit'
import { areaMapping } from '@/api/map/map'
export default {
name: 'ChartEdit',
components: {
......@@ -563,7 +587,8 @@ export default {
searchField: '',
editDsField: false,
changeDsTitle: '',
filterItem: {}
filterItem: {},
places: []
}
},
computed: {
......@@ -587,6 +612,7 @@ export default {
},
created() {
// this.get(this.$store.state.chart.viewId);
this.initAreas()
},
mounted() {
// this.get(this.$store.state.chart.viewId);
......@@ -1201,12 +1227,39 @@ export default {
}
this.dragMoveDuplicate(this.view.customFilter, e)
this.save(true)
},
initAreas() {
let mapping
if ((mapping = localStorage.getItem('areaMapping')) !== null) {
this.places = JSON.parse(mapping)
return
}
Object.keys(this.places).length === 0 && areaMapping().then(res => {
this.places = res.data
localStorage.setItem('areaMapping', JSON.stringify(res.data))
})
},
normalizer(node) {
const resultNode = {
id: node.code,
label: node.name
}
if (node.children && node.children.length > 0) {
resultNode.children = node.children
}
if (resultNode.children && (!node.children || node.children.length === 0)) {
delete resultNode.children
}
return resultNode
}
}
}
</script>
<style scoped>
<style lang='scss' scoped>
.padding-lr {
padding: 0 6px;
}
......@@ -1413,4 +1466,10 @@ export default {
line-height: 40px;
padding: 0 0 0 10px;
}
.tree-select-span {
>>>div.vue-treeselect__control {
height: 32px !important;
font-weight: normal !important;
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论