数据统计-宠主数据统计-前端部分

src/router/index.js

@@ -317,6 +317,13 @@ export const constantRoutes = [
         component: () => import('@/views/data-statistics/hospital-data-statistics/hospital-data-statistics.vue'),
         name: 'HospitalDataStatistics',
         meta: { title: '医院数据统计', icon: 'component' }
+      },
+      {
+        path: 'pet-data-statistics',
+        props: true,
+        component: () => import('@/views/data-statistics/pet-data-statistics/pet-data-statistics.vue'),
+        name: 'PetDataStatistics',
+        meta: { title: '宠主数据统计', icon: 'component' }
       }
     ]
   },

src/views/data-statistics/echars-components/radar-chart-for-hospital.vue

@@ -7,7 +7,7 @@
 <script>
 export default {
   name: 'RadarChartForHospital',
-  props: ['title', 'radarIndicatorData', 'radarLegendData'],
+  props: ['title', 'yData1', 'yData2'],
   data() {
     return {}
   },
@@ -17,7 +17,7 @@ export default {
   },
   methods: {
     setCharts() {
-      // const _this = this
+      const _this = this
       // 基于准备好的dom，初始化echarts实例
       const mapChart = this.$echarts.init(this.$refs.radarMap)
       mapChart.setOption({
@@ -68,7 +68,7 @@ export default {
             type: 'radar',
             data: [
               {
-                value: [42, 30, 20, 35, 50, 18],
+                value: _this.yData1,
                 name: '历史入驻量',
                 symbol: 'emptyCircle', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none', emptyCircle
                 symbolSize: 6,
@@ -93,7 +93,7 @@ export default {
                 }
               },
               {
-                value: [50, 14, 28, 26, 42, 21],
+                value: _this.yData2,
                 name: '当前有效数量',
                 symbol: 'emptyCircle',
                 symbolSize: 6,

src/views/data-statistics/echars-components/radar-chart-for-petowner-platfrom.vue

+<template>
+  <div ref="radarMap" class="radarChart">
+    雷达
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RadarChartForPetOwnerPlatform',
+  props: ['title', 'yData1', 'yData2'],
+  data() {
+    return {}
+  },
+  watch: {},
+  mounted() {
+    this.setCharts()
+  },
+  methods: {
+    setCharts() {
+      const _this = this
+      // 基于准备好的dom，初始化echarts实例
+      const mapChart = this.$echarts.init(this.$refs.radarMap)
+      mapChart.setOption({
+        title: {
+          left: 'left',
+          text: '医院评级分布',
+          textStyle: {
+            fontSize: 12,
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: 'bold',
+            color: '#333333'
+          }
+        },
+        tooltip: {
+          show: true
+        },
+        legend: {
+          data: ['历史入驻量', '当前有效数量'],
+          left: 'right',
+          textStyle: { // 图例的公用文本样式。
+            fontSize: 12,
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: 400,
+            color: '#666'
+          }
+        },
+        radar: {
+          // shape: 'circle',
+          center: ['50%', '55%'],
+          radius: 140,
+          indicator: [
+            { name: '5000元以下', max: 50 },
+            { name: '5000~12000元', max: 50 },
+            { name: '12000~30000元', max: 50 },
+            { name: '30000~100000元', max: 50 },
+            { name: '100000元以上', max: 50 }
+          ],
+          axisName: {	// (圆外的标签)雷达图每个指示器名称的配置项。
+            color: '#666666',
+            fontSize: 12,
+            fontWeight: 400,
+            fontFamily: 'Microsoft YaHei'
+          }
+        },
+        series: [
+          {
+            name: 'Budget vs spending',
+            type: 'radar',
+            data: [
+              {
+                value: _this.yData1,
+                name: '历史入驻量',
+                symbol: 'emptyCircle', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none', emptyCircle
+                symbolSize: 6,
+                itemStyle: {
+                  color: new this.$echarts.graphic.LinearGradient( // 设置渐变色
+                    0, 0, 0, 1,
+                    [
+                      { offset: 0, color: '#7245D9' },
+                      { offset: 1, color: '#5A5FE6' }
+                    ]
+                  )
+                },
+                // 雷达图辐射区域的样式
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(
+                    0, 0, 0, 1,
+                    [
+                      { offset: 0, color: 'rgba(114, 69, 217, 0.3)' },
+                      { offset: 1, color: 'rgba(90, 95, 230, 0.3)' }
+                    ]
+                  )
+                }
+              },
+              {
+                value: _this.yData2,
+                name: '当前有效数量',
+                symbol: 'emptyCircle',
+                symbolSize: 6,
+                itemStyle: {
+                  color: new this.$echarts.graphic.LinearGradient( // 设置渐变色
+                    0, 0, 0, 1,
+                    [
+                      { offset: 0, color: '#3994C1' },
+                      { offset: 1, color: '#5BB158' }
+                    ]
+                  )
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(
+                    0, 0, 0, 1,
+                    [
+                      { offset: 0, color: 'rgba(57, 148, 193, 0.3)' },
+                      { offset: 1, color: 'rgba(91, 177, 88, 0.3)' }
+                    ]
+                  )
+                }
+              }
+            ]
+          }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.radarChart {
+  width: 100%;
+  height: 500px;
+}
+</style>

src/views/data-statistics/hospital-data-statistics/hospital-data-statistics.vue

@@ -191,7 +191,10 @@
           <!--              <el-radio-button label="currentYear" class="radioButton">今年</el-radio-button>-->
           <!--            </el-radio-group>-->
           <!--          </div>-->
-          <radar-chart-for-hospital />
+          <radar-chart-for-hospital
+            :y-data1="[42, 30, 20, 35, 50, 18]"
+            :y-data2="[50, 14, 28, 26, 42, 21]"
+          />
         </div>
       </el-col>
     </el-row>