echarts入门双y轴折线图

最新推荐文章于 2024-09-12 05:01:49 发布

不吃鱼皮

最新推荐文章于 2024-09-12 05:01:49 发布

阅读量4.4k

点赞数 3

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_45818290/article/details/126598089

版权

本文介绍了如何使用Echarts创建双Y轴折线图，并强调了设置背景色的关键在于series的areaStyle属性。提供了一个完整的代码示例。

摘要由CSDN通过智能技术生成

效果图

双y轴折线图设置背景色主要是在series设置areaStyle

areaStyle: {
    normal: {
        color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [    
                { offset: 0, color: "rgba(0,0,128,0.5)" },
                { offset: 0.5, color: "rgba(0,0,128,0.3)" },
                { offset: 1, color: "rgba(0,0,128,0.1)" },
            ]
        )
     }
},

完整代码

!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="../lib/echarts.min.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;hei