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)