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();

},

}

})