Vue2中使用Echarts的三个问题（动态渲染图表不显示，图表不自适应，按需引入）

一、按需引入

按需加载很重要，如果一个web的体积太大，就会导致用户访问速度变慢，这个问题很严重，所有各种第三方库可以按需引入的一律按需引入

1.安装echarts

npm install echarts --save

2.main.js按需引入

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart,LineChart ,PieChart,ScatterChart } from 'echarts/charts';
// 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent

} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  BarChart,
  LineChart,
  PieChart ,
  ScatterChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);
// 挂在到vue实例上
Vue.prototype.$echarts = echarts;

组件中使用

<template>
    <div id="webViews"></div>
</template>

<script>
import { getVisitorApi } from '@/api/index'
export default {
    name: 'home',
    data() {
        return {
            option: {
                title: {
                    text: '网站访问量'
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [],
                        type: 'line'
                    }
                ]
            }
        }
    },
    methods: {
        webViews() {
            var chartDom = document.getElementById('webViews');
            var myChart = this.$echarts.init(chartDom);
            myChart.setOption(this.option);
            console.log('调用了');
             //监听窗口变化
            window.addEventListener("resize", function () {
            console.log("监听窗口变化")
            myChart.resize();
            });
        },
        async getVisitor() {
            let res = await getVisitorApi()
            this.option.series[0].data
            let newKey = []
            let value = []
            Object.keys(res.data).forEach(key => {
                newKey.push(key)
                value.push(res.data[key])
            });
            this.option.series[0].data = value
            this.option.xAxis.data = newKey
            // 渲染图标
            this.webViews()
        }
    },
    created() {

    },
    mounted() {
        this.getVisitor()
    },
    watch: {
    }
}

</script>
<style>
#webViews {
    width: 100%;
    height: 300px;
}
</style>

二、渲染图表不显示问题

直接在请求结束后再去调用this.webViews()方法，渲染的时候用this.$nextTick会导致图表不渲染

三、图表不自适应

在this.webViews()方法中添加下面的方法，就可以解决

 window.addEventListener("resize", function () {
            console.log("监听窗口变化")
            myChart.resize();
            });

四、完成代码

<template>
    <div id="webViews"></div>
</template>

<script>
import { getVisitorApi } from '@/api/index'
export default {
    name: 'home',
    data() {
        return {
            option: {
                title: {
                    text: '网站访问量'
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [],
                        type: 'line'
                    }
                ]
            }
        }
    },
    methods: {
        webViews() {
            var chartDom = document.getElementById('webViews');
            var myChart = this.$echarts.init(chartDom);
            myChart.setOption(this.option);
            console.log('调用了');
             //监听窗口变化，让图表响应式展示
            window.addEventListener("resize", function () {
            console.log("监听窗口变化")
            myChart.resize();
            });
        },
        async getVisitor() {
            let res = await getVisitorApi()
            this.option.series[0].data
            let newKey = []
            let value = []
            Object.keys(res.data).forEach(key => {
                newKey.push(key)
                value.push(res.data[key])
            });
            this.option.series[0].data = value
            this.option.xAxis.data = newKey
            // 这里渲染图标=表，就可以正常显示
            this.webViews()
        }
    },
    created() {

    },
    mounted() {
        this.getVisitor()
    },
    watch: {
    }
}

</script>
<style>
#webViews {
    width: 100%;
    height: 300px;
}
</style>