当前位置： 首页 > news >正文

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

news 文章来源：https://blog.csdn.net/m0_70405779/article/details/142618492 2024/11/15 10:52:43

栏目二：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>

相关文章：

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

栏目二&#xff1a;Echart绘制动态折线图柱状图 配置了一个ECharts图表&#xff0c;该图表集成了数据区域缩放、双Y轴显示及多种图表类型&#xff08;折线图、柱状图、象形柱图&#xff09;。图表通过X轴数据展示&#xff0c;支持平滑折线展示比率数据并自动添加百分比标识&…...

编程日记 2024/10/2 16:48:53

Gromacs——使用过程中暴露问题分析及学习

gromacs——突变残基蛋白电场MD和基本分析从入门到发SCIENCE&#xff1a;基于Gromacs的蛋白小分子动态模拟全过程解析水溶性蛋白模拟全过程&#xff1a;从准备蛋白结构文件&#xff08;top、itp、gro文件生成&#xff09;到模拟数据分析GromacsGROMACS 教程&#xff1a;蛋白配体…...

编程日记 2024/10/2 16:45:51

Webpack模式-Resolve-本地服务器

目录 ResolveMode配置搭本地服务器区分环境配置 Resolve 前面学习时使用了各种各样的模块依赖&#xff0c;这些模块可能来自于自己编写的代码&#xff0c;也可能来自第三方库&#xff0c;在 Webpack 中&#xff0c;resolve 是用于解析模块依赖的配置项&#xff0c;它决定了 We…...

编程日记 2024/10/2 16:44:50

【LLM论文日更】| 通过指令调整进行零样本稠密检索的无监督文本表示学习

论文&#xff1a;https://arxiv.org/pdf/2409.16497代码&#xff1a;暂未开源机构&#xff1a;Amazon AGI、宾夕法尼亚州立大学领域&#xff1a;Dense Retrieval发表&#xff1a;Accepted at DCAI24 workshopCIKM2024 研究背景 研究问题&#xff1a;这篇文章要解决的问题是如…...

编程日记 2024/10/2 16:40:46

02.01、移除重复节点

02.01、[简单] 移除重复节点 1、题目描述 编写代码&#xff0c;移除未排序链表中的重复节点。保留最开始出现的节点。 2、解题思路 为了实现这一目标&#xff0c;我们可以使用一个哈希表&#xff08;或集合&#xff09;来记录已经遇到的节点值&#xff0c;逐步遍历链表并删…...

编程日记 2024/10/2 16:38:44

旅游推荐|旅游推荐系统|基于Springboot+VUE的旅游推荐系统设计与实现(源码+数据库+文档)

旅游推荐系统 目录 基于java的旅游推荐系统设计与实现 一、前言 二、系统功能设计 三、系统实现 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农|毕设布道师&#xf…...

编程日记 2024/10/2 16:36:41

github项目--crawl4ai

github项目--crawl4ai 输出html输出markdown格式输出结构化数据与BeautifulSoup的对比 crawl4ai github上这个项目&#xff0c;没记错的话&#xff0c;昨天涨了3000多的star&#xff0c;今天又新增2000star。一款抓取和解析工具&#xff0c;简单写个demo感受下 这里我们使用cra…...

编程日记 2024/10/2 16:34:38

仅有N卡独显的情况下安装ubuntu是遇到的黑屏，加载卡顿等问题

Ubuntu安装的两个阶段都要进行一定的设置来临时禁用掉独显或者ubuntu的通用显卡驱动。 U盘启动阶段 U盘启动阶段要对U盘启动项进行设置，通过BIOS设置第一boot为USB hard disk后可以进到U盘引导项，第一项为 “try or install ubuntu”，倒计时10s后自动进入。 这个时候不要…...

编程日记 2024/10/2 16:30:35

Vite：为什么选 Vite

一、现实问题 在浏览器支持 ES 模块之前&#xff0c;JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因&#xff1a;使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。 时过境迁&#xff0c;我…...

编程日记 2024/10/2 16:28:33

个人项目简单https服务配置

