总结整理Echarts双y轴曲线图（全）

最新推荐文章于 2023-11-17 16:57:48 发布

柠檬_加冰

最新推荐文章于 2023-11-17 16:57:48 发布

阅读量3.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaScript Echarts 文章标签： echarts 曲线双y轴

本文链接：https://blog.youkuaiyun.com/benlengzhe/article/details/86014346

本文分享了如何使用Echarts实现双Y轴曲线图的详细过程，包括HTML和JavaScript部分的代码示例，展示了最终效果，并欢迎大家提出宝贵意见。

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

最近因为项目需要，用到了Echarts，自己学习了相关东西，也参考了一些文件，最终把双y轴曲线图实现了，跟大家分享一下。下面是最终需要的效果图：
在这里插入图片描述
不多说了，直接上代码！O(∩_∩)O哈哈~

------------------------------------------------- HTML部分 -------------------------------------------------------

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>echarts双y轴图</title>

<script src="echarts.min.js"></script>

<style>

#chart{

width: 800px;

height: 500px;

border: 1px solid red;

}

</style>

</head>

<body>

<div id="chart"></div>

</body>

</html>

----------------------------------------------- JavaScript部分 ------------------