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

场景:

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

效果图:

具体实现:
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.mzph.cn/pingmian/39400.shtml

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

相关文章

Ubuntu下反弹shell的思考

目录 Ubuntu的命令执行环境 bash (Bourne Again SHell): sh (Bourne SHell): dash (Debian Almquist SHell): 它们之间的关系: 可能遇到的问题 一、脚本权限问题 二、命令执行环境(shell解释器)问题 如何解决? 1.修改/bin/sh软连接的指向为bas…

ESP32CAM物联网教学01

ESP32CAM物联网教学01 拍照 视频 这么小的一个开发板都带上摄像头了,能拍照?能视频吗?现在就跟着我做起来。 初识ESP32CAM 我们到淘宝搜索“ESP32Cam”,就能买到这样一块开发板。 ESP32Cam是双核处理器,提供WIFI和…

Cyuyanzhong的内存函数

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、memcpy函数的使用与模拟实现二、memmove函数的使用和模拟实现三、memset函数与memcmp函数的使用(一)、memset函数(内存块…

Linux shell编程学习笔记59: ps 获取系统进程信息,类似于Windows系统中的tasklist 命令

0 前言 系统进程信息是电脑网络信息安全检查中的一块重要内容,对于使用Linux和基于Linux作为操作系统的电脑来说,可以使用ps命令。 1 ps命令 的功能、格式和选项说明 1.1 ps命令 的功能 Linux 中的ps(意为:process status&…

Chrome导出cookie的实战教程

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

leetcode刷题:vector刷题

​ ​ 🔥个人主页:guoguoqiang. 🔥专栏:leetcode刷题 1.只出现一次的数字 这道题很简单,我们只需要遍历一次数组即可通过异或运算实现。(一个数与自身异或结果为0,任何数与0异或还是它本身) class Solut…

WPF UI 3D 基本概念 点线三角面 相机对象 材质对象与贴图 3D地球 光源 变形处理 动作交互 辅助交互插件 系列三

WPF UI交互专题 平面图形 Path Drawing 绘图 渐变 Brush 矩阵 Transform 变形 阴影效果 模糊效果 自定义灰度去色效果 系列二-CSDN博客 1软件中的3D基本概念 WPF 中 3D 功能的设计初衷并非提供功能齐全的游戏开发平台。 WPF 中的 3D 图形内容封装在 Viewport3D 元素中&#x…

WPF自定义模板--Button

属性&#xff1a; TemplateBinding&#xff1a;用于在ControlTemplate中绑定到控件的属性&#xff0c;例如Background、BorderBrush等。TargetType&#xff1a;指定该模板应用于哪种控件类型。在这个例子中&#xff0c;是Button。 标准的控件模板代码&#xff1a; <Style…

借助 Aspose.Words,在 C# 中将 Word 转换为 Excel

有时我们会遇到需要将 Word 文档&#xff08;DOC 或 DOCX&#xff09;转换为 Excel 文档的任务。例如&#xff0c;这对于数据分析和报告很有用&#xff0c;或者如果您收到了任何文本数据并想将其转换为表格格式&#xff08;XLS 或 XLSX&#xff09;以便进一步工作。在本文中&am…

IAR工程目录移动报错(改变文件目录结构)

刚开始用IAR&#xff0c;记录一下。 工作中使用华大单片机&#xff0c;例程的文件目录结构太复杂了想精简一点。 1.如果原本的C文件相对工程文件&#xff08;.eww文件&#xff09;路径变化了&#xff0c;需要先打开工程&#xff0c;再将所有的.c文件右键Add添加进工程&#xf…

Day50

Spring AOP 概念 AOP全称为Aspect Oriented Programming&#xff0c;表示面向切面编程。切面指的是将那些与业务无关&#xff0c;但业务模块都需要使用的功能封装起来的技术。 AOP基本术语 **连接点&#xff08;Joinpoint&#xff09;&#xff1a;**连接点就是被拦截到的程序执…

第三篇——始计篇:诡计,就是引诱对方犯错误

目录 一、背景介绍二、思路&方案三、过程1.思维导图2.文章中经典的句子理解3.学习之后对于投资市场的理解4.通过这篇文章结合我知道的东西我能想到什么&#xff1f; 四、总结五、升华 一、背景介绍 这一篇讲解了诡计&#xff0c;对于诡计的解释和定位&#xff1b;我们更应…

win10下安装PLSQL14连接Oracle数据库

问题背景 在使用Oracle开发过程中&#xff0c;经常会使用工具来连接数据库&#xff0c;方便查询、处理数据。其中有很多工具可以使用&#xff0c;比如dbeaver、plsql等。本文主要介绍在win10环境下&#xff0c;plsql14的安装步骤以及安装过程中遇到的一些问题。 安装步骤及问题…

清爽一夏,羊大师伴你健康运动,引领活力生活!

在这个绚烂多彩的夏日&#xff0c;让我们携手踏上一段清爽与健康并行的旅程。阳光炽热&#xff0c;万物生长&#xff0c;正是释放活力、追求健康的最佳时节。“清爽一夏&#xff0c;健康运动引领活力生活&#xff01;”这不仅是一句口号&#xff0c;更是我们向美好生活发出的诚…

BurpSuite抓IOS设备HTTPS流量

一、简述&#xff1a; Burp 这个工具做过 web 安全的人都应该用过&#xff0c;是个非常强大的抓包工具。在 PC 的浏览器上直接配置代理就行了&#xff0c;本篇文章就来介绍一下如何用 Burp 抓 IOS 设备上的流量&#xff0c;很多文章都介绍过怎么抓包&#xff0c;但是很多坑都没…

试用笔记之-汇通计算机等级考试软件一级Windows

首先下载汇通计算机等级考试软件一级Windows http://www.htsoft.com.cn/download/htwork.rar

昇思25天学习打卡营第9天|FCN图像语义分割

FCN是Fully Convolutional Networks的简称&#xff0c;即全卷积网络。区别于全连接网络&#xff0c;全连接网络每层直接cell全部连接&#xff0c;全卷积网络即每层都进行卷积。全卷积网络不包含全连接层。 卷积说有点像缩放&#xff0c;具体的可以参考其他专门的介绍文章。 之…

pandas数据分析(4)

修改DataFrame数据的最简单的方法是通过loc和iloc属性为某些元素赋值。 首先构造一组数据 通过标签或位置设置值 也可以一次修改多个值&#xff1a; 通过布尔索引设置数据 将所有来自China&#xff0c;或者年龄20以下的人名字设置为匿名&#xff1a; 通过替换值设置数据 如果…

vue2项目的打包以及部署

打包 当我们写好vue2的项目后&#xff0c;可以通过npm build来对项目进行打包 npm build 打包完成后我们可以看到在当面目录下生成了dis目录,src下的文件都会被打包进这个目录里&#xff0c;当然打包后的文件我们不能直接在浏览器打开&#xff0c;需要进行部署 部署 1.新建一个…

RFID技术在粉末涂料配料生产线的精准应用

RFID技术在粉末涂料配料生产线的精准应用 应用背景 随着科技的快速发展&#xff0c;智能化、自动化已经成为现代工业生产的重要趋势。RFID&#xff08;无线射频识别&#xff09;技术以其独特的优势&#xff0c;如非接触式识别、高速读取、大容量数据存储等&#xff0c;在多个…