echarts甘特图 一个值多条线

news2024/10/7 16:25:40

 先看图

 

这里我们用到的是 series ：type:custom  自定义，但是这里我遇到一个问题，就是不过你在series里push多少数据，图表上显示的都是在同一水平线，用了好多方法都不好使，

renderItem: (params, api) => {
                //开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的
                var categoryIndex = api.value(0); //这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
                var start = api.coord([api.value(1), categoryIndex]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
                var end = api.coord([api.value(2), categoryIndex]);

                var height = 10;
                return {
                    type: "rect", // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
                    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(),
                };
            },

图： 重叠在一起 ，

 最后用了最后使用了里面renderItem 返回的 y轴定位解决的（有好的方法可以和我说）。

renderItem: (params, api) => {
                //开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的
                var categoryIndex = api.value(0); //这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
                var start = api.coord([api.value(1), categoryIndex]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
                var end = api.coord([api.value(2), categoryIndex]);

                var height = 10;
                return {
                    type: "rect", // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
                    y:10,
                    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(),
                };
            },

全部代码

<template>
    <div ref="echart" id="echart" class="echart"></div>
</template>


<script setup>
import { nextTick, onMounted, ref } from "vue";
import * as echarts from "echarts";

let showData = [
    [
        {
            value: [0, "2021-07-19 03:29:19", "2021-07-19 08:38:50", 0],
        },
        {
            value: [0, "2021-07-19 20:53:07", "2021-07-19 21:00:08", 1],
        },
    ],
    [
        {
            value: [0, "2021-07-19 00:00:00", "2021-07-19 00:08:02", 0],
        },
        {
            value: [0, "2021-07-19 01:38:37", "2021-07-19 01:50:08", 1],
        },

        {
            value: [0, "2021-07-19 22:31:30", "2021-07-19 22:44:13", 2],
        },
        {
            value: [1, "2021-07-19 20:53:07", "2021-07-19 11:00:08", 0],
        },

        {
            value: [1, "2021-07-19 22:31:30", "2021-07-19 22:44:13", 0],
        },
    ],
    [
        {
            value: [0, "2021-07-19 03:21:54", "2021-07-19 03:33:30", 0],
        },
        {
            value: [0, "2021-07-19 05:03:56", "2021-07-19 05:17:26", 1],
        },
        {
            value: [0, "2021-07-19 06:45:45", "2021-07-19 06:59:49", 2],
        },
        {
            value: [1, "2021-07-19 06:53:07", "2021-07-19 11:00:08", 0],
        },
        {
            value: [1, "2021-07-19 12:00:30", "2021-07-19 14:44:13", 1],
        },
    ],
];

// 分配y值
const produceSeries = (data) => {
    let len = data.length;
    let step = len % 2 == 1 ? -5 : 2;
    let series = [];
    data.map((val, index) => {
        if (step == -5) {
            series.push(configSeriec(val, index, 0));
            step = step + 15;
            return;
        }
        if (index % 2 == 0) {
            series.push(configSeriec(val, index, step));
            step = step + 15;
        } else {
            series.push(configSeriec(val, index, -step));
            step = step + 15;
        }
    });

    function configSeriec(val, index, step) {
        return {
            type: "custom",
            renderItem: (params, api) => {
                //开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的
                var categoryIndex = api.value(0); //这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
                var start = api.coord([api.value(1), categoryIndex]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
                var end = api.coord([api.value(2), categoryIndex]);

                var height = 10;
                return {
                    type: "rect", // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
                    y: step,
                    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], // data 中『维度1』和『维度2』对应到 X 轴
                y: 0, // data 中『维度0』对应到 Y 轴
            },
            itemStyle: {
                normal: {
                    color: function (params) {
                        //return colorTheme[params.value[0]];
                        return colorTheme[index];
                    },
                },
            },
            data: val,
        };
    }
    return series;
};

let option = {
    title: {
        text: "我是标题",
        x: "center",
        textStyle: {
            fontSize: 20,
            color: "#333333",
        },
    },
    tooltip: {
        enterable: true,
        backgroundColor: "rgba(255,255,255,1)", //背景颜色（此时为默认色）
        borderRadius: 5, //边框圆角
        padding: 10, // [5, 10, 15, 20] 内边距
        textStyle: {
            color: "#000",
        },
        position: function (point, params, dom, rect, size) {
            dom.innerHTML = params.value[1] + "~" + params.value[2];
        },
    },

    legend: {
        //图例
        data: "我是图例",
        left: "90px",
        top: 22,
        itemWidth: 16,
        itemHeight: 16,
        selectedMode: false, // 图例设为不可点击
        textStyle: {
            color: "#333333",
            fontSize: 16,
        },
    },
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {},
        },
    },
    xAxis: {
        name: "场景时间",
        nameTextStyle: {
            color: "#333333",
            fontSize: 18,
        },
        type: "time",
        splitNumber: 6,
        max: "2021-07-20 00:00:00",
        min: "2021-07-19 00:00:00", //将data里最小时间的整点时间设为min,否则min会以data里面的min为开始进行整点递增
        axisLabel: {
            show: true,

            formatter: function (value) {
                //在这里写你需要的时间格式
                var t_date = new Date(value);
                return (
                    [
                        t_date.getFullYear(),
                        t_date.getMonth() + 1,
                        t_date.getDate(),
                    ].join("-") +
                    " " +
                    [t_date.getHours(), t_date.getMinutes()].join(":")
                );
            },
        },

        splitLine: {
            show: true,
            lineStyle: {
                color: "#333333",
            },
        },
        axisLine: {
            show: true,
            color: "#333333",
            symbol: ["none", "arrow"],
            lineStyle: {
                color: "#333333",
                width: 1,
                type: "solid",
            },
        },
    },
    yAxis: {
        name: "y轴",
        nameTextStyle: {
            color: "#333333",
            fontSize: 18,
        },
        axisLine: {
            color: "#333333",
            lineStyle: {
                color: "#333333",
            },
            symbol: ["none", "arrow"],
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: "#333333", //这里用参数代替了
            },
        },
        data: ["图例", "图例2"],
    },
    dataZoom: [
        {
            show: true,
            realtime: true,
            start: 0,
            end: 100,
            xAxisIndex: [0, 1],
        },
        {
            type: "inside",
            realtime: true,
            start: 30,
            end: 70,
            xAxisIndex: [0, 1],
        },
    ],
    series: produceSeries(showData),
};

