forked from github/dataease
feat: 视图图表类型增加地图
This commit is contained in:
fit2cloud-chenyw
parent
b03598db1d
commit
f0a2532b51
@ -1,5 +1,6 @@
|
||||
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;
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
17
frontend/src/api/map/map.js
Normal file
17
frontend/src/api/map/map.js
Normal file
@ -0,0 +1,17 @@
|
||||
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
|
||||
})
|
||||
}
|
||||
1
frontend/src/icons/svg/chart-map.svg
Normal file
1
frontend/src/icons/svg/chart-map.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1626836013296" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2202" width="200" height="200"><path d="M38.801408 862.342144" p-id="2203"></path><path d="M651.604992 706.515968c18.5856-40.500224 40.05888-64.77824 56.708096-79.576064 9.088-8.075264 18.583552-14.7712 28.597248-19.060736-5.246976-7.146496-9.31328-13.48096-13.34784-19.542016-7.402496-11.1104-15.249408-23.81824-19.060736-30.015488-25.250816 13.81376-49.152 42.346496-68.145152 67.661824-11.029504 14.722048-20.962304 30.496768-30.497792 47.1808L651.604992 706.515968z" p-id="2204"></path><path d="M457.66144 768.47104c5.24288 12.84608 8.100864 25.755648 11.91424 35.719168 1.434624 6.20544 2.853888 11.897856 4.764672 17.180672 17.150976-5.282816 34.260992-10.568704 50.994176-17.686528 28.547072-11.998208 62.420992-29.024256 83.859456-51.421184l-39.54688-42.411008c-7.1424 7.14752-15.694848 12.920832-26.68544 20.0192C524.41088 741.834752 497.695744 756.5568 457.66144 768.47104z" p-id="2205"></path><path d="M390.47168 241.432576c0-45.746176 38.122496-83.869696 83.868672-83.869696 47.181824 0 83.392512 38.12352 83.392512 83.869696 0 47.17056-36.209664 83.868672-83.392512 83.868672C428.593152 325.301248 390.47168 288.603136 390.47168 241.432576z" p-id="2206"></path><path d="M297.558016 241.432576c0 17.632256 2.377728 34.782208 7.62368 51.460096l-1.910784 0c14.767104 34.310144 31.461376 70.268928 45.7472 97.688576l23.825408 45.7472c41.741312 80.156672 92.918784 168.214528 100.543488 179.651584 0.477184 0.477184 0.477184 0.477184 0.477184 0.954368 0 0.48128 0 0.948224 0.47616 0.948224 28.587008-48.123904 53.262336-91.554816 71.95648-126.271488l30.021632-55.764992 23.350272-45.746176c13.858816-27.132928 30.497792-62.414848 45.27104-97.20832l-1.435648 0c5.246976-16.677888 7.624704-33.82784 7.624704-51.460096 0-97.216512-79.581184-176.316416-176.78848-176.316416C376.656896 65.11616 297.558016 144.21504 297.558016 241.432576z" p-id="2207"></path><path d="M263.713792 765.600768c13.348864 10.016768 27.52 18.768896 42.411008 26.694656 26.576896 14.03392 60.519424 29.99296 99.119104 35.785728 1.434624-11.487232 2.173952-26.330112 3.812352-37.210112l2.859008-19.064832c-10.484736-1.911808-22.510592-4.934656-35.258368-9.536512-21.563392-7.779328-49.083392-20.962304-79.581184-42.405888-8.100864 11.90912-16.385024 22.600704-22.873088 31.44704L263.713792 765.600768z" p-id="2208"></path><path d="M76.923904 897.108992c0 36.191232 29.540352 65.26464 65.284096 65.26464l739.566592 0c36.211712 0 65.27488-29.074432 65.27488-65.26464L947.049472 358.181888c0-36.220928-29.063168-65.29024-65.27488-65.29024L702.121984 292.891648l-31.455232 88.164352 177.74592 0c8.100864 0 13.824 5.231616 13.824 13.336576l0 117.2224c-25.261056-0.466944-64.330752 1.910784-102.454272 20.49536l4.760576 12.870656 15.248384 39.54176c22.402048-7.143424 41.924608-12.459008 57.184256-14.76608l25.261056-3.813376 0 297.821184c0 8.13056-5.723136 13.319168-13.824 13.319168L178.895872 877.083648c-8.100864 0-13.814784-5.187584-13.814784-13.319168L165.081088 681.742336c3.803136 3.813376 8.195072 7.98208 13.338624 12.38528 8.204288 7.033856 20.496384 18.583552 36.211712 31.93344 9.058304-8.108032 17.547264-18.680832 24.783872-26.210304 4.199424-4.381696 8.100864-8.582144 11.437056-12.87168-37.646336-31.440896-75.768832-75.767808-85.771264-88.158208L165.081088 394.3936c0-7.62368 5.71392-13.336576 13.814784-13.336576l96.254976 0-29.063168-88.164352L142.208 292.892672c-35.744768 0-65.284096 29.069312-65.284096 65.29024L76.923904 897.108992z" p-id="2209"></path><path d="M985.171968 862.342144" p-id="2210"></path></svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
@ -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',
|
||||
|
||||
@ -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頁面，默認抽取第一個',
|
||||
|
||||
@ -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 页，默认抽取第一个',
|
||||
|
||||
@ -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: []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -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') {
|
||||
|
||||
59
frontend/src/views/chart/chart/map/map.js
Normal file
59
frontend/src/views/chart/chart/map/map.js
Normal file
@ -0,0 +1,59 @@
|
||||
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
|
||||
}
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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="chart-map" class="chart-map" />
|
||||
</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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user