Echarts 显示双Y轴

news2024/11/18 4:00:56

option 对象 

option = {
  yAxis: [
    { name: '重量(kg)', position: 'left', type: 'value' },
    { name: '金额(元)', position: 'right', type: 'value' }
  ],
  xAxis: { type: 'category' },
  legend: {},
  series: [
    {
      name: '剩余量',
      label: { normal: { show: true, position: 'insideRight' } },
      type: 'bar',
      // 适用于第一个Y轴
      yAxisIndex: 0
    },
    {
      name: '浪费量',
      label: { normal: { show: true, position: 'insideRight' } },
      type: 'bar',
      yAxisIndex: 0
    },
    {
      name: '浪费额',
      label: { normal: { show: true, position: 'insideRight' } },
      type: 'line',
      yAxisIndex: 1
    }
  ],
  tooltip: {},
  title: { text: '每日剩余数据' },
  dataset: {
    source: [
      { 剩余量: '0.11', product: '2023-07-10', 浪费额: '0.21', 浪费量: '0.11' },
      { 剩余量: '0.10', product: '2023-07-11', 浪费额: '0.22', 浪费量: '0.10' },
      { 剩余量: '0.12', product: '2023-07-12', 浪费额: '0.21', 浪费量: '0.12' },
      { 剩余量: '0.09', product: '2023-07-13', 浪费额: '0.14', 浪费量: '0.09' },
      { 剩余量: '0.00', product: '2023-07-14', 浪费额: '0.00', 浪费量: '0.00' },
      { 剩余量: '0.00', product: '2023-07-15', 浪费额: '0.00', 浪费量: '0.00' },
      { 剩余量: '0.00', product: '2023-07-16', 浪费额: '0.00', 浪费量: '0.00' }
    ],
    dimensions: ['product', '剩余量', '浪费量', '浪费额']
  }
};

只需将option set即可

showCharts(option, elementId) {
      let myChart = echarts.init(document.getElementById(elementId));
      myChart.clear();
      myChart.setOption(option);
    },

生成的图

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2023年全国程序员薪酬排行天梯榜

文章目录 ⭐️ 2023年全国程序员薪酬排行天梯榜 在过去很长的一段时间内,网上总有一个声音:“大厂裁员”、“程序员内卷严重”、“程序员人员过盛”、“35岁中年危机”、“码农吃的青春饭”、“互联网寒冬” 等等等等。 讲道理,我对这种人为的…

ViT-vision transformer

ViT-vision transformer 介绍 Transformer最早是在NLP领域提出的,受此启发,Google将其用于图像,并对分类流程作尽量少的修改。 起源:从机器翻译的角度来看,一个句子想要翻译好,必须考虑上下文的信息&…

Redisson源码分析(1)源码下载及本地调试

目录 前言 源码下载 其他准备 前言 新开个坑,关于Redisson源码分析的,感觉不记一下,看完以后,过段时间又忘了... 源码下载 Redisson:https://github.com/redisson/redisson 本次源码我这下载的是3.17.7版本 3.…

Java期末复习基础题编程题

文章目录 基础题记录实践题记录&&与C比较题目1:题目2:题目3: 基础题记录 编译型语言: 定义:在程序运行之前,通过编译器将源程序编译成机器码(可运行的二进制代码),以后执行这个程序时&…

【图像分类】CNN+Transformer结合系列.2

介绍几篇利用CNNTransformer实现图像分类的论文:CMT(CVPR2022),MaxViT(ECCV2022),MaxViT(ECCV2022),MPViT(CVPR2022)。主要是说明Transformer的局限性&#x…

【DFS】CF598D

