本文主要是介绍uniapp 中使用 uCharts.js 画图表，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
官网：秋云uCharts图表组件
在components 中新建一个目录 u-charts ,然后里面放两个文件, u-charts.js u-charts.vue
u-charts.js的内容uCharts-for-H5/u-charts.js · uCharts/uCharts - Gitee.com
u-charts.vue的内容
<template><view class="content" :style="{width:cWidth+'px',height:cHeight+'px'}"><canvas canvasId="canvasLine" id="canvasLine" class="charts" @tap="tap($event,'canvasLine')"/> </view>
</template><script>
import uCharts from './u-charts.js';
var uChartsInstance = {};
export default {props:{width:{type:Number,default:450},height:{type:Number,default:450},chartsData:{type:Array,default:[]}},data() {return {cWidth:750,cHeight:750,data:[{data:[{name:'一',value:100},{name:'一',value:100}]}]};},mounted() { this.cWidth =uni.upx2px(this.width);this.cHeight=uni.upx2px(this.height);this.getServerData();},onReady() {this.getServerData()},methods: {getServerData() {setTimeout(() => { if(this.chartsData.length!=0){ this.data[0].data = this.chartsData; }this.drawCharts("canvasLine",this.data); }, 500);},drawCharts(id,data){const ctx = uni.createCanvasContext(id, this);uChartsInstance[id]=new uCharts({type: 'ring', //圆环图context:ctx,fontSize:11,color: ["#4bced0","#fec03d","#fd6060","#91f2de","#098","#4bced0","#FC8452","#9A60B4","#ea7ccc"],dataLabel:false,series: data,animation: true,width: this.cWidth,height: this.cHeight,legend:{show:false},extra: { ring: {ringWidth:8,activeOpacity: 0.5,activeRadius:0,offsetAngle: 0,labelWidth:0,border: false,borderWidth: 0, borderColor: "#FFFFFF"},}, });},tap(e,id){uChartsInstance[id].showToolTip(e)}}
}</script><style>
.content {}
.charts{ width:100%; height:100%;}
</style>
二、在页面中调用
<template>
<u-charts :width="180" :height="180" :chartsData="echartsList"></u-charts>
</template><script>
export default{data() {return{echartsList:[{name:'数据一',value:10},{name:'数据二',value:10}]}}
}
</script>这篇关于uniapp 中使用 uCharts.js 画图表的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
