f2 柱状图滚动 钉钉小程序_钉钉小程序使用阿里的F2图表
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.chartDataNew
let map= this.data.map
ddChart.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.chartDataNew1
ddChart.scale({
ring: {
range: [0.05, 1]
}
})
ddChart.source(chartDataNew, {
title: {
min:0,
formatter: function formatter(val) {returnval;
}
}
})
ddChart.interval().position('ring*value').color('title').adjust('stack');
ddChart.render();
},
}
})
總結
以上是生活随笔為你收集整理的f2 柱状图滚动 钉钉小程序_钉钉小程序使用阿里的F2图表的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux主机解析虚拟机超时_Linux
- 下一篇： v8声卡调音软件_sE VOXTOON