uni-app使用ucharts图表 ##uni-app ##uCharts

需求： 首页需要放一个圆环图显示数据。
查找文档：uni-app插件市场uCharts高性能跨全端图表 https://ext.dcloud.net.cn/plugin?id=271
uCharts官网地址：https://www.ucharts.cn/
圆环图为例。
项目中使用步骤：
1.下载插件市场到项目components：
2.页面引入：

3.定义全局

4.data中：

cWidth: ‘’,
cHeight: ‘’,
pixelRatio: 1,
serverData: ‘’,

5.在methods中写入：
showRing(canvasId) {
var chartData = {
series :[{
“name”: “已整改”,
“data”:this.proDanger.closedCount //动态修改图表值，这里是我data中的值。
}, {
“name”: “整改中”,
“data”:this.proDanger.notClosedCount //同上
}]
};
canvaRing = new uCharts({
$this: _self,
canvasId: canvasId,
type: ‘ring’,
fontSize: 11,
legend: true,
title: {
name: this.proDanger.totalCount,
color: ‘#7cb5ec’,
fontSize: 30 * _self.pixelRatio,
offsetY: 0 * _self.pixelRatio, //这个调节字在中间圆的位置 中间没有字的就整个title注销
},
subtitle: {
name: ‘隐患总数’,
color: ‘#666666’,
fontSize: 11 * _self.pixelRatio,
offsetY: 1 * _self.pixelRatio, // 这个调节字在中间圆的位置 中间没有字的就整个subtitle注销
},
extra: {
pie: {
offsetAngle: -45,
ringWidth: 20 * _self.pixelRatio,
labelWidth: 15
}
},
background: ‘#fff’, // 中间圆的背景颜色
pixelRatio: _self.pixelRatio,
series: chartData.series,
animation: true, // 动画 画个圆的那种
width: _self.cWidth * _self.pixelRatio,
height: _self.cHeight * _self.pixelRatio,
disablePieStroke: true,
dataLabel: false, // 图上红圈圈出来的线 true 显示
});
},
5.onLoad /onShow中：
_self = this;
this.cWidth = uni.upx2px(320); //修改宽度
this.cHeight = uni.upx2px(370); //修改高度
// this.getServerData();
this.showRing(‘canvasRing’)

6.template中渲染图表：

<canvas canvas-id=“canvasRing” id=“canvasRing” class=“charts” @touchstart=“touchRing”>


7.styley样式：
.qiun-charts {
width: 100%;
height: 100%;
background-color: #FFFFFF;
}
.charts {
width: 100%;
height: 100%;
background-color: #FFFFFF;
}
8.成品！！

9.注意！！！如果在项目中打开不显示图表，在方法中和onload中的修改样式进行调整。

10.需求++++
要求点击已整改，整改中，隐患总数，进入不同的页面。
点击事件：touchRing //跟template中对应

touchRing(e) {
const legendIndex = canvaRing.getLegendDataIndex(e)
const dataIndex = canvaRing.getCurrentDataIndex(e)
let targetUrl;
if (dataIndex >= 0) {
targetUrl = ‘/pages/problemList/problemList’
} else {
if (legendIndex === 0) {
targetUrl = ‘/pages/problemList/problemList?target=1’
} else if (legendIndex === 1) {
targetUrl = ‘/pages/problemList/problemList?target=2’
}
}
if (targetUrl) {
console.log(legendIndex, dataIndex, targetUrl)
uni.navigateTo({
url: targetUrl
})
}
},

日期：2020/11/24