需求: 首页需要放一个圆环图显示数据。
查找文档: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