带滚动条排列展示车辆故障信息echarts 配置项内容和展示

      option = {
    backgroundColor: '#000',
    topicIndex: null,
    height: '432px',
    legend: {
        show: false
    },
    tooltip: {
        formatter: function(params) {
            console.log(params);
            var data = params.data;
            return "<div style='background:#07273B;border:1px solid #03941D;width:300px;height:200px;border-radius:5px'>" +
                "<div style='width:100%;text-align: center;margin-top:20px;font-size:16px;'>编码　<span style='color:#2AEAF0;font-size:18px;'>" + data.name + "</span></div>" +
                "<div style='width:100%;text-align: center;margin-top:20px;font-size:16px;white-space:pre-wrap;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;'><span style='color:#fff;font-size:14px;'>" + data.paizi + "</span></div>" +
                "<div style='width:50%;text-align: center;margin-top:20px;float:left;font-size:16px;'>轮胎　<span style='color:#BF564E;font-size:14px;'>" + data.luntai + "</span></div>" +
                "<div style='width:50%;text-align: center;margin-top:20px;float:left;font-size:16px;'>刹车　<span style='color:#2AEAF0;font-size:14px;'>" + data.shache + "</span></div>" +
                "<div style='width:50%;text-align: center;margin-top:20px;float:left;font-size:16px;'>雨刮　<span style='color:#2AEAF0;font-size:14px;'>" + data.yugua + "</span></div>" +
                "<div style='width:50%;text-align: center;margin-top:20px;float:left;font-size:16px;'>挡风玻璃　<span style='color:#2AEAF0;font-size:14px;'>" + data.dfbl + "</span></div>" +
                "</div>";
        },
        padding: 0,
        axisPointer: {
            type: 'shadow',
        },
        position: function(point, params, dom, rect, size) {
            console.log();
            if (point[1] > 866 && point[0] <= 1644) {
                return [point[0] + 10, point[1] - (size.contentSize)[1]];
            } else if (point[1] > 866 && point[0] > 1644) {
                return [point[0] - (size.contentSize)[0] - 10, point[1] - (size.contentSize)[1]];
            }
        }
    },
    grid: {
        containLabel: true,
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
        height: 432,
    },
    xAxis: {
        max: 100,
        min: 0,
        interval: 2,
        position: 'top',
        type: 'value',
        splitNumber: 4,
        axisLabel: { //坐标轴刻度标签的相关设置。
            show: false,
            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
            margin: 15,
        },
        axisTick: { //坐标轴刻度相关设置。
            show: false,
        },
        axisLine: {
            show: false,
            lineStyle: {
                color: '#fff',
                opacity: 0.2
            }
        },
        splitLine: { //坐标轴在 grid 区域中的分隔线。
            show: false,
            lineStyle: {
                color: ['#fff'],
                opacity: 0.1
            }
        }
    },
    yAxis: {
        max: 100,
        min: 0,
        interval: 1,
        inverse: true,
        type: 'value',
        splitNumber: 4,
        axisLine: {
            show: false,
            lineStyle: {
                color: '#fff',
                opacity: 0.2
            }
        },
        axisLabel: {
            show: false
        },
        axisTick: {
            show: false
        },
        splitLine: { //坐标轴在 grid 区域中的分隔线。
            show: false,
        }
    },
    dataZoom: [{
            type: 'slider',
            show: true,
            yAxisIndex: [0],
            right: '1px',
            start: 1,
            end: 36,
            fillerColor: '#1C466A',
            showDetail: false,
            handleSize: '0%',
            zoomLock: true,
            borderColor: 'rgba(167,183,204,0)',
            width: 8,
        },
        {
            type: 'inside',
            yAxisIndex: [0],
            start: 1,
            end: 36,
            zoomOnMouseWheel: false,
            moveOnMouseMove: false,
            moveOnMouseWheel: true
        }
    ],
    series: [{
        name: "车辆",
        data: [{
            value: [5, 5],
            name: "G253678",
            paizi: "广汽丰田",
            luntai: "故障",
            shache: "故障",
            yugua: "正常",
            dfbl: "正常"
        }, {
            value: [15, 5],
            name: "G251248",
            paizi: "广汽丰田",
            luntai: "故障",
            shache: "正常",
            yugua: "故障",
            dfbl: "故障"
        }, {
            value: [25, 5],
            name: "G253624",
            paizi: "广汽丰田",
            luntai: "故障",
            shache: "正常",
            yugua: "正常",
            dfbl: "正常"
        }, {
            value: [35, 5],
            name: "G250212",
            paizi: "广汽丰田",
            luntai: "故障",
            shache: "正常",
            yugua: "正常",
            dfbl: "正常"
        }, {
            value: [45, 5],
            name: "G253313",
            paizi: "广汽丰田",
            luntai: "故障",
            shache: "故障",
            yugua: "正常",
            dfbl: "正常"
        }, {
            value: [55, 5],
            name: "G253625",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "故障",
            yugua: "正常",
            dfbl: "正常"
        }, {
            value: [65, 5],
            name: "G253520",
            paizi: "广汽丰田",
            luntai: "故障",
            shache: "正常",
            yugua: "正常",
            dfbl: "正常"
        }, {
            value: [75, 5],
            name: "G253775",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "故障",
            yugua: "故障",
            dfbl: "正常"
        }, {
            value: [85, 5],
            name: "G253668",
            paizi: "广汽丰田",
            luntai: "故障",
            shache: "正常",
            yugua: "正常",
            dfbl: "正常"
        }, {
            value: [95, 5],
            name: "G251235",
            paizi: "广汽丰田",
            luntai: "故障",
            shache: "故障",
            yugua: "故障",
            dfbl: "正常"
        }, {
            value: [5, 13],
            name: "G253312",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "正常",
            dfbl: "正常"
        }, {
            value: [15, 13],
            name: "G253641",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "正常",
            dfbl: "故障"
        }, {
            value: [25, 13],
            name: "G253625",
            paizi: "广汽丰田",
            luntai: "故障",
            shache: "故障",
            yugua: "正常",
            dfbl: "故障"
        }, {
            value: [35, 13],
            name: "G253641",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "故障",
            dfbl: "正常"
        }, {
            value: [45, 13],
            name: "G253645",
            paizi: "广汽丰田",
            luntai: "故障",
            shache: "正常",
            yugua: "正常",
            dfbl: "故障"
        }, {
            value: [55, 13],
            name: "G253612",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "正常",
            dfbl: "故障"
        }, {
            value: [65, 13],
            name: "G253645",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "正常",
            dfbl: "正常"
        }, {
            value: [75, 13],
            name: "G253612",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "故障",
            dfbl: "正常"
        }, {
            value: [5, 21],
            name: "G253612",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "故障",
            dfbl: "正常"
        }, {
            value: [5, 29],
            name: "G253612",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "故障",
            dfbl: "正常"
        }, {
            value: [5, 37],
            name: "G253612",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "故障",
            dfbl: "正常"
        }, {
            value: [5, 45],
            name: "G253612",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "故障",
            dfbl: "正常"
        }, {
            value: [5, 53],
            name: "G253612",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "故障",
            dfbl: "正常"
        }, {
            value: [5, 61],
            name: "G253612",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "故障",
            dfbl: "正常"
        }, {
            value: [5, 69],
            name: "G253612",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "故障",
            dfbl: "正常"
        }, {
            value: [5, 77],
            name: "G253612",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "故障",
            dfbl: "正常"
        }, {
            value: [5, 85],
            name: "G253612",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "故障",
            dfbl: "正常"
        }],
        symbol: "rect",
        type: "scatter",
        hoverAnimation: false,
        zlevel: 3,
        symbolSize: [123, 67],
        label: {
            normal: {
                show: true,
                formatter: function(param) {
                    return param.data.name;
                },
                position: "insideLeft",
                fontSize: 16,
                color: "#fff"
            }
        },
        itemStyle: {
            normal: {
                opacity: 1,
                color: "#3E9A9D",
                barBorderRadius: "100"
            },
            emphasis: {
                color: "#DC5F51",
                opacity: 0
            }
        }
    }, {
        name: "车辆",
        data: [{
            value: [5, 5],
            name: "G253678",
            paizi: "广汽丰田",
            luntai: "故障",
            shache: "故障",
            yugua: "正常",
            dfbl: "正常"
        }, {
            value: [15, 5],
            name: "G251248",
            paizi: "广汽丰田",
            luntai: "故障",
            shache: "正常",
            yugua: "故障",
            dfbl: "故障"
        }, {
            value: [25, 5],
            name: "G253624",
            paizi: "广汽丰田",
            luntai: "故障",
            shache: "正常",
            yugua: "正常",
            dfbl: "正常"
        }, {
            value: [35, 5],
            name: "G250212",
            paizi: "广汽丰田",
            luntai: "故障",
            shache: "正常",
            yugua: "正常",
            dfbl: "正常"
        }, {
            value: [45, 5],
            name: "G253313",
            paizi: "广汽丰田",
            luntai: "故障",
            shache: "故障",
            yugua: "正常",
            dfbl: "正常"
        }, {
            value: [55, 5],
            name: "G253625",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "故障",
            yugua: "正常",
            dfbl: "正常"
        }, {
            value: [65, 5],
            name: "G253520",
            paizi: "广汽丰田",
            luntai: "故障",
            shache: "正常",
            yugua: "正常",
            dfbl: "正常"
        }, {
            value: [75, 5],
            name: "G253775",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "故障",
            yugua: "故障",
            dfbl: "正常"
        }, {
            value: [85, 5],
            name: "G253668",
            paizi: "广汽丰田",
            luntai: "故障",
            shache: "正常",
            yugua: "正常",
            dfbl: "正常"
        }, {
            value: [95, 5],
            name: "G251235",
            paizi: "广汽丰田",
            luntai: "故障",
            shache: "故障",
            yugua: "故障",
            dfbl: "正常"
        }, {
            value: [5, 13],
            name: "G253312",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "正常",
            dfbl: "正常"
        }, {
            value: [15, 13],
            name: "G253641",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "正常",
            dfbl: "故障"
        }, {
            value: [25, 13],
            name: "G253625",
            paizi: "广汽丰田",
            luntai: "故障",
            shache: "故障",
            yugua: "正常",
            dfbl: "故障"
        }, {
            value: [35, 13],
            name: "G253641",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "故障",
            dfbl: "正常"
        }, {
            value: [45, 13],
            name: "G253645",
            paizi: "广汽丰田",
            luntai: "故障",
            shache: "正常",
            yugua: "正常",
            dfbl: "故障"
        }, {
            value: [55, 13],
            name: "G253612",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "正常",
            dfbl: "故障"
        }, {
            value: [65, 13],
            name: "G253645",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "正常",
            dfbl: "正常"
        }, {
            value: [75, 13],
            name: "G253612",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "故障",
            dfbl: "正常"
        }, {
            value: [5, 21],
            name: "G253612",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "故障",
            dfbl: "正常"
        }, {
            value: [5, 29],
            name: "G253612",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "故障",
            dfbl: "正常"
        }, {
            value: [5, 37],
            name: "G253612",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "故障",
            dfbl: "正常"
        }, {
            value: [5, 45],
            name: "G253612",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "故障",
            dfbl: "正常"
        }, {
            value: [5, 53],
            name: "G253612",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "故障",
            dfbl: "正常"
        }, {
            value: [5, 61],
            name: "G253612",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "故障",
            dfbl: "正常"
        }, {
            value: [5, 69],
            name: "G253612",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "故障",
            dfbl: "正常"
        }, {
            value: [5, 77],
            name: "G253612",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "故障",
            dfbl: "正常"
        }, {
            value: [5, 85],
            name: "G253612",
            paizi: "广汽丰田",
            luntai: "正常",
            shache: "正常",
            yugua: "故障",
            dfbl: "正常"
        }],
        hoverAnimation: false,
        symbol: "rect",
        type: "scatter",
        zlevel: 2,
        symbolSize: [123, 67],
        label: {
            normal: {
                show: true,
                formatter: function(param) {
                    return param.data.name;
                },
                position: "insideLeft",
                fontSize: 16,
                color: "#fff"
            }
        },
        itemStyle: {
            normal: {
                opacity: 1,
                color: "#DC5F51"
            }
        }
    }]
}