Echarts的赋值，设置数据

 

柱形图案例的赋值

相关文档参考：https://blog.csdn.net/yangsitong1314/article/details/76984616

 

<div class="map_bg">
                        <div class="map_center">
                            <div class="map_title1">选调生图书馆资料阅读统计图</div>
                            <div class="map_select">
                                <select id="library_num">
                                    <option value="1">最近半年</option>
                                    <option value="2">最近30天</option>
                                    <option value="3">最近一周</option>
                                </select>
                            </div>
                            <div id="party_member" style="width: 500px;height:274px;"></div>
                        </div>
                    </div>

 

/*
     * 选调生图书馆资料阅读统计图
     */
    var party_member = echarts.init(document.getElementById('party_member'));
    var posList = [ 'left', 'right', 'top', 'bottom', 'inside', 'insideTop',
            'insideLeft', 'insideRight', 'insideBottom', 'insideTopLeft',
            'insideTopRight', 'insideBottomLeft', 'insideBottomRight' ];

    var app = [];
    app.config = {
        rotate : 90,
        align : 'left',
        verticalAlign : 'middle',
        position : 'insideBottom',
        distance : 15,
        onChange : function() {
            var labelOption = {
                normal : {
                    rotate : app.config.rotate,
                    align : app.config.align,
                    verticalAlign : app.config.verticalAlign,
                    position : app.config.position,
                    distance : app.config.distance
                }
            };
            myChart.setOption({
                series : [ {
                    label : labelOption
                }, {
                    label : labelOption
                }, {
                    label : labelOption
                }, {
                    label : labelOption
                } ]
            });
        }
    };

    var labelOption = {
        normal : {
            show : true,
            position : app.config.position,
            distance : app.config.distance,
            align : app.config.align,
            verticalAlign : app.config.verticalAlign,
            rotate : app.config.rotate,
            formatter : '{c}  {name|{a}}',
            fontSize : 16,
            rich : {
                name : {
                    textBorderColor : '#fff'
                }
            }
        }
    };

    var option3 = {
        color : [ '#f7683c', '#fbb42a', '#3c82f7', '#36cd26' ],
        tooltip : {
            trigger : 'axis',
            axisPointer : {
                type : 'shadow'
            }
        },
        legend : {
            data : [ '公开课', '学习专题', '书库', '时事新闻' ]
        },
        toolbox : {
            show : false
        },
        calculable : true,
        xAxis : [ {
            name : '月',
            type : 'category',
            axisTick : {
                show : false
            },
            axisLabel :{  
                interval:0   
            },
            data : [ '1月', '2月', '3月', '4月', '5月', '6月' ]
        } ],
        yAxis : [ {
            name : '次数',
            type : 'value',
            axisTick : {
                show : false,
            },
            splitLine : {//背景图的内置表格中“边框”的颜色线条   这个是y轴的辅助线
                show : false
            }
        } ],
        series : [ {
            name : '公开课',
            type : 'bar',
            barGap : 0,
            barWidth : 8,
            data : [ 320, 132, 201, 334, 150, 220 ]
        }, {
            name : '学习专题',
            type : 'bar',
            barWidth : 8,
            data : [ 220, 182, 151, 234, 290, 120 ]
        }, {
            name : '书库',
            type : 'bar',
            barWidth : 8,
            data : [ 150, 232, 201, 154, 190, 90 ]
        }, {
            name : '时事新闻',
            type : 'bar',
            barWidth : 8,
            data : [ 198, 177, 301, 199, 140, 160 ]
        } ]
    };
    // 使用刚指定的配置项和数据显示图表。
    party_member.setOption(option3);

　　　　 //以下代码是从后台获取到数据并赋值
    var recentTime3 = $("#library_num").val(); //最近时间
    $("#library_num").click(function() {
        libraryReading(this.value);
    });
    libraryReading(recentTime3);
    function libraryReading(recentTime) {
        $.ajax({
            type : "post",
            url : "rest/admin/log/library_Reading",
            data : {
                "recentTime" : recentTime
            },
            cache : false, //禁用缓存  
            dataType : "json",
            success : function(result) {
                var xAxisNames = result.xAxisNames1;
                console.log(result)
                console.log(xAxisNames)
                var xAxisUnit;
                if (result.recentTime == 1) {
                    xAxisUnit = "月";
                    //xAxisNames=['1月', '2月','3月', '4月', '5月', '6月']
                }
                if (result.recentTime == 2) {
                    xAxisUnit = "周";
                    //xAxisNames=['第一周', '第二周','第三周', '第四周']
                }
                if (result.recentTime == 3) {
                    xAxisUnit = "天";
                    //xAxisNames=['周一', '周二','周三', '周四', '周五', '周六']
                }
                var linNum1 = result.array1;
                var linNum2 = result.array2;
                var linNum3 = result.array3;
                var linNum4 = result.array4;

                /* $.each(result.array1,function(key,value){    
                    linNames.push(value);  
                    linNums.push(value);  
                });  */
                //柱形图赋值  
                party_member.setOption({ //加载数据图表  
                    xAxis : {
                        name : xAxisUnit,
                        data : xAxisNames,
                        axisLabel :{  
                            interval:0   
                        }
                    },
                    series : [ {
                        data : linNum1
                    }, {
                        data : linNum2
                    }, {
                        data : linNum3
                    }, {
                        data : linNum4
                    } ]
                });
            },
            error : function(XMLHttpRequest, textStatus, errorThrown) {
                alert("查询失败");
            }
        });
    }