钉钉小程序----使用阿里的F2图表
在钉钉小程序中使用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图表的更多相关文章
- 微信小程序使用阿里图标
微信小程序不支持外联阿里图标,必须下载放入小程序的本地文件中. 步骤一:下载项目图标 步骤二:转换iconfont.ttf文件(小程序的wxss文件的font-face的url不接受http地址作为参 ...
- 钉钉/支付宝小程序和微信小程序的区别及转换方案
最近接到一个工作任务,是把钉钉小程序转微信小程序... 对,居然还有这种操作,之前只听过微信小程序转支付宝小程序的,钉钉转微信是什么鬼
- 微信小程序——引用阿里云字体
阿里图标官网:http://www.iconfont.cn 使用阿里云图标大致的方法就是:选中你的图标——保存至你的项目——下载你的图标项目——在项目中引用字体文件. 具体方法可以参考:引用阿里云矢量 ...
- 微信小程序在ios下Echarts图表不能滑动的解决方案
问题现象 这个问题的现象说起来很简单. 小程序页面中有一篇很长的文章,内部有一个Echarts图表,手指上下滑动观看内容. 但是手指滑动区域在Echarts图表上时,页面却不能滑动了. 如下图: 追踪 ...
- 微信小程序使用阿里图标-iconfont
步骤一:下载项目图标 步骤二:解压文件,重命名 iconfont.css为 iconfont.wxss ,并复制 到项目 static文件夹 icon文件夹下 ...
- 【阿里云IoT+YF3300】15.阿里云物联网小程序构建
2013年8月,“轻应用”概念提出,但是仅仅活跃四年随后淡出 ,直到2017年1月9号借助微信小程序成功续命.一时间,以微信小程序和支付宝小程序为代表的轻应用解决方案迅速贯穿多个环节,成为“万物互联” ...
- 阿里小程序Serverless 操作指南
小程序云 小程序云(Mini Program Cloud)是阿里云面向小程序场景提供的一站式云服务,帮助开发者实现一云多端的业务战略,提供了有服务器和无服务器两种模式.云应用是有服务器模式,提供了包括 ...
- 微信小程序开发带来的思考
若无小程序开发经验,可先阅读 玩转微信小程序 一文. 微信小程序正式上线已有几周时间,相信它的开发模式你已烂熟于胸,可能你也有所疑问,我竟能用 web 语言开发出如此流畅的几乎原生体验的应用.可能你又 ...
- 微信小程序之自定义toast弹窗
微信小程序里面的自带弹窗icon只有两种,success和loading.有时候用户输入错误的时候想加入一个提醒图标,也可以使用wx.showToast中的image来添加图片达到使用自定义图标的目的 ...
随机推荐
- <随便写>软件设计遵循的基本原则
1.高内聚,低耦合 所谓高内聚,是指一个软件模块内各个元素彼此结合的紧密程度要高,即一个软件模块是由相关性很强的代码组成,只负责一项任务,也就是常说的单一责任原则. 所谓低耦合,是指一个软件系统内不同 ...
- akka-stream之异常处理
背景介绍 在项目中使用了akk-stream的source.queue功能,如下: Pair<SourceQueueWithComplete<Integer>, Source< ...
- js 实现图片懒加载
搬运自其他大神,因为找不到链接了就没放,找到了补上. 个人情况:页面超过一屏,下方是大量图片数据(后台传来的html数据) ,想做到一开始不加载下方图片,滚动到进入可视区再加载图片. html:(需先 ...
- 富文本编辑器 CKeditor 配置使用+上传图片
参考文献: 富文本编辑器 CKeditor 配置使用 CKEditor与CKFinder的配置(ASP.NET环境),老版本可以参考 CKEditor+CKFinder ASP版在本地电脑中的配置 ...
- ARM 汇编访问 CPSR / SPSR 寄存器 【 msr ,mrs 】
状态寄存器访问过程:读 - 改 - 写 读 CPSR / SPSR 指令[ mrs ] 格式:<opcode><cond> Rn, cpsr/spsr 写 CPSR / ...
- windows下安装jenkins初级(2)
这里是基于gitlab拉取代码 gitlab暂时先不多介绍 我们需要把git和gitlab连接起来方便拉取代码 所以需要git的ssh公匙和私匙 首先在 https ...
- ps切图的基本操作
参考线和辅助线 ctrl+r呼出标尺,只有在移动工具(快捷键v)下,鼠标左键从标尺上可以拖出来新的参考线.将参考线拖回标尺即是删除. 导出切片 快捷键ctrl+alt+shift+s ,选择png-2 ...
- __new__构造方法
""" 对象的创建过程:new创建 返回 模拟实例对象的创建过程. 为啥是静态方法? 先有new后来init.因为init是需要实例对象来调用的,需要一个实例对象和sel ...
- Java分页查询工具类
public class PageList<T> { private int totalpage; //总页数 private int totalcount; //总记录数 private ...
- java script 基本函数
Math.random() 是令系统随机选取大于等于 0.0 且小于 1.0 的伪随机 double 值. 日期时间函数(需要用变量调用):var b = new Date(); // ...