123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130 |
- <template>
- <view class="pie_chart">
- <canvas :canvasId="canvasId" id="canvasId" :style="{ width: cWidth + 'px', height: cHeight + 'px' }" @touchstart="touchstart" />
- <slot />
- </view>
- </template>
- <script>
- import uCharts from '@/plugins/stan-ucharts/u-charts/u-charts.js';
- const pieCharts = {},
- optionAs = {};
- export default {
- name: 'PieChart',
- props: {
- dataAs: {
-
- type: Object,
- default: () => ({})
- },
- basicAs: {
-
- type: Object,
- default: () => ({})
- },
- legendAs: {
-
- type: Object,
- default: () => ({})
- },
- extraAs: {
-
- type: Object,
- default: () => ({})
- },
- width: {
-
- type: Number,
- default: 750
- },
- height: {
-
- type: Number,
- default: 500
- },
- valueKey: {
- type: String,
- default: 'series'
- },
- canvasId: {
- type: String,
- default: `pie_canvas_${Math.ceil(Math.random(5) * 10000)}`
- }
- },
- data() {
- return {};
- },
- computed: {
- cWidth() {
- return uni.upx2px(this.width);
- },
- cHeight() {
- return uni.upx2px(this.height);
- }
- },
- methods: {
- showCharts() {
- let defaultOption = {
-
- $this: this,
- canvasId: this.canvasId,
- type: 'pie',
- padding: [15, 15, 0, 15],
- colors: ['#1890ff', '#2fc25b', '#facc14', '#f04864', '#8543e0', '#90ed7d'],
- rotate: false,
- rotateLock: true,
- animation: true,
- dataLabel: true,
- duration: 1000,
- fontSize: 12,
- background: '#ffffff',
- pixelRatio: 1,
- width: this.cWidth,
- height: this.cHeight,
-
- series: this.dataAs[this.valueKey],
-
- legend: {
- show: true,
- position: 'top',
- float: 'left',
- padding: 10,
- margin: 0
- },
-
- extra: {
- pie: {
- lableWidth: 15
- }
- }
- };
- optionAs[this.canvasId] = Object.assign(defaultOption, this.basicAs, this.legendAs, this.extraAs);
- pieCharts[this.canvasId] = new uCharts(optionAs[this.canvasId]);
- },
- touchstart(e) {
- pieCharts[this.canvasId].touchLegend(e, {
- animation: false
- });
- pieCharts[this.canvasId].showToolTip(e, {
- format: function(item) {
- if (typeof item.data === 'object') {
- return `${item.name}:${item.data.value}`;
- } else {
- return `${item.name}:${item.data}`;
- }
- }
- });
- },
- changeData(series) {
- pieCharts[this.canvasId].updateData({
- series
- });
- }
- }
- };
- </script>
- <style></style>
|