echarts相关表匹配

.env.development

@@ -3,7 +3,7 @@ ENV = 'development'
 # 接口地址
 
 # 许镇-本地服地址
-VUE_APP_BASE_API  = 'http://192.168.99.67:8080'
+VUE_APP_BASE_API  = 'http://192.168.99.67:7070'
 # VUE_APP_BASE_API  = 'http://27.19.209.92:13244'
 VUE_APP_LIB_API = 'http://118.253.150.248:8099'
 

src/assets/styles/index.scss

@@ -7,6 +7,7 @@
 	color: #fff;
 	overflow: hidden;
   background: url('~@/assets/images/bg2.png') no-repeat top center #02061a;
+  background-size: 100% 100%;
   font-family: 'DingTalk_JinBuTi_Regular';
 }
 

src/components/echart/barEcharts.vue

@@ -91,6 +91,7 @@ export default {
       }
 
       this.chart.setOption({
+        baseOption: {
           tooltip: {
             trigger: 'axis',
             axisPointer: {
@@ -219,6 +220,32 @@ export default {
               }
             }
           ]
+        },
+        media: [
+          {
+            option: {
+              series: [
+                {
+                  type: 'pie',
+                  left: '-50%'
+                }
+              ]
+            }
+          },
+          {
+            query: {
+              maxWidth: 675
+            },
+            option: {
+              xAxis: [{
+                data: date.map(dateStr => {
+                  const parts = dateStr.split('/')
+                  return parts.slice(1).join('/') // 只保留月份和日期部分
+                })
+              }]
+            }
+          }
+        ]
       })
     }
 

src/components/echart/todayCircle.vue

