layui下拉框选择切换echarts值

1. select id="PhotographerYear
   柱状图 id="PhotographerOrder"

摄影师接单数量前十排行
PhotographerOrder">

 2.获取当前年份以及去年的值赋给select id="PhotographerYear" (或者是周月年度),并在监听select改变时切换柱形图

window.onload = function () {
    //1.设置年份的选择
    var myDate = new Date();
    var year = myDate.getFullYear();//起始年份
    var option = "";
    for (var i = year; i >= 2019; i--) {
        option += "";
    }
    $("#PhotographerYear").html(option);
    $("#PhotographerYear").val(year);
    //2.设置周月年度
    var cycle=["周","月","年"]
    var option_cycle = "";
    for(var i=0;i" + cycle[i] + "度";
    }
    $("#companysUser").html(option_cycle);
    $("#companysUser").val(cycle);

    getPhotographerWorker()
}
$("#PhotographerYear").change(function () {
    getPhotographerWorker();
})

3.设置柱形图并赋值给id= 'PhotographerOrder'

// 渲染柱状图
var PhotographerOrder = echarts.init(document.getElementById('PhotographerOrder'));
optionPhotographerOrde = {
    color: ['#6495ed'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器,坐标轴触发有效
            type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
        }
    },
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {show: true}
        }
    },
    grid: {
        left: '4%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type: 'category',
            data: ['第一', '第二', '第三', '第四', '第五', '第六', '第七', '第八', '第九', '第十'],
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                lineStyle: {
                    color: '#999'
                }
            },
            axisLabel: {
                color: '#666'
            }
        }
    ],
    yAxis : [
        {
            type: 'value',
            minInterval:1,
            axisLine: {
                lineStyle: {
                    color: '#999'
                }
            },
            axisLabel: {
                color: '#666'
            }
        }
    ],
    series : [
        {
            name: '摄影师',
            type: 'bar',
            barWidth:'20',//设置柱宽度
            data: [90, 70, 80, 75, 90, 80, 90, 90, 80, 90]
        }
    ]
}

PhotographerOrder.setOption(optionPhotographerOrde);

4.获取当前select的值,赋值给y,根据y来获取后台相关的值 

//摄影师接单数量前十排行
function getPhotographerWorker() {
    var y = $("#PhotographerYear").val();
    $.ajax({
        url: "getOrderByWorker",
        data: {"year": y},
        dataType: "json",
        success: function (data) {
            PhotographerOrder.setOption({
                xAxis: {
                    data: data.name
                },
                series: [
                    {
                        data:data.value
                    }
                ]
            });
        }
    });
}
setTimeout(function() {
    getPhotographerWorker();
},500)

layui下拉框选择切换echarts值_第1张图片 layui下拉框选择切换echarts值_第2张图片
layui下拉框选择切换echarts值_第3张图片layui下拉框选择切换echarts值_第4张图片

你可能感兴趣的:(eCharts,echarts,前端,javascript)