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

excel2025-03-08 15:48

在下列代码中定义了填充渐变的默认值 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);