<div class="middle-left content-box"><!-- 切换统计方式--><ul class="date-type-list clearfix"><li class="date-type-item pull-left active"><button type="button" class="daily" value="1">天</button></li><li class="date-type-item pull-left"><button type="button" class="week" value="2">周</button></li><li class="date-type-item pull-left"><button type="button" class="month" value="3">月</button></li><li class="date-type-item pull-left"><button type="button" class="year" value="4">年</button></li></ul><div class="trends-charts" id="trends-charts" style="width: 100%; height: 380px"></div></div>

<!--引入关键js--><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script>

//对应js代码

var trendsChart = echarts.init(document.getElementById('trends-charts')) // 督察趋势

$(function () {

   //加载图表默认 按日统计   getTrendChart(1)

// 选择时间 $('.content-middle .date-type-item button').click(function () {    var val = $(this).val()    $(this).parent('.date-type-item').addClass('active')    $(this).parent('.date-type-item').siblings().removeClass('active')    getTrendChart(val)})

})

/** * 趋势视图 trendsView 折线图 * * @param dateTYpe 统计方式 4 年 3 月  2 周  1 日 */

function getTrendChart(dateTYpe) {var url = ''var params = {};//两个值都没取到params.dateType = dateTYpe$.ajax({type: "POST",url: baseURL + url,contentType: "application/json",data: JSON.stringify(params),success: function (res) {// 日返回数据格式 例子 [{list=[{countNum=2, dayDate=3, monthDate=7, createTime=2018-07-03 15:20:15.0, weekDate=26, yearDate=2018}, {countNum=5, dayDate=11, monthDate=7, createTime=2018-07-11 15:20:15.0, weekDate=27, yearDate=2018}, {countNum=2, dayDate=15, monthDate=7, createTime=2018-07-15 15:20:15.0, weekDate=28, yearDate=2018}, {countNum=425, dayDate=24, monthDate=7, createTime=2018-07-24 22:14:58.0, weekDate=29, yearDate=2018}, {countNum=417, dayDate=25, monthDate=7, createTime=2018-07-25 22:52:05.0, weekDate=29, yearDate=2018}, {countNum=2, dayDate=26, monthDate=7, createTime=2018-07-26 16:29:25.0, weekDate=29, yearDate=2018}], key=2018}, {list=[{countNum=1, dayDate=1, monthDate=1, createTime=2017-01-01 14:52:55.0, weekDate=1, yearDate=2017}, {countNum=1, dayDate=24, monthDate=1, createTime=2017-01-24 15:20:15.0, weekDate=4, yearDate=2017}], key=2017}]

// 周返回数据格式 例子 [{list=[{countNum=2, monthDate=7, createTime=2018-07-03 15:20:15.0, weekDate=26, yearDate=2018}, {countNum=5, monthDate=7, createTime=2018-07-11 15:20:15.0, weekDate=27, yearDate=2018}, {countNum=2, monthDate=7, createTime=2018-07-15 15:20:15.0, weekDate=28, yearDate=2018}, {countNum=844, monthDate=7, createTime=2018-07-26 16:29:25.0, weekDate=29, yearDate=2018}], key=2018}, {list=[{countNum=1, monthDate=1, createTime=2017-01-01 14:52:55.0, weekDate=1, yearDate=2017}, {countNum=1, monthDate=1, createTime=2017-01-24 15:20:15.0, weekDate=4, yearDate=2017}], key=2017}] 

// 月返回数据格式 例子 [{list=[{countNum=853, monthDate=7, createTime=2018-07-26 16:29:25.0, yearDate=2018}], key=2018}, {list=[{countNum=2, monthDate=1, createTime=2017-01-24 15:20:15.0, yearDate=2017}], key=2017}]

// 年返回数据格式 例子 [{list=[{countNum=853, createTime=2018-07-26 16:29:25.0, yearDate=2018}], key=2018}, {list=[{countNum=2, createTime=2017-01-24 15:20:15.0, yearDate=2017}], key=2017}]

//大致都一样，就少一两个字段 // res = JSON.parse(res)//对展示 series 数据进行拼接 var seriesData = []if (dateTYpe == 4) {var data = [];for (var i = 0; i < res.length; i++) {for (var j = 0; j < res[i].list.length; j++) {var year=res[i].list[j].yearDate+"/1/1";var value = {name: res[i].key,value: [year, res[i].list[j].countNum]}data.push(value)}}var series = {type: 'line',
                    data: data}seriesData=[]seriesData.push(series)} else {for (var i = 0; i < res.length; i++) {var data = [];for (var j = 0; j < res[i].list.length; j++) {var date = new Date(res[i].list[j].createTime);if (dateTYpe == 3) {date = 2017 + "/" + (date.getMonth() + 1) + "/" + date.getDate();}if (dateTYpe == 2) {date = 2017 + "/" + (date.getMonth() + 1) + "/" + date.getDate();}if (dateTYpe == 1) {date = 2017 + "/" + (date.getMonth() + 1) + "/" + date.getDate();}var value = {name: res[i].key,value: [date, res[i].list[j].countNum]}data.push(value)}var series = {name: res[i].key,type: 'line',
                        data: data}seriesData.push(series)
                }}var legend = {}if (dateTYpe == 4) {legend.show = false} else {legend.show = true}trendsChart.setOption({legend: legend,tooltip: {trigger: 'axis',formatter: function (params) { //根据方式不同，展示不同params = params[0];var date = new Date(params.value[0]);if (dateTYpe == 4) {return params.value[1] + "例问题<br/>" + "&nbsp;" + date.getFullYear() + "年";}if (dateTYpe == 3) {return params.value[1] + "例问题<br/>" + (date.getMonth() + 1) + '月,' + params.name;}if (dateTYpe == 2) {var firstDay = new Date(date.getFullYear(), 0, 1);var d = Math.ceil((date.valueOf() - firstDay.valueOf()) / 86400000);var result = Math.ceil(d / 7);return params.value[1] + "例问题<br/>第" + (result + 1) + '周,' + params.name;}/*   if(dateTYpe=='1'){return "&nbsp;&nbsp;&nbsp;"+params.value[1]+"例问题<br/>" + (date.getMonth() + 1) + '月' + date.getDate() + '日,'+params.name  ;}*/return "&nbsp;&nbsp;&nbsp;" + params.value[1] + "例问题<br/>" + (date.getMonth() + 1) + '月' + date.getDate() + '日,' + params.name;},axisPointer: {animation: false}},xAxis: {type: 'time',splitLine: {show: false},axisLabel: {show: true,// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引formatter: function (value, index) {// 格式化成月/日，只在第一个刻度显示年份var date = new Date(value);var texts = (date.getMonth() + 1) + "月" + date.getDate() + "日";if (dateTYpe == 4) {texts = date.getFullYear()+"年";}if (dateTYpe == 3) {texts = (date.getMonth() + 1) + "月";}if (dateTYpe == 2) {var firstDay = new Date(date.getFullYear(), 0, 1);var d = Math.ceil((date.valueOf() - firstDay.valueOf()) / 86400000);var result = Math.ceil(d / 7);texts = "第" + (result + 1) + "周";}return texts;}}},yAxis: {type: 'value',boundaryGap: [0, '100%'],splitLine: {show: false}},series: seriesData},true);}})
}