引入echarts

liuqimichale
1 parent 6ee688df
Showing 3 changed files with 56 additions and 2 deletions
package-lock.json
package.json
src/components/VIncome.vue
@@ -3132,6 +3132,14 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "4.1.0",
+      "resolved": "http://registry.npm.taobao.org/echarts/download/echarts-4.1.0.tgz",
+      "integrity": "sha1-1YjJX3PBqZKLnHPVt2l1HDGFvNw=",
+      "requires": {
+        "zrender": "4.0.4"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "http://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -12699,6 +12707,11 @@
       "requires": {
         "camelcase": "^3.0.0"
       }
+    },
+    "zrender": {
+      "version": "4.0.4",
+      "resolved": "http://registry.npm.taobao.org/zrender/download/zrender-4.0.4.tgz",
+      "integrity": "sha1-kQ5g2IjwDJWZBz8jdY3SM0X+SP0="
     }
   }
 }
@@ -11,6 +11,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "echarts": "^4.1.0",
     "vue": "^2.5.2"
   },
   "devDependencies": {
@@ -5,7 +5,7 @@
             <account-num>
                 <span>总计</span>
             </account-num>
-            <div class="income-echart">
+            <div class="income-echart" id="income-echart">
  
             </div>
         </div>
@@ -15,6 +15,7 @@
 <script>
 import CardTitle from './base/CardTitle'
 import AccountNum from './base/AccountNum'
+import echarts from 'echarts'
 export default {
   name: 'VIncome',
   components: {
@@ -25,6 +26,46 @@ export default {
     return {
  
     }
+  },
+  mounted(){
+    this.drawBar();
+  },
+  methods: {
+    drawBar() {
+      let myChart = echarts.init(document.getElementById('income-echart'));
+      let option = {
+        color: ['#f44'],
+        tooltip : {
+          trigger: 'axis',
+          axisPointer : {
+            type : 'shadow'
+          }
+        },
+        xAxis : [
+          {
+            type : 'category',
+            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
+            axisTick: {
+              alignWithLabel: true
+            }
+          }
+        ],
+        yAxis : [
+          {
+            type : 'value'
+          }
+        ],
+        series : [
+          {
+            name:'每月花费',
+            type:'bar',
+            barWidth: '60%',
+            data:[995,666,444,858,654,236,645,546,846,225,547,356]
+          }
+        ]
+      };
+      myChart.setOption(option);
+    }
   }
 }
 </script>
@@ -39,7 +80,6 @@ export default {
     }
     .income-echart{
         height: 70%;
-        background-color: #f00;
     }
  
 </style>