<template>
<view class="qiun-charts">
<canvas canvas-id="canvasRing" id="canvasRing" class="charts"
:style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"
@touchstart="touchRing"></canvas>
</view>
</template>
<script>
import uCharts from '@/components/u-charts/u-charts.js';
var _self;
var canvaRing = null;
export default {
data() {
return {
cWidth: '',
cHeight: '',
pixelRatio: 1,
textarea: ''
}
},
onLoad(option) {
_self = this;
this.cWidth = uni.upx2px(750);
this.cHeight = uni.upx2px(500);
},
methods: {
uniapp使用uCharts绘制ring图
最新推荐文章于 2024-05-13 09:40:51 发布
本文详细介绍了如何在uniapp中利用uCharts库创建环形图的过程,包括配置图表数据、设置样式以及在小程序环境中进行适配。通过实例代码,开发者可以快速掌握在uniapp项目中集成和使用uCharts进行数据可视化的方法。
摘要由CSDN通过智能技术生成