Echart 单行多数据，自定义图表

Relax乱舞春秋

已于 2022-05-06 13:38:11 修改

阅读量731

点赞数

文章标签： echarts javascript

于 2022-04-29 10:17:31 首次发布

本文链接：https://blog.csdn.net/xrj1093431145/article/details/124489887

版权

//data3.js

let RobotData = {
    "RobotIndex": {
        "data": [
            [
                "10001",
            ],
            [
                "10003",
            ],
        ]
    },
    "robotWorkData": {
        "data": [[
            1,
            1496840400000,
            1496873400000,
            "10001",
            1496850400000,
            1496860400000,
        ],
            [0,
                1496917800000,
                1496925000000,
                '10003',
                1496918800000,
                1496923000000
            ],
            [1, 1496917800000,
                1496935000000,
                '10001',
                1496927800000,
                1496934000000,
            ]
        ]
    }
}

//demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./echarts.js"></script>
    <script src="data3.js"></script>
</head>
<body>
<div id="div1" style="width: 1000px;height:800px;"></div>
<script type="text/javascript">
    let Index = 0;
    let boot_time = 1;
    let shutdown_time = 2;
    let work_start_time = 4;
    let work_end_time = 5;
    let AllData;
    let myChart = echarts.init(document.getElementById('div1'))
    setTimeout(() => {
        AllData = RobotData;
        myChart.setOption((option = makeOption()));
    }, 200)


    function makeOption() {
        return {
            animation: false,
            dataZoom: [
                {
                    type: 'inside',
                }
            ],
            grid: {
                show: true,
                bottom: 20,
                left: 100,
                right: 20,
                backgroundColor: '#fff',
                borderWidth: 0
            },
            xAxis: {
                type: 'time',
                position: 'top',
                splitLine: {
                    lineStyle: {
                        color: ['#E9EDFF']
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    lineStyle: {
                        color: '#929ABA'
                    }
                },
                axisLabel: {
                    color: '#929ABA',
                    inside: false,
                    align: 'center'
                }
            },
            tooltip: {
                trigger: "axis",
                backgroundColor: "#F1F1F7",
                borderColor: "#F1F1F7",
                formatter: function (params) {
                    return `<div style="padding: 2px">${params[0].data[3]}</div>
                <div style="padding: 2px">开机时间:${new Date(parseInt(params[0].data[1])).toLocaleString()}, 关机时间:${new Date(parseInt(params[0].data[2])).toLocaleString()}</div>
                <div style="padding: 2px">任务开始时间:${new Date(parseInt(params[0].data[4])).toLocaleString()}, 任务结束时间:${new Date(parseInt(params[0].data[2])).toLocaleString()}</div>`;
                },
            },
            yAxis: {
                axisLabel: {show: false},
                min: 0,
                max: AllData.RobotIndex.data.length
            },
            series: [
                {
                    type: 'custom',
                    renderItem: renderGanttItem,
                    encode: {
                        x: [boot_time, shutdown_time, work_start_time, work_end_time],
                        y: Index,
                    },
                    data: AllData.robotWorkData.data
                },
                {
                    type: 'custom',
                    renderItem: renderAxisLabelItem,
                    encode: {
                        x: -1,
                        y: 0
                    },
                    data: AllData.RobotIndex.data.map(function (item, index) {
                        return [index].concat(item);
                    })
                }
            ]
        };
    }

    function renderGanttItem(params, api) {
        let text = api.value(3);
        let categoryIndex = api.value(Index);
        let timeArrival = api.coord([api.value(boot_time), categoryIndex]);
        let timeDeparture = api.coord([api.value(shutdown_time), categoryIndex]);
        let startTime = api.coord([api.value(work_start_time), categoryIndex]);
        let endTime = api.coord([api.value(work_end_time), categoryIndex]);
        let barLength = timeDeparture[0] - timeArrival[0];
        let workLength = endTime[0] - startTime[0]
        let barHeight = api.size([0, 1])[1] * 0.1;
        let x = timeArrival[0];
        let y = timeArrival[1] - barHeight;
        let workX = startTime[0]
        let workY = endTime[1] - barHeight
        let rectNormal = clipRectByRect(params, {
            x: x,
            y: y,
            width: barLength,
            height: barHeight
        });
        let workTime = clipRectByRect(params, {
            x: workX,
            y: workY,
            width: workLength,
            height: barHeight
        });
        let rectText = clipRectByRect(params, {
            x: x,
            y: y,
            width: barLength,
            height: barHeight
        });
        return {
            type: 'group',
            children: [
                {
                    type: 'rect',
                    ignore: !rectNormal,
                    shape: rectNormal,
                    style: api.style({fill: '#ADB6FF'})
                },
                {
                    type: 'rect',
                    ignore: !workTime && !api.value(4),
                    shape: workTime,
                    style: api.style({fill: '#7484FF'})
                },
                {
                    type: 'rect',
                    ignore: !rectText,
                    shape: rectText,
                    style: api.style({
                        fill: 'transparent',
                        stroke: 'transparent',
                        text: text,
                        textFill: '#fff'
                    })
                }
            ]
        };
    }

    function renderAxisLabelItem(params, api) {
        let y = api.coord([0, api.value(0)])[1];
        return {
            type: 'group',
            position: [10, y],
            children: [
                {
                    type: 'text',
                    style: {
                        x: 24,
                        y: -18,
                        text: api.value(1),
                        textVerticalAlign: 'center',
                        textAlign: 'center',
                        textFill: '#000'
                    }
                }
            ]
        };
    }

    function clipRectByRect(params, rect) {
        return echarts.graphic.clipRectByRect(rect, {
            x: params.coordSys.x,
            y: params.coordSys.y,
            width: params.coordSys.width,
            height: params.coordSys.height
        });
    }
</script>
</body>
</html>