栏目二：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>
相关文章：
栏目二：Echart绘制动态折线图+柱状图
栏目二：Echart绘制动态折线图柱状图 配置了一个ECharts图表，该图表集成了数据区域缩放、双Y轴显示及多种图表类型（折线图、柱状图、象形柱图）。图表通过X轴数据展示，支持平滑折线展示比率数据并自动添加百分比标识&…...
Gromacs——使用过程中暴露问题分析及学习
gromacs——突变残基蛋白电场MD和基本分析从入门到发SCIENCE：基于Gromacs的蛋白小分子动态模拟全过程解析水溶性蛋白模拟全过程：从准备蛋白结构文件（top、itp、gro文件生成）到模拟数据分析GromacsGROMACS 教程：蛋白配体…...
Webpack模式-Resolve-本地服务器
目录 ResolveMode配置搭本地服务器区分环境配置 Resolve 前面学习时使用了各种各样的模块依赖，这些模块可能来自于自己编写的代码，也可能来自第三方库，在 Webpack 中，resolve 是用于解析模块依赖的配置项，它决定了 We…...
【LLM论文日更】| 通过指令调整进行零样本稠密检索的无监督文本表示学习
论文：https://arxiv.org/pdf/2409.16497代码：暂未开源机构：Amazon AGI、宾夕法尼亚州立大学领域：Dense Retrieval发表：Accepted at DCAI24 workshopCIKM2024 研究背景 研究问题：这篇文章要解决的问题是如…...
02.01、移除重复节点
02.01、[简单] 移除重复节点 1、题目描述 编写代码，移除未排序链表中的重复节点。保留最开始出现的节点。 2、解题思路 为了实现这一目标，我们可以使用一个哈希表（或集合）来记录已经遇到的节点值，逐步遍历链表并删…...
旅游推荐|旅游推荐系统|基于Springboot+VUE的旅游推荐系统设计与实现(源码+数据库+文档)
旅游推荐系统 目录 基于java的旅游推荐系统设计与实现 一、前言 二、系统功能设计 三、系统实现 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取： 博主介绍：✌️大厂码农|毕设布道师…...
github项目--crawl4ai
github项目--crawl4ai 输出html输出markdown格式输出结构化数据与BeautifulSoup的对比 crawl4ai github上这个项目，没记错的话，昨天涨了3000多的star，今天又新增2000star。一款抓取和解析工具，简单写个demo感受下 这里我们使用cra…...
仅有N卡独显的情况下安装ubuntu是遇到的黑屏，加载卡顿等问题
Ubuntu安装的两个阶段都要进行一定的设置来临时禁用掉独显或者ubuntu的通用显卡驱动。 U盘启动阶段 U盘启动阶段要对U盘启动项进行设置，通过BIOS设置第一boot为USB hard disk后可以进到U盘引导项，第一项为 “try or install ubuntu”，倒计时10s后自动进入。 这个时候不要…...
Vite：为什么选 Vite
一、现实问题 在浏览器支持 ES 模块之前，JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因：使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。 时过境迁，我…...
个人项目简单https服务配置
1.SSL简介 SSL证书是一种数字证书，由受信任的证书颁发机构（CA）颁发，用于在互联网通信中建立加密链接。SSL代表“安全套接层”，是用于在互联网上创建加密链接的协议。SSL证书的主要目的是确保数据传输的安全性和隐私性…...
Rust 函数
Rust 函数 Rust 是一种系统编程语言，以其安全性、并发性和性能而闻名。函数是 Rust 编程语言中的基本构建块，用于封装可重用的代码块。本文将深入探讨 Rust 中的函数，包括其定义、特性、参数、返回值以及高级概念。 函数定义 在 Rust 中&a…...
微信小程序中的 `＜block＞` 元素：高效渲染与结构清晰的利器
微信小程序中的 <block> 元素：高效渲染与结构清晰的利器 在微信小程序的开发中，<block> 元素扮演着举足轻重的角色。尽管它不会在页面中渲染任何可见的节点，但作为一个逻辑上的容器，<block> 在条件渲染和循环渲…...
选读算法导论5.2 指示器随机变量
为了分析包括包括雇佣分析在内的许多算法，我们将使用指示器随机变量，它为概率和期望之间的转换提供了一个便利的方法，给定一个样本空间S和事件A，那么事件A对应的指示器随机变量： Xa 1 如果A发生 0 如果…...
大数据-154 Apache Druid 架构与原理详解 基础架构、架构演进
点一下关注吧！！！非常感谢！！持续更新！！！ 目前已经更新到了： Hadoop（已更完）HDFS（已更完）MapReduce（已更完&am…...
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…...
https访问报错：net::ERR_CERT_DATE_INVALLD
目录 简介异常排查原因解决补充 简介 访问https资源出现报错 异常 排查 将地址拿到浏览器进行访问，可以很清晰的看到出现该问题的原因 原因 1、SSL证书已过期 2、服务器日期不准，不在证书有效期 解决 1、重新申请SSL证书，并配置 2、校正…...
cat用来查看文件内容、合并文件，或者将文件内容输出到终端
cat 是 Unix 和 Linux 系统中的一个命令，它的名称来源于 “concatenate”（连接），主要用来查看文件内容、合并文件，或者将文件内容输出到终端。 常用用法 查看文件内容 cat filename输出 filename 的内容到终端中。 例…...
基于ssm大学生自主学习网站的设计与实现
文未可获取一份本项目的java源码和数据库参考。 1、毕业论文（设计）的背景及意义： （1）研究背景 目前，因特网是世界上最大的计算机互联网络，它通过网络设备将世界各地互相独立的不同规模的局域…...
C++11基于范围的for循环)
C++基础补充(01)C++11基于范围的for循环
文章目录 1. 基本语法1.1 decalaration默认获取值引用&自动类型推导（auto） 1.2 container数组STL容器初始化列表自定义类型返回容器的函数 2. 其他示例2.1 遍历数组2.2 遍历vector，并修改元素2.3 使用常量引用遍历，防止容器中…...
qt6 使用QPSQL
检查可用的数据库驱动： // iteator all database driverQStringList drivers QSqlDatabase::drivers();QStringList::iterator it;for (it drivers.begin(); it ! drivers.end(); it){qDebug() << *it;} qt6 自带pg数据库驱动： pro文件加个说明&…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞！！！ 抽象 现代智能交通系统 （ITS） 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 （…...
React Native 导航系统实战（React Navigation）
导航系统实战（React Navigation） React Navigation 是 React Native 应用中最常用的导航库之一，它提供了多种导航模式，如堆栈导航（Stack Navigator）、标签导航（Tab Navigator）和抽屉…...
Python爬虫实战：研究feedparser库相关技术
1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...
高危文件识别的常用算法：原理、应用与企业场景
高危文件识别的常用算法：原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件，如包含恶意代码、敏感数据或欺诈内容的文档，在企业协同办公环境中（如Teams、Google Workspace）尤为重要。结合大模型技术&…...
Java 加密常用的各种算法及其选择
在数字化时代，数据安全至关重要，Java 作为广泛应用的编程语言，提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景，有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN，根据VPN原理，打通两个内网必然需要借助一个公共中继节点，ktconnect工具巧妙的利用k8s原生的portforward能力，简化了建立连接的过程，apiserver间接起到了中继节…...
IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)
文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...
【论文阅读28】-CNN-BiLSTM-Attention-（2024）
本文把滑坡位移序列拆开、筛优质因子，再用 CNN-BiLSTM-Attention 来动态预测每个子序列，最后重构出总位移，预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵（S…...
JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案
JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成： 一、GC相关暂停 1. 安全点（Safepoint）阻塞 现象：JVM暂停但无GC日志，日志显示No GCs detected。原因：JVM等待所有线程进入安全点（如…...
python报错No module named ‘tensorflow.keras‘
是由于不同版本的tensorflow下的keras所在的路径不同，结合所安装的tensorflow的目录结构修改from语句即可。 原语句： from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后： from tensorflow.python.keras.lay…...