当前位置: 首页 > 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.dtcms.com/a/337897.html

相关文章:

  • 传输层协议——TCP
  • 刺猬的开发笔记之企业级兑换奖励c端链路开发
  • 【图论 次短路】P1491 集合位置|省选-
  • 【typenum】 17 非负数标记
  • Ansible 部署LNMP
  • shell脚本实现读取ini键值
  • 部署过程 99年证书
  • Servlet上传文件
  • 亚马逊新手突围:从流量破冰到持续出单
  • ACCESS窗体如何导出到文件,导入另一个工程?
  • java基础总结
  • mysql 主从架构详解
  • label studio标注时序数据
  • 《Unity Shader入门精要》学习笔记二
  • css中px转rem的计算公式
  • 设置独立显卡,解决游戏卡又慢
  • 【opencv-Python学习笔记(6):阈值处理】
  • 深入理解 depot_tools:Chromium 源码开发全流程(fetch/gclient/git cl 使用详解与踩坑经验)
  • Effective C++ 条款49:了解new-handler的行为
  • JAVA经典面试题:数据库调优
  • 算法题——字符串
  • input 标签的宽度根据内容自动调整
  • 电梯的构造|保养|维修视频全集_电梯安全与故障救援(课程下载)
  • JSX本质是什么
  • AI行业应用深度报告:金融、医疗、教育、制造业落地案例
  • Docker之redis安装
  • linux中的hostpath卷、nfs卷以及静态持久卷的区别
  • 使用websockets中的一些问题和解决方法
  • 数据结构04(Java)-- ( 归并排序及其时间复杂度)
  • gflags框架安装与使用