fix: first commit

src/components/bar/3DIndex.vue

@@ -9,11 +9,8 @@
 export default {
   name: 'JilinCityBar',
   props: {
-    chartHeight: { type: String, default: '220px' },
+    chartHeight: {type: String, default: '220px'},
-    interval: { type: Number, default: 2500 }, // 滚动间隔(ms)
+    interval: {type: Number, default: 2500} // 滚动间隔(ms)
-    districtName: { type: String, default: null }, // 当前选中的区县
-    districtData: { type: Object, default: () => ({}) }, // 区县数据
-    dataType: { type: String, default: 'patents' } // 数据类型：patents(专利数量)、research(研究机构)、conversion(转化数量)
   },
   data() {
     return {
@@ -21,65 +18,25 @@ export default {
       timer: null,
       pageSize: 4,
       cursor: 0,
-      
+
-      // 默认数据，当没有提供区县数据时使用
+      /* —— 数据 —— */
-      defaultXData: [
+      xData: [
-        '朝阳区', '南关区', '宽城区', '二道区',
+        '长春市', '吉林市', '四平市', '辽源市',
-        '绿园区', '双阳区', '九台区', '农安县'
+        '通化市', '白山市', '松原市', '白城市', '延边自治州'
       ],
-      defaultValues: [220, 180, 190, 170, 185, 120, 140, 130]
+      values: [22, 10, 120, 2222, 1111, 3333, 123, 871, 61]
     };
   },
-  computed: {
-    // 根据props计算实际要显示的数据
-    xData() {
-      return Object.keys(this.districtData).length > 0 ? Object.keys(this.districtData) : this.defaultXData;
-    },
-    values() {
-      if (Object.keys(this.districtData).length === 0) {
-        return this.defaultValues;
-      }
-      
-      // 根据dataType选择要显示的数据类型
-      return this.xData.map(district => {
-        if (this.districtData[district]) {
-          return this.districtData[district][this.dataType] || 0;
-        }
-        return 0;
-      });
-    },
-    // 图表标题
-    chartTitle() {
-      switch(this.dataType) {
-        case 'research':
-          return '研究机构数量';
-        case 'conversion':
-          return '专利转化数量';
-        default:
-          return '专利数量';
-      }
-    },
-    // 高亮的区县索引
-    highlightIndex() {
-      return this.districtName ? this.xData.indexOf(this.districtName) : -1;
-    }
-  },
   watch: {
-    chartHeight() { 
+    chartHeight() {
-      this.myChart && this.myChart.resize(); 
+      this.myChart && this.myChart.resize();
-    },
-    districtName() {
-      this.updateChart();
-    },
-    dataType() {
-      this.updateChart();
     }
   },
-  mounted() { 
+  mounted() {
-    this.initChart(); 
+    this.initChart();
   },
-  beforeDestroy() { 
+  beforeDestroy() {
-    clearInterval(this.timer); 
+    clearInterval(this.timer);
   },
 
   methods: {
@@ -89,9 +46,9 @@ export default {
       const g = this.$echarts.graphic;
 
       const L = g.extendShape({
-        shape: { x: 0, y: 0 },
+        shape: {x: 0, y: 0},
         buildPath(ctx, s) {
-          const { x, y, xAxisPoint } = s;
+          const {x, y, xAxisPoint} = s;
           ctx.moveTo(x + dx, y)
               .lineTo(x - 9 + dx, y - 9)
               .lineTo(xAxisPoint[0] - 9 + dx, xAxisPoint[1] - 9)
@@ -100,9 +57,9 @@ export default {
         }
       });
       const R = g.extendShape({
-        shape: { x: 0, y: 0 },
+        shape: {x: 0, y: 0},
         buildPath(ctx, s) {
-          const { x, y, xAxisPoint } = s;
+          const {x, y, xAxisPoint} = s;
           ctx.moveTo(x + dx, y)
               .lineTo(xAxisPoint[0] + dx, xAxisPoint[1])
               .lineTo(xAxisPoint[0] + 12 + dx, xAxisPoint[1] - 6)
@@ -111,9 +68,9 @@ export default {
         }
       });
       const T = g.extendShape({
-        shape: { x: 0, y: 0 },
+        shape: {x: 0, y: 0},
         buildPath(ctx, s) {
-          const { x, y } = s;
+          const {x, y} = s;
           ctx.moveTo(x + dx, y)
               .lineTo(x + 12 + dx, y - 6)
               .lineTo(x + 3 + dx, y - 15)
@@ -121,9 +78,9 @@ export default {
               .closePath();
         }
       });
-      g.registerShape('CubeLeft',  L);
+      g.registerShape('CubeLeft', L);
       g.registerShape('CubeRight', R);
-      g.registerShape('CubeTop',   T);
+      g.registerShape('CubeTop', T);
     },
 
     /* ---------- 初始化 ---------- */
@@ -133,80 +90,30 @@ export default {
       this.render();              // 首次渲染
       if (this.xData.length > this.pageSize) this.startScroll();
     },
-    
-    /* ---------- 更新图表 ---------- */
-    updateChart() {
-      if (this.myChart) {
-        // 停止自动滚动
-        clearInterval(this.timer);
-        
-        // 如果有选中的区县，确保它在视图中
-        if (this.highlightIndex >= 0) {
-          // 计算滚动位置，使选中的区县在视图中
-          const startIdx = Math.max(0, Math.min(this.highlightIndex, this.xData.length - this.pageSize));
-          this.cursor = startIdx;
-          
-          this.myChart.setOption({
-            dataZoom: [{
-              startValue: startIdx,
-              endValue: startIdx + this.pageSize - 1
-            }]
-          });
-        }
-        
-        // 更新图表数据
-        this.myChart.setOption({
-          xAxis: [{
-            data: this.xData
-          }],
-          series: [
-            {
-              data: this.values,
-              itemStyle: {
-                color: (params) => {
-                  // 如果是当前选中的区县，使用高亮颜色
-                  if (this.highlightIndex === params.dataIndex) {
-                    return '#FFE777'; // 高亮黄色
-                  }
-                  return undefined; // 使用默认颜色
-                }
-              }
-            },
-            {
-              data: this.values
-            }
-          ]
-        });
-        
-        // 重新启动自动滚动
-        if (this.xData.length > this.pageSize) this.startScroll();
-      }
-    },
 
     /* ---------- 配置 & 渲染 ---------- */
     render() {
       const TEAL_LIGHT = '#86F3CE';
-      const TEAL_DEEP  = '#1EAF9A';
+      const TEAL_DEEP = '#1EAF9A';
-      const HIGHLIGHT_COLOR = '#FFE777'; // 高亮颜色
 
       const option = {
         backgroundColor: 'transparent',
         animationDurationUpdate: 600,
         animationEasingUpdate: 'cubicOut',
 
-        grid: { left: 30, right: 30, bottom: 20, top: 40, containLabel: true },
+        grid: {left: 30, right: 30, bottom: 20, top: 40, containLabel: true},
 
         tooltip: {
           trigger: 'axis',
-          axisPointer: { type: 'shadow' },
+          axisPointer: {type: 'shadow'},
           formatter: d =>
               `${d[0].axisValue}<br/>
-             <span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background:${d[0].color || TEAL_LIGHT}"></span>
+             <span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background:${TEAL_LIGHT}"></span>
-             ${this.chartTitle} <span style="padding-left:13px;">${d[0].value}</span>`
+             数量 <span style="padding-left:13px;">${d[0].value}</span>`
         },
 
         legend: {
-          data: [{ name: this.chartTitle, itemStyle: {color: TEAL_LIGHT}}],
+          data: [{name: '数量', itemStyle: {color: TEAL_LIGHT}}],
           textStyle: {fontSize: 14, color: '#A7C4F6'},
           itemWidth: 10, itemHeight: 8, top: '1%', right: '3%'
         },
@@ -239,17 +146,10 @@ export default {
         series: [
           {
             type: 'custom',
-            name: this.chartTitle,
+            name: '数量',
             renderItem: (p, api) => {
               const loc = api.coord([api.value(0), api.value(1)]);
               const axis = api.coord([api.value(0), 0]);
-              
-              // 确定颜色 - 如果是高亮项目则使用高亮颜色
-              const isHighlight = this.highlightIndex === api.dataIndex();
-              const topColor = isHighlight ? HIGHLIGHT_COLOR : TEAL_LIGHT;
-              const deepColor = isHighlight ? '#E5C848' : TEAL_DEEP;
-              const sideColor = isHighlight ? '#B19A3A' : '#157B6E';
-              
               return {
                 type: 'group',
                 children: [
@@ -258,8 +158,8 @@ export default {
                     shape: {x: loc[0], y: loc[1], xAxisPoint: axis},
                     style: {
                       fill: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                        {offset: 0, color: deepColor},
+                        {offset: 0, color: TEAL_DEEP},
-                        {offset: 1, color: sideColor}
+                        {offset: 1, color: '#157B6E'}
                       ])
                     }
                   },
@@ -268,15 +168,15 @@ export default {
                     shape: {x: loc[0], y: loc[1], xAxisPoint: axis},
                     style: {
                       fill: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                        {offset: 0, color: topColor},
+                        {offset: 0, color: TEAL_LIGHT},
-                        {offset: 1, color: deepColor}
+                        {offset: 1, color: TEAL_DEEP}
                       ])
                     }
                   },
                   {
                     type: 'CubeTop',
                     shape: {x: loc[0], y: loc[1], xAxisPoint: axis},
-                    style: {fill: topColor}
+                    style: {fill: TEAL_LIGHT}
                   }
                 ]
               };
@@ -295,7 +195,7 @@ export default {
             type: 'bar',
             data: this.values,
             itemStyle: {color: 'transparent'},
-            name: this.chartTitle
+            name: '数量'
           }
         ]
       };
@@ -305,8 +205,6 @@ export default {
 
     /* ---------- 平滑滚动 ---------- */
     startScroll() {
-      clearInterval(this.timer); // 先清除之前的定时器
-      
       const len = this.xData.length;
       this.timer = setInterval(() => {
         this.cursor = (this.cursor + 1) % len;