EChartsx时间轴不连续实现
想按时间对⼀批数据进⾏统计，但是时间可能不连续，到⼀个highcharts 的例⼦，但是商业收费，不收费的会有⼀个highcharts标识，不是很想⽤这个，由于开始选则的是
ECharts，所以最好还是有了ECharts，
ECharts官⽅实例不够全⽐较多的功能没有例⼦，所以⽤ECharts实现做个记录省的忘了，我是看了的例⼦，然后根据官⽹的⽂档写的实例
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" ></div>
</div>
<!--引⼊关键js-->
<script src="cdn.bootcss/jquery/3.3.1/jquery.min.js"></script>
<script src="cdn.bootcss/echarts/4.1.0/echarts.min.js"></script>
//对应js代码
var trendsChart = echarts.ElementById('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= // 周返回数据格式例⼦ [{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, mo // ⽉返回数据格式例⼦ [{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 + "/" + (Month() + 1) + "/" + Date();
}
if (dateTYpe == 2) {
date = 2017 + "/" + (Month() + 1) + "/" + Date();
}
if (dateTYpe == 1) {
date = 2017 + "/" + (Month() + 1) + "/" + Date();
}
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/>" + " " + FullYear() + "年";
}
if (dateTYpe == 3) {
return params.value[1] + "例问题<br/>" + (Month() + 1) + '⽉,' + params.name;
}
setoption
if (dateTYpe == 2) {
var firstDay = new FullYear(), 0, 1);
var d = il((date.valueOf() - firstDay.valueOf()) / 86400000);
var result = il(d / 7);
return params.value[1] + "例问题<br/>第" + (result + 1) + '周,' + params.name;
}
/*  if(dateTYpe=='1'){
return "   "+params.value[1]+"例问题<br/>" + (Month() + 1) + '⽉' + Date() + '⽇,'+params.name  ;                          }*/
return "   " + params.value[1] + "例问题<br/>" + (Month() + 1) + '⽉' + Date() + '⽇,' + 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 = (Month() + 1) + "⽉" + Date() + "⽇";
if (dateTYpe == 4) {
texts = FullYear()+"年";
}
if (dateTYpe == 3) {
texts = (Month() + 1) + "⽉";
}
if (dateTYpe == 2) {
var firstDay = new FullYear(), 0, 1);
var d = il((date.valueOf() - firstDay.valueOf()) / 86400000);
var result = il(d / 7);
texts = "第" + (result + 1) + "周";
}
return texts;
}
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
series: seriesData
},true);
}
})
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。