feats

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
+    "echarts": "4.7.0",
     "element-ui": "^2.15.9",
     "sass": "^1.53.0",
     "vue": "^2.6.14",

src/components/Typography/Title.vue

@@ -0,0 +1,48 @@
+<template>
+  <div :class="['typography-title', { 'title-stub' : stub }]">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Title',
+  props: {
+    stub: {
+      type: Boolean,
+      default: true,
+    },
+    size: {
+      type: String,
+      default: '18px'
+    },
+    color: {
+      type: String,
+      default: '#333',
+    }
+  },
+  computed: {
+    cmpStyle () {
+      return {
+        fontSize: this.size,
+        color: this.color,
+      }
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.typography-title {
+  box-sizing: border-box;
+  font-weight: bold;
+  letter-spacing: 1.2px;
+  text-align: left;
+
+  &.title-stub {
+    border-left: 5px solid #298CF7;
+    padding-left: 1em;
+  }
+}
+</style>

src/views/hazard/StatisticAnalysis/charts/classification.vue

@@ -0,0 +1,151 @@
+<template>
+  <el-card>
+    <Title>分级统计</Title>
+    <div ref="chart" class="chart-div"></div>
+  </el-card>
+</template>
+
+<script>
+// 主模块
+import echarts from 'echarts/lib/echarts'
+// 引入 svg 主要解决文字锯齿问题, zrender 为 echart 底层
+import 'zrender/lib/svg/svg'
+// 饼图
+import 'echarts/lib/chart/pie'
+// 其他组件
+import 'echarts/lib/component/title'
+import 'echarts/lib/component/tooltip'
+import 'echarts/lib/component/legend'
+
+
+export default {
+  name: 'StatisticClassification',
+  components: {
+    Title: () => import('@/components/Typography/Title.vue'),
+  },
+  props: {
+    dimensions: {
+      type: Array,
+      default: () => (['label', 'value'])
+    },
+    dataSource: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  watch: {
+    dataSource: {
+      handler(val) {
+        this.renderChart(val)
+      },
+      immediate: true
+    }
+  },
+  data() {
+    return {
+      options: {
+        title: {
+          subtext: '单位: 个',
+        },
+        tooltip: {
+          trigger: 'item',
+        },
+        legend: {
+          orient: 'vertical',
+          bottom: '5%',
+          right: '5%'
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: ['40%', '70%'],
+            label: {
+              normal: {
+                show: true,
+                position: 'center',
+                color:'#454c5c',
+                padding: [0, 0, 20, 0],  //设置字angular的边距
+                fontSize: 24,
+              },
+            },
+            labelLine: {
+              show: false
+            },
+          }
+        ],
+      },
+      myChart: null,
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.renderChart(this.dataSource)
+    })
+  },
+  beforeDestroy() {
+    if (this.myChart) {
+      this.myChart.dispose()
+      this.myChart = null
+    }
+  },
+  methods: {
+    renderChart(source) {
+      if (!this.$refs.chart) return;
+
+      if (!this.myChart) {
+        this.myChart = echarts.init(this.$refs.chart, null, {renderer: 'svg'})
+      }
+
+      const keyProp = this.dimensions[0]
+      const valProp = this.dimensions[1]
+
+      const total = source.reduce((acc, item) => acc + item[valProp], 0)
+      const legendData = source.reduce((acc, item) => {
+        const name = item[keyProp]
+        const value = item[valProp]
+        const percent = total > 0 ? value * 100 / total : 0
+
+        return {
+          ...acc,
+          [name]: `  ${name}  ${value}个  ${percent}%`
+        }
+      }, {})
+
+      const first = this.options.series[0]
+      const option = {
+        ...this.options,
+        tooltip: {
+          ...this.options.tooltip,
+          formatter: (params) => {
+            return `${params.name}: ${params.data[valProp]}个`
+          }
+        },
+        series: [
+          {
+            ...first,
+            label: {
+              ...first.label,
+              normal: {
+                ...first.label.normal,
+                formatter: `${total} 个`
+              }
+            }
+          }
+        ],
+        legend: {
+          ...this.options.legend,
+          formatter: name => legendData[name],
+        },
+        dataset: {
+          source,
+          dimensions: this.dimensions,
+        }
+      }
+
+      console.log(option)
+
+      this.myChart.setOption(option)
+    },
+  }
+}
+</script>

src/views/hazard/StatisticAnalysis/index.vue

@@ -1,3 +1,45 @@
 <template>
-  <div>统计分析</div>
-</template>
+  <div class="statistic-analysis-page">
+    <el-card></el-card>
+    <el-row :gutter="48">
+      <el-col :span="12">
+        <StatisticClassification :data-source="classificationData" />
+      </el-col>
+      <el-col :span="12">
+        <el-card></el-card>
+      </el-col>
+    </el-row>
+    <el-card></el-card>    
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StatisticAnalysis',
+  components: {
+    StatisticClassification: () => import('./charts/classification.vue'),
+  },
+  data() {
+    return {
+      classificationData: [
+        { label: '一级', value: 16 },
+        { label: '二级', value: 17 },
+        { label: '三级', value: 18 },
+        { label: '四级', value: 49 },
+      ],
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.statistic-analysis-page {
+  & > div + div {
+    margin-top: 2em;
+  }
+
+  .chart-div {
+    min-height: 360px;
+  }
+}
+</style>

yarn.lock

@@ -2725,6 +2725,13 @@ easy-stack@1.0.1:
   resolved "https://registry.npmmirror.com/easy-stack/-/easy-stack-1.0.1.tgz#8afe4264626988cabb11f3c704ccd0c835411066"
   integrity sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==
 
+echarts@4.7.0:
+  version "4.7.0"
+  resolved "https://registry.npmmirror.com/echarts/-/echarts-4.7.0.tgz#5b3875a4c2f91e3929425fabab9eace7e4098b3f"
+  integrity sha512-NlOTdUcAsIyCCG+N4uh0ZEvXtrPW2jvcuqf03RyqYeCKzyPbiOQ4I3MdKXMhxG3lBdqQNdNXVT71SB4KTQjN0A==
+  dependencies:
+    zrender "4.3.0"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -6082,3 +6089,8 @@ yorkie@^2.0.0:
     is-ci "^1.0.10"
     normalize-path "^1.0.0"
     strip-indent "^2.0.0"
+
+zrender@4.3.0:
+  version "4.3.0"
+  resolved "https://registry.npmmirror.com/zrender/-/zrender-4.3.0.tgz#9f056121b20bbae44414d287bf6a119ff7042661"
+  integrity sha512-Dii6j2bDsPkxQayuVf2DXJeruIB/mKVxxcGRZQ9GExiBd4c3w7+oBuvo1O/JGHeFeA1nCmSDVDs/S7yKZG1nrA==