echart——时间点和时间段综合显示

最新推荐文章于 2023-06-12 16:13:11 发布

RedPig_0628

最新推荐文章于 2023-06-12 16:13:11 发布

阅读量8.5k

点赞数

分类专栏：工作文章标签： echart 时间点时间段

本文链接：https://blog.csdn.net/weixin_42445133/article/details/83058443

版权

工作专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果图

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

echart3下载地址

RedPig_0628

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
echart——时间点和时间段综合显示

效果图html 代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&gt;
复制链接

扫一扫