let echart = ref();
onMounted(() => {
    nextTick(() => {
        console.log(echart.value);
        let myChart = echarts.init(echart.value);
        myChart.setOption(option);
    });
});
</script>
<style  lang="less">
.echart {
    width: 100%;
    height: 600px;
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/851268.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ModaHub魔搭社区——GPTCache 的工作原理

ModaHub魔搭社区——GPTCache 的工作原理

GPTCache 模块化的架构设计方便用户定制个性化语义缓存。每个模块都提供多种选择，适合各种应用场景。 大语言模型适配器: 适配器将大语言模型请求转换为缓存协议，并将缓存结果转换为 LLM 响应。适配器方便轻松集成所有大语言模型，并可灵活扩展。GPTCache 支持多种大语言模型…
阅读更多...
【雕爷学编程】Arduino动手做（199）---8x32位WS2812B全彩屏模块4

【雕爷学编程】Arduino动手做（199）---8x32位WS2812B全彩屏模块4

37款传感器与模块的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&#x…
阅读更多...
如何构建高级的浅色和深色主题切换

如何构建高级的浅色和深色主题切换

通过这个实例我们主要是掌握如下知识点 灵活使用 CSS 变量使用 JS 获取 CSS 变量灵活使用 CSS 的transform和transition属性 效果图 实现页面布局 从效果图我们首先可以实现页面的大致布局&#xff0c;具体的代码如下&#xff1a; <h2 class"main-title">主…
阅读更多...
接口测试总结分享（http与rpc）

接口测试总结分享（http与rpc）

接口测试是测试系统组件间接口的一种测试。接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点。测试的重点是要检查数据的交换&#xff0c;传递和控制管理过程&#xff0c;以及系统间的相互逻辑依赖关系等。 一、了解一下HTTP与RPC 1. HTTP&#xff08;H…
阅读更多...
Stable Diffuion webui Mac版本安装过程

Stable Diffuion webui Mac版本安装过程

系统环境 操作系统&#xff1a;MacOS Ventura13.5 芯片&#xff1a;Apple M2 Max Python: 3.10 安装前置准备 git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui.git注意事项&#xff1a;修改源码内全部 git clone 链接&#xff0c;设置代理 https://ghpr…
阅读更多...
C++——模板简要介绍

C++——模板简要介绍

首先给出一个栈的类 class Stack { public:Stack(size_t capacity 4)//不传入值则就默认4个空间&#xff0c;&#xff08;构造函数&#xff09;{cout << "Stack(size_t n 4)" << endl;_a new DataType[capacity];_capacity capacity;_top 0;}~Stac…
阅读更多...
【雕爷学编程】Arduino动手做（199）---8x32位WS2812B全彩屏模块3

【雕爷学编程】Arduino动手做（199）---8x32位WS2812B全彩屏模块3

37款传感器与模块的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&#x…
阅读更多...
【Vue3】插槽全家桶

【Vue3】插槽全家桶

插槽&#xff08;Slots&#xff09;是 Vue.js 框架中的一个功能&#xff0c;允许在组件内部预留一些可替换的内容。通过插槽&#xff0c;可以给父组件填充模板代码&#xff0c;让父组件向子组件传递自定义的内容&#xff0c;以便在子组件中进行展示或处理。 1. 匿名插槽 Son.…
阅读更多...
使用chatGPT应用于人力资源行业

使用chatGPT应用于人力资源行业

在当今快速发展的技术环境中&#xff0c;人力资源专业人员保持技术领先和意识领先至关重要。采用创新工具&#xff0c;如OpenAI的ChatGPT&#xff0c;充分利用其强大的力量&#xff0c;可能会改变整个行业的游戏规则。 提高招聘流程的人力效率 如果能够实现招聘流程自动化&am…
阅读更多...
[HDBits] Exams/m2014 q4h

[HDBits] Exams/m2014 q4h

Implement the following circuit: module top_module (input in,output out);assign outin; endmodule
阅读更多...
halcon 学习笔记

halcon 学习笔记

图像的参数 图形参数 Iconic, 包括 image, region, XLD 1.1 image 图像由一个或者多个通道组成&#xff0c;是大小相同的矩阵&#xff0c;包含各种像素类型的灰度值 在图像显示界面&#xff0c;按ctrl健&#xff0c;可以查看当前的像素值 灰度图 一个通道像素点存放在一个矩…
阅读更多...
文件的加密与解密

文件的加密与解密

将文件内容读入缓冲区&#xff0c;再将缓冲区中接收到的所有数据每一个数据在原来基础上加10&#xff0c;再传回文件中&#xff0c;解密减10即可。&#xff08;在读操作后将文件指针偏移到文件开头进行写操作&#xff09;
阅读更多...
基于springboot+vue的健身房管理系统_bgnk6

基于springboot+vue的健身房管理系统_bgnk6

随着计算机技术发展&#xff0c;计算机系统的应用已延伸到社会的各个领域&#xff0c;大量基于网络的广泛应用给生活带来了十分的便利。所以把健身房管理与现在网络相结合&#xff0c;利用计算机搭建健身房管理系统&#xff0c;实现健身房的信息化。则对于进一步提高健身房管理…
阅读更多...
【雕爷学编程】Arduino动手做（201）---DFRobot 行空板02

【雕爷学编程】Arduino动手做（201）---DFRobot 行空板02

37款传感器与模块的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&#x…
阅读更多...
Vue.js2+Cesium1.103.0 六、标绘与测量

Vue.js2+Cesium1.103.0 六、标绘与测量

Vue.js2Cesium1.103.0 六、标绘与测量 点&#xff0c;线&#xff0c;面的绘制&#xff0c;可实时编辑图形&#xff0c;点击折线或多边形边的中心点&#xff0c;可进行添加线段移动顶点位置等操作&#xff0c;并同时计算出点的经纬度&#xff0c;折线的距离和多边形的面积。 De…
阅读更多...
【机器学习】编码、创造和筛选特征

【机器学习】编码、创造和筛选特征

在机器学习和数据科学领域中&#xff0c;特征工程是提取、转换和选择原始数据以创建更具信息价值的特征的过程。假设拿到一份数据集之后&#xff0c;如何逐步完成特征工程呢&#xff1f; 文章目录 一、特性类型分析1.1 数值型特征1.2 类别型特征1.3 时间型特征1.4 文本型特征1.…
阅读更多...
PHP8的跳转语句-PHP8知识详解

PHP8的跳转语句-PHP8知识详解

如果循环条件满足的时候&#xff0c;则程序会一直执行下去。如果需要强制跳出循环&#xff0c;则需要使用跳转语句来完成。PHP8的跳转语句包括break语句、continue语句和goto语句。 1、break语句 break语句的作用是完全终止循环&#xff0c;包括while、do…while、for、switch…
阅读更多...
linux umask 详解

linux umask 详解

1. umask 定义 在 linux 系统中&#xff0c;umask 被定义在 /etc/profile 配置文件中&#xff0c;有一段 shell 脚本对 umask 是这么定义的。在 shell 会话输入命令&#xff1a; $ cat /etc/profile # 查看 /etc/profile 配置文件的内容 if [ $UID -gt 199 ] &&…
阅读更多...
Prometheus技术文档-概念

Prometheus技术文档-概念

Prometheus是一个开源的项目连接如下&#xff1a; Prometheus首页、文档和下载 - 服务监控系统 - OSCHINA - 中文开源技术交流社区 基本概念&#xff1a; Prometheus是一个开源的系统监控和告警系统&#xff0c;由Google的BorgMon监控系统发展而来。它主要用于监控和度量各种…
阅读更多...
2.本地存储

2.本地存储

2.1本地存储分类- localStorage 1.作用: 可以将数据永久存储在本地(用户的电脑)&#xff0c;除非手动删除&#xff0c;否则关闭页面也会存在 2.特性: ●可以多窗口(页面)共享(同一浏览器可以共享) ●以键值对的形式存储使用&#xff0c;键值除了数字型都要加引号 3.语法 存…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023