echarts案例汇总

同心圆

测试地址:https://echarts.apache.org/examples/zh/editor.html?c=pie-simple

var data = [{
        name: "博士及以上",
        value: 0.2
    },
    {
        name: "硕士及以上",
        value: 0.3
    },
    {
        name: "本科及以上",
        value: 1
    },
    {
        name: "高中",
        value: 0.1
    },
    {
        name: "初中及以下",
        value: 0.1
    },
    {
        name: "其他",
        value: 0.8
    }
];
var dataStyle = { 
    normal: {
        label: {show:false},
        labelLine: {show:false},
        shadowBlur: 40,
        shadowColor: 'rgba(40, 40, 40, 0.5)',
    }
};
var placeHolderStyle = {
    normal : {
        color: 'rgba(0,0,0,0)',
        label: {show:false},
        labelLine: {show:false}
    },
    emphasis : {
        color: 'rgba(0,0,0,0)'
    }
};
var legendData=[];
function getData(data) {
    var sortData=data.sort((a,b)=>{
        return b.value-a.value
    });
    var res = [];
    for (let i = 0; i < sortData.length; i++) {
        legendData.push(sortData[i].name);
        res.push({
            type: 'pie',
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [200 - i * 20, 220 - i * 20],       //radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
            itemStyle: dataStyle,
            data: [{
                value: sortData[i].value,
                name: sortData[i].name
            }, {
                value: 1 - sortData[i].value,
                name:'invisible',
                itemStyle: placeHolderStyle,
            }]
        });
    }
    return res;
}
option = {
   backgroundColor: '#f4f2e3',
    color: ['#85b6b2', '#6d4f8d','#cd5e7e', '#e38980','#f7db88'],
    tooltip : {
        show: true,
        formatter: "{b} : {c} ({d}%)"
    },
    legend: {
        data:legendData,
        type: 'scroll',
        orient: 'vertical',
        align: 'left', // 图例标记对其方式
        y: 'center',    //延Y轴居中
        x: 'right', //居右显示
        padding: 10, //调节legend的位置
        formatter:  function(name){
            let total = 0;
            let target;
            for (let i = 0, l = data.length; i < l; i++) {
            total += data[i].value;
            if (data[i].name == name) {
                target = data[i].value;
                }
            }
            return name + ' ' + ((target/total)*100).toFixed(0) + '%';
        }
    },
    toolbox: {
        show : true,
        feature : {
            saveAsImage : {show: true}
        }
    },
    series : getData(data)
};