折线图实现柱状阴影背景的demo

这个是一个由官网的基础折线图实现的流程,将涉及到的知识点附上个人浅薄的见解,源码在最后,需要的可自取。

折线图

  • 成果展示
  • 代码注解
    • 参数
    • backgroundColor
    • dataZoom
    • legend
    • title
    • xAxis
    • yAxis
    • grid
    • series
  • 源码

成果展示

官网的基础折线图:
在这里插入图片描述
最终效果图:
在这里插入图片描述

代码注解

参数

xdata :x轴数据
ydata1 :第一条折线line1数据
ydata2 :第二条折线line2数据
bgdata :柱状阴影条的数据,这里统一设置为40,是因为ydata1和 ydata2的最大值都在40范围内,以达到阴影撑满图标高度的效果,同时,也可设置yAxis的max值与bgdata 里的值一致
threshold :用于存放每个x轴数据对应的line1和line2相差的最大值
average :总平均时长
historyAveraged :步骤平均耗时
averageCount :步骤总数

这里的值均为固定值,后期可根据自身需求添加数据逻辑

var xdata = ["第1步 步骤名称","第2步 步骤名称","第3步 步骤名称","第4步 步骤名称","第5步 步骤名称","第6步 步骤名称","第7步 步骤名称","第8步 步骤名称","第9步 步骤名称","第10步 步骤名称","第11步 步骤名称","第12步 步骤名称","第13步 步骤名称","第14步 步骤名称","第15步 步骤名称","第16步 步骤名称","第17步 步骤名称","第18步 步骤名称", "第19步 步骤名称","第20步 步骤名称","第21步 步骤名称","第22步 步骤名称","第23步 步骤名称","第24步 步骤名称",];var ydata1 = [21,20,34,31,22,18,18,18,18,18,18,21,15,34,31,22,18,18,18,18,18,18,18,18,];var ydata2 = [18,16,25,30,15, 18,18,18,18,18,18,18,16,25,30,15,18,18,18,18,18, 18,18,18,];var bgdata = [40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40, 40,40,];var threshold = 7;var average = 140,historyAveraged = 5.6,averageCount = 2.5;

backgroundColor

官网api可查看具体参数:点击跳转至官网查看backgroundColor
这里直接配置颜色参数。

backgroundColor: "transparent",//透明背景色,跟随父盒子颜色,看板中比较常用
backgroundColor: "#375a84",//成果主图的背景颜色

dataZoom

官网api可查看具体参数:点击跳转至官网查看dataZoom
dataZoom 就是可用于缩放和平移数据的组件,可以用于对大量数据进行局部放大或整体滚动查看。dataZoom 可以水平或垂直放置在图表的底部或侧边,并支持拖拽、滚动、点击等交互操作。

