釘釘小程序----使用阿里的F2圖表

在釘釘小程序中使用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.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) {
            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>