vue echarts字体及px像素单位自适应

va8zu9ts

已于 2023-12-29 13:28:55 修改

阅读量526

点赞数 10

文章标签： echarts 前端

于 2023-12-20 20:45:37 首次发布

本文链接：https://blog.youkuaiyun.com/m0_70265923/article/details/135117201

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Echarts字体自适应</title>
    <script src=" https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> 
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      html,
      body,
      .container {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="container" id="container"></div>
    <script>
      // 获取dom
      let myEcart = echarts.init(document.getElementById("container"));
      // 使用rem的思想实现图表字体等其他样式的自适应
      function fontSize(px) {
        let clientWidth = window.innerWidth || document.body.clientWidth; //屏幕尺寸
        if (!clientWidth) {
          return 0;
        }
        let fontSize = clientWidth / 375; //设计稿尺寸
        return px * fontSize;
      }
      // 定义option
      let option = {
        title: {
          text: "ECharts 入门示例",
          textStyle: {
            fontSize: fontSize(20),  //使用rem自适应
          },
          top: "10%",
          left: "50%",
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          axisLabel: {
            fontSize: fontSize(16),  //使用rem自适应
            color:'#000'
          },
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };
      // 绘制图表
      myEcart.setOption(option);
      // 图表尺寸大小自适应
      window.addEventListener("resize", () => {
        myEcart.resize();
      });
    </script>
  </body>
</html>