快捷導(dǎo)航

關(guān)于Vue中echarts響應(yīng)式頁面變化resize()的用法介紹

更新時(shí)間：2023年06月15日 09:57:54 作者：下一站丶

Vue項(xiàng)目中開發(fā)數(shù)據(jù)大屏，使用echarts圖表根據(jù)不同尺寸的屏幕進(jìn)行適配，resize()可以調(diào)用echarts中內(nèi)置的resize函數(shù)進(jìn)行自適應(yīng)縮放，本文將給大家詳細(xì)介紹resize()的用法,需要的朋友可以參考下

前言

Vue項(xiàng)目中開發(fā)數(shù)據(jù)大屏，使用echarts圖表根據(jù)不同尺寸的屏幕進(jìn)行適配

BUG：當(dāng)頁面進(jìn)行縮放時(shí)圖表大小沒有變化

使用到的方法：
resize() 調(diào)用echarts中內(nèi)置的resize函數(shù)進(jìn)行自適應(yīng)縮放，然后添加監(jiān)控，頁面銷毀時(shí)刪掉，避免不必要內(nèi)存占用
我們先看一下官方文檔怎么說resize官網(wǎng)

響應(yīng)的原理：需要手動(dòng)調(diào)用 resize 方法獲取正確的高寬并且刷新畫布
億點(diǎn)小知識(shí)：可以在opts 中顯示指定圖表高寬
實(shí)戰(zhàn) vue3.0

1.創(chuàng)建容器

<div ref="myChart" style="width:100%;height:100%"></div>

2.創(chuàng)建echarts
先創(chuàng)建一個(gè) echartsLine.ts 文件

import { EChartsOption } from "echarts";
const exportFuns = (): EChartsOption => {
  return {
	   xAxis: {
	    type: 'category',
	    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	  },
	  yAxis: {
	    type: 'value'
	  },
	  series: [
	    {
	      data: [150, 230, 224, 218, 135, 147, 260],
	      type: 'line'
	    }
	  ]
   }
};
export const EchartsLineConsumption = exportFuns();

在容器組件里面應(yīng)用echartsLine.ts 文件

<script lang="ts" setup>
import { ref, onMounted, markRaw } from "vue";
import * as echarts from "echarts";
import { EchartsLineConsumption } from "@/config/echartsLine";
const myChart = ref<any>(); // 獲取元素實(shí)例
const line = ref<any>(null); // 獲取echarts
onMounted(() => {
  init();
});
const init = ()=>{
  line.value = markRaw(echarts.init(myChart.value));
  line.value.setOption(EchartsLineConsumption);
}
</script>

3.進(jìn)行響應(yīng)式頁面變化.resize()

onMounted(() => {
// 只要窗口大小發(fā)生像素變化就會(huì)觸發(fā)
  window.addEventListener("resize", () => {
    line.value.resize(); // 窗口發(fā)生改變就更新echarts
  });
  init();
});

4.需要進(jìn)行銷毀實(shí)例優(yōu)化性能

onUnmounted(() => {
  // 卸載echarts實(shí)例
  line.value.dispose();
  window.removeEventListener("resize", line.value);
});

以上就完成了 Vue中 echarts響應(yīng)式頁面變化

接下來總結(jié)了一下echarts的一些常用知識(shí)

在餅圖中間添加文字
1.富文本比較麻煩
2.在series的label中

type: "pie",
radius: ["47%", "57%"], // 讓餅圖中間為空心狀
label: {
          show: true,
          position: "center",
          formatter: "中間圓心內(nèi)容",
          fontSize: '18px',
      },

讓圖表占滿容器
使用grid屬性

grid: {
     // 讓圖表占滿容器
      left: 0,
      right: 0,
      bottom: 0,
      containLabel: true,
  },

自定義移入樣式
marker屬性

tooltip: {
      position: "top",
      show: true,
      formatter: (params) => {
        //只有“直接訪問”使用大標(biāo)簽，其他都使用小標(biāo)簽
        return `$標(biāo)題<br/>${params.marker}`;//marker 圖標(biāo)
      },
      // extraCssText:'width:60px;white-space:pre-wrap'
   },

legend顯示和位置
bottom和left調(diào)整位置
circle:：讓前面顯示的為圓形
itemGap：顯示之間的間距

legend: {
      orient: "horizontal",
      bottom: '5px', 
      left: "left",
      icon: "circle",
      itemGap: 2,
    },

以上就是echarts響應(yīng)式頁面變化.resize()感謝大家的閱讀

到此這篇關(guān)于關(guān)于Vue中echarts響應(yīng)式頁面變化resize()的用法介紹的文章就介紹到這了,更多相關(guān)Vue頁面變化resize()內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: