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

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

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

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

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

2.图表使用的例子

在js中

Component({
data:{
chartDataNew1: [{
title: '掘进',
ring: '',
value:
}, {
title: '掘进',
ring: '',
value:
}, {
title: '停机',
ring: '',
value:
}, {
title: '停机',
ring: '',
value:
}, {
title: '拼环',
ring: '',
value:
}, {
title: '拼环',
ring: '',
value:
}, {
title: '停机',
ring: '',
value:
}, {
title: '停机',
ring: '',
value:
}, {
title: '拼环',
ring: '',
value:
}, {
title: '拼环',
ring: '',
value:
}, {
title: '拼环',
ring: '',
value:
}, {
title: '拼环',
ring: '',
value:
}, {
title: '拼环',
ring: '',
value:
}, {
title: '拼环',
ring: '',
value:
}, {
title: '停机',
ring: '',
value:
}
],
chartDataNew: [
{
name: '推进',
percent: 0.6,
a: ''
}, {
name: '拼装',
percent: 0.4,
a: ''
}, {
name: '辅助',
percent: 0.1,
a: ''
}, {
name: '故障',
percent: 0.3,
a: ''
}, {
name: '其他',
percent: 0.2,
a: ''
}
],
map: {
'推进': '60%',
'拼装': '40%',
'辅助': '10%',
'故障': '30%',
'其他': '20%',
},
},
methods: {
// 图表1
onDraw(ddChart) {
//dd-charts组件内部会回调此方法,返回图表实例ddChart
//提示:可以把异步获取数据及渲染图表逻辑放onDraw回调里面
ddChart.clear()
let chartDataNew = this.data.chartDataNew
let map = this.data.map
ddChart.source(chartDataNew, {
percent: {
formatter: function formatter(val) {
return val * + '%';
}
}
})
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: ,
stroke: '#fff',
lineJoin: 'round',
lineCap: 'round'
}).animate({
appear: {
duration: ,
easing: 'bounceOut'
}
})
ddChart.render();
},
// 图表2
onDraw1(ddChart) {
//dd-charts组件内部会回调此方法,返回图表实例ddChart
//提示:可以把异步获取数据及渲染图表逻辑放onDraw回调里面
ddChart.clear()
let chartDataNew = this.data.chartDataNew1
ddChart.scale({
ring: {
range: [0.05, ]
}
})
ddChart.source(chartDataNew, {
title: {
min: ,
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>

钉钉小程序----使用阿里的F2图表的更多相关文章

  1. 微信小程序使用阿里图标

    微信小程序不支持外联阿里图标,必须下载放入小程序的本地文件中. 步骤一:下载项目图标 步骤二:转换iconfont.ttf文件(小程序的wxss文件的font-face的url不接受http地址作为参 ...

  2. 钉钉/支付宝小程序和微信小程序的区别及转换方案

    最近接到一个工作任务,是把钉钉小程序转微信小程序... 对,居然还有这种操作,之前只听过微信小程序转支付宝小程序的,钉钉转微信是什么鬼

  3. 微信小程序——引用阿里云字体

    阿里图标官网:http://www.iconfont.cn 使用阿里云图标大致的方法就是:选中你的图标——保存至你的项目——下载你的图标项目——在项目中引用字体文件. 具体方法可以参考:引用阿里云矢量 ...

  4. 微信小程序在ios下Echarts图表不能滑动的解决方案

    问题现象 这个问题的现象说起来很简单. 小程序页面中有一篇很长的文章,内部有一个Echarts图表,手指上下滑动观看内容. 但是手指滑动区域在Echarts图表上时,页面却不能滑动了. 如下图: 追踪 ...

  5. 微信小程序使用阿里图标-iconfont

    步骤一:下载项目图标 步骤二:解压文件,重命名 iconfont.css为 iconfont.wxss ,并复制 到项目 static文件夹 icon文件夹下                     ...

  6. 【阿里云IoT+YF3300】15.阿里云物联网小程序构建

    2013年8月,“轻应用”概念提出,但是仅仅活跃四年随后淡出 ,直到2017年1月9号借助微信小程序成功续命.一时间,以微信小程序和支付宝小程序为代表的轻应用解决方案迅速贯穿多个环节,成为“万物互联” ...

  7. 阿里小程序Serverless 操作指南

    小程序云 小程序云(Mini Program Cloud)是阿里云面向小程序场景提供的一站式云服务,帮助开发者实现一云多端的业务战略,提供了有服务器和无服务器两种模式.云应用是有服务器模式,提供了包括 ...

  8. 微信小程序开发带来的思考

    若无小程序开发经验,可先阅读 玩转微信小程序 一文. 微信小程序正式上线已有几周时间,相信它的开发模式你已烂熟于胸,可能你也有所疑问,我竟能用 web 语言开发出如此流畅的几乎原生体验的应用.可能你又 ...

  9. 微信小程序之自定义toast弹窗

    微信小程序里面的自带弹窗icon只有两种,success和loading.有时候用户输入错误的时候想加入一个提醒图标,也可以使用wx.showToast中的image来添加图片达到使用自定义图标的目的 ...

随机推荐

  1. web前端Vue+Django rest framework 框架 生鲜电商项目实战✍✍✍

    web前端Vue+Django rest framework 框架 生鲜电商项目实战  整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频 ...

  2. 「CSP-S 2019」树的重心

    题目 考场上送\(75pts\)真实良心,正解不难:考虑直接对于每一个点算割掉多少条边能使得这个点成为重心,不难发现对于一个不是重心的点,我们要割掉的那条边一定在那个大于\(\lfloor \frac ...

  3. Couleur(启发式 + 主席树)(终于补坑了)

    ZOJ Problem Set - 4053 Couleur Time Limit: 6 Seconds      Memory Limit: 131072 KB DreamGrid has an a ...

  4. 浅析vue响应式原理

    图很清晰 当我们把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 g ...

  5. debug breakpoint with maven in eclipse

  6. 支付宝支付接口-app支付沙箱环境

    说明 开发阶段 需要验证自己的app支付加签是否正确,这里使用沙箱环境来进行模拟,使用ali的沙箱测试app和沙箱钱包app进行校验 准备阶段 1.进入沙箱页面 2.找到app支付文档 https:/ ...

  7. 谷歌浏览器控制台出现 Unchecked runtime.lastError: The message port closed before a response was received. 的报错

    错误截图: 解决:经过网上搜索说是浏览器扩展程序的问题,把那个扩展程序删除或者禁用就可以了

  8. 47. List中特有的方法

    集合的体系:--------------| Collection  单列集合的根接口----------| List 如果实现了List接口的集合类,该类具备的特点是:有序,可重复---------- ...

  9. 29. StringBuilder

    1.字符串变量.StringBuffer.StringBulid的区别:           字符串是一个常量,不能被修改   字符串一旦被修改,那么会再创建一个对象,浪费空间           而 ...

  10. Dao层结合Service层处理异常

    1. 接口存在异常不利于解耦. 2. 将编译时异常转化为运行时异常或其子类,通知上层,上层可以根据自身能力选择处理或向上抛出. 举例: 将UserDao中的SQLException转化为DaoExce ...