钉钉小程序----使用阿里的F2图表

在钉钉小程序中使用F2的图表遇见很多问题

不能点击或者点击错乱的问题还没有解决，因为我解决不了。。。。。。。。。。。。。。。。。。。。。。。。。。。

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

渲染问题：一个图表大一个图表小的问题，setData是异步机制，因此每次在渲染数据的时候先设置宽高，完了再setData的回调里面再去执行其他。

找到安装的模块下f2，改变源码，如下图。

2.图表使用的例子

在js中

Component({data:{chartDataNew1: [{title: '掘进',ring: '163',value: 16}, {title: '掘进',ring: '175',value: 26}, {title: '停机',ring: '163',value: 16}, {title: '停机',ring: '175',value: 26}, {title: '拼环',ring: '163',value: 36}, {title: '拼环',ring: '185',value: 25}, {title: '停机',ring: '185',value: 25}, {title: '停机',ring: '195',value: 25}, {title: '拼环',ring: '195',value: 25}, {title: '拼环',ring: '275',value: 25}, {title: '拼环',ring: '275',value: 25}, {title: '拼环',ring: '375',value: 25}, {title: '拼环',ring: '375',value: 25}, {title: '拼环',ring: '475',value: 25}, {title: '停机',ring: '475',value: 25}],chartDataNew: [{name: '推进',percent: 0.6,a: '1'}, {name: '拼装',percent: 0.4,a: '1'}, {name: '辅助',percent: 0.1,a: '1'}, {name: '故障',percent: 0.3,a: '1'}, {name: '其他',percent: 0.2,a: '1'}],map: {'推进': '60%','拼装': '40%','辅助': '10%','故障': '30%','其他': '20%',},},methods: {// 图表1
    onDraw(ddChart) {//dd-charts组件内部会回调此方法，返回图表实例ddChart//提示：可以把异步获取数据及渲染图表逻辑放onDraw回调里面
      ddChart.clear()let chartDataNew = this.data.chartDataNewlet map = this.data.mapddChart.source(chartDataNew, {percent: {formatter: function formatter(val) {return val * 100 + '%';}}})ddChart.legend({position: 'top',align: 'center',itemFormatter: function itemFormatter(val) {return val + '  ' + map[val];}})ddChart.tooltip(false)ddChart.coord('polar', {transposed: true,radius: 1.9})ddChart.axis(false);ddChart.interval().position('a*percent').color('name', ['#61E2C4', '#52AAFE', '#A0AEFA', '#F38E68', '#868B96 ']).adjust('stack').style({lineWidth: 1,stroke: '#fff',lineJoin: 'round',lineCap: 'round'}).animate({appear: {duration: 1200,easing: 'bounceOut'}})ddChart.render();},// 图表2
    onDraw1(ddChart) {//dd-charts组件内部会回调此方法，返回图表实例ddChart//提示：可以把异步获取数据及渲染图表逻辑放onDraw回调里面
      ddChart.clear()let chartDataNew = this.data.chartDataNew1ddChart.scale({ring: {range: [0.05, 1]}})ddChart.source(chartDataNew, {title: {min: 0,formatter: function formatter(val) {return val;}}})ddChart.interval().position('ring*value').color('title').adjust('stack');ddChart.render();},}
})

在axml中

<dd-charts canvasId="ddchart-dom-bar" onDraw="onDraw"></dd-charts>
<dd-charts canvasId="ddchart-dom-bar1" onDraw="onDraw1"></dd-charts>

转载于:https://www.cnblogs.com/wgl0126/p/11535125.html

钉钉小程序----使用阿里的F2图表相关推荐

f2 柱状图滚动钉钉小程序_钉钉小程序使用阿里的F2图表
Component({ data:{ chartDataNew1: [{ title:'掘进', ring:'163', value:16}, { title:'掘进', ring:'175', va ...
钉钉/支付宝小程序自定义组件
钉钉/支付宝小程序自定义组件 1.新建自定义文件夹 eg:model 2.鼠标选中model 右键>新建小程序组件输入测试组件:demo 3.新建小程序组件包含四个文件: 1.acss:组件页 ...
打通高德、UC、微博，支付宝小程序组建“阿里联盟军”对抗微信小程序？| 技术头条...
作者丨Suvi 责编 | 伍杏玲本文经授权转载自晓程序速报(ID:xcxsubao) [CSDN 编者按]支付宝小程序虽起步时未占到先机,但其后劲十足,近期更是频频发力,大有后来者居上之势.例如阿里 ...
腾讯不封微信小程序，阿里就能一往无前吗
来源 | 银杏财经撰文 | 风千语编辑 | 汪小楼 "要微信登录才可以继续操作." "小程序是微信的,这不很正常吗?" "可这是阿里的小程序.&q ...
微信小程序使用阿里云物联网API开发物联网应用
微信小程序是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下就可以打开的应用. 微信小程序具有方便快捷,速度快,安全及保密性高的优点,同时开发 ...
微信小程序使用阿里彩色图标
微信小程序使用阿里彩色图标首先全局安装 iconfont-tools 1.先windows+R打开cmd命令窗口 2.输入npm i -g iconfont-tools 3.下载自己要使用的彩色图标 ...
【物联网】微信小程序接入阿里云物联网平台
微信小程序接入阿里云物联网平台一阿里云平台端 1.登录阿里云阿里云物联网平台点击进入公共实例,之前没有的点进去申请 2.点击产品->创建产品 3.产品名称自定义,按项目选择类型,节点类型 ...
微信小程序接入阿里云直播
小程序接入阿里云直播前言:最近工作中遇到了小程序接入阿里云直播的需求(暂时只做播流,也就是播放端),于是打开阿里云直播文档发现居然没有小程序的相关文档,sdk也没有小程序的版本,网上也没搜到相关案例 ...
小程序配置阿里云OSS下载文件，在请求头里配置生成强制下载链接，（拿到下载链接可以下载文件至本地）
小程序配置阿里云OSS下载文件,在请求头里配置生成强制下载链接,(拿到下载链接可以下载文件至本地)(Win10电脑开发环境)**这里只说明小程序端问题**<菜鸡总结大神勿喷!蟹蟹~> 大体 ...

钉钉小程序----使用阿里的F2图表

钉钉小程序----使用阿里的F2图表相关推荐

最新文章

热门文章