Echarts折线图折线呈现为渐变线条

想要如图所示的折线图,折线线条为渐变颜色,两边颜色接近区域面积的颜色,中间颜色亮度高一些,在series中使用lineStyle,将其color设置为渐变色:

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{smooth: true,showSymbol: false, // 只有在 tooltip hover 的时候显示symbollineStyle: { // 线条样式normal: {width: 4,color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变{offset: 0,color: 'rgb(0, 255, 255, 0)'},{offset: 0.2,color: 'rgb(0, 255, 255, 0)'},{offset: 0.4,color: 'rgb(0, 200, 200, 80)'},{offset: 0.6,color: 'rgb(0, 200, 200, 80)'},{offset: 0.8,color: 'rgb(0, 255, 255, 0)'},{offset: 1,color: 'rgb(0, 255, 255, 0)'}])}},areaStyle: { // 区域面积color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'rgb(0, 50, 100)' // 0% 处的颜色},{offset: 0.5,color: 'rgb(0, 50, 100, 50)' // 50% 处的颜色},{offset: 1,color: 'rgb(0, 50, 100, 0)' // 100% 处的颜色}]}},data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]
};

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

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

相关文章

服务器技术(三)--Nginx

Nginx介绍 Nginx是什么、适用场景 Nginx是一个高性能的HTTP和反向代理服务器,特点是占有内存少,并发能力强,事实上nginx的并发能力确实在同类型的网页服务器中表现较好。 Nginx专为性能优化而开发,性能是其最重要的考量&#xf…

PaddleOCR #使用PaddleOCR进行光学字符识别 - OCR模型对比

PaddleOCR 在其工具包中提供了多种模型,并且非常易于应用。根据准确性和速度比较模型始终是一个好习惯。在本节中,我们将比较 PaddleOCR 提供的四种模型,即 SRN、PP-OCRv2、PP-OCRv3 和 NRTR。比较将在 COCO-text 数据集上进行,该…

神经网络初谈

文章目录 简介神经网络的发展历程神经网络的初生神经网络的第一次折戟神经网络的新生,Hinton携BP算法登上历史舞台命途多舛,神经网络的第二次寒冬神经网络的重生,黄袍加身,一步封神神经网络的未来,众说纷纭其他时间点 …

vscode超炫酷的编码特效详解

1.在扩展中搜索 插件:Power Mode 2.在设置里搜索Code Actions On Save 3.点击在settings.json中编辑 {"powermode.enabled": true, //启动// "powermode.presets": "flames", // 火花效果 // 炸裂// "powermode.presets&quo…

uniapp项目或者vue项目 封装弹框组件

baseDialog组件代码: <template><view class"base-dialog" v-if"show"><view class"mask"></view><view class"Popmenu" :style"{ width }"><view class"header">{{ title …

【性能测试】Jenkins+Ant+Jmeter自动化框架的搭建思路

前言 前面讲了Jmeter在性能测试中的应用及扩展。随着测试的深入&#xff0c;我们发现在性能测试中也会遇到不少的重复工作。 比如某新兴业务处于上升阶段&#xff0c;需要在每个版本中&#xff0c;对某些新增接口进行性能测试&#xff0c;有时还需要在一天中的不同时段分别进行…

Objective-C 父元素和子元素的点击事件

场景&#xff1a; &#xff08;需求1&#xff09;pageA一开始是【默认模式】&#xff0c;点击父元素view&#xff08;包括【搜索】文字&#xff09;&#xff0c;进入【搜索模式】&#xff1b; &#xff08;需求2&#xff09;在pageA中&#xff0c;点击【取消】文字时&#xff…

随机数检测(二)

随机数检测&#xff08;二&#xff09;- 扑克检测、重叠子序列、游程总数、游程分布 3.4 扑克检测方法3.5 重叠子序列检测方法3.6 游程总数检测3.7 游程分布检测 3.4 扑克检测方法 扑克检测方法如下图。 以下实现代码供参考。 def alterOffsetBit(m, offset, listSub:list)…

浏览器基础原理-安全: HTTPS

HTTP协议的历史: HTTP协议的目的很单纯, 就是为了传输超文本文件, 所以早期的 HTTP 一直保持着明文传输数据的特征, 但是中间很有可能会被截取或者篡改, 即收到中间人攻击. 解析HTTP协议栈层面: HTTPS往里面加入了安全层, 它的指责是: 对发起HTTP请求的数据进行加密和对接收…

jupyter-notebook使用指南

jupyter-notebook使用指南 jupyter-notebook安装[python版][anaconda版] jupyter-notebook如何导出PDF&#xff1f;【没解决&#xff0c;直接看最后&#xff0c;不要跟着操作&#xff01;】正常导出步骤安装Pandoc安装Xelatex问题没解决&#xff0c;懒得安装了&#xff0c;放弃…

【Python】PIL.Image转QPixmap后运行异常的个人解决方法

问题场景&#xff1a; PIL.Image图片&#xff0c;直接调用PIL.Image.toqpixmap()转成QPixmap后&#xff0c;不会立即报错&#xff0c;   但后续使用该QPixmap时(包括但不仅限于使用QLabel.setPximap()、QPixmap.save())将立即出现异常 不知道是我关键词不对&#xff0c;还是只…

Linux中tail命令的使用

tail 命令可用于查看文件的内容&#xff0c;有一个常用的参数 -f 常用于查阅正在改变的日志文件。 tail -f filename 会把 filename 文件里的最尾部的内容显示在屏幕上&#xff0c;并且不断刷新&#xff0c;只要 filename 更新就可以看到最新的文件内容。 tail [参数] [文件] …