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中渲染图表：

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

uni-app使用ucharts图表 ##uni-app ##uCharts相关推荐

uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
uniapp中使用ucharts组件开发App中的折线图流程
uniapp中使用ucharts组件开发流程官方ucharts地址我是在uniapp使用echarts后发现在安卓手机app上不显示,所以使用ucharts来代替echarts 组件地址在这里导 ...
uCharts图表在小程序中的使用
1.uCharts 简介高性能跨平台图表库,支持H5.APP.小程序(微信小程序.支付宝小程序.钉钉小程序.百度小程序.头条小程序.QQ小程序.360小程序).Vue.Taro等更多支持canvas ...
uni-app 使用uCharts图表插件
1.下载:https://ext.dcloud.net.cn/plugin?id=271 2.使用实例 <template><view class="qiun-column ...
uniapp 使用秋云uCharts图表组件、echarts图表组件
一.uniapp 使用秋云uCharts图表组件 1.我们的项目是依赖uniapp的vue-cli项目操作:将uni_modules目录复制到src目录,即src/uni_modules. 2.页面 ...
uniapp 中使用图表（秋云uCharts图表组件）
在用uniapp做项目时,遇到要做折线图的需求,但是又不想用echarts,在uniapp中dom操作非常的麻烦.于是找到了一个专门为app而生的图表插件uCharts(秋云uCharts图表组件), ...
App设计灵感之十二组精美的数据图表展示App设计案例
在健身的时候,我们会关注健身过程的一些数据,比如公里数.时间.消耗能量等,通过数字与图表,可以将这些数据很直观的展示给使用者. ① Weight loss app by Hesam Mousavi ② ...
uniapp使用ucharts图表及问题汇总
uniapp使用ucharts图表及问题汇总本文主要描述如何通过组件的方式引入ucharts图表,并汇总了使用过程中踩到的坑,如层级过高问题.默认显示提示框tooltip.提示框显示内容格式化等等. ...
微信小程序使用 uCharts 图表
前端图表的插件库有很多 echarts 跟 uCharts - echarts 更适合应用于后台管理系统或者pc 端当小程序使用echarts 并且引用echarts 他会提示一段话然后报错 ...
uniapp中秋云uCharts图表组件基础使用
官方文档:秋云uCharts图表组件 1.导入到对应项目中根目录会多出文件夹uni_modules 柱状图基础使用完整代码: <template><view><vie ...

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

uni-app使用ucharts图表 ##uni-app ##uCharts相关推荐

最新文章

热门文章