永宏BI 自定義繪圖(環狀圖)

結果樣式：

繫結資料：

自定義JS程式碼：

點選檢視程式碼

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    series: [
        {
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: false,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
            {value: options.column1, itemStyle: { color: options.column3< 0.5 ? '#E86452' : (options.column3 <= 0.85 ?  '#F6BD16' : '#1CC25E') } },
                 {value: options.column2, itemStyle: { color: '#e6e6e6' } },
            ]
        }
    ]
};

繫結的資料在Data處顯示

JS程式碼中 options.column1 options.column2 options.column3 為繫結資料