m0_60877809 2022-04-19 17:24 采纳率: 72.7%
浏览 285
已结题

关于用echarts做大屏适配问题



    <div class="rightBox-bottom">
      <div class="rightBox-bottom-test">项目工程月度统计</div>
      <!-- <div class="drawLineBox"> -->
      <div ref="chart" class="drawLineStyle" id="my_charts"></div>
      <!-- </div> -->

      <img src="@/assets/月度统计框.png" alt="" />
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    this.drawLine();
    let myChart = echarts.init(document.getElementById("my_charts"));

    window.addEventListener("resize", function () {
      console.log("gaibian");

      myChart.resize();
    });
  },

、-----------------------------css
 .rightBox-bottom {
    position: absolute;
    left: 5vh;
    top: 50vh;
    height: 50vh;

    .drawLineStyle {
      position: absolute;
      color: #fff;
      left: -3.4vh;
      bottom: 6vh;
      height: 34vh;
      width: 48vh;
    }
    img {
      height: 45vh;
      background-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.9),
        rgba(0, 0, 0, 0)
      );
    }
    .rightBox-bottom-test {
      position: absolute;
      font-size: 2vh;
      left: 8%;
      top: 1vh;
      color: #fff;
      font-family: DOUYUFONT;
    }
  }
}


img

img

在做适配的时候 遇到这个问题 用resize方法来做 但是我的top有问题 我是根据父盒子来去定位 这个echarts的位置的 但是发现改变的时候 这个top的大小会发生变化 不知道是什么问题 会不会是echarts这个方法里面的 适应是用的px

  • 写回答

1条回答 默认 最新

  • 面向百度编程cv 2022-04-19 17:57
    关注

    这个是缩小了

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 8月5日
  • 已采纳回答 7月28日
  • 创建了问题 4月19日

悬赏问题

  • ¥15 cpuid是如何转换的
  • ¥15 MddBootstrapInitialize2失败
  • ¥15 LCD Flicker
  • ¥15 Spring MVC项目,访问不到相应的控制器方法
  • ¥15 esp32在micropython环境下使用ssl/tls连接mqtt服务器出现以下报错Connected on 192.168.154.223发生意外错误: 5无法连接到 MQTT 代理,如何解决?
  • ¥15 关于#genesiscsheel#的问题,如何解决?
  • ¥15 Android aidl for hal
  • ¥15 STM32CubeIDE下载程序报错
  • ¥15 微信好友如何转变为会员系统?(相关搜索:小程序)
  • ¥15 c# 直接使用c++ 类库文件