echarts 折线图内容区域渐变、曲线平滑

        实现echarts折线图内容区域渐变,需要在series中进行配置。areaStyle:区域填充样式。设置后显示成区域面积图。

示例代码:

series: [
  {
    type: "line",
    name: this.legendData[0],
    color: "#E3FF34",
    symbolSize: 14,
    symbol: "circle",
    showSymbol: false,
    data: this.echartData1,
    smooth: true,
    itemStyle: {
      shadowColor: "#ffffff",
      shadowBlur: 5,
    },
    areaStyle: {
      normal: {
        //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgba(227, 255, 52, 0.2)", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "rgba(227, 255, 52, 0)", // 100% 处的颜色
          },
        ]), //背景渐变色
      },
    },
    lineStyle: {
      // 系列级个性化折线样式
      width: 4,
      type: "solid",
      color: "#E3FF34",
    },
  },
  {
    type: "line",
    name: this.legendData[1],
    color: "#00A3FF",
    symbolSize: 14,
    symbol: "circle",
    showSymbol: false,
    data: this.echartData2,
    smooth: true,
    itemStyle: {
      shadowColor: "#ffffff",
      shadowBlur: 5,
    },
    areaStyle: {
      normal: {
        //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgba(0, 163, 255, 0.20)", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "rgba(0, 163, 255, 0)", // 100% 处的颜色
          },
        ]), //背景渐变色
      },
    },
    lineStyle: {
      // 系列级个性化折线样式
      width: 4,
      type: "solid",
      color: "#00A3FF",
    },
  },
]

效果如下:

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

整理MLAI学习路径图

干货分享: 下面给出一个笔者自己整理的GitHub仓库:https://github.com/isLinXu/awesome-road-map,里面包含了一些可供参考的学习路径和思维导图,并整理微软、meta、谷歌、Kaggle以及华为、百度、阿里、腾讯、讯飞等相关的学习资源…

Unity减少发布打包文件的体积(二)——设置WebGL发布时每张图片的压缩方式

一个项目在发布成WebGL后,其体积至关重要,体积太大,用户加载会经历一个漫长的等待…轻则骂娘,重则用脚把电脑踢烂(扣质保金)… 那么如何减少发布后的体积呢,本文从图片的压缩开始入手。 前传回顾: Unity减…

会议动态 | 浙江省水泥行业高质量发展暨碳达峰推进会成功召开

2023年11月9日,由浙江省水泥协会和百年建筑网主办的“2023年浙江省水泥行业高质量发展暨碳达峰推进会”在浙江杭州成功召开。 水泥生产企业、环保企业、智能装备企业、研究机构等水泥产业上下游重点企业和行业知名专家领导近400人出席了本次会议。 参会代表围绕《浙…

【Unity】XML文件的解析和生成

目录 使用XPath路径语法解析 使用xml语法解析 XML文件的生成 XML文件是一种常用的数据交换格式,它以文本形式存储数据,并使用标签来描述数据。解析和生成XML文件是软件开发中常见的任务。 解析XML文件是指从XML文件中读取数据的过程。在.NET中&#…

【前端】vue3+typescript+vite+Element-Plus搭建配置初始化项目结构

给自己一个目标,然后坚持一段时间,总会有收获和感悟! 对于我们开发人员,了解和熟悉新知识,对于vue3,博主是通过TA的基本结构开始,vue2和vue3都有javascript前端编程语言,到了vue3新增…

Find My数据线|苹果Find My技术与数据线结合,智能防丢,全球定位

数据线是用来连接移动设备和电脑的,来达到数据传递或通信目的。通俗点说,就是连接电脑与移动设备用来传送视频、铃声、图片等文件的通路工具。现在,随着电子行业日新月异的发展,数据线已经成为了我们生活中不可或缺的部分&#xf…

SpringBoot+Vue3+MySQL集群 开发健康体检双系统

第1章 课程介绍 试看4 节 | 38分钟 观看项目演示,熟悉大健康体检项目主要功能。掌握学习本课程的最佳方法,以及如何利用在线手册学习和答疑。 收起列表 视频: 1-1 导学 (22:46) 试看 视频: 1-2 学习方法注意事项 (07:46) 视频&am…

HTTP HTTPS 独特的魅力

