vue?echarts實(shí)現(xiàn)改變canvas長和寬自適應(yīng)

更新時(shí)間：2022年04月01日 10:34:11 作者：ttt_tangyuan

這篇文章主要介紹了vue?echarts實(shí)現(xiàn)改變canvas長和寬自適應(yīng)問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

echarts改變canvas長寬自適應(yīng)

存放Echarts的DOM容器，如果給的高和寬是百分比，渲染的時(shí)候DOM容器的高和寬是按百分比給的，但是DOM容器下的子元素div和canvas高和寬是根據(jù)圖標(biāo)內(nèi)容渲染。項(xiàng)目應(yīng)用的時(shí)候，底部會有一部分DOM容器和div的高度差，不美觀。

希望Echarts的canvas和DOM容器的高寬一致。

下面給出代碼

方法一:根據(jù)瀏覽器寬高為echarts容器賦寬高

<template>
  <div id="main"></div>
</template>
<script>
  import echarts from 'echarts'
  
  export default {
    name: "Chart",
    mounted() {
      var myChartContainer = document.getElementById('main')
	// 獲取自適應(yīng)的高度和寬度
      var resizeMyChartContainer = function() {
        myChartContainer.style.height = window.innerHeight * 0.65 + 'px';
        myChartContainer.style.width = window.innerWidth * 0.75 + 'px';
      };
	// 設(shè)置容器高和寬
      resizeMyChartContainer();
      var myChart = echarts.init(myChartContainer);
      let option = {};
      
      myChart.setOption(option);
	// 自適應(yīng)高和寬
      window.onresize = function () {
        resizeMyChartContainer();
        myChart.resize();
      }
    }
  }
</script>

這里的DOM容器下的div和canvas高和寬和DOM容器一樣了

echarts前端的源碼

錯(cuò)誤1

document.getElementById('main').firstChild.firstChild.style.height = window.innerHeight * 0.55 + 'px'

如果強(qiáng)行獲取canvas元素，改變它的高度（上面的div和DOM高度都不變），會把echarts拉高，圖像也拉高了，比例不對。

錯(cuò)誤2

var myChart = echarts.init(myChartContainer, {width:'800px',height:'400px'});

在初始化的時(shí)候傳入高和寬，此時(shí)DOM元素下的div和canvas的高和寬還是渲染出來的。傳入的數(shù)據(jù)限制了數(shù)據(jù)展示區(qū)域的高和寬。

方法二:根據(jù)echarts容器的父容器的寬高為其賦值

首先介紹js獲取元素的寬高的方法：

var dom = document.getElementsByClassName('sec')[0];
var w1 = dom.style.width; // 只能獲取到內(nèi)聯(lián)樣式的屬性值
var w2 = dom.currentStyle.width; // 雖然支持全部三種設(shè)置樣式的方式，但是只支持IE
var w3 = window.getComputedStyle(dom).width; // 支持IE、Chrome、Firefox的全部三種樣式
var w4 = dom.getBoundingClientRect().width; // 同樣能獲取及時(shí)的尺寸，支持IE、Chrome、Firefox,只是獲取到的是數(shù)值不帶單位

const resizeMyChartContainer = function() {
	// 無需再進(jìn)行數(shù)值計(jì)算的，可直接拿帶單位的屬性
	const containerWidth = window.getComputedStyle(document.getElementsByClassName('app-main')[0]).width
	const containerHeight = window.getComputedStyle(document.getElementsByClassName('app-main')[0]).height
	// 需進(jìn)行數(shù)值計(jì)算的，拿不帶單位的屬性
	const containerHeightWithoutUnit = document.getElementsByClassName('app-main')[0].getBoundingClientRect().height
	// 百分比計(jì)算 并加單位
	myChartContainer.style.height = containerHeightWithoutUnit * 0.65 + 'px'
	myChartContainer.style.width = containerWidth
}