feats

src/components/Typography/Title.vue

@@ -42,7 +42,7 @@ export default {
 
   &.title-stub {
     border-left: 5px solid #298CF7;
-    padding-left: 1em;
+    padding-left: 0.6em;
   }
 }
 </style>

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

@@ -0,0 +1,115 @@
+<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/bar'
+// 其他组件
+import 'echarts/lib/component/title'
+import 'echarts/lib/component/tooltip'
+//
+import { LinearGradient } from './util'
+
+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: '单位: 个',
+        },
+        xAxis: {
+          type: 'category',
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            type: 'bar',
+            barMaxWidth: 40,
+            label: {
+              show: true,
+              position: 'top',
+            },
+            itemStyle: {
+              color: LinearGradient([{ offset: 0, color: 'rgba(69, 141, 240, 1)' }, { offset: 1, color: 'rgba(69, 141, 240, 0.4)' }])
+            },
+          }
+        ],
+      },
+      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 option = {
+        ...this.options,
+        tooltip: {
+          ...this.options.tooltip,
+          formatter: (params) => {
+            return `${params.name}: ${params.data[valProp]}个`
+          }
+        },
+        dataset: {
+          source,
+          dimensions: this.dimensions,
+        }
+      }
+
+      console.log(option)
+
+      this.myChart.setOption(option)
+    },
+  }
+}
+</script>

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

@@ -0,0 +1,168 @@
+<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/bar'
+// 其他组件
+import 'echarts/lib/component/title'
+import 'echarts/lib/component/tooltip'
+import 'echarts/lib/component/legend'
+//
+import { LinearGradient } from './util'
+
+// 默认颜色集合
+const colors = [
+  LinearGradient([{ offset: 0, color: 'rgba(69, 141, 240, 1)' }, { offset: 1, color: 'rgba(69, 141, 240, 0.4)' }]),
+  LinearGradient([{ offset: 0, color: 'rgba(162, 69, 240, 1)' }, { offset: 1, color: 'rgba(162, 69, 240, 0.4)' }]),
+  LinearGradient([{ offset: 0, color: 'rgba(161, 240, 75, 1)' }, { offset: 1, color: 'rgba(161, 240, 75, 0.4)' }]),
+  LinearGradient([{ offset: 0, color: 'rgba(241, 186, 70, 1)' }, { offset: 1, color: 'rgba(241, 186, 70, 0.4)' }]),
+  LinearGradient([{ offset: 0, color: 'rgba(246, 151, 151, 1)' }, { offset: 1, color: 'rgba(246, 151, 151, 0.4)' }]),
+]
+
+export default {
+  name: 'StatisticEnterprise',
+  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: '单位: 个',
+        },
+        legend: {
+          right: '5%',
+        },
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: '#ffffff',
+          formatter: (params) => {
+            if (!params || !params.length) return '';
+
+            let htmlStr = `<div style="text-align: left">${params[0].name}</div>`
+            htmlStr += params.map((item) => {
+              const color = item.color.colorStops[0].color
+              const seriesName = item.seriesName
+              const value = item.value[seriesName]
+
+              return `
+                <div style="display: flex; justify-content: space-between; align-items: center">
+                  <div style="flex: 1;">
+                    <span style="display: inline-block; width: 0.8em; height: 0.8em; background-color: ${color};"></span>
+                    <span style="display: inline-block; margin-left: 0.8em">${seriesName}</span>
+                  </div>
+                  <div style="flex: 1; margin-left: 1em">${value}个</div>
+                </div>
+              `
+            }).join('')
+          
+            return `<div style="box-sizing: border-box; padding: 0.6em 1em">${htmlStr}</div>`;
+          },
+          textStyle: {
+            color: '#333',
+            lineHeight: 28,
+          },
+          extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
+          axisPointer: {
+            type: 'shadow',
+            shadowStyle: {
+              color: LinearGradient([{ offset: 0, color: 'rgba(153, 205, 255, 0.2)' }, { offset: 1, color: 'rgba(153, 205, 255, 0.05)' }]),
+            }
+          }
+        },
+        xAxis: {
+          type: 'category',
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            type: 'bar',
+            barMaxWidth: 40,
+            itemStyle: {
+              color: LinearGradient([{ offset: 0, color: 'rgba(69, 141, 240, 1)' }, { offset: 1, color: 'rgba(69, 141, 240, 0.4)' }])
+            },
+          }
+        ],
+      },
+      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 option = {
+        ...this.options,
+        // tooltip: {
+        //   ...this.options.tooltip,
+        //   formatter: (params) => {
+        //     return `${params.name}: ${params.data[valProp]}个`
+        //   }
+        // },
+        dataset: {
+          source,
+          dimensions: this.dimensions,
+        },
+        series: source.map((item, index) => ({
+            type: 'bar',
+            barMaxWidth: 25,
+            itemStyle: {
+              color: colors[index % colors.length]
+            },
+        }))
+      }
+
+      console.log(option)
+
+      this.myChart.setOption(option)
+    },
+  }
+}
+</script>

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

