下拉框選擇切換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)

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章