Echarts折线图的末尾部分线条虚线

news2024/11/19 14:31:40

原理:等于画了两条线,一条实线一条虚线;把实线的最后的值给虚线;再将提示框进行过滤,防止多个点以及值为空的情况

初步实现参考:

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
     trigger: 'axis',
     axisPointer: {
      type: 'cross'
    }
  },
  series: [
    {
      data: [150, 230, 224, 124, 218, 135],
      type: 'line'
    },
    {
      data: ['-', '-', '-', '-', '-', 135, 260],
      type: 'line',
      lineStyle: {
        type: 'dotted',//'dotted'虚线 'solid'实线
        color: "#F02FC2"
      }
    }
  ]
};

最终实现:

options = {
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var htmlStr = '';
            var valMap = {};
            for (var i = 0; i < params.length; i++) {
              var param = params[i];
              var xName = param.name;//x轴的名称  
              var seriesName = param.seriesName;//图例名称  
              var value = param.value;//y轴值  
              var color = param.color;//图例颜色  

              //过滤无效值
              if (value == '-') {
                continue;
              }

              //过滤重叠值
              if (valMap[seriesName] == value) {
                continue;
              }

              if (i === 0) {
                htmlStr += xName + '<br/>';//x轴的名称  
              }
              htmlStr += '<div>';
              //为了保证和原来的效果一样,这里自己实现了一个点的效果  
              htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';

              //圆点后面显示的文本  
              htmlStr += seriesName + ':' + value;

              htmlStr += '</div>';
              valMap[seriesName] = value;
            }
            return htmlStr;
          },
          axisPointer: {
            type: 'cross',
            label: {
              show: true,
              backgroundColor: "#7B7DDC"
            }
          }
        },
        legend: {
          x: 'center',
          y: '6%',
          // itemWidth: 18, // 图例标记的图形宽度。[ default: 25 ]
          textStyle: {
            color: '#bcf',
            fontSize: 10,
          },
          // icon: 'circle',
          data: ['上游流速', '下游流速', '平均流速']
        },
        grid: {
          right: '5%',
          bottom: '10%',
          left: '2%',
          top: '18%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ["2021", "2022", "2023", "2024", "2025", "2026"],
            name: '时间',
            nameTextStyle: {
              color: '#d4ffff'
            },
            axisLine: {
              lineStyle: {
                color: '#0B4CA9'
              }
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#FFF",
                fontSize: 12,
              },
            },
          }],
        yAxis: [{
          type: 'value',
          name: '次数',
          nameTextStyle: {
            color: '#d4ffff'
          },
          position: 'left',
          axisLine: {
            lineStyle: {
              color: '#0B4CA9'
            }
          },
          splitLine: {
            lineStyle: {
              color: "#0B4CA9",
            }

          },
          axisLabel: {
            color: '#d4ffff',
            fontSize: 12,
          }
        },],
        series: [
          {
            name: '上游流速',
            type: 'line',
            smooth: true,
            yAxisIndex: 0,
            symbol: "circle",
            symbolSize: 5,
            itemStyle: {
              normal: {
                color: "#2EF7F3",
              }
            },
            data: [12, 12, 26, 22, 24, 15]
          },
          {
            name: '下游流速',
            type: 'line',
            smooth: true,
            yAxisIndex: 0,
            symbol: "circle",
            symbolSize: 5,
            itemStyle: {
              normal: {
                color: "#5EBEFC",
              }
            },
            data: [13, 7, 10, 18, 17, 28]
          },
          {
            name: '平均流速',
            type: 'line',
            smooth: true,
            yAxisIndex: 0,
            symbol: "circle",
            symbolSize: 5,
            itemStyle: {
              normal: {
                color: "#9BBEFC",
                lineStyle: {
                  width: 2,
                  // type: 'dotted'  //'dotted'虚线 'solid'实线
                }
              }
            },
            // data: [20, 21, 16, 22, 21, 31]
            data: [20, 21, 16, 22]
          },
          // 平均流速- 末尾虚线
          {
            name: "平均流速",
            type: "line",
            smooth: true,
            barWidth: 10,
            itemStyle: {
              normal: {
                color: "#F02FC2",
                // 最后一个点的边框颜色
                borderWidth: 2,
                lineStyle: {
                  width: 2,
                  type: 'dotted',
                  color: "yellow"//'dotted'虚线 'solid'实线
                }
              }
            },
            data: ["-", "-", "-", 22, 31, 12]
          },
        ]
      }

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

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

相关文章

《低空经济:文旅行业的新引擎 》

《低空经济&#xff1a;文旅行业的新引擎 》 一、低空经济与文旅行业的融合态势 低空经济作为新兴经济形态&#xff0c;正与文旅行业深度融合&#xff0c;为文旅发展带来新机遇。 近年来&#xff0c;随着科技的不断进步和人们对旅游体验的不断追求&#xff0c;低空经济与文旅…

js列表数据时间排序和取唯一值

1.取唯一值[...new Set(array)] const array [1, 2, 3, 2, 4, 5, 3, 5]; // 使用Set去除重复元素 const uniarray [...new Set(array)]; console.log(uniarray); // 输出: [1, 2, 3, 4, 5] 2.排序 var u [1,3,2,5,4]; var uu u.sort(); console.log(uu); var u [1,3…

ACL 2023--MetaAdapt: 通过元学习实现领域自适应的少量样本虚假信息检测

https://github.com/Yueeeeeeee/MetaAdapt 随着社交媒体上出现的新话题&#xff08;例如COVID-19&#xff09;成为虚假信息传播的来源&#xff0c;克服原始训练领域&#xff08;即源领域&#xff09;与这些目标领域之间的分布变化&#xff0c;仍然是虚假信息检测中的一项复杂任…

金三银四:20道前端手写面试题

文章目录 一、前言二、题目1. 防抖节流解读 2.一个正则题3. 不使用a标签&#xff0c;如何实现a标签的功能4. 不使用循环API 来删除数组中指定位置的元素&#xff08;如&#xff1a;删除第三位&#xff09; 写越多越好5. 深拷贝解读 6. 手写call bind applycall 解读apply 解读 …

Chrome无法拖入加载.crx扩展文件(以IDM为例)

问题原因&#xff1a;新版本的Chrome浏览器已不支持加载.crx文件 解决办法&#xff1a;将.crx文件压缩为.zip文件&#xff0c;解压缩后再加载到Chrome中 以IDM的.crx文件作为示例&#xff1b; IDM的.crx文件位于C:\Program Files (x86)\Internet Download Manager; 将IDMGCE…

计算机毕业设计 C语言学习辅导网站的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

记一次实战中对Ruoyi系统的渗透

前言 最近碰到比较多Ruoyi的站&#xff0c;ruoyi的话漏洞还是比较多的&#xff0c;这里就分享一下自己渗透的一些案例吧&#xff0c;方便大家参考学习 首先声明 文章中涉及的敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权…

解决:使用layui.treeTable.updateNode,更新表格数据后,done里面的事件丢失问题

1. 背景 在给树形表格添加行点击事件&#xff0c;并且只更新当前行数据。 treeTable.updateNode("SpeProjListId", result.LAY_DATA_INDEX, result);更新数据后&#xff0c;点击事件失效。 1. 给字段绑定事件&#xff1a; class"link_a link_style" , {…

基于Spring3.0实现AOP的小案例

前言 AOP&#xff08;Aspect Oriented Programming&#xff09;即面向切面编程&#xff0c;是一种通过预编译方式和运行期间动态代理实现程序功能统一维护的技术。针对功能增强的描述&#xff0c;可以理解为&#xff1a;“AOP允许在不修改源代码的情况下&#xff0c;通过定义切…

Java异步编程:从入门到精通

在现代编程实践中&#xff0c;异步编程已成为提升程序性能和用户体验的关键技术。Java&#xff0c;作为一种成熟且广泛使用的编程语言&#xff0c;提供了多种实现异步编程的方法。本文将带你从异步编程的基础知识入手&#xff0c;逐步深入到Java中的异步编程实践。 异步编程简介…

SQL常用数据过滤 - EXISTS运算符

SQL查询中的EXISTS运算符用于检查查询子句是否存在满足特定条件的记录&#xff0c;如果有一条或者多条记录存在&#xff0c;则返回True&#xff0c;否则返回False。 语法结构 SELECT column_name(s)FROM table_nameWHERE EXISTS(SELECT column_name FROM table_name WHERE co…

基于两分支卷积和 Transformer 的轻量级多尺度特征融合超分辨率网络 !

当前的单图像超分辨率&#xff08;SISR&#xff09;算法有两种主要的深度学习模型&#xff0c;一种是基于卷积神经网络&#xff08;CNN&#xff09;的模型&#xff0c;另一种是基于Transformer的模型。前者利用不同卷积核大小的卷积层堆叠来设计模型&#xff0c;使得模型能够更…

SOLID原则:现代软件架构的永恒基石

关注TechLead&#xff0c;复旦博士&#xff0c;分享云服务领域全维度开发技术。拥有10年互联网服务架构、AI产品研发经验、团队管理经验&#xff0c;复旦机器人智能实验室成员&#xff0c;国家级大学生赛事评审专家&#xff0c;发表多篇SCI核心期刊学术论文&#xff0c;阿里云认…

面积开运算bwareaopen

一个非常有用的二值图像形态学后处理算法&#xff0c;建立在连通分量分析的基础之上。 bwareaopen 从二值图像中删除小对象 语法 BW2 bwareaopen(BW,P) BW2 bwareaopen(BW,P,conn) 说明 BW2 bwareaopen(BW,P) 从二值图像 BW 中删除少于 P 个像素的所有连通分量&#x…

docker简介、安装、基础知识

基础知识 Docker简介&#xff1a; 1.Docker是一种用于构建、发布及运行应用程序的开源项目&#xff0c;他通过容器化技术简化了应用程序的部署和管理 2.Docker是一个开源的应用容器引擎&#xff0c;基于go语言开发&#xff0c;为应用打包、部署平台&#xff0c;而非单纯的虚…

计算机毕业设计 办公用品管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

C++(Qt)软件调试---内存调试器Dr.Memory(21)

C(Qt)软件调试—内存调试器Dr. Memory&#xff08;21&#xff09; 文章目录 C(Qt)软件调试---内存调试器Dr. Memory&#xff08;21&#xff09;[toc]1、概述&#x1f41c;2、安装Dr.Memory&#x1fab2;3、命令行使用Dr.Memory&#x1f997;4、Qt Creator集成使用Dr.Memory&…

预计OpenAI在新一轮融资后估值可达1500亿美元!Hugging Face平台托管模型数量破100万|AI日报

文章推荐 HuggingChat macOS版正式发布&#xff01;文章内附体验地址&#xff01;我国打造糖尿病专用AI模型&#xff5c;AI日报 今日热点 OpenAI在新一轮融资后估值可能达到1500亿美元 知情人士表示&#xff0c;Thrive Capital将在OpenAI目前的65亿美元融资轮中投资超过10亿…

如何高效管理知识产权全链条?

为了有效保护企业的创新成果&#xff0c;确保技术创意的顺利转化&#xff0c;以及高效管理知识产权案件&#xff0c;建立一套完善的知识产权管理体系至关重要。对于企业而言&#xff0c;如何有效地管理知识产权的各个环节&#xff0c;从研发项目到技术创意&#xff0c;再到提案…

排序(交换排序:快排)

快速排序&#xff1a; 写快排的注意事项 1.单趟排序hoare 2.不写优化只说优化就行 理想的情况下&#xff1a;每次排序都是二分&#xff0c;直到二分到最后&#xff0c;那就相当于递归高度次(logN)&#xff0c;每一层单趟排都是O(N)&#xff0c;时间复杂度O(NlogN) 空间复杂度就…