Problem - D - Codeforces 题意: 思路: 直接搜索即可,对于每个连通块都去染色,对于每一个色块都维护这个色块的墙壁数 或者麻烦点用并查集维护也行 Code: int n, m, k; bool st[N][N]; char g[N][N]; int ans[N *…

C#时间轴曲线图形编辑器开发2-核心功能实现

目录 三、关键帧编辑 1、新建Winform工程 (1)界面布局 (2)全局变量 2、关键帧添加和删除 (1)鼠标在曲线上识别 (2)键盘按键按下捕捉 (3)关键帧添加、删…

脉冲信号测试应如何选择示波器带宽?

示波器模拟带宽的定义大家都比较熟悉,是针对于正弦波信号定义的。从频域上看,正弦波信号的频谱就是单根谱线,只要示波器的带宽不小于信号的频率,那么就可以有效观测到波形。若要追求更高的幅度测试精度,则可以按照5倍法…

全球视频编码领域顶级大赛放榜,网易云信首次参赛即斩获H.265赛道多项指标第一

近日,2022 MSU 世界视频编码器大赛正式放榜,网易云信首次参赛就获得骄人成绩,自研的结合智码超清技术的 NE265E 编码器以公开身份参赛,在 H.265 赛道下获得多项指标第一名。 首次参赛,斩获 3 项指标第一 MSU Video Co…

【JVM】详细解析java创建对象的具体流程

目录 一、java创建对象的几种方式 1.1、使用new关键字 1.2、反射创建对象 1.2.1、Class.newInstance创建对象 1.2.2、调用构造器再去创建对象Constructor.newInstance 1.3、clone实现 1.4、反序列化 二、创建对象的过程 2.1、分配空间的方式 1、指针碰撞 2、空闲列表 …

Mac代码编辑器sublime text 4中文注册版下载

Sublime Text 4 for Mac简单实用功能强大,是程序员敲代码必备的代码编辑器,sublime text 4中文注册版支持多种编程语言,包括C、Java、Python、Ruby等,可以帮助程序员快速编写代码。Sublime Text的界面简洁、美观,支持多…

数据库访问和组件技术相关概念(ADO、ActiveX、DLL、ODBC等)详解

目录 背景概念ADO核心组件代码展示 ActiveX组件对象模型ADO与ODBC的关系 总结 背景 最近又再重新学习vb,老师说过无论学习什么知识一定不能独立的学习,学习编程语言也是一样,把两种或者三种语言放到一起进行比较,通过比较每种语言…

短视频矩阵源码/系统搭建/源码

一、短视频矩阵系统开发需要具备以下能力 短视频技术能力:开发人员应具备短视频相关技术能力,如视频编解码、视频流媒体传输等。 大数据存储和处理能力:短视频矩阵系统需要处理大量的视频数据,因此需要具备大数据存储和处理的能力…

【Spring Boot】

目录 🍪1 Spring Boot 的创建 🎂2 简单 Spring Boot 程序 🍰3 Spring Boot 配置文件 🍮3.1 properties 基本语法 🫖3.2 yml 配置文件说明 🍭3.2.1 yml 基本语法 🍩3.3 配置文件里的配置类…

CSDN浏览如何解决

一、对于平时我们苦恼csdn数据不够好看 当面试等各个场合需要我们装*或者秀技术无法拿出亮眼的时候,刚好我闲时间编译的在线模块适合你 二、如何操作(虚拟平台我已给大家放到最后直接使用即可) 重点:pc端必须拥有python环境 win…

【lesson6】Linux make和makefile

文章目录 make和Makefile的介绍make和Makefile的使用make和Makefile的项目测试 make和Makefile的介绍 make是一个命令 Makefile是一个文件 make和Makefile是Linux自动化构建项目的工具。 makefile带来的好处就是——“自动化编译”,一旦写好,只需要一个…

6门新兴语言,小众亦强大

编码语言在塑造我们创建软件的方式方面起着至关重要的作用。多年来,我们观察到Python,Java和C等成熟语言的流行。然而,如今一波新的编码语言浪潮已经出现,提出了创造性的解决方案,并推动了软件工程领域所能完成的极限。…

12页线性代数图解教程,github星标9.1k,适合小白

线性代数“困难户”注意,今天我给大家分享一个超适合小白的线性代数学习笔记,只有12页纸,一半都是图解,不用担心看不懂。 这份笔记名为《线性代数的艺术》,是日本学者Kenji Hiranabe基于Gilbert Strang教授的《每个人…

Vue 组件传参 prop/emit

学习了组件用法,就像一种嵌套引用关系,在这个关系中,经常会涉及相互传数据的需求,即父组件传子组件,子组件传父组件。 父、子组件的关系可以总结为: prop 向下传递(父传子)&#xf…

Docker复习

目录 1. Docker的理解1.1 Docker三要素 2 安装Docker2.1 安装命令2.2 配置阿里云加速器 3 Docker命令3.1 启动类命令3.2 镜像类命令 4 实战4.1 启动容器,自动创建实例4.2 查看Docker内启动的容器4.3 退出容器4.4 其他4.5 导入导出文件4.6 commit 5 Dockerfile5.1 理…