Echarts環形進度使用 1【簡單的使用示例】

使用中說明幾點屬性：  
hoverAnimation:false,//此處查了好久屬性//控制鼠標放置在環上時候的交互
//
這里一個簡單的示例使用Echarts 環形圖使用方式//常用於統計完成進度等等

function RenderNut(res, UserType) {

    //數據處理
    var donum = parseFloat(res.TaskProgress); //已完成百分比
    var data = donum + '%';
    var rest = 100 - donum;
    // 基於准備好的dom，初始化echarts圖表
　　//此處因為任務有多條-需要對應渲染不同任務的數據統計/所以一次綁定
    var myChart = echarts.init(document.getElementById('rate' + res.TaskBatchID));

    var option = {
        series: [{
            name: '訪問來源',
            type: 'pie',
            radius: ['60%', '75%'],//這里是控制環形內半徑和外半徑
            avoidLabelOverlap: false,
            hoverAnimation:false,//此處查了好久屬性//控制鼠標放置在環上時候的交互
            label: {
                normal: {
                    show: true,
                    position: 'center',
                    textStyle: {
                        fontSize: '16',
                        fontWeight: 'bold'
                    }
                }
            },
            data: [{
                    value: data,
                    name: data
                },

                {
                    value: rest,
                    name: ''
                }
            ]
        }],
        color: ['#339900', '#C9C9C9']
    };
    // 為echarts對象加載數據 
    myChart.setOption(option);
}

后面文章中會在總結一篇,采用實際開發中的一個示例（稍微復雜點）

根據不同任務狀態渲染加載不同環顏色及圈內顯示不同文字的實現方式//