@@ -54,6 +54,7 @@ export default {
       }
       var centerImg = require('@/assets/images/circle-bg.png')
       const option = {
+        baseOption: {
           tooltip: {
             show: false,
             trigger: 'item',
@@ -139,7 +140,6 @@ export default {
               left: '-50%',
               radius: ['60%', '70%'],
               avoidLabelOverlap: false,
-
               label: {
                 show: false,
                 position: 'center'
@@ -168,24 +168,6 @@ export default {
                       fontWeight: 600,
                       color: '#317FFF',
                       fontFamily: 'DingTalk_JinBuTi_Regular',
-                    // color: {
-                    //   type: 'linear',
-                    //   x: 0,
-                    //   y: 0,
-                    //   x2: 0,
-                    //   y2: 1,
-                    //   colorStops: [
-                    //     {
-                    //       offset: 0,
-                    //       color: 'red' // 0% 处的颜色
-                    //     },
-                    //     {
-                    //       offset: 1,
-                    //       color: 'yellow' // 100% 处的颜色
-                    //     }
-                    //   ],
-                    //   globalCoord: false // 缺省为 false
-                    // },
                       lineHeight: 34
                     },
                     b: {
@@ -200,6 +182,68 @@ export default {
               data: optionData
             }
           ]
+        },
+        media: [
+          {
+            query: {
+              maxWidth: 317
+            },
+            option: {
+              legend: {
+                right: 30,
+                top: 'center',
+                textStyle: {
+                  rich: {
+                    name: {
+                      fontSize: 14
+                    },
+                    num: {
+                      fontSize: 16
+                    }
+                  }
+                }
+              },
+              // 中心图片配置(关键代码)
+              graphic: [
+                {
+                  left: '8%', // 调整图片位置
+                  top: '26%', // 调整图片位置
+                  z: -10,
+                  bounding: 'raw',
+                  rotation: 0, // 旋转
+                  origin: [64.5, 32.5], // 中心点
+                  scale: [1.0, 1.0], // 缩放
+                  // 设置图片样式
+                  style: {
+                    image: centerImg,
+                    width: 110,
+                    height: 110,
+                    opacity: 1
+                  }
+                }
+              ],
+              series: [
+                {
+                  type: 'pie',
+                  radius: ['50%', '55%'],
+                  emphasis: {
+                    label: {
+                      rich: {
+                        c: {
+                          fontSize: 22,
+                          lineHeight: 28
+                        },
+                        b: {
+                          fontSize: 16
+                        }
+                      }
+                    }
+                  }
+                }
+              ]
+            }
+          }
+        ]
       }
       myChart.setOption(option)
       // // 然后可以通过定时器来旋转背景图
@@ -216,7 +260,7 @@ export default {
       //   })
       // }, 1000)
 
-      this.$LoopShowTooltip(myChart, option, { loopSeries: true, interval: 4000 })
+      this.$LoopShowTooltip(myChart, option.baseOption, { loopSeries: true, interval: 4000 })
     }
   }
 }

src/components/echart/yearCircle.vue

@@ -54,6 +54,7 @@ export default {
       }
       var centerImg = require('@/assets/images/circle-bg.png')
       const option = {
+        baseOption: {
           tooltip: {
             show: false,
             trigger: 'item',
@@ -206,9 +207,71 @@ export default {
               data: optionData
             }
           ]
+        },
+        media: [
+          {
+            query: {
+              maxWidth: 317
+            },
+            option: {
+              legend: {
+                right: 30,
+                top: 'center',
+                textStyle: {
+                  rich: {
+                    name: {
+                      fontSize: 14
+                    },
+                    num: {
+                      fontSize: 16
+                    }
+                  }
+                }
+              },
+              // 中心图片配置(关键代码)
+              graphic: [
+                {
+                  left: '8%', // 调整图片位置
+                  top: '26%', // 调整图片位置
+                  z: -10,
+                  bounding: 'raw',
+                  rotation: 0, // 旋转
+                  origin: [64.5, 32.5], // 中心点
+                  scale: [1.0, 1.0], // 缩放
+                  // 设置图片样式
+                  style: {
+                    image: centerImg,
+                    width: 110,
+                    height: 110,
+                    opacity: 1
+                  }
+                }
+              ],
+              series: [
+                {
+                  type: 'pie',
+                  radius: ['50%', '55%'],
+                  emphasis: {
+                    label: {
+                      rich: {
+                        c: {
+                          fontSize: 22,
+                          lineHeight: 28
+                        },
+                        b: {
+                          fontSize: 16
+                        }
+                      }
+                    }
+                  }
+                }
+              ]
+            }
+          }
+        ]
       }
       myChart.setOption(option)
-      this.$LoopShowTooltip(myChart, option, { loopSeries: true, interval: 4000 })
+      this.$LoopShowTooltip(myChart, option.baseOption, { loopSeries: true, interval: 4000 })
     }
   }
 }

src/views/map/index.vue

@@ -134,7 +134,7 @@ export default {
     this.destroy()
   },
   created() {
-    // this.getLibBookTotal()
+    this.getLibBookTotal()
     this.getReadRanking()
     this.getLendingTotal()
   },
@@ -515,7 +515,7 @@ export default {
 
       this.seriesData = series
       const initOption = {
-        // {a}<br/>
+        baseOption: {
           // 提示框
           tooltip: {
             trigger: 'item',
@@ -747,6 +747,21 @@ export default {
             }
           ],
           series: series
+        },
+        media: [
+          {
+            query: {
+              maxWidth: 666
+            },
+            option: {
+              tooltip: {
+                position: function(point, params, dom, rect, size) {
+                  return [point[0] + 10, point[1] - 122]
+                }
+              }
+            }
+          }
+        ]
       }
       setTimeout(() => {
         this.myChart.setOption(initOption)

src/views/pageThree/index.vue

@@ -383,6 +383,8 @@ export default {
           this.chartWeeklyData.inchartWeeklyData = completeData.map(item => item.hccDayTotal)
           // // out 借出
           this.chartWeeklyData.outchartWeeklyData = completeData.map(item => item.jccDayTotal)
+
+          console.log(this.chartWeeklyData.date)
         } else {
           this.chartWeeklyData = {
             date: [],