echarts的折线图实现部分虚线部分实线

news2025/1/11 18:32:33
场景:

折线图一般都是实线为准,但是由于最后一个数据是预测。所以想要实现最后一段为虚线。

效果图:

具体实现:
series:[

        {
            name: "销售总金额",
            type: "line",
            smooth: true,
            barWidth: 10,
            stack: 'Total',
            itemStyle: {
              normal: {
                color: "#F02FC2",
                lineStyle: {
                  width: 2,
                  type: 'solid'  //'dotted'虚线 'solid'实线
                }
              },
              // 强调最后一个数据点的样式
            },
            data: [1213,232132,4324,2,23,42323,4234,4243223,424334,4324,423423,64456]

    PS:重点虚线的那一段的开头数据需要与实线的最后一个数据对应

          },
          {
            name: "销售总金额",
            type: "line",
            smooth: true,
            barWidth: 10,
            itemStyle: {
              normal: {
                color: "#F02FC2",
                // 最后一个点的边框颜色
                borderWidth: 2,
                lineStyle: {
                  width: 2,
                  type: 'dotted',
                  color: "yellow"//'dotted'虚线 'solid'实线
                }
              }
            },
            data: ["-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", 64456, 52435]
          },

]

同理:如果中间段的数据需要虚线也按这个方法即可。 

 数据处理:


