v1.0.4

2025-11-22 10:27:01 +08:00 · 2020-01-11 09:10:29 +08:00
parent e55e1b2f33
commit 215556f73a
608 changed files with 7 additions and 3 deletions
--- a/smart-admin-web/src/views/home/components/chart-bar.vue
+++ b/smart-admin-web/src/views/home/components/chart-bar.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="bar-main"
+       id="box"
+       ref="dom"></div>
+</template>
+
+<script>
+import echarts from 'echarts';
+import tdTheme from './theme.json';
+import { on, off } from '@/lib/util';
+echarts.registerTheme('tdTheme', tdTheme);
+export default {
+  props: {
+    value: Object,
+    text: String,
+    subtext: String
+  },
+  mounted() {
+    this.initChart();
+  },
+  methods: {
+    resize() {
+      this.dom.resize();
+    },
+    initChart() {
+      this.$nextTick(() => {
+        let xAxisData = Object.keys(this.value);
+        let seriesData = Object.values(this.value);
+        let option = {
+          grid: {
+            left: '1%',
+            right: '1%',
+            top: '2%',
+            bottom: '1%',
+            containLabel: true
+          },
+          title: {
+            text: this.text,
+            subtext: this.subtext,
+            x: 'center'
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: '{c}人',
+            // position: ['30%', '90%'],
+            position: 'top',
+            backgroundColor: '#FAFBFE',
+            textStyle: {
+              fontSize: 14,
+              color: '#6d6d6d'
+            }
+          },
+          xAxis: {
+            // show: false,
+            type: 'category',
+            data: xAxisData,
+            splitLine: {
+              show: false
+            }
+          },
+          yAxis: [
+            {
+              // show: false,
+              type: 'value',
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  // 设置刻度线粗度(粗的宽度)
+                  width: 1,
+                  // 颜色数组，数组数量要比刻度线数量大才能不循环使用
+                  color: [
+                    'rgba(0, 0, 0, 0)',
+                    '#eee',
+                    '#eee',
+                    '#eee',
+                    '#eee',
+                    '#eee',
+                    '#eee',
+                    '#eee',
+                    '#eee'
+                  ]
+                }
+              }
+            }
+          ],
+          series: [
+            {
+              data: seriesData,
+              type: 'bar',
+              barWidth: 36,
+              areaStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: '#f2f5ff' },
+                    { offset: 1, color: '#fff' }
+                  ])
+                }
+              },
+              itemStyle: {
+                normal: {
+                  barBorderRadius: [50],
+                  color: new echarts.graphic.LinearGradient(
+                    0,
+                    1,
+                    0,
+                    0,
+                    [
+                      {
+                        offset: 0,
+                        color: '#3AA1FF' // 0% 处的颜色
+                      },
+                      {
+                        offset: 1,
+                        color: '#36CBCB' // 100% 处的颜色
+                      }
+                    ],
+                    false
+                  )
+                }
+              }
+            }
+          ]
+        };
+        this.dom = echarts.init(this.$refs.dom, 'tdTheme');
+        this.dom.setOption(option);
+        on(window, 'resize', this.resize);
+      });
+    }
+  }
+};
+</script>
+
+<style>
+.bar-main {
+  width: 100%;
+  height: 360px;
+  padding: 28px;
+  background: #fff;
+}
+</style>