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

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

news 2026/4/9 8:01:28

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

如何利用Browserify代码覆盖率分析提升JavaScript应用质量：完整工具链指南

如何利用Browserify代码覆盖率分析提升JavaScript应用质量&#xff1a;完整工具链指南 【免费下载链接】browserify-handbook how to build modular applications with browserify 项目地址: https://gitcode.com/gh_mirrors/br/browserify-handbook 在前端开发中&#…...

编程新知 2026/4/9 7:19:03

Java 并发原子类完全指南：Atomic 全家桶、CAS/JMM、ABA、LongAdder、源码阅读路线与经典实战

多线程编程中&#xff0c;count 这样简单的操作都不是线程安全的。用 synchronized 能解决问题&#xff0c;但锁会带来阻塞和上下文切换开销。java.util.concurrent.atomic 包提供了一套基于 CAS&#xff08;Compare-And-Swap&#xff09;的无锁并发工具&#xff0c;在“单变量…...

编程新知 2026/4/9 6:52:15

从零解析SHA-1：一个160位哈希的诞生之旅

1. 从原材料到成品&#xff1a;SHA-1的工厂流水线 想象你是一家精密零件加工厂的厂长&#xff0c;每天要处理各种形状不规则的金属原料&#xff08;原始数据&#xff09;&#xff0c;最终需要生产出标准化的160位产品&#xff08;哈希值&#xff09;。SHA-1算法就像这条全自动生…...

编程新知 2026/4/9 6:46:09

墨语灵犀赋能在线教育：AI助教自动批改编程作业实践

墨语灵犀赋能在线教育&#xff1a;AI助教自动批改编程作业实践 每次上完《Python入门》课&#xff0c;看着邮箱里堆积如山的作业压缩包&#xff0c;你是不是也感到一阵头疼&#xff1f;打开一份作业&#xff0c;从代码缩进看到变量命名&#xff0c;再从逻辑结构分析到运行结果…...

编程新知 2026/4/9 6:37:19

S32K3低功耗模式下的RTI定时器唤醒机制解析

1. 为什么需要低功耗定时唤醒&#xff1f; 在嵌入式系统开发中&#xff0c;低功耗设计就像给设备装上了"节能开关"。想象一下你家的智能门锁&#xff0c;平时没人操作时应该处于"打盹"状态&#xff0c;但又要定期"眨眨眼"检查有没有人按门铃。S3…...

编程新知 2026/4/9 6:17:06

如何用ok-ww实现《鸣潮》全自动战斗与声骸收集：终极懒人指南

如何用ok-ww实现《鸣潮》全自动战斗与声骸收集&#xff1a;终极懒人指南 【免费下载链接】ok-wuthering-waves 鸣潮 后台自动战斗 自动刷声骸 一键日常 Automation for Wuthering Waves 项目地址: https://gitcode.com/GitHub_Trending/ok/ok-wuthering-waves 你是否厌倦…...

编程新知 2026/4/9 4:12:24

Globby最佳实践：避免常见陷阱的7个技巧

Globby最佳实践&#xff1a;避免常见陷阱的7个技巧 【免费下载链接】globby User-friendly glob matching 项目地址: https://gitcode.com/gh_mirrors/gl/globby Globby是一个基于fast-glob构建的用户友好的glob匹配库&#xff0c;它为Node.js开发者提供了强大的文件匹配…...

编程新知 2026/4/9 3:45:58

LVGL表格控件(lv_table)高级应用：动态数据绑定与样式优化

1. LVGL表格控件基础回顾 在嵌入式UI开发中&#xff0c;表格是展示结构化数据的利器。LVGL的lv_table控件采用轻量化设计&#xff0c;仅存储文本内容而非真实对象&#xff0c;这使得它在资源受限的嵌入式设备上表现出色。创建基础表格只需几行代码&#xff1a; lv_obj_t *table…...

编程新知 2026/4/9 3:45:57

电商运营自动化：OpenClaw+Phi-3-vision实现竞品图文分析

电商运营自动化&#xff1a;OpenClawPhi-3-vision实现竞品图文分析 1. 为什么需要自动化竞品分析 作为个人电商卖家&#xff0c;我每天要花大量时间手动收集竞品信息&#xff1a;截图商品页面、记录价格变化、对比卖点描述。这种重复劳动不仅效率低下&#xff0c;还容易遗漏关…...

编程新知 2026/4/9 3:19:08

边缘设备资源告急？立刻启用.NET 9的Dynamic PGO+Crossgen2预编译组合技（仅限Preview 5+）

第一章&#xff1a;边缘设备资源告急&#xff1f;立刻启用.NET 9的Dynamic PGOCrossgen2预编译组合技&#xff08;仅限Preview 5&#xff09;在资源受限的边缘设备&#xff08;如Raspberry Pi 4、Jetson Nano或工业PLC网关&#xff09;上&#xff0c;.NET应用常因JIT编译开销与…...

编程新知 2026/4/9 1:09:08