echarts_自定义实现x-range图

最新推荐文章于 2022-09-28 16:28:49 发布

lianflower

最新推荐文章于 2022-09-28 16:28:49 发布

阅读量1.6k

点赞数 4

本文链接：https://blog.csdn.net/lianflower/article/details/104267355

版权

echarts 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

效果展示
在这里插入图片描述

echarts版本：4.6.0
完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../js/echarts.js"></script>
    <title>Title</title>
</head>
<body>
<div id="main" style="width: 800px;height: 500px;border: solid 1px;"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));

    var data = [];
    var dataCount = 10;
    var startTime = +new Date();//开始时间为当前时间，+号用于将日期类型转换为number类型，这里是转换为日期对应的毫秒值
    var categories = ['categoryA', 'categoryB', 'categoryC'];
    var types = [
        {name: 'JS Heap', color: '#7b9ce1'},
        {name: 'Documents', color: '#bd6d6c'},
        {name: 'Nodes', color: '#75d874'},
        {name: 'Listeners', color: '#e0bc78'},
        {name: 'GPU Memory', color: '#dc77dc'},
        {name: 'GPU', color: '#72b362'}
    ];
    //组装数据
    //遍历categories数组
    echarts.util.each(categories, function (category, index) {//category为数组中的每个元素，index为元素对应的索引
        //开始时间
        var baseTime = startTime;
        //为categories数组中的每个元素生成10个对应的元素，并追加到data中
        for (var i = 0; i < dataCount; i++) {
            //随机生成数据项类型     Math.round(随机生成的索引)：对随机生成的索引进行四舍五入，达到取整的效果
            var typeItem = types[Math.round(Math.random() * (types.length - 1))];
            //随机生成持续时间       Math.round(随机生成的持续时间)：对随机生成的持续时间进行四舍五入，达到取整的效果
            var duration = Math.round(Math.random() * 10000);
            data.push({
                //数据项类型对应的名称
                name: typeItem.name,
                value: [
                    index,//categories数组中的元素索引
                    baseTime,//开始时间
                    baseTime += duration,//结束时间
                    duration //持续时间
                ],
                itemStyle: {
                    normal: {
                        //使用数据项类型对应的color，作为颜色样式
                        color: typeItem.color
                    }
                }
            });
            //在startTime的基础上更新开始时间
            baseTime += Math.round(Math.random() * 2000);

        }
    });

    function renderItem(params, api) {//params为data中的数据项的信息对象    api中是一些开发者可调用的方法集合，可以对data中的数据项进行操作
        var categoryIndex = api.value(0);//取出data中数据项的第一个维度的值
        //开始时间(在屏幕上的像素值)
        var start = api.coord([api.value(1), categoryIndex]);//将数据项中的数值对应的坐标系上的点，转换为屏幕上的像素值
                                                            //坐标系上的点：是数据项映射到坐标系的x轴和y轴后，对应的位置
                                                            //屏幕上的像素值：是坐标系上的点，在屏幕上的位置
        //结束时间(在屏幕上的像素值)
        var end = api.coord([api.value(2), categoryIndex]);
        //设置图形的高度
        var height = api.size([0, 1])[1] * 0.6;//获得Y轴上数值范围为1的一段所对应的像素长度；这是官方文档的注释，对于api.size()方法，目前我还不是很理解；先做个标记??? 以后再说

        //使用graphic图形元素组件，绘制矩形
        //clipRectByRect方法，在绘制矩形时，如果矩形大小超出了当前坐标系的包围盒，则裁剪这个矩形
        var rectShape = 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
        });
        //设置绘制的矩形的元素定义
        return rectShape && {
            //类型为矩形
            type: 'rect',
            //具体形状
            shape: rectShape,
            //样式    api.style()会获取option中itemStyle的配置
            style: api.style()
        };
    }

    myChart.setOption({
        tooltip: {
            //自定义提示信息
            formatter: function (params) {//params为当前点击图形元素的数据信息的对象
                //params.marker为标记小圆点   params.name为数据项的名称  params.value[3]为数据项中value数据的第4个元素，即持续时间
                return params.marker + params.name + ': ' + params.value[3] + ' ms';
            }
        },
        title: {
            text: 'Profile',
            left: 'center'
        },
        dataZoom: [
            {
                //区域缩放组件的类型为滑块，默认作用在x轴上
                type: 'slider',
                //区域缩放组件的过滤模式，weakFilter：在进行区域缩放时，允许图形的一部分在坐标系上(可见)，另一部分在坐标系外(隐藏)
                filterMode: 'weakFilter',
                showDataShadow: false,
                top: 400,
                height: 10,
                //区域缩放组件边框颜色
                borderColor: 'transparent',
                //区域缩放组件边框背景
                backgroundColor: '#e2e2e2',
                //区域缩放组件上的手柄的样式
                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.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
                //手柄大小
                handleSize:20,
                //为手柄设置阴影效果
                handleStyle: {
                    shadowBlur: 6,
                    shadowOffsetX: 1,
                    shadowOffsetY: 2,
                    shadowColor: '#aaa'
                },
                labelFormatter: ''

            },
            {
                //区域缩放组件的类型为内置在坐标系中，默认作用在x轴的坐标系中
                type: 'inside',
                //区域缩放组件的过滤模式，weakFilter：在进行区域缩放时，允许图形的一部分在坐标系上(可见)，另一部分在坐标系外(隐藏)
                filterMode: 'weakFilter'
            }
        ],
        //图表底板
        grid: {
            height: 300
        },
        xAxis: {
            min: startTime,
            //是否是脱离0值比例，设置成true后坐标刻度不会强制包含零刻度。只有当x轴类型为数值轴时才有效，x轴的类型默认为数值轴，即type: 'value'
            scale: true,
            //x轴样式
            axisLabel: {
                formatter: function (val) {//因为没有为x轴设置数值数据，只设置了最小值min，
                    //所以var的初始值为min，之后会进行有序递增
                    return Math.max(0, val - startTime) + ' ms';
                }
            }
        },
        yAxis: {
            data: categories
        },
        series: [
            {
                type: 'custom',
                //使用自定义的图形元素
                renderItem: renderItem,
                itemStyle: {
                    //透明度
                    opacity: 0.8
                },
                encode: {
                    //将维度1和维度2的数据映射到x轴
                    x: [1, 2],
                    //将维度0的数据映射到y轴
                    y: 0
                },
                data: data
            }
        ]
    });
</script>
</body>
</html>

参考：https://www.echartsjs.com/zh/tutorial.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%B3%BB%E5%88%97
说明：
代码中的注释，有些是照抄的官方文档，有些是加入了自己的理解。
echarts版本4.6.0下载
链接：https://pan.baidu.com/s/13QOCMbO0H_T_9P9AxS3_tw
提取码：b042

注意点：
在这里插入图片描述

lianflower

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
echarts_自定义实现x-range图

完整代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="../js/echarts.js"></script> <title>Title</title>&lt...
复制链接

扫一扫