update LineChart.vue

src/views/chart/LineChart.vue

@@ -5,24 +5,26 @@
         <div slot="header" class="clearfix">
           <span>折线图</span>
         </div>
-        <div id="chart1" style="width: 1000px;height:400px;" />
+        <div id="chart1" style="height:400px;" />
       </el-card>
     </el-row>
     <el-row class="movie-list">
-      <el-card>
-        <div slot="header" class="clearfix">
-          <span>饼图</span>
-        </div>
-        <div id="chart2" style="width: 600px;height:400px;" />
-      </el-card>
-    </el-row>
-    <el-row class="movie-list">
-      <el-card>
-        <div slot="header" class="clearfix">
-          <span>金字塔图</span>
-        </div>
-        <div id="chart3" style="width: 800px;height:400px;" />
-      </el-card>
+      <el-col :md="12" class="movie-list">
+        <el-card>
+          <div slot="header" class="clearfix">
+            <span>饼图</span>
+          </div>
+          <div id="chart2" style="height:400px;" />
+        </el-card>
+      </el-col>
+      <el-col :md="12" class="movie-list">
+        <el-card>
+          <div slot="header" class="clearfix">
+            <span>金字塔图</span>
+          </div>
+          <div id="chart3" style="height:400px;" />
+        </el-card>
+      </el-col>
     </el-row>
     <el-row class="movie-list">
       <el-card>
@@ -53,83 +55,6 @@ export default {
     document.title = 'LineChart'
   },
   methods: {
-    initChart() {
-      // 配置项
-      var option = {
-        tooltip: {
-          position: 'top'
-        },
-        animation: false,
-        grid: {
-          height: '50%',
-          y: '10%'
-        },
-        xAxis: {
-          type: 'category',
-          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
-            '11', '12', '13', '14', '15', '16', '17', '18', '19', '20'],
-          splitArea: {
-            show: true
-          }
-        },
-        yAxis: {
-          type: 'category',
-          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
-            '11', '12', '13', '14', '15', '16', '17', '18', '19', '20'],
-          splitArea: {
-            show: true
-          }
-        },
-        visualMap: {
-          min: 0,
-          max: 100,
-          calculable: true,
-          orient: 'horizontal',
-          left: 'center',
-          bottom: '15%'
-        },
-        series: [{
-          name: '热力图',
-          type: 'heatmap',
-          data: [
-            [1, 2, 31, 4, 51, 60, 70, 10, 80, 10, 90, 19, 20, 30, 1, 20, 0, 1, 20, 20],
-            [0, 1, 20, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
-            [0, 2, 30, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
-            [1, 0, 40, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
-            [1, 1, 50, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
-            [1, 2, 60, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
-            [2, 0, 70, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
-            [2, 1, 80, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
-            [2, 2, 90, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
-            [3, 0, 80, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
-            [3, 1, 70, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
-            [3, 2, 60, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
-            [4, 0, 50, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
-            [4, 1, 40, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
-            [4, 2, 30, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
-            [5, 0, 20, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
-            [5, 1, 10, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
-            [5, 2, 5, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
-            [6, 0, 0, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
-            [6, 1, 0, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20]
-          ],
-          label: {
-            show: true
-          },
-          emphasis: {
-            itemStyle: {
-              shadowBlur: 10,
-              shadowColor: 'rgba(0, 0, 0, 0.5)'
-            }
-          }
-        }]
-      }
-      // 使用配置项显示图表
-      this.myChart.setOption(option)
-    },
-    randomData() {
-      return Math.ceil(Math.random() * 1000)
-    },
     initChart1() {
       var base = +new Date(2014, 9, 3)
       var oneDay = 24 * 3600 * 1000
@@ -390,35 +315,9 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.el-container {
-  width: 100%;
-  height: 100%;
-}
-.el-container {
-  animation: leftMoveIn .7s ease-in;
-}
-
-@keyframes leftMoveIn {
-  0% {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateX(0%);
-    opacity: 1;
-  }
-}
-
-.card-style {
-  padding-top: 3px;
-  padding-bottom: 3px;
-  padding-left: 3px;
-  padding-right: 3px;
-}
-
 .movie-list {
-  padding-top: 15px;
-  padding-left: 5%;
-  padding-right: 5%;
+  padding-top: 5px;
+  padding-left: 5px;
+  padding-right: 5px;
 }
 </style>