JS echarts统计

柱状图

function drawbarFunc(xs, ys) {
    //var xs1 = [];
    //var ys1 = [];
    require.config({
        paths: {
            echarts: '/Script/plugins/echarts/dist'
        }
    });
    require(
        [
            'echarts',
            'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
        ],
        function (ec) {
            var myChart = ec.init(document.getElementById('pieChart'));
            var option = {
                title: {
                    text: '评分统计',
                    //subtext: '纯属虚构'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['平均分']
                },
                toolbox: {
                    show: true,
                    feature: {
                        //mark: { show: true },
                        //dataView: { show: true, readOnly: false },
                        //magicType: { show: true, type: ['line', 'bar'] },
                        //restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: xs,
                        axisLabel: {
                            interval: 0,
                            rotate: -40
                        }
                    }
                ],
                grid: {
                    x: 40,
                    x2: 100,
                    y2: 200
                },
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '平均分',
                        type: 'bar',
                        data: ys,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: 'black',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }
    );
}

折线图

function drawbarFunc(xs, ys, linevalue) {
    //var xs1 = [];
    //var ys1 = [];
    require.config({
        paths: {
            echarts: '/Script/plugins/echarts/dist'
        }
    });
    require(
        [
            'echarts',
            'echarts/chart/line'    // 使用柱状图就加载bar模块，按需加载
        ],
        function (ec) {
            var myChart = ec.init(document.getElementById('pieChart'));

            var option = {
                title: {
                    text: '上座人数统计',
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['听众人数']
                },
                toolbox: {
                    show: true,
                    feature: {
                        //mark: { show: true },
                        //dataView: { show: true, readOnly: false },
                        //magicType: { show: true, type: ['line'] },
                        //restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: xs,
                        //axisLabel: {
                        //    interval: 0,
                        //    rotate: -40   //选择-40°
                        //},
                        boundaryGap: false,
                        nameTextStyle: { fontSize: 100 },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                fontSize: 20
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} 人'
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                fontSize: 20
                            }
                        }
                    }
                ],
                visualMap: {
                    show: true,
                    pieces: [
                        {
                            gt: 0,
                            lte: linevalue,          //这儿设置基线上下颜色区分 基线下面为绿色
                            color: '#03d6d6'
                        }, {

                            gt: linevalue,          //这儿设置基线上下颜色区分 基线上面为红色
                            color: '#e91642'
                        }]
                },
                //grid: {
                //    x: 40,
                //    x2: 100,
                //    y2: 200
                //},
                series: [
                    {
                        name: '听众人数',
                        type: 'line',
                        data: ys,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: 'black',
                                        fontSize: 20
                                    }
                                }
                            }
                        }//,
                        //markLine: {
                        //    data: [
                        //        { name: '标线1起点', value: 800, x: xs[0], y: ys[0] },
                        //        { name: '标线1终点', x: xs[ys.length - 1], y: ys[ys.length - 1] }
                        //    ]
                        //}
                    }
                ]
            };
            myChart.setOption(option);
        }
    );
}