Echarts在线免费图表

 
            function getRandom(num) {
    return Math.floor(Math.random() * num);
}

function getMax(arr, key) {
    var max = 0,
        len = arr.length;
    for (var i = 0; i < len; i++) {
        var item = arr[i][key];
        if (max < item) max = item;
    }
    return max;
}

var ageData = [{
            name: '90后',
            value: 10000
        },
        {
            name: '80后',
            value: 8000
        },

        {
            name: '60后',
            value: 6000
        },
        {
            name: '其他',
            value: 4000
        }
    ], // 年龄分布南丁格尔图数组
    
    colorArr = ['#ffd74a', '#34f6cb', '#d88856', '#88a8ff'],
    len = ageData.length,
    max = parseInt(getMax(ageData, 'value') * 1.6 * 100) / 100;


for (var i = 0; i < 4; i++) {
    ageData.push({
        value: 0
    });
}

option = {
    backgroundColor: '#188eee',
    tooltip: {
        formatter: '{b}: {c}件'
    },
    grid: {
        top: '75%',
        left: '35%',
        right: '35%',
        height: 2,
    },
    // xAxis: [{
    //     type: 'value',
    //     min: -max,
    //     max: max,
    //     axisTick: {
    //         show: false,
    //     },
    //     boundaryGap: true,
    //     axisLine: {
    //         show: false,
    //         lineStyle: {
    //             color: "#035de4",
    //             width: 2
    //         }
    //     },
    //     splitLine: {
    //         show: false
    //     },
    //     showMinLabel: false,
    //     showMaxLabel: false,
    //     axisLabel: {
    //         textStyle: {
    //             color: '#fff',
    //             fontSize: 12
    //         },
    //         formatter: function(value, index) {
    //             return Math.abs(value);
    //         }
    //     }
    // }],
    yAxis: [{
        show: false
    }],
    series: [
        //南丁格尔图 
        {
            type: 'pie',
            startAngle: 180,
            radius: [63, 180],
            center: ['50%', '75%'],
            roseType: 'area',
            color: colorArr,
            labelLine: {
                normal: {
                    show: false
                }
            },
            label: {
                normal: {
                    show: false
                }
            },
            // 默认值
            // data: []
            data: ageData,
        },
       
    ]
};