仪表盘

src/components/setting/Index.vue

@@ -72,8 +72,7 @@ export default {
         ],
         lineWidth: 0,
         minorTickInterval: null,
-        tickPixelInterval: 400,
-        tickWidth: 0,
+        tickWidth: 2,
         title: {
           y: -70
         },
@@ -94,24 +93,28 @@ export default {
     let chart1 = Highcharts.chart('container-speed', {
       yAxis: {
         min: 0,
-        max: 200,
+        max: 50,
         title: {
-          text: '速度'
+          text: '账户注册使用情况',
+          style: {
+            "font-weight": "bold"
+          },
+          y: -100
         }
       },
       credits: {
         enabled: false
       },
       series: [{
-        name: '速度',
-        data: [80],
+        name: '已注册账户数',
+        data: [35],
         dataLabels: {
-          format: '<div style="text-align:center"><span style="font-size:25px;color:' +
-          ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
-          '<span style="font-size:12px;color:silver">km/h</span></div>'
+          format: '<span style="color: #666666;fill: #666666;">已注册账户数</span></div><br/>' +
+          '<div style="text-align:center"><span style="font-size:25px;color:' +
+          ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><span style="font-size:12px;color:silver">个</span><br/>'
         },
         tooltip: {
-          valueSuffix: ' km/h'
+          valueSuffix: '个'
         }
       }]
     })
@@ -119,21 +122,25 @@ export default {
     let chart2 = Highcharts.chart('container-rpm', {
       yAxis: {
         min: 0,
-        max: 5,
+        max: 800,
         title: {
-          text: 'RPM'
+          text: '账户有效期',
+          style: {
+            "font-weight": "bold"
+          },
+          y: -100
         }
       },
       series: [{
         name: 'RPM',
-        data: [1],
+        data: [500],
         dataLabels: {
-          format: '<div style="text-align:center"><span style="font-size:25px;color:' +
-          ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
-          '<span style="font-size:12px;color:silver">* 1000 / min</span></div>'
+          format: '<span style="color: #666666;fill: #666666;">剩余天数</span></div><br/>' +
+          '<div style="text-align:center"><span style="font-size:25px;color:' +
+          ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><span style="font-size:12px;color:silver">天</span><br/>'
         },
         tooltip: {
-          valueSuffix: ' revolutions/min'
+          valueSuffix: '天'
         }
       }]
     })