Commit 95fc0103c15194ba810b82c91fc12fb50e7ad783
1 parent
f197b24f
收入信息
Showing
4 changed files
with
259 additions
and
5 deletions
src/components/VIncome.vue
@@ -6,7 +6,7 @@ | @@ -6,7 +6,7 @@ | ||
6 | <span>总计</span> | 6 | <span>总计</span> |
7 | </account-num> | 7 | </account-num> |
8 | <div class="income-echart" id="income-echart"> | 8 | <div class="income-echart" id="income-echart"> |
9 | - | 9 | + <bar-chart :chart-data="pieChartData"></bar-chart> |
10 | </div> | 10 | </div> |
11 | </div> | 11 | </div> |
12 | </div> | 12 | </div> |
@@ -15,20 +15,24 @@ | @@ -15,20 +15,24 @@ | ||
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 | +import barChart from './base/barChart' |
19 | export default { | 19 | export default { |
20 | name: 'VIncome', | 20 | name: 'VIncome', |
21 | components: { | 21 | components: { |
22 | CardTitle, | 22 | CardTitle, |
23 | - AccountNum | 23 | + AccountNum, |
24 | + barChart | ||
24 | }, | 25 | }, |
25 | data() { | 26 | data() { |
26 | return { | 27 | return { |
27 | - | 28 | + pieChartData: { |
29 | + yData: [1,1], | ||
30 | + legendData: ['空余','占有'] | ||
31 | + }, | ||
28 | } | 32 | } |
29 | }, | 33 | }, |
30 | mounted(){ | 34 | mounted(){ |
31 | - this.drawBar(); | 35 | + //this.drawBar(); |
32 | }, | 36 | }, |
33 | methods: { | 37 | methods: { |
34 | drawBar() { | 38 | drawBar() { |
@@ -65,6 +69,7 @@ export default { | @@ -65,6 +69,7 @@ export default { | ||
65 | ] | 69 | ] |
66 | }; | 70 | }; |
67 | myChart.setOption(option); | 71 | myChart.setOption(option); |
72 | + | ||
68 | } | 73 | } |
69 | } | 74 | } |
70 | } | 75 | } |
src/components/base/BarEcharts.vue
0 → 100644
src/components/base/barChart.vue
0 → 100644
1 | +<template> | ||
2 | + <div :class="className" :style="{height:height,width:width}"></div> | ||
3 | +</template> | ||
4 | + | ||
5 | +<script> | ||
6 | +import echarts from 'echarts' | ||
7 | + | ||
8 | +require('echarts/theme/macarons') // echarts theme | ||
9 | +import {debounce} from '../../utils/debounce' | ||
10 | + | ||
11 | +export default { | ||
12 | + name: 'barChart', | ||
13 | + props: { | ||
14 | + className: { | ||
15 | + type: String, | ||
16 | + default: 'chart' | ||
17 | + }, | ||
18 | + width: { | ||
19 | + type: String, | ||
20 | + default: '100%' | ||
21 | + }, | ||
22 | + height: { | ||
23 | + type: String, | ||
24 | + default: '100%' | ||
25 | + }, | ||
26 | + autoResize: { | ||
27 | + type: Boolean, | ||
28 | + default: true | ||
29 | + }, | ||
30 | + chartData: { | ||
31 | + type: Object, | ||
32 | + required: true | ||
33 | + } | ||
34 | + }, | ||
35 | + data() { | ||
36 | + return { | ||
37 | + chart: null | ||
38 | + } | ||
39 | + }, | ||
40 | + watch: { | ||
41 | + chartData: function () { | ||
42 | + this.$nextTick(()=>{ | ||
43 | + this.initChart() | ||
44 | + }) | ||
45 | + } | ||
46 | + }, | ||
47 | + mounted() { | ||
48 | + this.initChart() | ||
49 | + if (this.autoResize) { | ||
50 | + this.__resizeHandler = debounce(() => { | ||
51 | + if (this.chart) { | ||
52 | + this.chart.resize() | ||
53 | + } | ||
54 | + }, 100) | ||
55 | + window.addEventListener('resize', this.__resizeHandler) | ||
56 | + } | ||
57 | + }, | ||
58 | + beforeDestroy() { | ||
59 | + if (!this.chart) { | ||
60 | + return | ||
61 | + } | ||
62 | + if (this.autoResize) { | ||
63 | + window.removeEventListener('resize', this.__resizeHandler) | ||
64 | + } | ||
65 | + | ||
66 | + this.chart.dispose() | ||
67 | + this.chart = null | ||
68 | + }, | ||
69 | + methods: { | ||
70 | + setOptions({yData} = {}) { | ||
71 | + this.chart.setOption( | ||
72 | + { | ||
73 | + | ||
74 | + grid: { | ||
75 | + top: 0, | ||
76 | + left: 0, | ||
77 | + right: '20', | ||
78 | + bottom: -10, | ||
79 | + containLabel: true | ||
80 | + }, | ||
81 | + title:{show:false}, | ||
82 | + xAxis: { | ||
83 | + show: false,//尽管显示false,但仍然占用空间containLabel为true的话[echarts bug] | ||
84 | + nameGap:0 | ||
85 | + }, | ||
86 | + yAxis: [{ | ||
87 | + show: true, | ||
88 | + nameLocation:'start', | ||
89 | + //data: ['支付宝', '微信', '其它'], | ||
90 | + data: [ | ||
91 | + { | ||
92 | + value:'支付宝', | ||
93 | + textStyle:{ | ||
94 | + color:'#01AEFE' | ||
95 | + } | ||
96 | + }, | ||
97 | + { | ||
98 | + value:'微信', | ||
99 | + textStyle:{ | ||
100 | + color:'#06C406' | ||
101 | + } | ||
102 | + }, | ||
103 | + { | ||
104 | + value:'其它', | ||
105 | + textStyle:{ | ||
106 | + color:'#FFAB00' | ||
107 | + } | ||
108 | + } | ||
109 | + ],//右侧Y轴值 | ||
110 | + inverse: true, | ||
111 | + axisLine: {show: false}, | ||
112 | + splitLine: {show: false}, | ||
113 | + axisTick: {show: false }, | ||
114 | + axisLabel: { | ||
115 | + //margin:-20, | ||
116 | + // nameTextStyle:{ | ||
117 | + // align:'left' | ||
118 | + // } | ||
119 | + } | ||
120 | + }, { | ||
121 | + show: true, | ||
122 | + inverse: true, | ||
123 | + data: [ | ||
124 | + { | ||
125 | + value:1000, | ||
126 | + textStyle:{ | ||
127 | + color:'#01AEFE' | ||
128 | + } | ||
129 | + }, | ||
130 | + { | ||
131 | + value:200, | ||
132 | + textStyle:{ | ||
133 | + color:'#06C406' | ||
134 | + } | ||
135 | + }, | ||
136 | + { | ||
137 | + value:300, | ||
138 | + textStyle:{ | ||
139 | + color:'#FFAB00' | ||
140 | + } | ||
141 | + } | ||
142 | + ],//右侧Y轴值 | ||
143 | + axisLabel: { | ||
144 | + textStyle: {fontSize: 12,}, | ||
145 | + }, | ||
146 | + axisLine: { show: false }, | ||
147 | + splitLine: { show: false}, | ||
148 | + axisTick: {show: false}, | ||
149 | + }], | ||
150 | + series: [{ | ||
151 | + name: '条', | ||
152 | + type: 'bar', | ||
153 | + yAxisIndex: 0, | ||
154 | + data: [1000,200,300],//百分比 | ||
155 | + barWidth: '40%', | ||
156 | + itemStyle: { | ||
157 | + normal: { | ||
158 | + barBorderRadius: 16, | ||
159 | + color: { | ||
160 | + type: 'linear', | ||
161 | + x: 0, | ||
162 | + x1: 1, | ||
163 | + colorStops: [{ | ||
164 | + offset: 0, | ||
165 | + color: '#02ddff' | ||
166 | + }, { | ||
167 | + offset: 1, | ||
168 | + color: '#00feff' | ||
169 | + }] | ||
170 | + } | ||
171 | + }, | ||
172 | + }, | ||
173 | + label: { | ||
174 | + normal: {show: false} | ||
175 | + }, | ||
176 | + }, { | ||
177 | + name: '框', | ||
178 | + type: 'bar', | ||
179 | + yAxisIndex: 1, | ||
180 | + barGap: '-100%', | ||
181 | + data: [1500,1500,1500],//百分比 | ||
182 | + barWidth: '40%', | ||
183 | + itemStyle: { | ||
184 | + normal: { | ||
185 | + color: 'none', | ||
186 | + borderColor: '#157ADB', | ||
187 | + borderWidth: 0.5, | ||
188 | + //barBorderRadius: 15, | ||
189 | + } | ||
190 | + } | ||
191 | + }, ] | ||
192 | + } | ||
193 | + ) | ||
194 | + }, | ||
195 | + initChart() { | ||
196 | + this.chart = echarts.init(this.$el) | ||
197 | + this.setOptions(this.chartData) | ||
198 | + }, | ||
199 | + | ||
200 | + } | ||
201 | +} | ||
202 | +</script> |
src/utils/debounce.js
0 → 100644
1 | +export function debounce(func, wait, immediate) { | ||
2 | + let timeout, args, context, timestamp, result | ||
3 | + | ||
4 | + const later = function() { | ||
5 | + // 据上一次触发时间间隔 | ||
6 | + const last = +new Date() - timestamp | ||
7 | + | ||
8 | + // 上次被包装函数被调用时间间隔last小于设定时间间隔wait | ||
9 | + if (last < wait && last > 0) { | ||
10 | + timeout = setTimeout(later, wait - last) | ||
11 | + } else { | ||
12 | + timeout = null | ||
13 | + // 如果设定为immediate===true,因为开始边界已经调用过了此处无需调用 | ||
14 | + if (!immediate) { | ||
15 | + result = func.apply(context, args) | ||
16 | + if (!timeout) context = args = null | ||
17 | + } | ||
18 | + } | ||
19 | + } | ||
20 | + | ||
21 | + return function(...args) { | ||
22 | + context = this | ||
23 | + timestamp = +new Date() | ||
24 | + const callNow = immediate && !timeout | ||
25 | + // 如果延时不存在,重新设定延时 | ||
26 | + if (!timeout) timeout = setTimeout(later, wait) | ||
27 | + if (callNow) { | ||
28 | + result = func.apply(context, args) | ||
29 | + context = args = null | ||
30 | + } | ||
31 | + | ||
32 | + return result | ||
33 | + } | ||
34 | +} |