mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-22 02:34:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

modify pie chart style

Browse Source
This commit is contained in:
MaysWind
2021-02-07 23:58:46 +08:00
parent d65ce058bf
commit 8ab1ad1a63
2 changed files with 26 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mobile/PieChart.vue
+26 -3
View File
@@ -2,6 +2,7 @@
<div class="pie-chart-container"> <div class="pie-chart-container">
<svg class="pie-chart" :viewBox="`${-diameter} ${-diameter} ${diameter * 2} ${diameter * 2}`"> <svg class="pie-chart" :viewBox="`${-diameter} ${-diameter} ${diameter * 2} ${diameter * 2}`">
<circle class="pie-chart-background" cx="0" cy="0" :r="diameter"></circle> <circle class="pie-chart-background" cx="0" cy="0" :r="diameter"></circle>
<circle class="pie-chart-item" <circle class="pie-chart-item"
v-for="(item, idx) in validItems" :key="idx" v-for="(item, idx) in validItems" :key="idx"
fill="transparent" fill="transparent"
@@ -12,11 +13,20 @@
:stroke-dasharray="item | itemStrokeDash(circumference)" :stroke-dasharray="item | itemStrokeDash(circumference)"
:stroke-dashoffset="item | itemDashOffset(validItems, circumference, itemCommonDashOffset)"> :stroke-dashoffset="item | itemDashOffset(validItems, circumference, itemCommonDashOffset)">
</circle> </circle>
<circle class="pie-chart-text-background" <circle class="pie-chart-text-background"
cx="0" cy="0" cx="0" cy="0"
:style="{ '--pie-chart-text-background': centerTextBackground ? centerTextBackground : 'var(--f7-theme-color)' }" stroke="#ddd"
:style="{ '--pie-chart-text-background': centerTextBackground ? centerTextBackground : '#7f2020' }"
:r="diameter / 2.5" :r="diameter / 2.5"
v-if="showCenterText"/> v-if="showCenterText"/>
<circle cx="0" cy="0"
stroke="#ddd"
fill="transparent"
:r="diameter / 2.5"
v-if="showCenterText"/>
<g class="pie-chart-text-group" v-if="showCenterText"> <g class="pie-chart-text-group" v-if="showCenterText">
<slot></slot> <slot></slot>
</g> </g>
@@ -61,6 +71,19 @@
</template> </template>
<script> <script>
const defaultColors = [
'cc4a66',
'e3564a',
'fc892c',
'ffc349',
'4dd291',
'24ceb3',
'2ab4d0',
'065786',
'713670',
'8e1d51'
];
export default { export default {
props: [ props: [
'skeleton', 'skeleton',
@@ -113,7 +136,7 @@ export default {
percent: (item[this.percentField] > 0 || item[this.percentField] === 0 || item[this.percentField] === '0') ? item[this.percentField] : (item[this.valueField] / totalValidValue * 100), percent: (item[this.percentField] > 0 || item[this.percentField] === 0 || item[this.percentField] === '0') ? item[this.percentField] : (item[this.valueField] / totalValidValue * 100),
actualPercent: item[this.valueField] / totalValidValue, actualPercent: item[this.valueField] / totalValidValue,
currency: item[this.currencyField], currency: item[this.currencyField],
color: item[this.colorField] ? item[this.colorField] : 'c8c8c8', color: item[this.colorField] ? item[this.colorField] : defaultColors[validItems.length % defaultColors.length],
sourceItem: item sourceItem: item
}); });
} }
@@ -282,7 +305,7 @@ export default {
} }
.pie-chart-text-background { .pie-chart-text-background {
--pie-chart-text-background: var(--f7-theme-color); --pie-chart-text-background: #7f2020;
fill: var(--pie-chart-text-background); fill: var(--pie-chart-text-background);
} }
src/views/mobile/statistics/Transaction.vue
-1
View File
@@ -49,7 +49,6 @@
value-field="totalAmount" value-field="totalAmount"
percent-field="percent" percent-field="percent"
currency-field="currency" currency-field="currency"
color-field="color"
hidden-field="hidden" hidden-field="hidden"
v-else-if="!loading" v-else-if="!loading"
@click="clickPieChartItem" @click="clickPieChartItem"