Antv/G2 分组柱状图+折线图双轴图表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,height=device-height"><title>分组柱状图+折线图双轴图表</title><style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}#chartcontainer {margin: 50px auto;text-align: center;}
</style>
</head>
<body><div id="chartcontainer"></div><script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script><script src="https://gw.alipayobjects.com/os/lib/antv/g2/4.2.8/dist/g2.min.js"></script><script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.11.1/dist/data-set.js"></script><script><!-- 浏览器引入，请使用全局命名空间 G2，如 new Chart() 改为 new G2.Chart，即可运行。 -->const data = [{date: '2023/8/1', type: 'london', value: 4623, rate: 0.33}, {date: '2023/8/1', type: 'tokyo', value: 2208, rate: 0.53}, {date: '2023/8/1', type: 'paris', value: 182, rate: 0.63}, {date: '2023/8/2', type: 'london', value: 6145, rate: 0.13}, {date: '2023/8/2', type: 'tokyo', value: 2016, rate: 0.33}, {date: '2023/8/2', type: 'paris', value: 257, rate: 0.33}, {date: '2023/8/3', type: 'london', value: 508, rate: 0.23},{date: '2023/8/3', type: 'tokyo', value: 2916, rate: 0.03},{date: '2023/8/3', type: 'paris', value: 289, rate: 0.73},{date: '2023/8/4', type: 'london', value: 6268, rate: 0.63}, {date: '2023/8/4', type: 'tokyo', value: 4512, rate: 0.63}, {date: '2023/8/4', type: 'paris', value: 428, rate: 0.53}, {date: '2023/8/5', type: 'london', value: 6411, rate: 0.33}, {date: '2023/8/5', type: 'tokyo', value: 8281, rate: 0.03}, {date: '2023/8/5', type: 'paris', value: 619, rate: 0.13},{date: '2023/8/6', type: 'london', value: 1890, rate: 0.43}, {date: '2023/8/6', type: 'tokyo', value: 2008, rate: 0.53}, {date: '2023/8/6', type: 'paris', value: 87, rate: 0.73},{date: '2023/8/7', type: 'london', value: 4251, rate: 0.03}, {date: '2023/8/7', type: 'tokyo', value: 1963, rate: 0.13}, {date: '2023/8/7', type: 'paris', value: 706, rate: 0.83}]var chart = new G2.Chart({container: 'chartcontainer',autoFit: true,width: 300,height: 300,padding: [80, 80, 50, 80]});chart.data(data);chart.scale({ value: {formatter: (val) => {return val + '万'},sync: true, nice: true,}, rate: {formatter: (rate) => {return rate + '%'},sync: true, nice: true,} });chart.legend('type',{position: 'top' // 设置图例的显示位置 })chart.axis('rate', {grid: null,label: {textStyle: {fill: '#6495ED'}}});chart.interval().position('date*value').color('type').adjust([{type: 'dodge',marginRatio: 1 / 32}])chart.line().position('date*rate').color('type').size(3).shape('smooth');chart.point().position('date*rate').color('type').size(3).shape('circle');chart.render();</script>
</body>
</html>
页面效果：
相关文章：
Antv/G2 分组柱状图+折线图双轴图表
<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width,heightdevice-height"><title>分组柱状图折线图双轴图表</title><styl…...
springboot323基于Java的美妆购物网站的设计与实现
交流学习： 更多项目： 全网最全的Java成品项目列表 https://docs.qq.com/doc/DUXdsVlhIdVlsemdX 演示 项目功能演示： ————————————————...
vue项目本地开发完成后部署到服务器后报404
vue项目本地开发完成后部署到服务器后报404是什么原因呢？ 一、如何部署 前后端分离开发模式下，前后端是独立布署的，前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可 我们知道vue项目在构建后，是生成一系…...
Android设计模式--状态模式
真知即所以为行，不行不足谓之知 一，定义 当一个对象的内在状态改变时，允许改变其行为，这个对象看起来像是改变了其类。 这么说可能很难理解，通俗来讲就是当一个对象它有多种状态的时候，把每一种状态的行为…...
C++关系运算符重载
#include<iostream> using namespace std;class Person { public:string name;int age;Person(string n, int a){name n;age a;}//friend bool operator(Person& p1, Person& p2); 使用友元//成员函数实现函数关系符重载bool operator(Person& p) {if (na…...
HLS基础issue
hls 是一个用C/c 来开发PL ，产生rtl的工具 hls是按照rtl code来运行的 ， 但是rtl会在不同器件调用不同的源语； 可能产生的ip使用在vivado另外一个器件的话 会存在问题； Hls ： vivado ip ， vitis kernel 是…...
C#特性（Attribute）
C#特性（Attribute）是一种在程序中添加元数据的机制，它可以为代码提供额外的信息和指示。通过使用特性，我们可以为类、方法、属性等元素添加标记，以便在运行时进行更多的操作和决策。 C#特性是一种声明式编程的工具&…...
【设计模式】七大设计原则
七大设计原则 文章目录 七大设计原则一、概述二、单一职责原则三、接口隔离原则四、依赖倒转原则五、里氏替换原则六、开闭原则七、迪米特法则八、合成复用原则 一、概述 设计模式是为了让程序(软件)，具有更好代码重用性，可读性，可扩展性&am…...
思维导图软件 Xmind mac中文版特点介绍
XMind 2022 mac是一款思维导图软件，可以帮助用户创建各种类型的思维导图和概念图。 XMind mac软件特点 - 多样化的导图类型：XMind提供了多种类型的导图，如鱼骨图、树形图、机构图等，可以满足不同用户的需求。 - 强大的功能和工具&…...
Day32力扣打卡
打卡记录 买卖股票的最佳时机 IV（状态机DP） 链接 class Solution:def maxProfit(self, k: int, prices: List[int]) -> int:n len(prices)max lambda x, y: x if x > y else yf [[-0x3f3f3f3f] * 2 for _ in range(k 2)]for i in range(k 2…...
抗击.Elbie勒索病毒：如何应对.Elbie病毒威胁，保卫您的数据
导言： .Elbie勒索病毒如今成为网络世界中的一大威胁，其狡猾性让用户防不胜防。本文将深入介绍.Elbie病毒的特点、对数据的威胁，提供被感染文件的恢复方法，并详述一系列强化网络安全的预防措施，让您远离.Elbie勒索病毒…...
Vue3 函数式弹窗
运行环境 vue3vitetselement-plus 开发与测试 1. 使用h、render函数创建Dialog 建议可在plugins目录下创建dialog文件夹，创建index.ts文件，代码如下 import { h, render } from "vue";/*** 函数式弹窗* param component 组件* param opti…...
如何解决 Critical dependency: the request of a dependency is an expression ？
更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码： ruoyi-nbcio: nbcio-boot的若依版本,基于ruoyi-flowable-plus和flowable6.7.2，目前处于开发功能完善阶段，目标是打造一个最好的若依平台上flowable流程管理系统开源版本&…...
挑战视觉边界，探索图形验证码背后的黑科技
在日常生活中，我们登录网站或者其他平台时，在填写完账号密码之后，还会让我们填写4或6位的数字或者英文字母等，填写正确才能请求登录。这个其实是防止某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试，如下…...
【网络奇缘】- 计算机网络|网络类型|性能指标
🌈个人主页: Aileen_0v0🔥系列专栏: 一见倾心,再见倾城 --- 计算机网络~💫个人格言:"没有罗马,那就自己创造罗马~" 目录 计算机网络分类 1.根据范围分类 编辑 2.按使用者分编辑 3.按交换技术分 编辑4.按拓扑结构分 …...
Leetcode—剑指Offer LCR 140.训练计划II【简单】
2023每日刷题（三十三） Leetcode—LCR 140.训练计划II 实现代码 /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/ struct ListNode* trainingPlan(struct ListNode* head, int cnt) {str…...
梦想编织者——Adobe Dreamweaver
今天，我们来谈谈一款在Adobe系列中推出的一款Adobe Dreamweaver，简称“DW”，中文名称 “梦想编织者”，是集网页制作和管理网站于一身的所见即所得网页代码编辑器。 利用对 HTML、CSS、JavaScript等内容的支持，设计人员…...
springMVC学习笔记-请求映射，参数绑定，响应，restful，响应状态码，springMVC拦截器
目录 概述 springMVC做了什么 springMVC与struts2区别 springMVC整个流程是一个单向闭环 springMVC具体的处理流程 springMVC的组成部分 请求映射 RequestMapping 用法 属性 1.value 2.method GET方式和POST方式 概述 HTTP给GET和POST做了哪些规定 GET方式&…...
Python实现视频字幕时间轴格式转换
自己喜欢收藏电影，有时网上能找到的中文字幕文件都不满足自己电影版本。在自己下载的压制版电影中已内封非中文srt字幕时，可以选择自己将srt的时间轴转为ass并替换ass中的时间轴。自己在频繁 复制粘贴改格式的时候想起可以用Python代码完成转换这一操作&…...
蓝桥杯 枚举
例题讲解 特别数的和 #include<iostream> using namespace std; bool ifspecial(int n){while(n){if(n%100||n%101||n%102||n%109){return true;} n/10;}return false; } int main(){int n;cin>>n;int sum0;for(int i1;i<n;i){if(ifspecial(i)){sumi;}}cout&l…...
多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度
一、引言：多云环境的技术复杂性本质 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时，基础设施的技术债呈现指数级积累。网络连接、身份认证、成本管理这三大核心挑战相互嵌套：跨云网络构建数据…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
51c自动驾驶~合集58
我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留，CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制（CCA-Attention），…...
【入坑系列】TiDB 强制索引在不同库下不生效问题
文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...
IGP（Interior Gateway Protocol，内部网关协议）
IGP（Interior Gateway Protocol，内部网关协议） 是一种用于在一个自治系统（AS）内部传递路由信息的路由协议，主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
vscode（仍待补充）
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh？ debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...
跨链模式：多链互操作架构与性能扩展方案
跨链模式：多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈：模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展（H2Cross架构）： 适配层…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装： 下载安装DevEco Studio 4.0（支持HarmonyOS 5）配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化： ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 （一）概念解析 TRS（Total Return Swap）收益互换是一种金融衍生工具，指交易双方约定在未来一定期限内，基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
vue3 定时器-定义全局方法 vue+ts
1.创建ts文件 路径：src/utils/timer.ts 完整代码： import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...