dataZoom: [{type: "slider", // 设置为滑动条show: true, // 显示滑动条start: 0, // 滑动条起始位置end: 100 / (12 - 10) - 1, // 滑动条结束位置bottom: 10, // 滑动条距离底部的距离textStyle: {color: "#fff",},backgroundColor: "#acb7c3", // 设置背景颜色handleStyle: {color: "#2a82e4", // 设置左右两边的可滑动收缩竖线颜色},},],

legend

官网api可查看具体参数:点击跳转至官网查看legend
legend 用于展示图表中不同系列的标识和名称的组件,通过legend,用户可以快速了解每个系列所代表的含义,并可以通过点击图例项来切换显示或隐藏对应的数据系列。

legend: {data: ["步骤平均时长", "步骤历史平均时长"],orient: "vertical", // 设置图例垂直排列right: 10, // 调整图例距离右侧的距离top: "top", // 设置图例位于上方itemWidth: 10, // 设置宽度itemHeight: 10, // 设置高度textStyle: {//设置字体样式color: "#fff",//字体颜色},},

title

官网api可查看具体参数:点击跳转至官网查看title
title 是用于设置图表标题的组件,可以用来展示整个图表的主题或概要信息。通过 title 组件,用户可以自定义图表的标题文字、样式、位置等属性。
可以通过设置 left、top、right、bottom 等属性,可以调整标题的位置。并且Echarts 中的 title 组件是能单独存在的,也能放在整个 option 配置对象中的任何位置。
可根据自己需求调整title的位置。

title: {// 添加title属性text:"总平均时长" +average +"s\n\n步骤总数" +averageCount +"\n\n步骤平均耗时" +historyAveraged +"s", // 自定义的文字内容//subtext: '副标题', // 设置副标题文字//left: 'center' // 设置标题水平居中orient: "vertical", // 设置图例垂直排列right: 10, // 调整图例距离右侧的距离top: 80, // 设置图例位于上方itemWidth: 10, // 设置宽度itemHeight: 10, // 设置高度textStyle: {color: "#fff",fontSize: 12,//设置字体大小},},

xAxis

官网api可查看具体参数:点击跳转至官网查看xaxis
xAxis(x 轴)用于显示水平方向的坐标轴,通常用于表示类目数据或数值数据。在 ECharts 中,可以通过配置 xAxis 属性来对 x 轴进行设置。
以下是一些常见的 xAxis 配置选项:

type: x 轴类型,可以是 ‘value’(数值轴)、‘category’(类目轴)、‘time’(时间轴)等。
data: 类目轴的数据,在 type 为 ‘category’ 时使用。
axisLabel: x 轴刻度标签的设置,可以设置字体颜色、字体大小等样式。
axisLine: x 轴线的样式设置,可以设置线条颜色、粗细等。
name: x 轴名称。
nameTextStyle: x 轴名称的样式设置,可以设置颜色、字体大小等。
splitLine: 分隔线的设置,可以显示或隐藏 x 轴的分隔线。

xAxis: {type: "category",// 横轴类型为类目轴,适用于离散的类目数据data: xdata,// 设置 x 轴的数据,即类目轴的数据源axisLabel: {// 设置 x 轴标签的样式formatter: function (value) {return value.split(" ").join("\n"); // 自定义轴标签格式化函数,使用换行符拆分字符串并重新连接},textStyle: {// 设置轴标签文字的样式fontSize: 12, // 设置 x 轴字体大小为 12pxcolor: function (params) {// 根据条件动态设置文字颜色if (params == "第3步 步骤类型") {return "rgba(190, 53, 59, 1)";// 如果标签为"第3步 位置管控",设置颜色为红色} else {return "rgba(255, 255, 255, 0.16)";// 其他标签设置为灰色}},},},axisLine: {// 设置轴线的样式lineStyle: {color: "#fff", // 设置轴线颜色为白色},},},

yAxis

官网api可查看具体参数:点击跳转至官网查看yAxis
yAxis(纵轴)用于配置直角坐标系中的纵轴属性,包括坐标轴类型、刻度分隔、标签样式等。

type: 指定了纵轴的类型,例如’value’表示数值轴。
name: 设置纵轴的名称,用于描述纵轴所代表的数据意义。
axisLabel: 定义了纵轴标签的样式,包括文字颜色和大小等。
splitLine: 控制分隔线的显示与样式,可以设置是否显示分隔线以及分隔线的样式。

通过配置 yAxis,可以灵活地控制纵轴的显示方式、标签样式以及分隔线的展示,从而使得图表能够清晰地呈现数据,并满足不同的可视化需求。

yAxis: {type: "value",// 纵轴类型为数值轴,适用于连续的数值数据name: "second",// 设置 y 轴的名称为"second"splitLine: {show: false,// 是否显示 y 轴的分隔线,这里设为隐藏},axisLabel: { // 设置 y 轴标签的样式textStyle: {color: "#ffffff", // 设置 y 轴字体颜色为 #ffffontSize: 12, // 设置 y 轴字体大小为 14px},},axisLine: {// 设置 y 轴线条的样式lineStyle: {color: "#ffffff", // 设置 y 轴线条颜色为 #fff},},nameTextStyle: {// 设置 y 轴名称的样式color: "#ffffff", // 设置 y 轴名称颜色为 #fff},},

grid

官网api可查看具体参数:点击跳转至官网查看grid
grid(网格)组件用于控制直角坐标系的布局,可以通过 grid 来调整坐标系的位置、大小以及间距等。

left / right / top / bottom: 分别设置 grid 组件距离容器的左、右、上、下边距的距离,可以是像素值或百分比。
containLabel: 控制 grid 区域是否包含坐标轴的刻度标签,默认为 false。
backgroundColor: 设置 grid 区域的背景颜色,可以是颜色值或者渐变色。
borderWidth: 设置 grid 区域的边框线宽。
borderColor: 设置 grid 区域的边框颜色。

通过配置 grid,可以灵活地调整图表的布局,使得图表在页面中的位置和大小符合需求,并且能够美观地展示数据。

grid: {left: "3%",right: "10%",bottom: "10%",},

series

官网api可查看具体api:点击跳转至官网查看series
折线图后面的柱状阴影重点在与series数组的第三个对象,这里设置了一个单独柱状图(type为bar)的类型,并设置其颜色效果,以达到阴影效果。

series: [{name: "步骤平均时长",data: ydata1,type: "line",symbol: "rect", // 将折线图的拐点符号设置为方形symbolSize: 10, // 设置方形的大小为8lineStyle: {color: "#ffffff", // 设置第一条线的颜色为 #00baad},itemStyle: {color: "#ffffff", // 设置第一条线的方形颜色为 #ffffff},label: {// 添加对应值显示show: true,position: "top", // 显示在拐点上方},z: 2,},{name: "步骤历史平均时长",data: ydata2,type: "line",symbol: "rect", // 将折线图的拐点符号设置为方形symbolSize: 10, // 设置方形的大小为8lineStyle: {color: "#00baad", // 设置第一条线的颜色为 #00baad},itemStyle: {color: "#00baad", // 设置第一条线的方形颜色为 #ffffff},label: {// 添加对应值显示show: true,position: "bottom",color: "#00baad",},z: 2,},{//这里是柱状阴影的关键部分data: bgdata,type: "bar",// 柱状图类型barWidth: 68,// 柱宽度// itemStyle: {//   color: "rgba(0,0,0,0.16)",// },itemStyle: {normal: {color: function (params) {var aValue = ydata1[params.dataIndex];var bValue = ydata2[params.dataIndex];if (Math.abs(aValue - bValue) > threshold) {//若差值大于最大差值,则设置其字体颜色为红色return "rgba(102, 77, 107,0.6)";} else {return "rgba(0,0,0,0.16)";}},},},},],

源码

      var xdata = ["第1步 步骤名称","第2步 步骤名称","第3步 步骤名称","第4步 步骤名称","第5步 步骤名称","第6步 步骤名称","第7步 步骤名称","第8步 步骤名称","第9步 步骤名称","第10步 步骤名称","第11步 步骤名称","第12步 步骤名称","第13步 步骤名称","第14步 步骤名称","第15步 步骤名称","第16步 步骤名称","第17步 步骤名称","第18步 步骤名称","第19步 步骤名称","第20步 步骤名称","第21步 步骤名称","第22步 步骤名称","第23步 步骤名称","第24步 步骤名称",];var ydata1 = [21,20,34,31,22,18,18,18,18,18,18,21,15,34,31,22,18,18,18,18,18,18,18,18,];var ydata2 = [18,16,25,30,15,18,18,18,18,18,18,18,16,25,30,15,18,18,18,18,18,18,18,18,];var bgdata = [40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,];var threshold = 7;var average = 140,historyAveraged = 5.6,averageCount = 2.5;option = {backgroundColor: "#375a84",dataZoom: [{type: "slider", // 设置为滑动条show: true, // 显示滑动条start: 0, // 滑动条起始位置end: 100 / (12 - 10) - 1, // 滑动条结束位置bottom: 10, // 滑动条距离底部的距离textStyle: {color: "#fff",},backgroundColor: "#acb7c3", // 设置背景颜色handleStyle: {color: "#2a82e4", // 设置左右两边的可滑动收缩竖线颜色},},],legend: {legend: {data: ["步骤平均时长", "步骤历史平均时长"],},orient: "vertical", // 设置图例垂直排列right: 10, // 调整图例距离右侧的距离top: "top", // 设置图例位于上方itemWidth: 10, // 设置宽度itemHeight: 10, // 设置高度textStyle: {color: "#fff",},},title: {// 添加title属性text:"总平均时长" +average +"s\n\n步骤总数" +averageCount +"\n\n步骤平均耗时" +historyAveraged +"s", // 自定义的文字内容orient: "vertical", // 设置图例垂直排列right: 10, // 调整图例距离右侧的距离top: 80, // 设置图例位于上方itemWidth: 10, // 设置宽度itemHeight: 10, // 设置高度textStyle: {color: "#fff",fontSize: 12,},},xAxis: {type: "category",data: xdata,axisLabel: {formatter: function (value) {return value.split(" ").join("\n"); // 使用换行符拆分字符串并重新连接},textStyle: {fontSize: 12, // 设置 x 轴字体大小为 12pxcolor: function (params) {if (params == "第3步 位置管控") {return "rgba(190, 53, 59, 1)";} else {return "rgba(255, 255, 255, 0.16)";}},},},axisLine: {lineStyle: {color: "#fff", // 设置 x 轴线条颜色为 #fff},},},yAxis: {type: "value",name: "second",splitLine: {show: false, // 隐藏y轴的横向线条},axisLabel: {textStyle: {color: "#ffffff", // 设置 y 轴字体颜色为 #ffffontSize: 12, // 设置 y 轴字体大小为 14px},},axisLine: {lineStyle: {color: "#ffffff", // 设置 y 轴线条颜色为 #fff},},nameTextStyle: {color: "#ffffff", // 设置 y 轴名称颜色为 #fff},},grid: {left: "3%",right: "10%",bottom: "10%",},series: [{name: "步骤平均时长",data: ydata1,type: "line",symbol: "rect", // 将折线图的拐点符号设置为方形symbolSize: 10, // 设置方形的大小为8lineStyle: {color: "#ffffff", // 设置第一条线的颜色为 #00baad},itemStyle: {color: "#ffffff", // 设置第一条线的方形颜色为 #ffffff},label: {// 添加对应值显示show: true,position: "top", // 显示在拐点上方},z: 2,},{name: "步骤历史平均时长",data: ydata2,type: "line",symbol: "rect", // 将折线图的拐点符号设置为方形symbolSize: 10, // 设置方形的大小为8lineStyle: {color: "#00baad", // 设置第一条线的颜色为 #00baad},itemStyle: {color: "#00baad", // 设置第一条线的方形颜色为 #ffffff},label: {// 添加对应值显示show: true,position: "bottom",color: "#00baad",},z: 2,},{data: bgdata,type: "bar",barWidth: 68,// itemStyle: {//   color: "rgba(0,0,0,0.16)",// },itemStyle: {normal: {color: function (params) {var aValue = ydata1[params.dataIndex];var bValue = ydata2[params.dataIndex];if (Math.abs(aValue - bValue) > threshold) {return "rgba(102, 77, 107,0.6)";} else {return "rgba(0,0,0,0.16)";}},},},},],};

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

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

相关文章

猫耳语音下载(mediadown)

猫耳语音下载(mediadown) 一、介绍 猫耳语音下载,能够帮助你下载猫耳音频节目。如果你是会员,它还能帮你下载会员节目。 二、下载地址 下载:猫耳语音下载(mediadown) 百度网盘下载:猫耳语音下载(mediadown) 三、安装教程 将下载的文件解压到D:\xibinhui,D:\Pr…

Unity RectTransform·屏幕坐标转换

RectTransform转屏幕坐标 分两种情况 Canvas渲染模式为Overlay时,使用此方式 public Rect GetScreenCoordinatesOfCorners(RectTransform rt) {var worldCorners new Vector3[4];rt.GetWorldCorners(worldCorners);var result new Rect(worldCorners[0].x,world…

Manomotion 实现AR手势互动-解决手势无效的问题

之前就玩过 Manomotion ,现在有新需求,重新接入发现不能用了,不管什么办法,都识别不了手势,我记得当初是直接调用就可以的。 经过研究发现,新版本SDK改了写法。下边就写一下新版本的调用,并且实…

好书推荐 《Excel函数与公式应用大全for Excel 365 Excel 2021》

一.基本介绍 1.什么是 Excel? Excel 是微软公司开发的一款电子表格软件,是 Microsoft Office 套件的一部分。它被广泛用于数据处理、分析、可视化和管理等方面。Excel 提供了丰富的功能,使用户能够创建、编辑、存储和分享各种类型的数据表格。 2.Exc…

Golang Channel 详细原理和使用技巧

1.简介 Channel(一般简写为 chan) 管道提供了一种机制:它在两个并发执行的协程之间进行同步,并通过传递与该管道元素类型相符的值来进行通信,它是Golang在语言层面提供的goroutine间的通信方式.通过Channel在不同的 goroutine中交换数据,在goroutine之间…

代码随想录Day66 | 图的DFS与BFS

代码随想录Day66 | 图的DFS与BFS DFS797.所有可能的路径无向图和有向图的处理 BFS200.岛屿数量 DFS 文档讲解:代码随想录 视频讲解: 状态 本质上就是回溯算法。 void dfs(参数) {if (终止条件) {存放结果;return;}for (选择:本节点所连接的…

Qt textBrowser的Html相关

Qt textBrowser的Html相关 Qt textBrowser的Html相关 Qt textBrowser的Html相关 一开始就想要一个简单的功能,点一下按钮,添加的文字居中显示,再点一下按钮,添加的文字变更颜色居右显示。 但是: ui->textEdit-&g…

WordPress免费的远程图片本地化下载插件nicen-localize-image

nicen-localize-image(可在wordpress插件市场搜索下载),是一款用于本地化文章外部图片的插件,支持如下功能: 文章发布前通过编辑器插件本地化 文章手动发布时自动本地化 文章定时发布时自动本地化 针对已发布的文章…

基于机器学习的密码强度检测

项目简介 利用机器学习对提供的数据集预测用户输入的密码是否为弱密码。 原始数据集只包含关于弱密码的信息,并没有包含强密码的数据或分类器,这意味着模型无法学习到强密码的规律!!! 我之所以这样设计这个示例,其目的是为了向你展示模型的…

AI蠕虫病毒威胁升级,揭示AI安全新危机

一组研究人员成功研发出首个能够通过电子邮件客户端窃取数据、传播恶意软件以及向他人发送垃圾邮件的AI蠕虫,并在使用流行的大规模语言模型(LLMs)的测试环境中展示了其按设计功能运作的能力。基于他们的研究成果,研究人员向生成式…

用pyinstaller打包python代码为exe可执行文件并在其他电脑运行的方法

本文介绍基于Python语言中的pyinstaller模块,将写好的.py格式的Python代码及其所用到的所有第三方库打包,生成.exe格式的可执行文件,从而方便地在其他环境、其他电脑中直接执行这一可执行文件的方法。 有时,我们希望将自己电脑上的…

基于springboot的助农管理系统的设计与实现

** 🍅点赞收藏关注 → 私信领取本源代码、数据库🍅 本人在Java毕业设计领域有多年的经验,陆续会更新更多优质的Java实战项目希望你能有所收获,少走一些弯路。🍅关注我不迷路🍅** 一 、设计说明 1.1研究背…

【网站项目】219一中体育馆管理系统

🙊作者简介:拥有多年开发工作经验,分享技术代码帮助学生学习,独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。🌹赠送计算机毕业设计600个选题excel文件,帮助大学选题。赠送开题报告模板&#xff…

pywin32,一个超强的 Python 库!

更多Python学习内容:ipengtao.com 大家好,今天为大家分享一个超强的 Python 库 - pywin32。 Github地址:https://github.com/mhammond/pywin32 在Python的世界里,有许多优秀的第三方库可以帮助开发者更轻松地处理各种任务。其中&a…

【性能】后台与黑屏

目录 现象观察 调整应用的电池策略 现象观察 切换到后台, 一个心跳期间,就会发close socket 直接黑屏,没有收到任何消息,直接到onclose,然后有离线触发 也到时间。 调整应用的电池策略 修改成“无限制”后,就不会断…

Linxu自动化构建工具make/Makefile究竟时什么?

Linxu自动化构建工具make/Makefile究竟时什么? 一、简介二、makefile文件制作(简洁版)2.1 源文件2.2 makefile如何制作2.2.1 依赖关系、依赖方法2.2.3 伪目标(清理文件资源) 三、make/Makefile自动化原理3.1 伪目标为什…

SpringBoot+Vue实现el-table表头筛选排序(附源码)

👨‍💻作者简介:在笑大学牲 🎟️个人主页:无所谓^_^ ps:点赞是免费的,却可以让写博客的作者开心好几天😎 前言 后台系统对table组件的需求是最常见的,不过element-ui的el…

Grpc项目集成到java方式调用实践

背景:由于项目要对接到grcp 的框架,然后需要对接老外的东西,还有签名和证书刚开始没有接触其实有点懵逼。 gRPC 是由 Google 开发的高性能、开源的远程过程调用(RPC)框架。它建立在 HTTP/2 协议之上,使用 …

D7805 正电压稳压电路应用——体积小,成本低,性能好

D7805 构成的 5V 稳压电源为输出电压5V,输出电流 1000mA 的稳压电源它由滤波电容 C1,C3,防止自激电容 C2、C3 和一只固定三端稳压器(7805)后级加 LC 滤波极为简洁方便地搭成,输入直流电压范围为 7~35V,此直流电压经过D…

yolov8-更换卷积模块-ContextGuidedBlock_Down

源码解读 class ContextGuidedBlock_Down(nn.Module):"""the size of feature map divided 2, (H,W,C)---->(H/2, W/2, 2C)"""def __init__(self, nIn, dilation_rate2, reduction16):"""args:nIn: the channel of input fea…