LayUI使用Echarts实现统计图

引入 echarts.min.js包

<div id="main" style="width: 1000px;height:700px;"></div>

<script>
    layui.use(['form', 'laydate', 'layer'], function () {
        var laydate = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        //加载数据
        Getdatachart();
    });
    function Getdatachart() {
        var dataAxis = []; //X轴name
        var dataYis = []; //y轴数据设计值
        $.get(Url + "/UserInfo/BackupRecovery/LoadStatistic",
            function (data) {
                console.log(data);
                if (data) {
                    for (var i in data) {
                        var ptype = data[i].P_Name;
                        dataAxis.push(ptype);
                        dataYis.push(data[i].P_TotalCost);
                    }
                    GetChart(dataAxis, dataYis);
                }
                else {
                    layer.msg("暂无数据！");
                }
            });
    }
    function GetChart(dataAxis, dataYis) {
        var myChart = echarts.init(document.getElementById('main'));
        var titletxt = "工程模块统计图";
        myChart.setOption({
            color: ['#3398DB'],
            title: {
                left: 'center',
                text: titletxt,
                textStyle: {
                    fontSize: 20,
                    fontWeight: 'normal',
                    fontFamily: "微软雅黑"
                }
            },
            toolbox: {
                itemGap: 15,
                feature: {
                    saveAsImage: { show: true }
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: dataAxis,
                axisTick: {
                    alignWithLabel: true
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    type: 'bar',
                    barWidth: '30%',
                    data: dataYis
                }
            ]
        });
        window.onresize = myChart.resize;
    }
</script>