Commit f197b24f1e1851caa69c1ba311e2813573ce7773
1 parent
6ee688df
引入echarts
Showing
3 changed files
with
56 additions
and
2 deletions
package-lock.json
| @@ -3132,6 +3132,14 @@ | @@ -3132,6 +3132,14 @@ | ||
| 3132 | "safer-buffer": "^2.1.0" | 3132 | "safer-buffer": "^2.1.0" |
| 3133 | } | 3133 | } |
| 3134 | }, | 3134 | }, |
| 3135 | + "echarts": { | ||
| 3136 | + "version": "4.1.0", | ||
| 3137 | + "resolved": "http://registry.npm.taobao.org/echarts/download/echarts-4.1.0.tgz", | ||
| 3138 | + "integrity": "sha1-1YjJX3PBqZKLnHPVt2l1HDGFvNw=", | ||
| 3139 | + "requires": { | ||
| 3140 | + "zrender": "4.0.4" | ||
| 3141 | + } | ||
| 3142 | + }, | ||
| 3135 | "ee-first": { | 3143 | "ee-first": { |
| 3136 | "version": "1.1.1", | 3144 | "version": "1.1.1", |
| 3137 | "resolved": "http://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz", | 3145 | "resolved": "http://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz", |
| @@ -12699,6 +12707,11 @@ | @@ -12699,6 +12707,11 @@ | ||
| 12699 | "requires": { | 12707 | "requires": { |
| 12700 | "camelcase": "^3.0.0" | 12708 | "camelcase": "^3.0.0" |
| 12701 | } | 12709 | } |
| 12710 | + }, | ||
| 12711 | + "zrender": { | ||
| 12712 | + "version": "4.0.4", | ||
| 12713 | + "resolved": "http://registry.npm.taobao.org/zrender/download/zrender-4.0.4.tgz", | ||
| 12714 | + "integrity": "sha1-kQ5g2IjwDJWZBz8jdY3SM0X+SP0=" | ||
| 12702 | } | 12715 | } |
| 12703 | } | 12716 | } |
| 12704 | } | 12717 | } |
package.json
src/components/VIncome.vue
| @@ -5,7 +5,7 @@ | @@ -5,7 +5,7 @@ | ||
| 5 | <account-num> | 5 | <account-num> |
| 6 | <span>总计</span> | 6 | <span>总计</span> |
| 7 | </account-num> | 7 | </account-num> |
| 8 | - <div class="income-echart"> | 8 | + <div class="income-echart" id="income-echart"> |
| 9 | 9 | ||
| 10 | </div> | 10 | </div> |
| 11 | </div> | 11 | </div> |
| @@ -15,6 +15,7 @@ | @@ -15,6 +15,7 @@ | ||
| 15 | <script> | 15 | <script> |
| 16 | import CardTitle from './base/CardTitle' | 16 | import CardTitle from './base/CardTitle' |
| 17 | import AccountNum from './base/AccountNum' | 17 | import AccountNum from './base/AccountNum' |
| 18 | +import echarts from 'echarts' | ||
| 18 | export default { | 19 | export default { |
| 19 | name: 'VIncome', | 20 | name: 'VIncome', |
| 20 | components: { | 21 | components: { |
| @@ -25,6 +26,46 @@ export default { | @@ -25,6 +26,46 @@ export default { | ||
| 25 | return { | 26 | return { |
| 26 | 27 | ||
| 27 | } | 28 | } |
| 29 | + }, | ||
| 30 | + mounted(){ | ||
| 31 | + this.drawBar(); | ||
| 32 | + }, | ||
| 33 | + methods: { | ||
| 34 | + drawBar() { | ||
| 35 | + let myChart = echarts.init(document.getElementById('income-echart')); | ||
| 36 | + let option = { | ||
| 37 | + color: ['#f44'], | ||
| 38 | + tooltip : { | ||
| 39 | + trigger: 'axis', | ||
| 40 | + axisPointer : { | ||
| 41 | + type : 'shadow' | ||
| 42 | + } | ||
| 43 | + }, | ||
| 44 | + xAxis : [ | ||
| 45 | + { | ||
| 46 | + type : 'category', | ||
| 47 | + data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',], | ||
| 48 | + axisTick: { | ||
| 49 | + alignWithLabel: true | ||
| 50 | + } | ||
| 51 | + } | ||
| 52 | + ], | ||
| 53 | + yAxis : [ | ||
| 54 | + { | ||
| 55 | + type : 'value' | ||
| 56 | + } | ||
| 57 | + ], | ||
| 58 | + series : [ | ||
| 59 | + { | ||
| 60 | + name:'每月花费', | ||
| 61 | + type:'bar', | ||
| 62 | + barWidth: '60%', | ||
| 63 | + data:[995,666,444,858,654,236,645,546,846,225,547,356] | ||
| 64 | + } | ||
| 65 | + ] | ||
| 66 | + }; | ||
| 67 | + myChart.setOption(option); | ||
| 68 | + } | ||
| 28 | } | 69 | } |
| 29 | } | 70 | } |
| 30 | </script> | 71 | </script> |
| @@ -39,7 +80,6 @@ export default { | @@ -39,7 +80,6 @@ export default { | ||
| 39 | } | 80 | } |
| 40 | .income-echart{ | 81 | .income-echart{ |
| 41 | height: 70%; | 82 | height: 70%; |
| 42 | - background-color: #f00; | ||
| 43 | } | 83 | } |
| 44 | 84 | ||
| 45 | </style> | 85 | </style> |