ECharts x时间轴不连续实现

想按时间对一批数据进行统计，但是时间可能不连续，找到一个highcharts 的例子，但是商业收费，不收费的会有一个highcharts标识，不是很想用这个，由于开始选则的是ECharts，所以最好还是有了ECharts，

ECharts官方实例不够全比较多的功能没有例子，所以用ECharts实现做个记录省的忘了，我是看了 https://www.2cto.com/kf/201612/577871.html 的例子，然后根据官网的文档写的实例

html代码统计按年月日周切换

   <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);
        }
    })
}

ECharts x时间轴不连续实现

猜你喜欢