perf[charts]: perf effect

src/components/Charts/lineMarker.vue

@@ -46,13 +46,14 @@ export default {
       this.chart.setOption({
         backgroundColor: '#394056',
         title: {
-          text: '请求数',
+          top: 20,
+          text: 'Requests',
           textStyle: {
             fontWeight: 'normal',
             fontSize: 16,
             color: '#F1F1F3'
           },
-          left: '6%'
+          left: '1%'
         },
         tooltip: {
           trigger: 'axis',
@@ -63,11 +64,12 @@ export default {
           }
         },
         legend: {
+          top: 20,
           icon: 'rect',
           itemWidth: 14,
           itemHeight: 5,
           itemGap: 13,
-          data: ['移动', '电信', '联通'],
+          data: ['CMCC', 'CTCC', 'CUCC'],
           right: '4%',
           textStyle: {
             fontSize: 12,
@@ -75,9 +77,10 @@ export default {
           }
         },
         grid: {
+          top: 100,
           left: '3%',
           right: '4%',
-          bottom: '3%',
+          bottom: '2%',
           containLabel: true
         },
         xAxis: [{
@@ -92,7 +95,7 @@ export default {
         }],
         yAxis: [{
           type: 'value',
-          name: '单位（%）',
+          name: '(%)',
           axisTick: {
             show: false
           },
@@ -114,7 +117,7 @@ export default {
           }
         }],
         series: [{
-          name: '移动',
+          name: 'CMCC',
           type: 'line',
           smooth: true,
           symbol: 'circle',
@@ -148,7 +151,7 @@ export default {
           },
           data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
         }, {
-          name: '电信',
+          name: 'CTCC',
           type: 'line',
           smooth: true,
           symbol: 'circle',
@@ -182,7 +185,7 @@ export default {
           },
           data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
         }, {
-          name: '联通',
+          name: 'CUCC',
           type: 'line',
           smooth: true,
           symbol: 'circle',

src/components/Charts/mixChart.vue

@@ -46,15 +46,16 @@ export default {
       const xData = (function() {
         const data = []
         for (let i = 1; i < 13; i++) {
-          data.push(i + '月份')
+          data.push(i + 'month')
         }
         return data
       }())
       this.chart.setOption({
         backgroundColor: '#344b58',
         title: {
-          text: '统计',
+          text: 'statistics',
-          x: '4%',
+          x: '20',
+          top: '20',
           textStyle: {
             color: '#fff',
             fontSize: '22'
@@ -81,12 +82,12 @@ export default {
           }
         },
         legend: {
-          x: '15%',
+          x: '5%',
           top: '10%',
           textStyle: {
             color: '#90979c'
           },
-          data: ['女', '男', '平均']
+          data: ['female', 'male', 'average']
         },
         calculable: true,
         xAxis: [{
@@ -158,9 +159,9 @@ export default {
           end: 35
         }],
         series: [{
-          name: '女',
+          name: 'female',
           type: 'bar',
-          stack: '总量',
+          stack: 'total',
           barMaxWidth: 35,
           barGap: '10%',
           itemStyle: {
@@ -195,9 +196,9 @@ export default {
         },
 
         {
-          name: '男',
+          name: 'male',
           type: 'bar',
-          stack: '总量',
+          stack: 'total',
           itemStyle: {
             normal: {
               color: 'rgba(0,191,183,1)',
@@ -226,9 +227,9 @@ export default {
             220
           ]
         }, {
-          name: '平均',
+          name: 'average',
           type: 'line',
-          stack: '总量',
+          stack: 'total',
           symbolSize: 10,
           symbol: 'circle',
           itemStyle: {

src/lang/en.js

@@ -20,7 +20,7 @@ export default {
     backToTop: 'BackToTop',
     charts: 'Charts',
     keyboardChart: 'Keyboard Chart',
-    lineChart: 'Line chart',
+    lineChart: 'Line Chart',
     mixChart: 'Mix Chart',
     example: 'Example',
     Table: 'Table',

src/views/charts/keyboard.vue

@@ -1,8 +1,6 @@
 <template>
-  <div class="components-container" style='height:100vh'>
+  <div class='chart-container'>
-    <div class='chart-container'>
+    <chart height='100%' width='100%'></chart>
-      <chart height='100%' width='100%'></chart>
-    </div>
   </div>
 </template>
 
@@ -18,8 +16,9 @@ export default {
 <style scoped>
 .chart-container{
   position: relative;
+  padding: 20px;
   width: 100%;
-  height: 90%;
+  height: 85vh;
 }
 </style>
 

src/views/charts/line.vue

@@ -1,8 +1,6 @@
 <template>
-  <div class="components-container" style='height:100vh'>
+  <div class='chart-container'>
-    <div class='chart-container'>
+    <chart height='100%' width='100%'></chart>
-      <chart height='100%' width='100%'></chart>
-    </div>
   </div>
 </template>
 
@@ -18,8 +16,9 @@ export default {
 <style scoped>
 .chart-container{
   position: relative;
+  padding:20px;
   width: 100%;
-  height: 80%;
+  height:85vh;
 }
 </style>
 

src/views/charts/mixChart.vue

@@ -1,8 +1,6 @@
 <template>
-  <div class="components-container" style='height:100vh'>
+  <div class='chart-container'>
-    <div class='chart-container'>
+    <chart height='100%' width='100%'></chart>
-      <chart height='100%' width='100%'></chart>
-    </div>
   </div>
 </template>
 
@@ -18,9 +16,9 @@ export default {
 <style scoped>
 .chart-container{
   position: relative;
+  padding: 20px;
   width: 100%;
-  height: 90%;
+  height:85vh;
-  padding-bottom: 40px;
 }
 </style>