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

àì夳堔傛蜴生んèń 2022-12-23 09:51 779阅读 0赞

需求： 首页需要放一个圆环图显示数据。  
查找文档：uni-app插件市场uCharts高性能跨全端图表 **https://ext.dcloud.net.cn/plugin?id=271**  
uCharts官网地址：https://www.ucharts.cn/  
圆环图为例。  
项目中使用步骤：  
1.下载插件市场到项目components：![下载插件市场到项目components][components]  
2.页面引入：  
![页面引入][20201124150853254.png_pic_center]  
3.定义全局  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dhbmdyZXBvcnQ_size_16_color_FFFFFF_t_70_pic_center]  
4.data中：  
![在这里插入图片描述][20201124151215915.png_pic_center]  
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’)  
![在这里插入图片描述][20201124151912479.png_pic_center]  
6.template中渲染图表：  
  
<canvas canvas-id=“canvasRing” id=“canvasRing” class=“charts” @touchstart=“touchRing”>  
  
![在这里插入图片描述][20201124151959848.png_pic_center]  
7.styley样式：  
.qiun-charts \{  
width: 100%;  
height: 100%;  
background-color: \#FFFFFF;  
\}  
.charts \{  
width: 100%;  
height: 100%;  
background-color: \#FFFFFF;  
\}  
8.成品！！  
![在这里插入图片描述][20201124152158595.png_pic_center]  
9.注意！！！如果在项目中打开不显示图表，在方法中和onload中的修改样式进行调整。

10.需求++++  
要求点击已整改，整改中，隐患总数，进入不同的页面。  
点击事件：touchRing //跟template中对应  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dhbmdyZXBvcnQ_size_16_color_FFFFFF_t_70_pic_center 1]  
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

[components]: /images/20221120/b08b2009a6d14522bc6d5bba893d1793.png
[20201124150853254.png_pic_center]: /images/20221120/aa79a7eb42b246f1ad4f1dcddbdbdf8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dhbmdyZXBvcnQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/36cbb362f44c41df9fc7eb8e525cbe3c.png
[20201124151215915.png_pic_center]: /images/20221120/46112b0e907441e882139260c2c825c8.png
[20201124151912479.png_pic_center]: /images/20221120/f9bbfbc696cb4121b36f0367bb5326c1.png
[20201124151959848.png_pic_center]: https://img-blog.csdnimg.cn/20201124151959848.png#pic_center
[20201124152158595.png_pic_center]: https://img-blog.csdnimg.cn/20201124152158595.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dhbmdyZXBvcnQ_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201124152616118.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dhbmdyZXBvcnQ=,size_16,color_FFFFFF,t_70#pic_center