echarts的时序图

这个是在网上看到的,但原地址忘记了

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>

    <div id="chart-box" style="width:400px;height:300px;border:1px solid black;"></div>

    <!-- <script src="./echarts.min.js"></script> -->
   <!--  <script src="index.js"></script> -->
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    <script>
        // 初始化echart
        var chart = echarts.init(document.getElementById('chart-box'));

        // 各状态的颜色
        var colors = ['#2f4554', '#61a0a8', '#d48265', '#c23531'];

        // 四种状态
        var state = ['正常', '繁忙', '故障', '离线'];

        // echart配置
        var opt = {
            color: colors,
            tooltip: {
                formatter: function (params) {
                    return params.name + ':' + params.value[1] + '~' + params.value[2];
                }
            },
            legend: {
                data: state,
                bottom: '1%',
                selectedMode: false, // 图例设为不可点击
                textStyle: {
                    color: '#000'
                }
            },
            grid: {
                left: '3%',
                right: '3%',
                top: '1%',
                bottom: '10%',
                containLabel: true
            },
            xAxis: {
                min: 0 // x轴零刻度对应的实际值
            },
            yAxis: {
                data: ['WAN0', 'WAN1']
            },
            series: [
                // 用空bar来显示四个图例
                {name: state[0], type: 'bar', data: []},
                {name: state[1], type: 'bar', data: []},
                {name: state[2], type: 'bar', data: []},
                {name: state[3], type: 'bar', data: []},
                {
                    type: 'custom',
                    renderItem: function (params, api) {
                        var categoryIndex = api.value(0);
                        var start = api.coord([api.value(1), categoryIndex]);
                        var end = api.coord([api.value(2), categoryIndex]);
                        var height = 24;

                        return {
                            type: 'rect',
                            shape: echarts.graphic.clipRectByRect({
                                x: start[0],
                                y: start[1] - height / 2,
                                width: end[0] - start[0],
                                height: height
                            }, {
                                x: params.coordSys.x,
                                y: params.coordSys.y,
                                width: params.coordSys.width,
                                height: params.coordSys.height
                            }),
                            style: api.style()
                        };
                    },
                    encode: {
                        x: [1, 2],
                        y: 0
                    },
                    data: [
                        {
                            itemStyle: { normal: { color: colors[0] } },
                            name: '正常',
                            value: [0, 0, 10]
                        },
                        {
                            itemStyle: { normal: { color: colors[1] } },
                            name: '繁忙',
                            value: [0, 10, 25]
                        },
                        {
                            itemStyle: { normal: { color: colors[2] } },
                            name: '故障',
                            value: [0, 25, 45]
                        },
                        {
                            itemStyle: { normal: { color: colors[3] } },
                            name: '离线',
                            value: [0, 45, 60]
                        },
                        {
                            itemStyle: { normal: { color: colors[0] } },
                            name: '正常',
                            value: [1, 0, 15]
                        },
                        {
                            itemStyle: { normal: { color: colors[1] } },
                            name: '繁忙',
                            value: [1, 15, 20]
                        },
                        {
                            itemStyle: { normal: { color: colors[2] } },
                            name: '故障',
                            value: [1, 20, 35]
                        },
                        {
                            itemStyle: { normal: { color: colors[3] } },
                            name: '离线',
                            value: [1, 35, 40]
                        },
                        {
                            itemStyle: { normal: { color: colors[0] } },
                            name: '正常',
                            value: [1, 40, 45]
                        },
                        {
                            itemStyle: { normal: { color: colors[3] } },
                            name: '离线',
                            value: [1, 45, 60]
                        }
                    ]
                }
            ]
        };
        chart.setOption(opt);
    </script>
</body>
</html>

效果图:在这里插入图片描述

  • 2
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

奋斗的小鸟鸟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值