1.SSL简介 SSL证书是一种数字证书&#xff0c;由受信任的证书颁发机构&#xff08;CA&#xff09;颁发&#xff0c;用于在互联网通信中建立加密链接。SSL代表“安全套接层”&#xff0c;是用于在互联网上创建加密链接的协议。SSL证书的主要目的是确保数据传输的安全性和隐私性…...

编程日记 2024/10/2 16:26:31

Rust 函数

Rust 函数 Rust 是一种系统编程语言&#xff0c;以其安全性、并发性和性能而闻名。函数是 Rust 编程语言中的基本构建块&#xff0c;用于封装可重用的代码块。本文将深入探讨 Rust 中的函数&#xff0c;包括其定义、特性、参数、返回值以及高级概念。 函数定义 在 Rust 中&a…...

编程日记 2024/10/2 16:25:30

微信小程序中的 `＜block＞` 元素：高效渲染与结构清晰的利器

微信小程序中的 <block> 元素&#xff1a;高效渲染与结构清晰的利器 在微信小程序的开发中&#xff0c;<block> 元素扮演着举足轻重的角色。尽管它不会在页面中渲染任何可见的节点&#xff0c;但作为一个逻辑上的容器&#xff0c;<block> 在条件渲染和循环渲…...

编程日记 2024/10/2 16:22:27

选读算法导论5.2 指示器随机变量

为了分析包括包括雇佣分析在内的许多算法&#xff0c;我们将使用指示器随机变量&#xff0c;它为概率和期望之间的转换提供了一个便利的方法&#xff0c;给定一个样本空间S和事件A&#xff0c;那么事件A对应的指示器随机变量&#xff1a; Xa 1 如果A发生 　　 0 如果…...

编程日记 2024/10/2 16:18:23

大数据-154 Apache Druid 架构与原理详解 基础架构、架构演进

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…...

编程日记 2024/10/2 16:12:17

centos9 nginx 版本

centos9 安装 ssh -V OpenSSH_8.7p1, OpenSSL 3.2.2 4 Jun 2024 openssl version OpenSSL 3.2.2 4 Jun 2024 (Library: OpenSSL 3.2.2 4 Jun 2024) sudo yum install nginx Installing:nginx x86_64 2:1.20.1…...

编程日记 2024/10/2 16:09:14

https访问报错：net::ERR_CERT_DATE_INVALLD

目录 简介异常排查原因解决补充 简介 访问https资源出现报错 异常 排查 将地址拿到浏览器进行访问&#xff0c;可以很清晰的看到出现该问题的原因 原因 1、SSL证书已过期 2、服务器日期不准&#xff0c;不在证书有效期 解决 1、重新申请SSL证书&#xff0c;并配置 2、校正…...

编程日记 2024/10/2 16:07:12

cat用来查看文件内容、合并文件，或者将文件内容输出到终端

cat 是 Unix 和 Linux 系统中的一个命令&#xff0c;它的名称来源于 “concatenate”&#xff08;连接&#xff09;&#xff0c;主要用来查看文件内容、合并文件&#xff0c;或者将文件内容输出到终端。 常用用法 查看文件内容 cat filename输出 filename 的内容到终端中。 例…...

编程日记 2024/10/2 16:04:09

基于ssm大学生自主学习网站的设计与实现

文未可获取一份本项目的java源码和数据库参考。 1、毕业论文&#xff08;设计&#xff09;的背景及意义&#xff1a; &#xff08;1&#xff09;研究背景 目前&#xff0c;因特网是世界上最大的计算机互联网络&#xff0c;它通过网络设备将世界各地互相独立的不同规模的局域…...

编程日记 2024/10/2 16:03:08

C++基础补充(01)C++11基于范围的for循环

文章目录 1. 基本语法1.1 decalaration默认获取值引用&自动类型推导&#xff08;auto&#xff09; 1.2 container数组STL容器初始化列表自定义类型返回容器的函数 2. 其他示例2.1 遍历数组2.2 遍历vector&#xff0c;并修改元素2.3 使用常量引用遍历&#xff0c;防止容器中…...

