栏目二：Echart绘制动态折线图+柱状图

栏目二：Echart绘制动态折线图+柱状图

配置了一个ECharts图表，该图表集成了数据区域缩放、双Y轴显示及多种图表类型（折线图、柱状图、象形柱图）。图表通过X轴数据展示，支持平滑折线展示比率数据并自动添加百分比标识，柱状图以渐变色展示评论数量，而象形柱图则以矩形形式展示点赞数量，增强了视觉表现力。整体设计注重细节处理，如坐标轴指示器、数据点形状及标签格式化等，旨在为用户提供直观、丰富的数据可视化体验。

效果图：
在这里插入图片描述
核心代码：

let option = {  // 配置提示框组件  tooltip: {  trigger: 'axis', // 触发类型：坐标轴触发  axisPointer: {  type: 'shadow', // 坐标轴指示器类型为阴影  label: {  show: true, // 显示坐标轴指示器的标签  backgroundColor: '#333' // 标签的背景色  }  },  // 这里有一个被注释掉的 formatter 配置，用于自定义提示框内容  // ...（formatter 配置被省略）  },  // 配置数据区域缩放组件  dataZoom: {  type: 'inside', // 缩放组件类型：内置在坐标系中  start: 0, // 初始时，数据窗口的起始百分比  end: 95 // 初始时，数据窗口的结束百分比  },  // 配置 X 轴  xAxis: {  data: x, // X 轴数据  axisLine: {  lineStyle: {  color: "#ccc" // X 轴线的颜色  }  },  show: true // 显示 X 轴  },  // 配置 Y 轴，这里配置了两个 Y 轴  yAxis: [{  splitLine: { show: false }, // 不显示分割线  axisLine: {  lineStyle: {  color: "#ccc" // Y 轴线的颜色  }  },  name: "赞评数量" // Y 轴名称  }, {  // 第二个 Y 轴的配置  splitLine: { show: false },  axisLine: {  lineStyle: {  color: "#ccc"  }  },  name: "比率/%", // Y 轴名称  axisLabel: {  formatter: '{value} %' // Y 轴标签格式化，添加百分比符号  }  }],  // 配置多个系列  series: [{  name: '比率',  type: 'line', // 类型为折线图  smooth: true, // 线条平滑  showAllSymbol: true, // 显示所有数据点  symbol: 'emptyCircle', // 数据点形状  symbolSize: 15, // 数据点大小  yAxisIndex: 1, // 使用第二个 Y 轴  data: y3, // 数据  // 为该系列的 tooltip 自定义显示  tooltip: {  valueFormatter: function (value) {  return value + '%'; // 为 tooltip 值添加百分比符号  }  }  }, {  name: '评论',  type: 'bar', // 类型为柱状图  barWidth: 30, // 柱状图的宽度  itemStyle: {  normal: {  barBorderRadius: 5, // 柱子的圆角  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [  // 渐变色配置  { offset: 0, color: '#a85d74' },  { offset: 1, color: '#8f5d6c' }  ])  }  },  data: y2 // 数据  }, {  name: '点赞',  type: 'pictorialBar', // 类型为象形柱图  symbol: 'rect', // 形状为矩形  itemStyle: {  normal: {  color: '#279418' // 颜色  }  },  symbolRepeat: true, // 是否重复显示形状  symbolSize: [30, 4], // 形状大小  symbolMargin: 1, // 形状间的间隔  z: -10, // 系列的堆叠顺序  data: y1 // 数据  }]  
};

具体代码如下：

