uniapp引用echarts不显示怎么办

1. 引言

随着移动端应用的快速发展，uniapp作为一门跨平台开发框架，受到了越来越多的关注。而echarts则作为一款优秀的可视化图表库，也可以实现在uniapp上的使用。但是在引用echarts时，很多开发者会遇到无法显示的问题。本文将详细介绍在uniapp中引用echarts不显示的解决方案。

2. echarts的引用方式

在uniapp中，引用echarts有两种方式：

2.1. 通过cdn引用

在vue页面中通过script标签引入cdn

    <template>
        <div id="echarts-container"></div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <script>
        export default {
            mounted() {
                this.initChart();
            },
            methods: {
                initChart() {
                    const chartDom = document.getElementById('echarts-container');
                    const myChart = echarts.init(chartDom);
                    // ...
                }
            }
        }
    </script>

但是，这种方式存在两个问题：

第一点：如果用了eslint，在页面会出现“'echarts' is not defined.”报错。

第二点：当引入的外部js文件容易受网络情况影响，导致页面加载变慢。

2.2. 通过npm包引入

首先需要在项目中安装echarts：

npm install echarts --save

在vue页面中，通过import关键字引入：

    <template>
        <div id="echarts-container"></div>
    </template>
    <script>
        import * as echarts from 'echarts';
        
        export default {
            mounted() {
                this.initChart();
            },
            methods: {
                initChart() {
                    const chartDom = document.getElementById('echarts-container');
                    const myChart = echarts.init(chartDom);
                    // ...
                }
            }
        }
    </script>

这种方式就不存在第一个问题，而且也不会受到网络情况的影响，对项目优化有很大帮助。

3. 解决无法显示的问题

有时候，在引用echarts的时候，我们会遇到无法显示的问题。这时候，可能是由于组件初始化时被挂载到一些隐藏的元素上导致的，我们可以使用uniapp提供的onReady生命周期函数，在组件生成后再进行图表的初始化。代码如下：

    <template>
        <div id="echarts-container"></div>
    </template>
    <script>
        import * as echarts from 'echarts';
        
        export default {
            onReady() {
                this.initChart();
            },
            methods: {
                initChart() {
                    const chartDom = document.getElementById('echarts-container');
                    const myChart = echarts.init(chartDom);
                    // ...
                }
            }
        }
    </script>

这样写可以保证在组件完成后才对图表进行初始化，解决了不显示的问题。

4. 总结

通过使用npm包的方式引入echarts可以将外部js文件合并为一个app.js，实现对项目的优化。同时，使用onReady生命周期函数可以在组件未完成前对图表进行初始化，解决不能显示的问题。希望这篇文章能够帮助到有需要的开发者。