@@ -19,7 +19,7 @@ import 'echarts/lib/component/legend'
 
 
 export default {
-  name: 'StatisticClassification',
+  name: 'StatisticGrading',
   components: {
     Title: () => import('@/components/Typography/Title.vue'),
   },
@@ -44,6 +44,7 @@ export default {
   data() {
     return {
       options: {
+        color: ['#F69A9A', '#FDE174', '#88DCA1', '#60B2FF', '#A647F0', '#A1EF4E'],
         title: {
           subtext: '单位: 个',
         },

src/views/hazard/StatisticAnalysis/charts/util.js

@@ -0,0 +1,8 @@
+import echarts from 'echarts/lib/echarts'
+
+// 获取渐变色, 默认竖向
+export function LinearGradient(colorStops, pos = {}, globalCoord = false) {
+  const { x = 0, y = 0, x2 = 0, y2 = 1 } = pos
+
+  return new echarts.graphic.LinearGradient(x, y, x2, y2, colorStops, globalCoord)
+}

src/views/hazard/StatisticAnalysis/index.vue

@@ -3,13 +3,13 @@
     <el-card></el-card>
     <el-row :gutter="48">
       <el-col :span="12">
-        <StatisticClassification :data-source="classificationData" />
+        <StatisticGrading :data-source="gradingData" />
       </el-col>
       <el-col :span="12">
-        <el-card></el-card>
+        <StatisticClassify :data-source="classifyData" />
       </el-col>
     </el-row>
-    <el-card></el-card>    
+    <StatisticEnterprise :data-source="enterpriseData" :dimensions="enterpriseDimensions" />    
   </div>
 </template>
 
@@ -17,16 +17,31 @@
 export default {
   name: 'StatisticAnalysis',
   components: {
-    StatisticClassification: () => import('./charts/classification.vue'),
+    StatisticGrading: () => import('./charts/grading.vue'),
+    StatisticClassify: () => import('./charts/classify.vue'),
+    StatisticEnterprise: () => import('./charts/enterprise.vue'),
   },
   data() {
     return {
-      classificationData: [
+      gradingData: [
         { label: '一级', value: 16 },
         { label: '二级', value: 17 },
         { label: '三级', value: 18 },
         { label: '四级', value: 49 },
       ],
+      classifyData: [
+        { label: '储罐区', value: 100 },
+        { label: '生产装置', value: 260 },
+        { label: '油气管道', value: 700 },
+        { label: '压力容器', value: 1000 },
+      ],
+      enterpriseDimensions: ['name', '储罐区', '生产装置', '油气管道', '压力容器'],
+      enterpriseData: [
+        { name: '分公司1', '储罐区': 100, '生产装置': 520, '油气管道': 250, '压力容器': 780 },
+        { name: '分公司2', '储罐区': 100, '生产装置': 520, '油气管道': 250, '压力容器': 780 },
+        { name: '分公司3', '储罐区': 100, '生产装置': 520, '油气管道': 250, '压力容器': 780 },
+        { name: '分公司4', '储罐区': 100, '生产装置': 520, '油气管道': 250, '压力容器': 780 },
+      ]
     }
   }
 }