echarts图表大屏适配方案(基础版本,待完善)

主要是根据容器当前宽度,动态取值,通过该值设置echrts图表相关尺寸宽度

 <div class="com-container">
    <div class="com-chart" ref="seller_ref"></div>
  </div>

当浏览器窗口发生变化以及Vue的mounted生命周期函数中调用

    // 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
    screenAdapter() {
      // offsetWidth获取窗口宽度计算文字大小
      const titleFontSize = (this.$refs.seller_ref.offsetWidth / 100) * 3.6;
      // 自适应分辨率配置项
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize, //标题字体大小
          },
        },
        //背景悬浮框
        tooltip: {
          axisPointer: {
            lineStyle: {
              width: titleFontSize,
            },
          },
        },
        series: [
          {
            barWidth: titleFontSize, //控制柱状条粗细(宽)
            itemStyle: {
              barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0], //左上,右上,右下,左下,上右下左控制柱状条的圆角
            },
          },
        ],
      };
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
发表评论 / Comment

用心评论~