V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
liuchengfeng1
V2EX  ›  程序员

大佬们,请教一下用 echarts 这种效果该如何实现啊?目前只能做到这个效果(图二)T.T。

  •  
  •   liuchengfeng1 · 144 天前 · 1915 次点击
    这是一个创建于 144 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Snipaste_2024-06-13_21-24-58.png

    _20240613213041.png

    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>让图表宽度 100%显示</title>
        <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
      </head>
      <style>
        .box {
          border: 5px solid;
          padding: 0;
          margin: 0;
          width: 100%; /* 确保宽度为 100% */
        }
        canvas {
          width: 100%; /* 确保 canvas 宽度为 100% */
          height: 400px; /* 设置默认高度 */
          display: block;
        }
      </style>
      <body>
        <div class="box">
          <div id="main" style="height: 400px"></div>
          <!-- 移除内联样式中的固定宽度 -->
        </div>
        <script>
          var chartDom = document.getElementById("main");
          var myChart = echarts.init(chartDom);
          var option = {
            grid: {
              x: "12%", //x 偏移量
              y: "7%", // y 偏移量
              width: "87%", // 宽度
              height: "79%", // 高度
            },
            xAxis: {
              type: "category",
              data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
              show: false,
            },
            yAxis: {
              type: "value",
              show: false,
            },
            series: [
              {
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: "line",
                symbol: "none",
                smooth: true,
                color: "#FF6079",
                lineStyle: {
                  normal: {
                    width: 3,
                  },
                },
                areaStyle: {
                  color: {
                    colorStops: [
                      // 渐变颜色
                      {
                        offset: 0,
                        color: "#ffe2e7",
                      },
                      {
                        offset: 1,
                        color: "#fffdfd",
                      },
                    ],
                    global: false,
                  },
                },
              },
            ],
          };
          myChart.setOption(option);
          window.addEventListener("resize", function () {
            myChart.resize();
          });
        </script>
      </body>
    </html>
    
    

    这是现在的效果:

    _20240613213231.png

    12 条回复    2024-07-03 14:22:33 +08:00
    chf007
        1
    chf007  
       144 天前
    98kg 绝对定位啊
    liuchengfeng1
        2
    liuchengfeng1  
    OP
       144 天前
    @chf007 用的是绝对定位,主要是渐变颜色怎么填充满呀
    orangie
        3
    orangie  
       144 天前
    换个思路,纵向渐变的背景,曲线上方填充纯白色。
    YVAN7123
        4
    YVAN7123  
       144 天前
    98KG 用 ehcarts 的 title 不行吗?
    helloWorldzsj
        5
    helloWorldzsj  
       144 天前
    series:[
    {
    areaStyle: {
    color: {

    }
    }
    }
    ],color 使用纵向的线性渐变
    davin
        6
    davin  
       144 天前
    只是线性渐变的方向不对,可以参考官方文档 https://echarts.apache.org/zh/option.html#color 设置方向,或者使用下面这种方式:

    ```json
    {
    areaStyle: {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    {
    offset: 0,
    color: '#ffe2e7'
    },
    {
    offset: 1,
    color: '#fffdfd'
    }
    ])
    }
    }
    ```
    Akuta
        7
    Akuta  
       144 天前   ❤️ 6
    liuchengfeng1
        8
    liuchengfeng1  
    OP
       144 天前
    @Akuta 谢谢大佬!! T.T
    flmn
        9
    flmn  
       143 天前
    grid: {
    left: '0',
    right: '0'
    }

    行么
    alleluya
        10
    alleluya  
       143 天前
    @Akuta 哈哈 这真是喂饭喂到嘴边了
    MintZX
        11
    MintZX  
       142 天前
    @Akuta #7 好人一生平安 :)
    cooljser
        12
    cooljser  
       125 天前
    @Akuta 秀啊
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3450 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 11:42 · PVG 19:42 · LAX 03:42 · JFK 06:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.