echarts，X轴值相同，两个Y轴的值不同

最新推荐文章于 2024-03-20 10:50:49 发布

weixin_33709219

最新推荐文章于 2024-03-20 10:50:49 发布

阅读量4.5k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript java json ViewUI

原文链接：https://my.oschina.net/hfq/blog/1619165

这篇博客展示了如何使用Echarts创建一个X轴值相同，但拥有两个不同Y轴的图表，分别显示蒸发量、降水量和平均温度的数据。通过示例代码详细解释了配置项和数据设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
   .datagrid-header {
   position: absolute; visibility: hidden;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<%@ include file="basejs.jsp" %>

<script src="echarts.min.js"></script>
<title>Insert title here</title>
</head>
<body>
   <div style="float: right;top:40%;right: 2%;overflow: hidden;width: auto">
       <table id="xiaoshou" title="主要指标" class="easyui-datagrid" style="width: 74px;"
               url="data/my_datagrid_data.json">
           <thead>
               <tr>
                   <th field="ck" checkbox="true">ck</th>
                   <th field="zhibiao" width="auto"></th>
               </tr>
           </thead>
       </table>
   </div>
   <div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
   tooltip: {
   trigger: 'axis'
   },

   legend: {
   data: ['蒸发量', '降水量', '平均温度']
   },
   xAxis: [{
   type: 'category',
   data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
   }],
   yAxis: [{
   type: 'value',
   name: '水量',
   min: 0,
   max: 250,
   interval: 50,
   axisLabel: {
   formatter: '{value} ml'
   }
   },
   {
   type: 'value',
   name: '温度',
   min: 0,
   max: 25,
   interval: 5,
   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',
   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: 'line',
   yAxisIndex: 1,
   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]
   }
   ]
   };