layui下拉框选择切换echarts值

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

<div class="layui-col-md6 chart">
    <header class="chart-header">
        <span class="left chart-title">摄影师接单数量前十排行</span>
        <div class="right year">
            <select id="PhotographerYear" class="layui-btn-xs year-btn">
            </select>
        </div>
    </header>
    <div class="chart-body" id="PhotographerOrder"></div>
</div>

 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 += "<option value='" + i + "'>" + i + "年</option>";
    }
    $("#PhotographerYear").html(option);
    $("#PhotographerYear").val(year);
    //2.设置周月年度
    var cycle=["周","月","年"]
    var option_cycle = "";
    for(var i=0;i<cycle.length;i++){
        option_cycle += "<option value='" + cycle[i] + "'>" + cycle[i] + "度</option>";
    }
    $("#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)

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值