Merge pull request #11077 from dataease/pr@dev-v2@fix_chart

Pr@dev v2@fix chart

core/core-frontend/package.json

@@ -21,6 +21,7 @@
     "@codemirror/lang-sql": "^6.4.0",
     "@npkg/tinymce-plugins": "^0.0.7",
     "@tinymce/tinymce-vue": "^5.1.0",
+    "@turf/centroid": "^7.0.0",
     "@videojs-player/vue": "^1.0.0",
     "@vueuse/core": "^9.13.0",
     "ace-builds": "^1.15.3",

core/core-frontend/src/views/chart/components/editor/editor-senior/components/MapMapping.vue

@@ -2,6 +2,7 @@
 import { computed, nextTick, onMounted, PropType, reactive, ref, watch } from 'vue'
 import { getGeoJsonFile, parseJson } from '../../../js/util'
 import { forEach, debounce } from 'lodash-es'
+import { toRefs } from 'vue'
 
 const props = defineProps({
   chart: {
@@ -15,9 +16,9 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['onMapMappingChange'])
-const { chart, themes } = props
+const { chart, themes } = toRefs(props)
 watch(
-  [() => props.chart.senior.areaMapping, () => chart.customAttr.map.id],
+  [() => chart.value?.senior.areaMapping, () => chart.value?.customAttr.map.id],
   () => {
     init()
   },
@@ -31,7 +32,7 @@ const search = ref('')
 const areaNameInput = ref(null)
 const areaData = reactive([])
 const dynamicAreaId = computed(() => {
-  return chart.customAttr.map.id
+  return chart.value?.customAttr.map.id
 })
 const state = reactive({
   mappingForm: {},
@@ -43,8 +44,8 @@ const pageInfo = reactive({
   currentPage: 1
 })
 const init = async () => {
-  const chartObj = JSON.parse(JSON.stringify(chart))
-  if (chartObj.senior) {
+  const chartObj = JSON.parse(JSON.stringify(chart.value))
+  if (chartObj?.senior) {
     let senior = parseJson(chartObj.senior)
     state.mappingForm = senior.areaMapping
     let curAreaMapping = state.mappingForm?.[dynamicAreaId.value]
@@ -133,7 +134,7 @@ onMounted(() => {
       :data="areaData"
     >
       <el-table-column label="图形" prop="originName" width="80" show-overflow-tooltip />
-      <el-table-column width="144">
+      <el-table-column width="140">
         <template #header>
           <span>属性</span>
           <el-input
@@ -153,7 +154,7 @@ onMounted(() => {
             :class="'area-edit-btn-' + themes"
             @click="triggerEdit(scope)"
           >
-            <span>{{ scope.row.mappedName }}</span>
+            <span :title="scope.row.mappedName">{{ scope.row.mappedName }}</span>
             <el-icon><Edit /></el-icon>
           </el-button>
         </template>
@@ -192,7 +193,7 @@ onMounted(() => {
   margin-left: 8px;
 }
 .area-edit-btn {
-  width: 120px;
+  width: 116px;
   padding: 0 4px;
   :deep(> span) {
     display: flex;

core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue

@@ -177,12 +177,7 @@ const changeLabelAttr = prop => {
 const init = () => {
   const chart = JSON.parse(JSON.stringify(props.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)
-    }
+    const customAttr = chart.customAttr
     if (customAttr.label) {
       state.labelForm = defaultsDeep(customAttr.label, cloneDeep(COMPUTED_DEFAULT_LABEL.value))
       if (chartType.value === 'liquid' && state.labelForm.fontSize < fontSizeList.value[0].value) {

core/core-frontend/src/views/chart/components/editor/util/chart.ts

@@ -277,7 +277,7 @@ export const DEFAULT_LABEL: ChartLabelAttr = {
   show: false,
   position: 'top',
   color: '#909399',
-  fontSize: 10,
+  fontSize: 12,
   formatter: '',
   labelLine: {
     show: true

core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts

@@ -28,6 +28,7 @@ import { DOM } from '@antv/l7-utils'
 import { Scene } from '@antv/l7-scene'
 import { type IZoomControlOption } from '@antv/l7-component'
 import { PositionType } from '@antv/l7-core'
+import { centroid } from '@turf/centroid'
 
 export function getPadding(chart: Chart): number[] {
   if (chart.drill) {
@@ -890,8 +891,13 @@ export function configL7Tooltip(chart: Chart): TooltipOptions {
 
 export function handleGeoJson(geoJson: FeatureCollection, nameMapping?: Record<string, string>) {
   geoJson.features.forEach(item => {
-    if (!item.properties['centroid'] && item.properties['center']) {
-      item.properties['centroid'] = item.properties['center']
+    if (!item.properties['centroid']) {
+      if (item.properties['center']) {
+        item.properties['centroid'] = item.properties['center']
+      } else {
+        const tmp = centroid(item.geometry)
+        item.properties['centroid'] = tmp.geometry.coordinates
+      }
     }
     let name = item.properties['name']
     if (nameMapping?.[name]) {