echarts5按需加载和图表自适应-CFANZ编程社区

为什么需要按需加载

按需加载最主要的目的就是为了减少项目的体积。
如果你不在乎项目的体积可以直接引入，但是我并不推荐。

按需加载

创建文件夹和文件 lib/index.ts
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
// 引入各种图表，图表后缀都为 Chart
import { BarChart, PieChart,LineChart,RadarChart,ScatterChart,PictorialBarChart } from "echarts/charts";  //这里我引用两个类型的图表
// 引入提示框，标题，直角坐标系等组件，组件后缀都为 Component
import {
  TitleComponent, //标题组件
  TooltipComponent, //类似于hover的提示
  GridComponent,   //网格
  LegendComponent, //指示
} from "echarts/components";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";

// 注册必须的组件
echarts.use([
  BarChart,
  PieChart,
  LineChart,
  RadarChart,
  ScatterChart,
  PictorialBarChart,
  CanvasRenderer,
  
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
]);

export default echarts;

echarts.vue文件中使用

<template>
    <div class="box">
        <div id="myChart1" :style="{ height: '300px'}"></div>
        <div id="myChart2" :style="{ height: '300px'}"></div>
    </div>
</template>

<script lang="ts" setup>
import echarts from '@/lib/echarts/index'
import {  onBeforeUnmount, onMounted } from 'vue'
function drawLine() {
    // 基于准备好的dom，初始化echarts实例
    let myChart1 = echarts.init(document.getElementById('myChart1') as HTMLElement)
    // 绘制图表配置
    let option = {
        tooltip: {},
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
            color: 'rgb(11, 234, 246)'
        }]
    };
    myChart1.setOption(option);
    // 图表随着窗口大小的变化而变化
}


function bingEchats() {
    let myChart2 = echarts.init(document.getElementById('myChart2') as HTMLElement)
    let option = {
        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'
            }
        ]
    };
    myChart2.setOption(option);
}

onMounted(() => { 
    drawLine();
    bingEchats()
})

// 处理echarts自适应
let getDOMFlag = true
let myChart1: any = null;
let myChart2: any = null;
window.addEventListener("resize", function () {
    if (getDOMFlag) {
        myChart1 = echarts.init(document.getElementById('myChart1') as HTMLElement)
        myChart2 = echarts.init(document.getElementById('myChart2') as HTMLElement)
    }
    myChart1.resize()
    myChart2.resize()
})

// 销毁echarts
onBeforeUnmount(() => {
    var myChartone = echarts.init(document.getElementById('myChart1') as HTMLElement);
    myChartone.dispose();
    var myChartwo = echarts.init(document.getElementById('myChart2') as HTMLElement);
    myChartwo.dispose();
})
</script>

说明echarts按需加载成功了

echarts5按需加载和图表自适应_自适应

自适应

echarts5按需加载和图表自适应_按需加载_02

echarts 自适应应该注意的点-不要使用同时px限制宽和高

<template>
    <div class="box">
        <div id="myChart1" :style="{ height: '300px', width:'1600px'}"></div>
        <div id="myChart2" :style="{ height: '300px'}"></div>
    </div>
</template>
如果你使用px固定了echarts容器的宽和高；那么这个echarts将无法自适应
因为你已经固定死了。
因此 <div id="myChart1" :style="{ height: '300px', width:'1600px'}"></div>这个容器将无法自适应
所以平时我们只固定了高，宽度一般是使用flex:1或者百分比width:60%;

最上面的图没有自适应

echarts5按需加载和图表自适应_按需加载_03