效果图：




代码展示：

<pre>


layui.define(['element','layer'],function(exports){

    var $ = layui.jquery,
        element = layui.element,
        layer = layui.layer    ;

    var ECharts = function(){
        var eInfo =  infoString.PARM;
        let etitle = eInfo.title,
            egraphic = eInfo.graphic,
            eyInfo = eInfo.y,
            eaxis_x = eInfo.axis_x,
            eaxis_y = eInfo.axis_y,
            exInfo = eInfo.x,
         eseries = [],
         tempstr = {},
         pieInfo = [],
            ex = eInfo.x;

        var myChart = echarts.init(document.getElementById('main'));
        var labelOption = {
            normal: {
                show: true,
                position: 'insideBottom',
                rotate: 90,
                textStyle: {
                    align: 'left',
                    verticalAlign: 'middle'
                }
            }
        };

        // 初始化饼图数据
        layui.each(eyInfo , function (i,o) {
            tempstr ={
               name:egraphic[i],
            value:o
         };
            pieInfo.push(tempstr);
        });

        //系列列表。每个系列通过 type 决定自己的图表类型 【初始化】
        tempstr ={};
        tempstr = {
            name: '饼图',
            type: 'pie',
            barGap: '20%',
            label: labelOption,
            radius: [0, '30%'],
            center: ['85%', '35%'],
            data: pieInfo,
            z: 100
        };
        eseries.push(tempstr);


        layui.each(egraphic ,function (i,o) {
            tempstr = {};
            tempstr =  {
                name: o,
                type: 'bar',
                barGap: '20%',
                label: labelOption,
                data: eyInfo[i]
            };
            eseries.push(tempstr);
        });
        egraphic.push('饼图');

        // 指定图表的配置项和数据
        var option = {
            color: ['#003366', '#006699', '#4cabce', '#e5323e','#5fb878'],    //调色盘颜色列表
            textStyle: {

            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            title: {
                text: etitle,            //主标题。
            subtext:'数据统计图',
                left: 'left' ,           //位置            // 横向展示
                top: 'left'
            },

            legend: {
                data: egraphic,
                show: true,
                left: 'right' ,
            },
            grid: [{
                top:'20%',
                width: '70%',
                bottom: '0%',
                left: 10,
                containLabel: true
            }],
            xAxis: {    // 横向轴（左右）
                name:eaxis_x,
                data:exInfo
            },
            yAxis: {   // 纵向轴（上下）
                name:eaxis_y,
                splitNumber: 5,
                boundaryGap: ['0%', '50%'],        // 上下留白
                axisLabel:{
                    show:true,
                }
            },
            toolbox:{
                show:true,                  // 是否展示工具栏
                orient :'vertical',
                left: 'right',              // 横向展示
                top: 'center',              // 纵向展示
                feature:{
                    mark: { },
                    dataView: { readOnly: false},
                    magicType:{
                        type:['line','bar','stack', 'tiled','pie']
                    },
                    restore: {},
                    saveAsImage: {}
                },
                tooltip: { // 和 option.tooltip 的配置项相同
                    show: true,
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                }
            },
            series: eseries
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    };

    exports('echarts',new ECharts);
});



</pre>