echart——时间点和时间段综合显示
效果图
html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 1.先添加一个容器存放图表 -->
<div id="main" style="width: 600px;height: 400px"></div>
</body>
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript" src="dateview.js"></script>
</html>
dateview.js 代码
js里所有的时间为手动填上去的测试时间,后期项目里应该都是从后来拿的数据
// 2.1 初始化echars对象
var myChart = echarts.init(document.getElementById('main'));
// 计算保修有多少天
var date_waranty_start = new Date('2017-01-01');
var date_waranty_end = new Date('2022-01-01');
var days = parseInt(date_waranty_end - date_waranty_start) / 1000 / 60 / 60 / 24;
// console.log(days);
// 2.2 设置图表的配置参数
var option = {
title: {
text: "日期维度统计图",
textStyle: {
textShadowColor: "#677c81",
textShadowBlur: 4,
textShadowOffsetX: 2,
textShadowOffsetY: 2,
},
bottom: 'bottom',
right: 'center',
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
// 自定义提示框显示内容,若为空则不显示
formatter: function (params) {
var res = '';
for (var i = 0; i < params.length; i++) {
if (params[i].data != null) {
if (params[i].name == '保修时间') {
res += '保修开始时间:' + params[i].data + '<br>' + '保修截止时间:' + params[i + 1].data + '<br>';
return res
} else {
var icon = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[i].color + ';"></span>';
res += icon + params[i].name + ':' + params[i].data + '<br>'
}
}
}
return res;
},
},
legend: {
data: ['购置日期', '安装日期', '保修时间', '最后在线时间']
},
grid: {
left: '5%',
right: '5%',
bottom: '10%',
containLabel: true
},
xAxis: {
type: 'time'
},
yAxis: {
type: 'category',
axisTick: {show: false},
data: ['购置日期', '安装日期', '保修时间', '最后在线时间'],
},
series: [
{
name: '购置日期',
type: 'scatter',
symbolSize: 20,
label: {
normal: {
show: true,
position: 'right',
formatter: '{c}',
}
},
itemStyle: {
normal: {
color: '#80BC9E'
}
},
data: ['2016-01-01']
},
{
name: '安装日期',
type: 'scatter',
symbolSize: 20,
label: {
normal: {
show: true,
position: 'right',
formatter: '{c}',
}
},
itemStyle: {
normal: {
color: '#243542'
}
},
data: [null, '2017-01-01']
},
{
name: '保修开始时间',
type: 'bar',
stack: '保修',
label: {
normal: {
show: false
}
},
itemStyle: {
normal: {
color: "rgba(0,0,0,0)"
},
},
barCategoryGap: "50%", //类目间柱形距离,默认为类目间距的20%,可设固定值
data: [null, null, '2017-01-01']
},
{
name: '保修时间',
type: 'bar',
stack: '保修',
label: {
normal: {
show: true,
formatter: '保修时间:' + days + '天'
},
},
itemStyle: {
normal: {
color: "#508F98"
},
},
barCategoryGap: "50%", //类目间柱形距离,默认为类目间距的20%,可设固定值
data: [null, null, '2022-01-01']
},
{
name: '最后在线时间',
type: 'scatter',
symbolSize: 20,
label: {
normal: {
show: true,
position: 'right',
formatter: '{c}',
}
},
itemStyle: {
normal: {
color: '#BC731E'
}
},
data: [null, null, null, '2018-09-01'],
markLine: {
lineStyle: {
normal: {
type: 'dashed',
width: 2,
color: '#b62314',
},
},
label: {
normal: {
formatter: '当前时间:' + '2018-10-11'
},
},
data: [
{xAxis: '2018-10-11'},
]
},
},
]
};
// 3.3 渲染图表
myChart.setOption(option);