前端：high-chart plugin

src/dashoo.cn/frontend_web/nuxt.config.js

@@ -134,6 +134,10 @@ module.exports = {
     {
       src: '@/plugins/vue-print-nb',
       ssr: false
+    },
+    {
+      src: '@/plugins/hight-charts',
+      ssr: false
     }
   ],
 

src/dashoo.cn/frontend_web/src/pages/indexNew.vue

@@ -10,7 +10,9 @@
     </div>
     <div style="width: 100%; height: 80%; padding-top: 0px; margin-bottom: 1%">
       <div style="display: flex; width: 100%; height: 50%; padding-top: 0px; margin-bottom: 1%">
-        <div style="width: 50%; height: 100%; margin: 0 5px; padding-top: 0px; border: 1px solid #00ffff; margin-bottom: 1%"></div>
+        <div style="width: 50%; height: 100%; margin: 0 5px; padding-top: 0px; border: 1px solid #00ffff; margin-bottom: 1%">
+          <highcharts :options="chartOptions"></highcharts>
+        </div>
         <div style="width: 50%; height: 100%; margin: 0 5px; padding-top: 0px; border: 1px solid #f13f40; margin-bottom: 1%"></div>
       </div>
       <div style="display: flex; width: 100%; height: 50%; padding-top: 0px; margin-bottom: 1%">
@@ -23,14 +25,62 @@
 
 <script>
   import echarts from 'echarts'
+  // import {Chart} from 'highcharts-vue'
+
   import {
     mapGetters
   } from 'vuex'
   export default {
     name: 'index',
-
+    // components: {
+    //   highcharts: Chart
+    // },
     data () {
       return {
+        chartOptions: {
+          chart: {
+            type: 'pie',
+            options3d: {
+              enabled: true,
+              alpha: 45,
+              beta: 0
+            }
+          },
+          title: {
+            text: '2014年某网站不同浏览器访问量占比'
+          },
+          tooltip: {
+            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+          },
+          plotOptions: {
+            pie: {
+              allowPointSelect: true,
+              cursor: 'pointer',
+              depth: 35,
+              dataLabels: {
+                enabled: true,
+                format: '{point.name}'
+              }
+            }
+          },
+          series: [{
+            type: 'pie',
+            name: '浏览器占比',
+            data: [
+              ['Firefox', 45.0],
+              ['IE', 26.8],
+              {
+                name: 'Chrome',
+                y: 12.8,
+                sliced: true,
+                selected: true
+              },
+              ['Safari', 8.5],
+              ['Opera', 6.2],
+              ['Others', 0.7]
+            ]
+          }]
+        },
         todoNumList: {
           newAccess: 0, // 新准入
           append: 0, // 增项
@@ -83,7 +133,7 @@
           '#6A5ACD', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B',
           '#60C0DD', '#E87C25', '#27727B', '#FE8463'
         ],
-        downloading: true
+        downloading: false
       }
     },
     created () {
@@ -137,7 +187,7 @@
             let length = _this.contracttotal.MonthTotal.length
             for (let index = 0; index < length; index++) {
               time[index] = _this.contracttotal.MonthTotal[length - 1 - index].Year + '.' + _this.contracttotal.MonthTotal[
-              length - 1 - index].Month
+                length - 1 - index].Month
               total[index] = _this.contracttotal.MonthTotal[length - 1 - index].Count
             }
             _this.drawContractline('deviceContractLine', time, total) // 合同
@@ -159,7 +209,7 @@
             let length = _this.customertotal.MonthTotal.length
             for (let index = 0; index < length; index++) {
               time[index] = _this.customertotal.MonthTotal[length - 1 - index].Year + '.' + _this.customertotal.MonthTotal[
-              length - 1 - index].Month
+                length - 1 - index].Month
               total[index] = _this.customertotal.MonthTotal[length - 1 - index].Count
             }
             _this.drawContractline('deviceCustomerLine', time, total) // 客户
@@ -181,7 +231,7 @@
             let length = _this.collectiontotal.MonthTotal.length
             for (let index = 0; index < length; index++) {
               time[index] = _this.collectiontotal.MonthTotal[length - 1 - index].Year + '.' + _this.collectiontotal.MonthTotal[
-              length - 1 - index].Month
+                length - 1 - index].Month
               total[index] = _this.collectiontotal.MonthTotal[length - 1 - index].Count
             }
             _this.drawContractline('deviceCollectionline', time, total) // 样本采集
@@ -203,7 +253,7 @@
             let length = _this.preparetotal.MonthTotal.length
             for (let index = 0; index < length; index++) {
               time[index] = _this.preparetotal.MonthTotal[length - 1 - index].Year + '.' + _this.preparetotal.MonthTotal[
-              length - 1 - index].Month
+                length - 1 - index].Month
               total[index] = _this.preparetotal.MonthTotal[length - 1 - index].Count
             }
             _this.drawContractline('devicePrepareline', time, total) // 制备