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

62 阅读2分钟

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

1741418856398.png

      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'],
            axisLine: { // 靠近 0 的底线样式
                lineStyle: {
                    type: "dashed",
                    color: "rgba(0,0,0,0)"
                }
            },
            axisLabel: { // 设置X轴的标签的颜色 ,当底线被设置为 透明 时标签也会 显示
              show: true,  // 显示 X 轴的标签
              textStyle: {
                color: '#666'  // 设置标签的颜色
              }
            }
        },
        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);