ECharts图表自适应

1.小节概述

    通过前面的章节，我们已经可以使用Echarts制作柱状图、折线图、饼图、漏斗图、雷达图、仪表盘和地图等常见图表，并重点了解如何使用配置项（option），接下来将了解ECharts中的API在某些场景中的使用，例如图表自适应、图表联动、图表钻取等需求实现。

    自适应是指浏览器窗口发生变化的时候，echarts图表大小能够有相应的适配变化，那么可以通过监听浏览器窗口配合echarts实例（echartsInstance）中的resize方法来实现。在本小节中，主要介绍在当前Vue项目中使用element-resize-detector配合echarts实例中的resize方法实现图表自适应。

2.操作步骤

2.1.准备工作

1.在主页HomeView.vue中，存放文字链接（自适应），点击跳转对应的路由页面，在router的index.js中配置路由信息。

2.在ChartAdapt演示页面中，存放三个图表，可以发现当浏览器缩放时，虽然用了栅格，存放图表的容器自适应了，但是图表溢出并没有自适应。参考代码：

<template>
    <div class="home">
        <el-row>
            <el-col :span="8" class="sideCol">
                <ChartBarTwo></ChartBarTwo>
            </el-col>
            <el-col :span="8">
                <ChartLineTwo></ChartLineTwo>
            </el-col>
            <el-col :span="8" class="sideCol">
                <ChartPieTwo></ChartPieTwo>
            </el-col>
        </el-row>
    </div>
</template>
 
<script>
import ChartBarTwo from '@/components/bar/ChartBarTwo.vue'
import ChartLineTwo from '@/components/line/ChartLineTwo.vue'
import ChartPieTwo from '@/components/pie/ChartPieTwo.vue'

export default {
    name: 'ChartAdapt',
    components: { ChartBarTwo, ChartLineTwo, ChartPieTwo },
}
</script>
 
<style scoped>
.el-row {
    margin-top: 5px;
    height: 410px;
}
.el-button {
    margin-top: 5px;
}
.sideCol {
    padding-left: 6px;
    padding-right: 6px;
}
.chartDiv {
    border: 1px solid;
    height: 410px;
    border-radius: 5px;
    text-align: center;
}
</style>

2.2.集成element-resize-detector

1.VSCode中，新建终端，运行指令下载element-resize-detector依赖，下载完成后可以看到package.json中相关依赖信息。

npm install element-resize-detector

2.在ChartAdapt页面中，可以看到存放了三个图表：一个柱状图（ChartBarTwo），一个折线图（ChartLineTwo），一个饼图（ChartPieTwo）。接下来，将分别处理这3个图表组件，引入element-resize-detector监听元素宽度变化，并配合echarts实例中的resize方法来实现自适应。

2.3.自适应实现

1.在ChartBarTwo组件中，引入element-resize-detector，监听图表容器变化，调用resize方法进行自适应处理。参考代码：

<template>
    <div class="mainDiv">
        <div class="titleDiv">分公司销售量</div>
        <div class="chartDiv" id="chartBarTwo"></div>
    </div>
</template>

<script>
import elementResizeDetectorMaker from 'element-resize-detector'
const erd = elementResizeDetectorMaker()

export default {
    data() {
        return {
            chartData: {},
        }
    },
    name: 'ChartBarTwo',
    mounted() {
        this.getChartData().then(() => {
            // 数据请求到后渲染图表
            this.renderChart()
        })
    },
    methods: {
        // 请求数据回来
        async getChartData() {
            this.chartData = await this.$axios({ url: 'sales' })
        },
        // 渲染图表
        renderChart() {
            let myChart = this.$echarts.init(document.getElementById('chartBarTwo'))
            let chartData = this.chartData
            var option = {
                // 此处option配置省略了，可以代码参考前面小节内容
            }
            // 使用刚指定的配置项和数据显示图表
            myChart.setOption(option)
            // 监听图表所在容器，大小有变化时自适应
            erd.listenTo(document.getElementById('chartBarTwo'), function () {
                myChart.resize()
            })
        },
    },
}
</script>

<style scoped>
</style>

2.在组件ChartLineTwo和ChartPieTwo中采用同样的处理方式，处理后启动项目，访问自适应演示页面，缩放浏览器可以看到图表可以随容器自适应。

3.小节总结

    在使用Echarts绘制图表时，可能会遇到变形的问题。在本小节中，通过使用element-resize-detector监听元素宽度变化的插件，配合echarts实例中的resize方法来实现图表自适应。