目录 HTTP协议 HTTP协议的工作过程 首行 请求头(header) HOST Content-Length​编辑 User-Agent(简称UA) Referer Cookie 空行 正文(body) HTTP响应详解 状态码 报文格式 HTTP响应格式 如何…

vue-数据双向绑定原理

​🌈个人主页:前端青山 🔥系列专栏:Vue篇 🔖人终将被年少不可得之物困其一生 依旧青山,本期给大家带来vue篇专栏内容:vue-数据双向绑定原理 目录 虚拟DOM与Diff算法 1. 对虚拟DOM的理解? 2. 虚拟DOM的解…

如何使用选择工具

快捷键:V 你可以单击选择也可以框选多个! shift:加选 移动播放指示器 这根蓝色的线角:播放指示器 按←/→可以以按一下一帧的速度移动播放指示器 按←/→加shift可以以按一下五帧的速度移动播放指示器 按↑/↓可以让播放指…

【广州华锐互动】消防安全宣传知识3D交互展示提升公众学习沉浸感

随着科技的快速发展,我们的生活与工作环境愈发复杂,火灾风险也随之提高。为了提高公众的消防灭火能力,普及消防安全知识,广州华锐互动开发了消防安全宣传知识3D交互展示系统。 这是一种全新的教育方式,它利用3D技术&am…

淘宝商家私信脚本,自动批量阿里旺旺版,按键精灵源码分享

在UI界面设置话术后用#号分割多条,然后启动就会自动给搜素下面的商家发送指定消息的私信,脚本代码和UI界面代码我下面会分享出来,自己粘贴就可以用。 UI界面: UI界面代码: 界面1: { 请在下面设置话术: { 输入框: …

抖音小店没有流量?如何快速起店?实操经验分享!

我是电商珠珠 做抖音小店最重要的就是流量,店铺没有流量也就意味着销量上不去,最后只能被平台清退。 我做抖音小店也已经快三年的时间了,这种情况我也遇到过,接下来给大家讲讲解决方案。 第一步,选品 品是整个店铺…

linux高级篇基础理论四(rsync,inotify,squid,KVM虚拟机)

♥️作者:小刘在C站 ♥️个人主页: 小刘主页 ♥️不能因为人生的道路坎坷,就使自己的身躯变得弯曲;不能因为生活的历程漫长,就使求索的 脚步迟缓。 ♥️学习两年总结出的运维经验,以及思科模拟器全套网络实验教程。专栏:云计算技…

java架构师禁止在项目中使用继承,合理吗?

java架构师禁止在项目中使用继承,合理吗? 如果建议用组合替代继承,非必要不用继承,这个很合理的建议的。 在非必要的情况下不用继承,用组合替代有几个优势:最近很多小伙伴找我,说想要一些 Jav…

我们应该如何理解Java集合框架的关键知识点?

我们应该如何理解Java集合框架的关键知识点? java集合是教存取数据的一个容器,涵盖了各种存和取的方式,应用在不同的工作场景中,要想了解java集合的相关知识,建议先好好学习一下数据结构这本书。最近很多小伙伴找我&am…

【面试】测试/测开(未完成版)

1. 黑盒测试方法 黑盒测试:关注的是软件功能的实现,关注功能实现是否满足需求,测试对象是基于需求规格说明书。 1)等价类:有效等价类、无效等价类 2)边界值 3)因果图:不同的原因对应…

Python接口自动化测试之post请求详解

前言 在HTTP协议中,与get请求把请求参数直接放在url中不同,post请求的请求数据需通过消息主体(request body)中传递。 且协议中并没有规定post请求的请求数据必须使用什么样的编码方式,所以其请求数据可以有不同的编码方式,服务…

vue中使用echarts实现省市地图绘制,根据数据显示不同区域颜色,点击省市切换,根据经纬度打点

一、实现效果 使用echarts实现省市地图绘制根据数据不同显示不同区域颜色实现省市地图点击切换效果实现地图上根据经纬度打点 二、实现方法 1、安装echarts插件 npm install echarts --save2、获取省市json数据 https://datav.aliyun.com/portal/school/atlas/area_select…

解决因跨域导致使用a标签下载文件download属性失效无法自定义命名的问题

问题背景&#xff1a; 在使用a标签下载文件时&#xff0c;download属性可以更改下载的文件名。 // 下载a.exe,并采用默认命名 <a href"/images/a.exe" download>点击下载</a>// 将a.exe改名为b.exe下载 <a href"/images/a.exe" download&…