当前位置： 文江博客话题详情

x轴(xAxis)为time时，使用dataZoom上下滚动grid时，axisLabel设置rotate被旋转？

发布于 2022-09-11 23:07:31 字数 11816 浏览 17 评论 0

需要做一个任务进度甘特图，用到了echarts v4.3，x轴为time类型，但是由于刻度比较多，很容易重叠，所以打算把label旋转40°，这样就能节省不少空间。但是在加入dataZoom后，上下滚动滚动条时，发现label变成了负角度了。

aaa.png
bbb.png

静态页面完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="main" style="width: 100%; height: 500px;"></div>
</body>
</html>

<script src="https://cdn.bootcss.com/echarts/4.3.0/echarts.min.js"></script>

<script type="text/javascript">

var HEIGHT_RATIO = 0.5;
var DIM_CATEGORY_INDEX = 0;//类目索引
var DIM_TIME_START = 1;//抵达时间
var DIM_TIME_END = 2;//起飞时间
var DIM_TIME_DELAY = 3;//超时时间
var DIM_TASK_NO = 5;//任务编号索引
var DATA_ZOOM_AUTO_MOVE_THROTTLE = 30;
var DATA_ZOOM_X_INSIDE_INDEX = 1;
var DATA_ZOOM_Y_INSIDE_INDEX = 3;
var DATA_ZOOM_AUTO_MOVE_SPEED = 0.2;
var DATA_ZOOM_AUTO_MOVE_DETECT_AREA_WIDTH = 30;

var _rawData;
var _autoDataZoomAnimator;

let datasTemp = [
    {
        "CreateUserId": "111-111-111", 
        "CreateUserName": "小A", 
        "DeptName": "软件部门",
        "Num": "100000",
        "TaskNo": "RW201910220014",
        "TaskTitle": "任务一",
        "TaskStartTime": "2018-10-17",
        "TaskEndTime": "2018-10-19",
        "TaskDelayTime": "2018-10-20"
    },
    {
        "CreateUserId": "111-111-111", 
        "CreateUserName": "小A", 
        "DeptName": "软件部门",
        "Num": "100000",
        "TaskNo": "RW201910220015",
        "TaskTitle": "任务三",
        "TaskStartTime": "2018-10-14",
        "TaskEndTime": "2018-10-21",
        "TaskDelayTime": "2018-10-23"
    },
    {
        "CreateUserId": "111-111-111", 
        "CreateUserName": "小A", 
        "DeptName": "软件部门",
        "Num": "100000",
        "TaskNo": "RW201910220016",
        "TaskTitle": "任务四",
        "TaskStartTime": "2018-10-14",
        "TaskEndTime": "2018-10-20",
        "TaskDelayTime": "2018-10-22"
    },
    {
        "CreateUserId": "222-222-222", 
        "CreateUserName": "小张", 
        "DeptName": "软件部门",
        "Num": "100000",
        "TaskNo": "RW201910220017",
        "TaskTitle": "任务五",
        "TaskStartTime": "2018-10-18",
        "TaskEndTime": "2018-10-28",
        "TaskDelayTime": "2018-10-29"
    },
    {
        "CreateUserId": "222-222-222", 
        "CreateUserName": "小张", 
        "DeptName": "软件部门",
        "Num": "100000",
        "TaskNo": "RW201910220018",
        "TaskTitle": "任务六",
        "TaskStartTime": "2018-10-13",
        "TaskEndTime": "2018-10-21",
        "TaskDelayTime": "2018-10-22"
    },
    {
        "CreateUserId": "222-222-222", 
        "CreateUserName": "小张", 
        "DeptName": "软件部门",
        "Num": "100000",
        "TaskNo": "RW201910220019",
        "TaskTitle": "任务七",
        "TaskStartTime": "2018-11-16",
        "TaskEndTime": "2018-11-19",
        "TaskDelayTime": "2018-11-22"
    },
    {
        "CreateUserId": "222-222-222", 
        "CreateUserName": "小张", 
        "DeptName": "软件部门",
        "Num": "100000",
        "TaskNo": "RW201910220020",
        "TaskTitle": "任务九",
        "TaskStartTime": "2018-10-12",
        "TaskEndTime": "2018-10-20",
        "TaskDelayTime": "2018-10-23"
    },
    {
        "CreateUserId": "ccc-ccc-ccc", 
        "CreateUserName": "王五", 
        "DeptName": "软件部门",
        "Num": "100000",
        "TaskNo": "RW201910220021",
        "TaskTitle": "任务十一",
        "TaskStartTime": "2018-10-13",
        "TaskEndTime": "2018-10-19",
        "TaskDelayTime": "2018-10-20"
    },
    {
        "CreateUserId": "ccc-ccc-ccc", 
        "CreateUserName": "王五", 
        "DeptName": "软件部门",
        "Num": "100000",
        "TaskNo": "RW201910220022",
        "TaskTitle": "任务十三",
        "TaskStartTime": "2018-10-14",
        "TaskEndTime": "2018-10-18",
        "TaskDelayTime": "2018-10-19"
    },
    {
        "CreateUserId": "444-444-444", 
        "CreateUserName": "李四", 
        "DeptName": "软件部门",
        "Num": "100000",
        "TaskNo": "RW201910220023",
        "TaskTitle": "任务十五",
        "TaskStartTime": "2018-10-16",
        "TaskEndTime": "2018-10-21",
        "TaskDelayTime": "2018-10-22"
    },
    {
        "CreateUserId": "444-444-444", 
        "CreateUserName": "李四", 
        "DeptName": "软件部门",
        "Num": "100000",
        "TaskNo": "RW201910220024",
        "TaskTitle": "任务十七",
        "TaskStartTime": "2018-10-11",
        "TaskEndTime": "2018-10-14",
        "TaskDelayTime": "2018-10-15"
    },
    {
        "CreateUserId": "555-555-555", 
        "CreateUserName": "张三", 
        "DeptName": "软件部门",
        "Num": "100000",
        "TaskNo": "RW201910220025",
        "TaskTitle": "任务十九",
        "TaskStartTime": "2018-10-3",
        "TaskEndTime": "2018-10-8",
        "TaskDelayTime": "2018-10-10"
    }
]

