在釘釘小程序中使用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图表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。