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);
相关推荐
cypking1 小时前
electron中IPC 渲染进程与主进程通信方法解析
前端·javascript·electron
西陵1 小时前
Nx带来极致的前端开发体验——借助playground开发提效
前端·javascript·架构
江城开朗的豌豆1 小时前
Element UI动态组件样式修改小妙招,轻松拿捏!
前端·javascript·vue.js
float_六七2 小时前
JavaScript:现代Web开发的核心动力
开发语言·前端·javascript
zhaoyang03012 小时前
vue3笔记(2)自用
前端·javascript·笔记
德育处主任Pro2 小时前
# JsSIP 从入门到实战:构建你的第一个 Web 电话
前端
拾光拾趣录3 小时前
setTimeout(1) 和 setTimeout(2) 的区别
前端·v8
拾光拾趣录3 小时前
内存泄漏的“隐形杀手”
前端·性能优化
摸鱼仙人~3 小时前
HttpServletRequest深度解析:Java Web开发的核心组件
java·开发语言·前端
索西引擎3 小时前
【工程化】浅谈前端构建工具
前端·webpack·gulp·turbopack