let datas = {
    "taskTitle": {
        "dimensions": ["Name"],
        "data": datasTemp.map(s => s.TaskNo)
    },
    "taskDatas": {
        "dimensions": [
            "索引",
            "开始时间",
            "结束时间",
            "延期至",
            "任务标题",
            "任务流水号",
        ],
        "data": datasTemp.map((item, idx) => {
            return [idx, item.TaskStartTime, item.TaskEndTime, item.TaskDelayTime, item.TaskTitle, item.TaskNo]
        })
    }
}


var myChart = echarts.init(document.getElementById('main'));
_rawData = datas;
myChart.setOption(option = makeOption());

function makeOption() {
    return {
        tooltip: {
        },
        animation: false,
        title: {
            text: '任务概况图',
            left: 'center'
        },
        dataZoom: [{ //交互组件
            type: 'slider',
            xAxisIndex: 0,
            filterMode: 'weakFilter',
            height: 20,
            bottom: 0,
            start: 0,
            end: 26,
            handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            showDetail: false
        }, {
            type: 'inside',
            id: 'insideX',
            xAxisIndex: 0,
            filterMode: 'weakFilter',
            start: 0,
            end: 26,
            zoomOnMouseWheel: false,
            moveOnMouseMove: true
        }, {
            type: 'slider',
            yAxisIndex: 0,
            zoomLock: true,
            width: 10,
            right: 10,
            top: 70,
            bottom: 20,
            start: 10,
            end: 100, 
            handleSize: 0,
            showDetail: false,
        }, {
            type: 'inside',
            id: 'insideY',
            yAxisIndex: 0,
            start: 95,
            end: 100,
            zoomOnMouseWheel: false,
            moveOnMouseMove: true,
            moveOnMouseWheel: true
        }],
        grid: { //表格对象
            show: true,
            top: 70,
            bottom: 20,
            left: 130,
            right: 20,
            borderWidth: 0
        },
        xAxis: {
            type: 'time',
            splitNumber: 24,
            position: 'top',
            splitLine: {
                lineStyle: {
                    color: ['#E9EDFF']
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                lineStyle: {
                    color: '#929ABA'
                }
            },
            axisLabel: {
                color: '#929ABA',
                align: 'left',
                rotate: 20
            },
        },
        yAxis: {
            axisTick: {show: false},
            splitLine: {show: false},
            axisLine: {show: false},
            axisLabel: {show: false},
            min: 0,
            max: _rawData.taskTitle.data.length
        },
        series: [{
            id: 'taskData',
            type: 'custom',
            renderItem: renderGanttItem,
            dimensions: _rawData.taskDatas.dimensions,
            encode: {
                x: [DIM_TIME_START, DIM_TIME_END, DIM_TIME_DELAY],
                y: DIM_CATEGORY_INDEX,
                tooltip: [DIM_TASK_NO, 4, DIM_TIME_START, DIM_TIME_END, DIM_TIME_DELAY]
            },
            data: _rawData.taskDatas.data
        }, {
            type: 'custom',
            renderItem: renderAxisLabelItem,
            dimensions: _rawData.taskTitle.dimensions,
            encode: {
                x: -1, // Then this series will not controlled by x.
                y: 0
            },
            data: echarts.util.map(_rawData.taskTitle.data, function (item, index) {
                return [index].concat(item);
            })
        }]
    };
}

function renderGanttItem(params, api) {
    var categoryIndex = api.value(DIM_CATEGORY_INDEX);
    var timeStart = api.coord([api.value(DIM_TIME_START), categoryIndex]);
    var timeEnd = api.coord([api.value(DIM_TIME_END), categoryIndex]);
    var timeDelay = api.coord([api.value(DIM_TIME_DELAY), categoryIndex]);

    var barLength = timeDelay[0] - timeStart[0];
    var normalBarLength = timeEnd[0] - timeStart[0];
    // Get the heigth corresponds to length 1 on y axis.
    var barHeight = api.size([0, 1])[1] * HEIGHT_RATIO;
    var x = timeStart[0];
    var y = timeStart[1] - barHeight;

    var taskName = api.value(4) + '';
    var taskNameWidth = echarts.format.getTextRect(taskName).width;
    var text = (barLength > taskNameWidth + 40 && x + barLength >= 180)
        ? taskName : '';

    var rectDelay = clipRectByRect(params, {
        x: x, y: y, width: barLength, height: barHeight
    });
    var rectNormal = clipRectByRect(params, {
        x: x, y: y, width: normalBarLength, height: barHeight
    })
    var rectText = clipRectByRect(params, {
        x: x, y: y, width: barLength, height: barHeight
    });

    return {
        type: 'group',
        children: [
            {
                type: 'rect',
                ignore: !rectDelay,
                shape: rectDelay,
                style: api.style()
            }, 
            {
                type: 'rect',
                ignore: !rectNormal,
                shape: rectNormal,
                style: api.style({fill: 'green'})//甘特图条左侧部分
            }, 
            {
                type: 'rect',
                ignore: !rectText,
                shape: rectText,
                style: api.style({
                    fill: 'transparent',
                    stroke: 'transparent',
                    text: text,
                    textFill: '#fff'
                })
            }
        ]
    };
}

function renderAxisLabelItem(params, api) {
    var y = api.coord([0, api.value(0)])[1];
    if (y < params.coordSys.y + 5) {
        return;
    }
    return {
        type: 'group',
        position: [
            10,
            y
        ],
        children: [
            {
                type: 'text',
                style: {
                    x: 0,
                    y: -3,
                    text: api.value(1),
                    textVerticalAlign: 'bottom',
                    textAlign: 'left',
                    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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

遗忘曾经

暂无简介

0 文章
0 评论
21 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

lioqio

文章 0 评论 0

Single

文章 0 评论 0

禾厶谷欠

文章 0 评论 0

alipaysp_2zg8elfGgC

文章 0 评论 0

qq_N6d4X7

文章 0 评论 0

放低过去

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文