123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121 |
- <template>
- <view class="arcbar_chart">
- <canvas :canvasId="canvasId" id="canvasId" :style="{ width: cWidth + 'px', height: cHeight + 'px' }" />
- <slot />
- </view>
- </template>
- <script>
- import uCharts from '@/plugins/stan-ucharts/u-charts/u-charts.js';
- const arcbarCharts = {},
- optionAs = {};
- export default {
- name: 'ArcbarChart',
- props: {
- dataAs: {
-
- type: Object,
- default: () => ({})
- },
- basicAs: {
-
- type: Object,
- default: () => ({})
- },
- titleAs: {
-
- type: Object,
- default: () => ({})
- },
- legendAs: {
-
- type: Object,
- default: () => ({})
- },
- extraAs: {
-
- type: Object,
- default: () => ({})
- },
- width: {
-
- type: Number,
- default: 250
- },
- height: {
-
- type: Number,
- default: 250
- },
- valueKey: {
- type: String,
- default: 'series'
- },
- canvasId: {
- type: String,
- default: `arcbar_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 colors = ['#facc14', '#2fc25b', '#f04864', '#8543e0', '#90ed7d', '#ff7600'].sort(() => Math.random() - 0.5);
- let defaultOption = {
-
- $this: this,
- canvasId: this.canvasId,
- type: 'arcbar',
- padding: [15, 15, 0, 15],
- colors: colors,
- rotate: false,
- rotateLock: true,
- enableScroll: false,
- enableMarkLine: false,
- animation: true,
- duration: 1000,
- dataLabel: true,
- fontSize: 12,
- background: '#ffffff',
- pixelRatio: 1,
- width: this.cWidth,
- height: this.cHeight,
-
- series: this.dataAs[this.valueKey],
-
- title: {
- name: (this.dataAs[this.valueKey][0].data * 100).toFixed(0) + '%',
- color: this.basicAs.colors ? this.basicAs.colors[0] : colors[0]
- },
- subtitle: {
- name: this.dataAs[this.valueKey][0].name
- },
-
- extra: {}
- };
- let propsData = { ...this.basicAs, ...this.titleAs, ...this.legendAs, ...this.extraAs };
- optionAs[this.canvasId] = Object.assign(defaultOption, propsData);
- arcbarCharts[this.canvasId] = new uCharts(optionAs[this.canvasId]);
- },
- changeData(series) {
- arcbarCharts[this.canvasId].updateData({
- series
- });
- }
- }
- };
- </script>
- <style></style>
|