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

echarts实现3个y轴的图表

			option: {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu',]},// 三个y轴yAxis: [{type: 'value',name: '蒸发量',min: 0,max: 250,position: 'right',axisLine: {lineStyle: {color: 'green'}},axisLabel: {formatter: '{value} ml'}},{type: 'value',name: '降水量',min: 0,max: 250,position: 'left',offset: 80, // y轴位置的偏移量axisLine: {lineStyle: {color: 'yellow'}},axisLabel: {formatter: '{value} ml'}},{type: 'value',name: '温度',min: 0,max: 25,position: 'left',axisLine: {lineStyle: {color: 'blue'}},axisLabel: {formatter: '{value} °C'}}],series: [{name: '蒸发量',type: 'bar',data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]},{name: '降水量',type: 'bar',yAxisIndex: 1, // 对应的y轴的索引值(因为有多个y轴)data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]},{name: '平均温度',type: 'bar',yAxisIndex: 2, // 对应y轴的索引值(因为有多个y轴)data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]}]}

在这里插入图片描述

http://www.lryc.cn/news/624616.html

相关文章:

  • Mysql核心框架知识
  • 深度剖析PyTorch分布式训练:从原理到工程实践
  • 后端通用基础代码
  • AC3 用户认证技术
  • 用一个label控件随便显示一些字(用矢量字库),然后用anim动画动态设置lable位置
  • Read Frog:一款开源AI浏览器语言学习扩展
  • JVM 面试精选 20 题
  • 项目中如何分配资源,以避免资源分配不均
  • 【Linux操作系统】简学深悟启示录:进程状态优先级
  • 电子元器件-电容终篇:基本原理、参数解读、电路作用、分类及区别、应用场景、选型、降频及实战案例
  • 如何在服务器 clone github 项目
  • openEuler系统备份与恢复方法
  • 8.18决策树
  • B站 韩顺平 笔记 (Day 22)
  • 芋道审批流配置流程表单超详细介绍
  • 《清华级防护,了解一下?》
  • 龙石数据中台 V3.7.1 升级 | 一站式完成数据可视化
  • 【案例分享】AI使用分享|如何运用 GPT完成小任务并提升效率 —— Prompt 与案例整理
  • CentOS 7.9 部署 filebrowser 文件管理系统
  • ES入门教程
  • Mysql实战案例 | 利用Mycat实现MYSQL的读写分离
  • Linux 服务:RAID 级别解析与 mdadm 工具实操指南
  • 【OLAP】trino安装和基本使用
  • 功能测试相关问题
  • Linux 编译器 gcc 与 g++
  • 代码随想录算法训练营四十五天|图论part03
  • llamafactory使用qlora训练
  • 无人设备遥控器之操控信号精度篇
  • unity实现背包拖拽排序
  • 【机器人-基础知识】ROS2常用命令