编程日记 2024/10/2 16:02:07

qt6 使用QPSQL

检查可用的数据库驱动&#xff1a; // iteator all database driverQStringList drivers QSqlDatabase::drivers();QStringList::iterator it;for (it drivers.begin(); it ! drivers.end(); it){qDebug() << *it;} qt6 自带pg数据库驱动&#xff1a; pro文件加个说明&…...

编程日记 2024/10/2 16:01:06

【PostgreSQL】提高篇——公用表表达式（CTE）和窗口函数

在这篇文章中&#xff0c;我将详细介绍 PostgreSQL 中的公用表表达式&#xff08;CTE&#xff09;和窗口函数&#xff0c;帮助你理解如何使用它们进行复杂的数据分析。我将通过具体的示例来演示这些概念的实际应用&#xff0c;并在每个示例中提供详细的解释和注释。 1. 公用表…...

编程日记 2024/10/2 16:00:05

【min25筛】【CF2020F】Count Leaves

题目 定义 f ( n , 0 ) 1 f(n,0)1 f(n,0)1&#xff0c; f ( n , d ) ∑ k ∣ n f ( k , d − 1 ) f(n,d)\sum_{k|n}f(k,d-1) f(n,d)∑k∣n​f(k,d−1) 给出 n , k , d n,k,d n,k,d&#xff0c;你需要求出: ∑ i 1 n f ( i k , d ) m o d ( 1 0 9 7 ) \sum_{i1}^n f(i^k…...

编程日记 2024/10/2 15:51:58

【d57】【sql】1661. 每台机器的进程平均运行时间

思路 一方面考察自连接&#xff0c;另一方面考察group by 这里主要说明 group by 用法&#xff1a; 1.在 SQL 查询中&#xff0c;GROUP BY 子句用于将结果集中的行分组&#xff0c;目的通常就是 对每个组应用聚合函数&#xff08;如 SUM(), AVG(), MAX(), MIN(), COUNT() 等…...

编程日记 2024/10/2 15:45:52

ArcGIS共享数据的最佳方法（不丢可视化、标注等各类显示信息一样带）

今天我们介绍一下ArcGIS数据共享的几个小妙招 我们时常要把数据发给对方&#xff0c;特别是很多新手朋友要将shp发给对方时只是发送了shp后缀的文件&#xff0c;却把shp的必要组成文件dbf、shx等等给落下了。 还有很多朋友给图层做好了符号化标注&#xff0c;但是数据一发给别…...

编程日记 2024/10/2 15:44:50

小程序this.getOpenerEventChannel()当前页面与navigateTo页面之间数据通信

this.getOpenerEventChannel() 是微信小程序中获取页面打开它的页面事件通道的方法。但是&#xff0c;这个方法只在页面是被wx.navigateTo打开的情况下才能使用。如果页面是通过其他方式打开的&#xff0c;比如wx.redirectTo&#xff0c;那么就无法使用这个方法。 解决方案&…...

编程日记 2024/10/2 15:43:49

调用飞书接口导入供应商bug

1、业务背景 财务这边大部分系统都是供应商项目&#xff0c;由于供应商的研发人员没有飞书项目的权限&#xff0c;涉及到供应商系统需求 财务这边都是通过多维表格进行bug的生命周期管理如图&#xff1a; 但多维表格没有跟飞书项目直接关联&#xff0c;测试组做bug统计的时候无…...

编程日记 2024/10/2 15:40:47

《深度学习》OpenCV 角点检测、特征提取SIFT 原理及案例解析

目录 一、角点检测 1、什么是角点检测 2、检测流程 1&#xff09;输入图像 2&#xff09;图像预处理 3&#xff09;特征提取 4&#xff09;角点检测 5&#xff09;角点定位和标记 6&#xff09;角点筛选或后处理&#xff08;可选&#xff09; 7&#xff09;输出结果 3、邻域…...

编程日记 2024/10/2 15:39:46

golang grpc初体验