let dataValue = [1, 2, 3, 4, 5, 6];
let dataValue1 = [ ...new Array(dataValue.length - 1).fill('-'), dataValue[dataValue.length - 1]

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

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

相关文章

【机器学习】人工智能与气候变化:利用深度学习与机器学习算法预测和缓解环境影响

📝个人主页:哈__ 期待您的关注 目录 🔥引言 1.1 背景介绍 1.2 人工智能与机器学习的崛起 1.3 本文内容概述 🔨气候变化的挑战 2.1 现今气候变化带来的影响和挑战 2.2 引发关注的气候变化趋势和数据 🤖人工智能…

甘肃香酥可口的烤花卷:味蕾的新宠

在美食的世界里,总有一些创新的美味能够让人眼前一亮,烤花卷便是其中之一。烤花卷,这甘肃一独特的美食,将传统花卷的柔软与烤制的香脆完美结合,为我们的味蕾带来了全新的体验。从外观上看,烤花卷呈现出诱人…

人脉社群平台微信小程序系统源码

🌟【解锁人脉新纪元:探索人脉社群平台小程序】🌟 🚀【开篇:为什么我们需要人脉社群平台小程序?】🚀 在这个快节奏的时代,人脉不再是简单的名片交换,而是通往成功与机遇…

Elasticsearch:Runtime fields - 运行时字段(一)

运行时字段(runtime fields)是在查询时计算的字段。运行时字段使你能够: 向现有文档添加字段而无需重新索引数据开始处理数据而无需了解其结构在查询时覆盖索引字段返回的值定义用于特定用途的字段而无需修改底层架构 你可以像访问其他任何…

d3dcompiler_47.dll缺失怎么修复?d3dcompiler_47.dll修复使用说明

d3dcompiler_47.dll是一个重要的系统文件,属于MicrosoftWindows操作系统中Direct3D的一部分,它主要负责处理在Windows上运行的应用程序和游戏中的3D图形编程。这个DLL文件是“DirectX”的一项组成部分,DirectX是一套核心技术,用于…

【计算机网络仿真】b站湖科大教书匠思科Packet Tracer——实验13 静态路由配置错误导致的路由环路问题

一、实验目的 1.验证静态路由配置错误导致的路由环路问题; 二、实验要求 1.使用Cisco Packet Tracer仿真平台; 2.观看B站湖科大教书匠仿真实验视频,完成对应实验。 三、实验内容 1.构建网络拓扑; 2.验证路由环路。 四、实验…

嵌套组合请求对象的校验与全局捕捉

个人名片 🎓作者简介:java领域优质创作者 🌐个人主页:码农阿豪 📞工作室:新空间代码工作室(提供各种软件服务) 💌个人邮箱:[2435024119qq.com] &#x1f4f1…

S7-1500PLC通过工艺对象实现V90总线伺服定位控制(105报文)

S7-1500PLC通过工艺对象实现V90总线伺服定位控制,伺服驱动器工作在速度模式,S7-1500PLC工作在位置模式,具体控制原理框图,可以参考下面文章链接: 1、S7-1200PLC和V90总线伺服位置控制 S7-1200PLC和V90总线伺服通过工艺对象实现定位控制(标准报文3应用)_v90伺服 报文3 设…

聊聊etsy平台,一个年入百万的项目

聊聊etsy平台,一个年入百万的项目 什么是etsy,这是怎样一个平台,怎样盈利的?相信现在大家满脑子都是这些疑问。 这个平台也是无意间一个学员提到的,据说他朋友靠这个平台年赚好几百万。苦于门槛太高,他也做不了。今天…

微软预计年底实现实时语音界面;硅基智能开源 AI 数字人交互平台 Duix丨 RTE 开发者日报

开发者朋友们大家好: 这里是 「RTE 开发者日报」 ,每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE(Real-Time Engagement) 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有思考的 文…

基于matlab的控制系统串联校正—相位超前校正问题实例

1.问题 为了改进闭环系统性能,可以采用串联校正,这里用相位超前校正,即 α 常取 0.07~0.2 ,选择适当的 α 与 τ , 要使 针对新的开环传递函数 G ’ K (S)Gc(S) G(S) H(S) ,画出开环 Bode 图&#xff…

停车场车牌识别计费系统,用Python如何实现?

关注星标,每天学习Python新技能 前段时间练习过的一个小项目,今天再看看,记录一下~ 项目结构 说明: datefile文件夹:保存车辆信息表的xlsx文件 file文件夹:保存图片文件夹。ic_launcher.jpg是窗体的右上角…

Laravel swagger接口文档生成和管理

Laravel swagger接口文档生成和管理 接口开发随着时间推移接口会越来越多,随着多部门之间的协作越来越频繁, 维护成本越来越高, 文档的可维护性越来越差, 需要一个工具来管理这些接口的文档, 并能够充当mock server给调用方使用 这里推荐swagger生成和管理接口文档&…

Python入门 2024/7/2 While

目录 while循环的基础应用 循环输出十次:键盘敲烂,月入过万 计算1~100的和 用while循环练习猜数字 while循环的嵌套应用 打印九九乘法表 输出不换行的功能 while循环的基础应用 格式: while 条件: 条件满足时&#xff0c…

昇思25天学习打卡营第1天|yulang

今天主要了解了深度学习框架之昇思MindSpore的初学入门,没想到 ai学习入门如此简单,不愧是华为大手笔,提供的学习环境配置如此之高。这个平台有点类似百度飞桨,大大降低了AI开发门槛,使用户能够快速实现想要的模型&…

从零开始:如何设计一个现代化聊天系统

写在前面: 此博客内容已经同步到我的博客网站,如需要获得更优的阅读体验请前往https://mainjaylai.github.io/Blog/blog/system/chat-system 在当今数字化时代,聊天系统已成为我们日常生活和工作中不可或缺的一部分。从个人交流到团队协作,从客户服务到社交网络,聊天应用…

科技与水利的深度融合实践:揭秘智慧水利技术如何助力水利行业解决传统难题,推动水资源管理向精细化、智能化方向发展

本文关键词:智慧水利、智慧水利工程、智慧水利发展前景、智慧水利技术、智慧水利信息化系统、智慧水利解决方案、数字水利和智慧水利、数字水利工程、数字水利建设、数字水利概念、人水和协、智慧水库、智慧水库管理平台、智慧水库建设方案、智慧水库解决方案、智慧…

HR 如何用好人才测评系统?

HR 如何用好人才测评系统? 人才测评已经广泛应用在企业招聘、人才选拔,人才盘点,岗位晋升,绩效考评等领域,帮助HR提升人力资源管理效率,更好的发掘人才优势,在教育培训方面,人才测评…

我做了个C++算法学习网站,从语法到算法再到数据结构,全方位为算法竞赛小伙伴护航

哈喽,各位小伙伴大家好,我是大李。 最近半个月,我做了个《C算法宝典》并更新了40多篇教程,目前还在更新中,内容从语法到算法和数据结构,全方位为算法竞赛小伙伴护航。 温馨提示:如果你或你的朋…

prescan软件中导入路径文件txt/lpx

由于博主收到的是lpx格式的路径文件,因此,第一步 1.记事本打开 ctrla 全选 ctrlc 复制 2.新建一个excel 鼠标定位到第一行第一列的格子 ctrlv 复制 3.数据栏“分列”功能 4. (0.1递增的数列,纬度,经度,高程) 导入…