ecahrt.js 渐变色不以0为基点

在下列代码中定义了 填充渐变的默认值 0 使其为 -600 origin: -600, 使得填充能填充到底部。通过设置yAxisIndex: 1 使第二条线的值在右边显示刻度 itemStyle: {color: 'RGBA(64, 193, 255, 1)},`通过设置itemStyle 中的color 改变渐变填充颜色

js 复制代码
      var myChart = echarts.init(document.getElementById('weatherLine'));
      console.log(myChart, "myChart");

      const option = {
        grid: {
          top: '2%',  // 设置图表顶部的间距
          bottom: '10%' // 设置图表底部的间距
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: [
          {
            type: 'value', // 左侧 y 轴
          },
          {
            type: 'value', // 右侧 y 轴
            position: 'right' // 将右侧 y 轴放置在右边
          }
        ],
        series: [
          {
            data: [820, 932, -301, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true,  // 设置平滑的折线
            areaStyle: {
              color: 'RGBA(64, 193, 255, 1)',  // 定义填充颜色
              origin: -600,// 改变区域填充的基点 0 为 -600
              // 定义渐变填充
              type: 'linear',
              global: false // 是否使用全局渐变
            },
            itemStyle: {
                color: 'RGBA(64, 193, 255, 1)'  // 设置折线颜色
            },
            symbol: 'none'  // 不显示点
          },
          {
            data: [120, 132, 101, 134, 290, 230, 220],  // 第二条波线的数据
            type: 'line',
            smooth: true,  // 设置平滑的折线
            areaStyle: {
              color: 'RGBA(128, 151, 155, 1)',  // 定义填充颜色
              origin: -600,// 改变区域填充的基点 0 为 -600
              // 定义渐变填充
              type: 'linear',
              global: false // 是否使用全局渐变
            },
            itemStyle: {
                color: 'RGBA(128, 151, 155, 1)'  // 设置折线颜色
            },
            yAxisIndex: 1, // 使用右侧 y 轴
            symbol: 'none'  // 不显示点
          }
        ]
      };

      option && myChart.setOption(option);
相关推荐
前端啵啵猪5 分钟前
useCallback 和 useMemo,什么时候用才是有效的?
前端·react.js
星哥说事16 分钟前
跨平台开源笔记神器,用DeepSeek写笔记 , 效率翻倍
前端
喜欢你,还有大家44 分钟前
FTP文件传输服务
linux·运维·服务器·前端
该用户已不存在1 小时前
你没有听说过的7个Windows开发必备工具
前端·windows·后端
Bi1 小时前
Dokploy安装和部署项目流程
运维·前端
普通网友1 小时前
前端安全攻防:XSS, CSRF 等防范与检测
前端·安全·xss
携欢1 小时前
PortSwigger靶场之Reflected XSS into attribute with angle brackets HTML-encoded通关秘籍
前端·xss
小爱同学_1 小时前
React知识:useState和useRef的使用
前端·react.js
再学一点就睡1 小时前
双 Token 认证机制:从原理到实践的完整实现
前端·javascript·后端
wallflower20201 小时前
滑动窗口算法在前端开发中的探索与应用
前端·算法