当前位置：首页 > article >正文

echarts自适应浏览器缩放代码

article 2025/1/19 14:16:33

echarts 在 dom 上初始化时使用 echarts. init ，这个 dom 是实例容器，一般是一个具有高宽的 DIV 元素。
不能在单个容器上初始化多个 ECharts 实例。
echartsInstance.resize 改变图表尺寸，在容器大小发生改变时需要手动调用。
echarts.resize() 的核心是监听 id=“myChart” 的那个 div 的尺寸变化，在其发生变化后调用 echarts.resize()。
一、布局+样式

因为后面要测试高度变化，所以设定了高度 chartHeight 为变量。（直接写 height：100% 图表不显示）

<template>
  <div id="myChart" :style="{ height: chartHeight + 'px' }"></div>
</template>

<style>
body {
  background-color: lightblue;
}

#myChart {
  width: 90%;
  background-color: lightgoldenrodyellow;
}
</style>

二、js基本代码（vue3 写法）

初始化 mychart 的高度，初始化一个柱状图：

var myChart = null;
const chartHeight = ref(0);
updateChartHeight();

function updateChartHeight() {
  chartHeight.value = window.innerHeight * 0.9;
}

function initEcharts() {
  myChart = echarts.init(document.getElementById('myChart'));
  myChart.setOption({
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  });
}

三、监听 echarts 容器尺寸变化（以下简称div）
1. 没有全屏时，div 宽度、高度发生变化
这个很好办，直接用   window.addEventListener("resize", function())  监听就可以。

function windowResize() {
  window.addEventListener("resize", () => {
    updateChartHeight();
    console.log('%c window.innerWidth', "color:blue", window.innerWidth);
    console.log('%c window.innerHeight', "color:blue", window.innerHeight);
    myChart.resize();//改变图表尺寸
  })
}

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

var myChart = null;
const chartHeight = ref(0);
updateChartHeight();

onMounted(() => {
  initEcharts();
  windowResize();
  watchEchart();
})
function updateChartHeight() {
  chartHeight.value = window.innerHeight * 0.9;
}

function initEcharts() {
  myChart = echarts.init(document.getElementById('myChart'));
  myChart.setOption({
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  });
}

function windowResize() {
  window.addEventListener("resize", () => {
    updateChartHeight();//这个必须放在这里
    console.log('%c window.innerWidth', "color:blue", window.innerWidth);
    console.log('%c window.innerHeight', "color:blue", window.innerHeight);
    // console.log("%c windowResize chartHeight ", "color:blue", chartHeight.value);
  })
}

function watchEchart() {
  const myChartSize = document.getElementById("myChart");
  var ro = new ResizeObserver(entries => {
    for (let entry of entries) {
      const cr = entry.contentRect;
      // console.log('myChart Element:', entry.target);
      console.log(`%c myChart Element  w:${cr.width}px  h:${cr.height}px`, "color:red");
      chartResize();
    }
  });
  ro.observe(myChartSize);
}

function chartResize() {
  myChart.resize();
}

</script>

<template>
  <div id="myChart" :style="{ height: chartHeight + 'px' }"></div>
</template>

<style>
body {
  background-color: lightblue;
}

#myChart {
  width: 90%;
  background-color: lightgoldenrodyellow;
}
</style>

查看全文

http://www.kler.cn/a/370678.html