<!-- 第二章：折线图+柱状图+动画 -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div>
</body>
<script src="../js/echarts.min.js"></script>
<script>let x = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];let y2 = [586, 548, 456, 845, 345, 234, 584, 734, 645, 456, 567, 678];let y3 = [0.5753, 0.2768, 0.7575, 0.6445, 0.3534, 0.4435, 0.6435, 0.3587, 0.4845, 0.6135, 0.4748, 0.6575];let y1 = y2.map(function (item, index) {return Math.round(item / y3[index]);});y3 = y3.map(function (item) {// 保留两位小数return parseFloat((item * 100).toFixed(2));});function changeData(list) {let tmp = list[0]for (let i = 0; i < list.length-1; i++) {list[i] = list[i+1];}list[list.length - 1] = tmp;}function circleCharts(x,y1,y2,y3) {var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);let option = {  // 配置提示框组件  tooltip: {  trigger: 'axis', // 触发类型：坐标轴触发  axisPointer: {  type: 'shadow', // 坐标轴指示器类型为阴影  label: {  show: true, // 显示坐标轴指示器的标签  backgroundColor: '#333' // 标签的背景色  }  },  // 这里有一个被注释掉的 formatter 配置，用于自定义提示框内容  // ...（formatter 配置被省略）  },  // 配置数据区域缩放组件  dataZoom: {  type: 'inside', // 缩放组件类型：内置在坐标系中  start: 0, // 初始时，数据窗口的起始百分比  end: 95 // 初始时，数据窗口的结束百分比  },  // 配置 X 轴  xAxis: {  data: x, // X 轴数据  axisLine: {  lineStyle: {  color: "#ccc" // X 轴线的颜色  }  },  show: true // 显示 X 轴  },  // 配置 Y 轴，这里配置了两个 Y 轴  yAxis: [{  splitLine: { show: false }, // 不显示分割线  axisLine: {  lineStyle: {  color: "#ccc" // Y 轴线的颜色  }  },  name: "赞评数量" // Y 轴名称  }, {  // 第二个 Y 轴的配置  splitLine: { show: false },  axisLine: {  lineStyle: {  color: "#ccc"  }  },  name: "比率/%", // Y 轴名称  axisLabel: {  formatter: '{value} %' // Y 轴标签格式化，添加百分比符号  }  }],  // 配置多个系列  series: [{  name: '比率',  type: 'line', // 类型为折线图  smooth: true, // 线条平滑  showAllSymbol: true, // 显示所有数据点  symbol: 'emptyCircle', // 数据点形状  symbolSize: 15, // 数据点大小  yAxisIndex: 1, // 使用第二个 Y 轴  data: y3, // 数据  // 为该系列的 tooltip 自定义显示  tooltip: {  valueFormatter: function (value) {  return value + '%'; // 为 tooltip 值添加百分比符号  }  }  }, {  name: '评论',  type: 'bar', // 类型为柱状图  barWidth: 30, // 柱状图的宽度  itemStyle: {  normal: {  barBorderRadius: 5, // 柱子的圆角  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [  // 渐变色配置  { offset: 0, color: '#a85d74' },  { offset: 1, color: '#8f5d6c' }  ])  }  },  data: y2 // 数据  }, {  name: '点赞',  type: 'pictorialBar', // 类型为象形柱图  symbol: 'rect', // 形状为矩形  itemStyle: {  normal: {  color: '#279418' // 颜色  }  },  symbolRepeat: true, // 是否重复显示形状  symbolSize: [30, 4], // 形状大小  symbolMargin: 1, // 形状间的间隔  z: -10, // 系列的堆叠顺序  data: y1 // 数据  }]  };option && myChart.setOption(option);}setInterval(function () {circleCharts(x,y1,y2,y3);changeData(y2);changeData(y3);changeData(y1);changeData(x);}, 1500);
</script></html>

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

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

相关文章

Docker-2.如何保存数据退出

Docker-2.如何保存数据退出

在使用Docker时&#xff0c;我们常常需要修改容器中的文件&#xff0c;并且希望在容器重启后这些修改能够得到保留。 0.简介 使用Docker时有一个需要注意的问题&#xff1a;当你修改了容器中的文件后&#xff0c;重启容器后这些修改将会被重置&#xff0c;深入研究这个问题。 …
阅读更多...
Java类设计模式

Java类设计模式

1、单例模式 核心&#xff1a;保证一个类只有一个对象&#xff0c;并且提供一个访问该实例的全局访问点 五种单例模式&#xff1a;主要&#xff1a;饿汉式&#xff1a;线程安全&#xff0c;调用效率高&#xff0c;不能延时加载懒汉式&#xff1a;线程安全&#xff0c;调用效率…
阅读更多...
从零开始Ubuntu24.04上Docker构建自动化部署（三）Docker安装Nginx

从零开始Ubuntu24.04上Docker构建自动化部署（三）Docker安装Nginx

安装nginx sudo docker pull nginx 启动nginx 宿主机创建目录 sudo mkdir -p /home/nginx/{conf,conf.d,html,logs} 先启动nginx sudo docker run -d --name mynginx -p 80:80 nginx 宿主机上拷贝docker上nginx服务上文件到本地目录 sudo docker cp mynginx:/etc/nginx/ngin…
阅读更多...
企业间图文档发放：如何在保障安全的同时提升效率？

企业间图文档发放：如何在保障安全的同时提升效率？

不管是大型企业&#xff0c;还是小型创业公司&#xff0c;不论企业规模大小&#xff0c;每天都会有大量的图文档发放&#xff0c;对内传输协作和对外发送使用&#xff0c;数据的生产也是企业业务生产力的体现之一。 伴随着业务范围的不断扩大&#xff0c;企业与客户、合作伙伴之…
阅读更多...
五子棋双人对战项目（2）——登录模块

五子棋双人对战项目（2）——登录模块

目录 一、数据库模块 1、创建数据库 2、使用MyBatis连接并操作数据库 编写后端数据库代码 二、约定前后端交互接口 三、后端代码编写 文件路径如下&#xff1a; UserAPI&#xff1a; UserMapper&#xff1a; 四、前端代码 登录页面 login.html&#xff1a; 注册页面…
阅读更多...
鸿蒙harmonyos next flutter通信之EventChannel获取ohos系统时间

鸿蒙harmonyos next flutter通信之EventChannel获取ohos系统时间

建立通道 flutter代码&#xff1a; EventChannel eventChannel EventChannel("com.xmg.eventChannel"); ohos代码&#xff1a; //定义eventChannelprivate eventChannel: EventChannel | null null//定义eventSinkprivate eventSink: EventSink | null null//建…
阅读更多...
SQL常用语法

SQL常用语法

SQL&#xff08;Structured Query Language&#xff09;是一种用于存储、操作和检索数据库中数据的标准编程语言。以下是一些常用的 SQL 语法&#xff1a; 数据库操作 创建数据库&#xff1a;CREATE DATABASE database_name;删除数据库&#xff1a;DROP DATABASE database_name…
阅读更多...
linux dbus介绍，彻底懂linux bluez dbus

linux dbus介绍，彻底懂linux bluez dbus

零. 前言 由于Bluez的介绍文档有限，以及对Linux 系统/驱动概念、D-Bus 通信和蓝牙协议都有要求，加上网络上其实没有一个完整的介绍Bluez系列的文档，所以不管是蓝牙初学者还是蓝牙从业人员，都有不小的难度，学习曲线也相对较陡，所以我有了这个想法，专门对Bluez做一个系统…
阅读更多...
什么是大语言模型的上下文窗口

什么是大语言模型的上下文窗口

在大语言模型的使用中&#xff0c;“支持 32k 上下文”的意思是该模型可以处理并记住最多 32,000 个标记&#xff08;tokens&#xff09;的输入。这些标记通常是文本的最小组成部分&#xff0c;可以是一个字符、一个单词&#xff0c;或一个词组的部分。大多数自然语言处理模型并…
阅读更多...
在 Java 中提供接口方法而不是实现接口

在 Java 中提供接口方法而不是实现接口

问题 我正在阅读有关Java中的接口的文章。其中提到我们必须实现compareTo方法才能在ArrayList容器上调用sort&#xff0c;例如Employee类应该实现 Comparable接口。 后面解释了为什么Employee类不能简单地提供compareTo方法而不实现Comparable接口&#xff1f;之所以需要接口…
阅读更多...
ireport 5.1 中文生辟字显示不出来，生成PDF报字体找不到

ireport 5.1 中文生辟字显示不出来，生成PDF报字体找不到

ireport生成pdf里文字不显示。本文以宋体中文字不显示为例。 问题&#xff1a;由浅入深一步一步分析 问题1、预览正常&#xff0c;但生成pdf中文不显示 报告模板编辑后&#xff0c;预览正常&#xff0c;但生成pdf中文不显示。以下是试验过程&#xff1a; 先编辑好一个报告单模…
阅读更多...
SkyWalking 告警功能

SkyWalking 告警功能

SkyWalking 告警功能是在 6.x 版本新增的，其核心由一组规则驱动，这些规则定义在config/alarm-settings.yml文件中。 告警规则 告警规则：它们定义了应该如何触发度量警报，应该考虑什么条件。Webhook（网络钩子）：定义当警告触发时，哪些服务终端需要被告知。常用告警规则 …
阅读更多...
在 Docker 版 RStudio 中安装 Seurat V4 的完整教程 （同样适用于普通R环境安装）

在 Docker 版 RStudio 中安装 Seurat V4 的完整教程 （同样适用于普通R环境安装）

在单细胞RNA测序&#xff08;scRNA-seq&#xff09;数据分析领域&#xff0c;Seurat 是一个广泛使用且功能强大的R包&#xff0c;提供了丰富的数据处理和可视化工具。为了简化环境配置和依赖管理&#xff0c;使用Docker来部署RStudio并安装Seurat V4是一种高效且可重复的方法。…
阅读更多...
华硕天选笔记本外接音箱没有声音

华硕天选笔记本外接音箱没有声音

系列文章目录 文章目录 系列文章目录一.前言二.解决方法第一种方法第二种方法 一.前言 华硕天选笔记本外接音箱没有声音&#xff0c;在插上外接音箱时&#xff0c;系统会自动弹出下图窗口 二.解决方法 第一种方法 在我的电脑上选择 Headphone Speaker Out Headset 这三个选项…
阅读更多...
一文上手SpringSecurity【八】

一文上手SpringSecurity【八】

RBAC&#xff08;Role-Based Access Control&#xff09;&#xff0c;基于角色的访问控制。通过用户关联角色&#xff0c;角色关联权限&#xff0c;来间接的为用户赋予权限。 一、RBAC介绍 RBAC&#xff08;Role-Based Access Control&#xff09;&#xff0c;即基于角色的访…
阅读更多...
【数据库】MongoDB 用户权限与数据之间的关系详解

【数据库】MongoDB 用户权限与数据之间的关系详解

在 MongoDB中&#xff0c;用户和数据之间的关系通过权限和角色管理来实现。用户权限控制了用户对数据库中数据的访问和操作能力。本文将详细介绍用户权限、角色、以及它们与数据之间的关系。 1. 用户与数据的关系基础 在 MongoDB 中&#xff0c;用户是执行操作的主体&#xff…
阅读更多...
二分查找算法专题（1）

二分查找算法专题（1）

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a; 优选算法专题 目录 二分查找算法的介绍 704. 二分查找 34. 在排序数组中查找元素的第一个和 最后一个位置 35. 搜索插入位置 69. x的平…
阅读更多...
【光伏混合储能】VSG并网运行，构网型变流器，虚拟同步机仿真

【光伏混合储能】VSG并网运行，构网型变流器，虚拟同步机仿真

摘要 本文提出了一种基于光伏发电与混合储能系统结合的虚拟同步发电机&#xff08;VSG&#xff09;控制策略&#xff0c;该策略能够在并网运行时稳定电网电压和频率。通过仿真分析&#xff0c;验证了该策略在各种运行工况下的有效性&#xff0c;展示了其在电力系统中的广泛应用…
阅读更多...
数据结构--集合框架

数据结构--集合框架

目录 1. 什么是集合框架 2. 背后所涉及的数据结构以及算法 2.1 什么是数据结构 2.2 容器背后对应的数据结构 1. 什么是集合框架 Java 集合框架 Java Collection Framework &#xff0c;又被称为容器 container &#xff0c;是定义在 java.util 包下的一组接口 int…
阅读更多...
禾赛嵌入式面试题及参考答案(2万字长文)

禾赛嵌入式面试题及参考答案(2万字长文)

TCP/IP 的连接建立（三次握手）和断开过程（四次挥手） 连接建立（三次握手）： 第一次握手：客户端向服务器发送一个 SYN（同步）包，这个包中包含客户端选择的初始序列号（Sequence Number）。此时客户端进入 SYN_SENT 状态，表示客户端已发送 SYN 包等待服务器确认。 第二…
阅读更多...
最新文章

Copyright @ 2022~2023