饼图、折线图

首先引入echarts文件：

<script src="/resource/js/echarts.js"></script>

再用html设置宽高： 

                    <div class="main_statistics main_statistics1">
                        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                        <div id="main1" style="width:100%;height:400px;"></div>
                    </div>

1、饼图 图示：

下面的就可以直接复制饼图图形的代码段，在相应的位置传入数据：

//日饼图
    function sunPie() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main1'));
        var option = {
            title: {
                text: '覆盖区域',
                subtext: '日报表',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: global_sun_names
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: global_sun_pie,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

下面是折线图的图形与传参：

首先，上面需引用的文件一样，设置宽高也一样。

magicType: {type: ['line', 'bar']},

这句代码控制折线图切换柱状图。

图形与传参：

  //折线图
    function lineChart() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '用户增长数'
            },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                show: true,
                feature: {
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            legend: {
                data:['新注册用户','已提交审核']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: global_line_date
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'新注册用户',
                    type:'line',
                    data:global_line_num
                },
                {
                    name:'已提交审核',
                    type:'line',
                    data:global_line_submit
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

 传参时，根据status不同来区别不同的线条表示含义：

var global_line_date=[];
    var global_line_num=[];
    //折线图传参
    function chart() {
        $.ajax({
            async: false,
            type: "GET",
            url: "/count",
            data: {},
            dataType: "JSON",
            success: function (res) {
                // console.log(res);
                var data=res.data;
                data.map(function (v){
                console.log(v)
                global_line_date.push(v.date);
                global_line_num.push(v.count);
                })
                chart2();
            },
            error: function (res) {
                alert(res.message);
            }
        });
    }
    //当status==1时，为另一含义的折线
    var global_line_submit=[];
    function chart2() {
        $.ajax({
            async: false,
            type: "GET",
            url: "/count",
            data: {status:1},
            dataType: "JSON",
            success: function (res) {
                console.log(res);
                var data=res.data;
                data.map(function (v){
                    console.log(v)
                    global_line_submit.push(v.count);
                })

                //折线图
                lineChart();
            },
            error: function (res) {
                alert(res.message);
            }
        });
    }