echarts 饼状图用法

echarts 饼状图demo

代码:

<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.min.js"></script>
<script type="text/javascript">
    layui.config({
        base: '' + STATIC_RES_PATH + '/plugin/layuiAdmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
        , formSelects: '{/}' + STATIC_RES_PATH + '/plugin/layui-formSelects-v4.0.0.0910/dist/formSelects-v4'
    }).use(['index', 'form', 'formSelects', 'laydate'], function () {
        var $ = layui.$, form = layui.form, admin = layui.admin, view = layui.view, formSelects = layui.formSelects,laydate = layui.laydate;
        var frameIndex = parent.layer.getFrameIndex(window.name); //获取窗口索引
        initData('#(examId)');
        function initData(examId) {
            $.ajax({
                url:'/supplier/training/exam/statisticsData?id='+examId,
                type:"post",
                data:{examId:examId},
                dataType:"json",
                success:function (res) {
                    if(res.state != "ok"){
                        layer.msg(res.msg);
                        return;
                    }
                    var data = res.data;
                    var examInfo = res.examInfo;
                    var myChart = echarts.init(document.getElementById('main'));
                    myChart.on('click', function (params) {
                        console.log(params)
                    });
                    myChart.setOption(echartsOption(examInfo,data));
                }
            })
        }

        function echartsOption(examInfo,data) {
            var option = {
                title: {
                    text: examInfo.title,
                    subtext: '考试结果统计',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [{
                    name: '考试结果',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: data,
                    color: function (params) {
                        var colorList = ['#009966', '#CC3300', '#2F4554'];
                        return colorList[params.dataIndex]
                    },
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };
            return option;
        }
    });


</script>

官方示例代码:

option = {
    title : {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};