丰富首页Echarts图表

src/views/home.vue

@@ -2,15 +2,13 @@
   <div class="dashboard-container">
     <div class="dashboard-editor-container">
       <panel-group/>
-
       <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
         <line-chart/>
       </el-row>
-
       <el-row :gutter="32">
         <el-col :xs="24" :sm="24" :lg="8">
           <div class="chart-wrapper">
-            <raddar-chart/>
+            <radar-chart/>
           </div>
         </el-col>
         <el-col :xs="24" :sm="24" :lg="8">
@@ -24,6 +22,72 @@
           </div>
         </el-col>
       </el-row>
+      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+        <heat-map/>
+      </el-row>
+      <el-row :gutter="32">
+        <el-col :xs="24" :sm="24" :lg="8">
+          <div class="chart-wrapper">
+            <funnel/>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="8">
+          <div class="chart-wrapper">
+            <sunburst/>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="8">
+          <div class="chart-wrapper">
+            <gauge/>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row :gutter="12">
+        <el-col :span="12">
+          <div class="chart-wrapper">
+            <rich/>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="chart-wrapper">
+            <theme-river/>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row :gutter="32">
+        <el-col :xs="24" :sm="24" :lg="8">
+          <div class="chart-wrapper">
+            <graph/>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="8">
+          <div class="chart-wrapper">
+            <sankey/>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="8">
+          <div class="chart-wrapper">
+            <line3-d/>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row :gutter="12">
+        <el-col :span="12">
+          <div class="chart-wrapper">
+            <scatter/>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="chart-wrapper">
+            <point/>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+        <div class="chart-wrapper">
+          <category/>
+        </div>
+      </el-row>
     </div>
   </div>
 </template>
@@ -32,24 +96,50 @@
 import { mapGetters } from 'vuex'
 import PanelGroup from './dashboard/PanelGroup'
 import LineChart from './dashboard/LineChart'
-import RaddarChart from './dashboard/RaddarChart'
+import RadarChart from './dashboard/RadarChart'
 import PieChart from './dashboard/PieChart'
 import BarChart from './dashboard/BarChart'
 import { count } from '@/api/visits'
+import HeatMap from './dashboard/HeatMap'
+import Funnel from './dashboard/Funnel'
+import Gauge from './dashboard/Gauge'
+import Rich from './dashboard/Rich'
+import ThemeRiver from './dashboard/ThemeRiver'
+import Sunburst from './dashboard/Sunburst'
+import Graph from './dashboard/Graph'
+import Sankey from './dashboard/Sankey'
+import Scatter from './dashboard/Scatter'
+import Line3D from './dashboard/Line3D'
+import Category from './dashboard/Category'
+import Point from './dashboard/Point'
 
 /**
  * 记录访问，只有页面刷新或者第一次加载才会记录
  */
-count().then(res => {})
+count().then(res => {
+})
 
 export default {
   name: 'Dashboard',
   components: {
+    Point,
+    Category,
+    Graph,
+    HeatMap,
     PanelGroup,
     LineChart,
-    RaddarChart,
+    RadarChart,
     PieChart,
-    BarChart },
+    Funnel,
+    Sunburst,
+    Gauge,
+    Rich,
+    ThemeRiver,
+    Sankey,
+    Line3D,
+    Scatter,
+    BarChart
+  },
   computed: {
     ...mapGetters([
       'roles'