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)