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);
相关推荐
Filotimo_2 分钟前
2.CSS3.(2).html
前端·css
yinuo1 小时前
uniapp微信小程序华为鸿蒙定时器熄屏停止
前端
gnip2 小时前
vite中自动根据约定目录生成路由配置
前端·javascript
前端橙一陈3 小时前
LocalStorage Token vs HttpOnly Cookie 认证方案
前端·spring boot
~无忧花开~3 小时前
JavaScript学习笔记(十五):ES6模板字符串使用指南
开发语言·前端·javascript·vue.js·学习·es6·js
泰迪智能科技013 小时前
图书推荐丨Web数据可视化(ECharts 5)(微课版)
前端·信息可视化·echarts
CodeCraft Studio4 小时前
借助Aspose.Email,使用 Python 读取 Outlook MSG 文件
前端·python·outlook·aspose·email·msg·python读取msg文件
家里有只小肥猫5 小时前
react 初体验2
前端·react.js·前端框架
慧慧吖@5 小时前
前端发送请求时,参数的传递格式
前端
L李什么李5 小时前
HTML——使用表格制作简历
前端·javascript·html