Echarts在线免费图表

 
            
var scale = 1;
var echartData = [{
    value: 2154,
    name: '曲阜师范大学'
}, {
    value: 3854,
    name: '潍坊学院'
}, {
    value: 3515,
    name: '青岛职业技术学院'
}, {
    value: 3515,
    name: '淄博师范高等专科'
}, {
    value: 3854,
    name: '鲁东大学'
}, {
    value: 2154,
    name: '山东师范大学'
}]
var rich = {
    yellow: {
        color: "#ffc72b",
        fontSize: 30 * scale,
        padding: [5, 4],
        align: 'center'
    },
    total: {
        color: "#ffc72b",
        fontSize: 40 * scale,
        align: 'center'
    },
    white: {
        color: "#fff",
        align: 'center',
        fontSize: 14 * scale,
        padding: [21, 0]
    },
    blue: {
        color: '#49dff0',
        fontSize: 16 * scale,
        align: 'center'
    },
    hr: {
        borderColor: '#eee',
        width: '100%',
        borderWidth: 1,
        height: 0,
    }
}
option = {
    // 标题组件，包含主标题和副标题。
    title: {
        id: 'line-chart',
        show: true,
        text: '饼图标题',
        textStyle: {
            color: '#fff'
        },
        subtext: '副标题副标题',
        subtextStyle: {
            color: '#eee'
        },
        left: 'center',//标题位置
        top: '20'//标题位置
    },
    // 图例组件
    legend: {
        type: 'plain',//plain:普通图例；scroll:可滚动翻页的图例。当图例数量较多时使。
        show: true,
        orient:'vertical',//图例列表的布局朝向(horizontal、vertical)
        right: '20',
        top:'center',
        // 图例的公用文本样式
        textStyle: {
            color: '#fff'
        }
    },
    // 提示框组件
    tooltip: {
        trigger: 'item',//触发类型
        backgroundColor: 'rgba(50,50,50,0.7)',//提示框浮层的背景颜色
        borderColor: '#fff',//提示框浮层的边框颜色
        textStyle: {
            color: '#fff',
            fontSize: '15'
        },
        formatter: '{b0}：<br />{a0}：{c0}人'//1.字符串模板
        // formatter:function(params){  //2.回调函数,可return dom 自定义样式
        //     console.log('params',params)
        //     return params[0].name
        // }
    },
    //图表背景色
    backgroundColor: '#081736',
    series: [
        {
        name: '总考生数量',
        type: 'pie',
        minAngle: 2, //最小的扇区角度（0 ~ 360）
        radius: ["20%", "35%"],
        center: ["40%", "50%"],
        hoverAnimation: true,
        color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
        label: {//文本标签
            formatter: function(params, ticket, callback) {
                    var total = 0; //考生总数量
                    var percent = 0; //考生占比
                    echartData.forEach(function(value, index, array) {
                        total += value.value;
                    });
                    percent = ((params.value / total) * 100).toFixed(1);
                    return '{white|' + params.name + '}\n{hr|}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
                },
                rich: rich
        },
        labelLine: {//标签的视觉引导线配置
            normal: {
                length: 55 * scale,
                length2: 0,
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        data: echartData
    }
    ],
   
};