态势感知平台-武汉市开源生态建设-鸿蒙项目城市分布接口对接

src/views/Jyh/Community/components/HarmonyEcoCharts.vue

@@ -338,9 +338,10 @@
 import { ref, onMounted, nextTick, onUnmounted } from 'vue';
 import * as echarts from 'echarts';
 import HMStatsBar from './HMStatsBar.vue';
+import { hmCityDataPage3 } from '@/api/jyh/situation';
 
 // ================= 数据定义 =================
-const hmCityData = [
+const hmCityData = ref([
   { name: '广东', value: 185 },
   { name: '北京', value: 95 },
   { name: '上海', value: 88 },
@@ -351,7 +352,7 @@ const hmCityData = [
   { name: '福建', value: 30 },
   { name: '陕西', value: 28 },
   { name: '山东', value: 24 }
-];
+]);
 
 const hmDevCityData = [
   { name: '其他地区', value: 25.7 },
@@ -776,10 +777,10 @@ const initHmCityChart = () => {
   cityChart.setOption({
     tooltip: { trigger: 'axis' },
     grid: { left: '3%', right: '4%', bottom: '3%', top: '10%', containLabel: true },
-    xAxis: { type: 'category', data: hmCityData.map(i => i.name), axisLabel: { color: '#64748b' } },
+    xAxis: { type: 'category', data: hmCityData.value.map(i => i.name), axisLabel: { color: '#64748b' } },
     yAxis: { type: 'value', name: '单位：个', axisLabel: { color: '#64748b' } },
     series: [{
-      type: 'bar', barWidth: '40%', data: hmCityData.map(i => i.value),
+      type: 'bar', barWidth: '40%', data: hmCityData.value.map(i => i.value),
       itemStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#3b82f6' }, {
           offset: 1,
@@ -790,6 +791,50 @@ const initHmCityChart = () => {
   });
 };
 
+// 获取鸿蒙项目城市分布数据
+const fetchHmCityData = async () => {
+  try {
+    const response = await hmCityDataPage3();
+    if (response.code === 200 && response.data) {
+      hmCityData.value = response.data;
+      // 重新初始化图表以显示新数据
+      initHmCityChart();
+    } else {
+      console.error('获取鸿蒙项目城市分布数据失败:', response.msg || '未知错误');
+      // 使用默认数据
+      hmCityData.value = [
+        { name: '广东', value: 185 },
+        { name: '北京', value: 95 },
+        { name: '上海', value: 88 },
+        { name: '江苏', value: 70 },
+        { name: '浙江', value: 52 },
+        { name: '湖北', value: 38 },
+        { name: '四川', value: 32 },
+        { name: '福建', value: 30 },
+        { name: '陕西', value: 28 },
+        { name: '山东', value: 24 }
+      ];
+      initHmCityChart();
+    }
+  } catch (error) {
+    console.error('获取鸿蒙项目城市分布数据异常:', error);
+    // 使用默认数据
+    hmCityData.value = [
+      { name: '广东', value: 185 },
+      { name: '北京', value: 95 },
+      { name: '上海', value: 88 },
+      { name: '江苏', value: 70 },
+      { name: '浙江', value: 52 },
+      { name: '湖北', value: 38 },
+      { name: '四川', value: 32 },
+      { name: '福建', value: 30 },
+      { name: '陕西', value: 28 },
+      { name: '山东', value: 24 }
+    ];
+    initHmCityChart();
+  }
+};
+
 const initHmEntCityChart = () => {
   const chartDom = document.getElementById('hmEntCityChart');
   if (!chartDom) return;
@@ -1004,8 +1049,11 @@ const handleResize = () => {
   entCityChart?.resize();
 };
 
-onMounted(() => {
+onMounted(async () => {
-  nextTick(() => {
+  nextTick(async () => {
+    // 先获取鸿蒙项目城市分布数据
+    await fetchHmCityData();
+    
     initHmCityChart();
     initHmEnterpriseChart();
     initHmEntCityChart();