grpc 是一个高性能、开源和通用的 RPC 框架&#xff0c;面向服务端和移动端&#xff0c;基于 HTTP/2 设计。目前支持c、java和go&#xff0c;分别是grpc、grpc-java、grpc-go&#xff0c;目前c版本支持c、c、node.js、ruby、python、objective-c、php和c#。grpc官网 grpc-go P…...

编程日记 2024/10/2 15:37:44

基于小程序+Vue + Spring Boot的进销存库存出库入库统计分析管理系统

目录 一、项目背景及需求分析 1. 项目背景 2. 需求分析 二、系统架构设计 1. 技术选型 2. 模块划分 三、数据库设计数据库表结构 四、前端实现 五、后端实现 1. RESTful API设计 2. 数据库操作 六、安全性和性能优化 1. 安全性 2. 性能优化 七、测试与部署 1. …...

编程日记 2024/10/2 15:35:41

【数据结构与算法】时间复杂度和空间复杂度例题

文章目录 时间复杂度常数阶时间O(1)对数阶时间O(logN)线性阶时间O(n)线性对数阶时间O(nlogN)平方阶时间O(n*n) 空间复杂度常量空间O(1)线性空间O(n)二维空间O(n*n)递归空间 时间复杂度 常数阶时间O(1) 代码在执行的时候&#xff0c;它消耗的时间并不随着某个变量的增长而增长…...

编程日记 2024/10/2 15:34:41

b站是什么网站/如何联系百度推广

Atitit.rsa密钥生成器的attilax总结 1.1. 密钥生成器 1 1.2. 生成固定的密钥 2 1.2.1. 设置或重置 SecureRandom 对象的随机数种子 2 1.3. 密钥结构 2 1.1. 密钥生成器 public static Map<String, Object> initKey2(String md5_deta) throws Exception{ /** RSA算法要…...

编程日记 2024/11/15 9:42:00

如何查看用wordpress建的站点/阿拉营销网站

文章目录一、题目1、题目描述2、基础框架3、原题链接二、解题报告1、思路分析2、时间复杂度3、代码详解三、本题小知识四、加群须知一、题目 1、题目描述 设计一种算法&#xff0c;将一个新节点插入到一个完全二叉树中&#xff0c;并在插入后保持其完整。实现 CBTInserter类: …...

编程日记 2024/11/15 9:24:20

做房地产要自己开网站/黑帽seo优化

众所周知程序员薪酬高、工作环境好&#xff0c;是很多人向往的职业&#xff0c;那么学编程需要什么基础&#xff1f;0基础能学编程吗&#xff1f; 学编程需要什么基础&#xff1f; 1、数学基础 从计算机发展和应用的历史来看计算机的数学模型和体系结构等都是有数学家提出的&…...

编程日记 2024/11/15 8:48:37

常见问题 网站建设/全网营销公司

题目相关 题目链接 洛谷&#xff0c;https://www.luogu.com.cn/problem/P1019。 计蒜客&#xff0c;https://nanti.jisuanke.com/t/T2110。 计蒜客&#xff0c;https://nanti.jisuanke.com/t/T2152。 我的OJ&#xff0c;http://47.110.135.197/problem.php?id4209。 题目…...

编程日记 2024/11/15 6:24:43

网站301重定向代码/html做一个简单的网页

Android中很多产品&#xff08;比如360手机助手、网易菜单...&#xff09;都采用侧滑菜单的展现形式,采用这种展现形式 1:能把更多的展现内容都存放在菜单中 2:设计上也能体现出视觉效果 现在这种交互方式越来越流行了&#xff0c;虽然这种交互方式可以通过自定义组件的方式…...

编程日记 2024/11/15 5:42:14

如何网站做淘客/宁波网站推广制作

原文链接http://www.cnblogs.com/zhouzhendong/p/8671759.html 题目传送门 - BZOJ3944 题意 多组数据&#xff08;组数<10)。 每组数据一个正整数$n(n\leq 10^{10})$。 让你求$\sum_{i1}^{n}\varphi(i)$以及$\sum_{i1}^{n}\mu(i)$。 题解 杜教筛模版题。 杜教筛学习->传送…...

编程日记 2024/11/15 4:45:43