Component series.scatter3D not exists. Load it first

今天在nuxtjs项目中引入echarts3D效果图的时候，一直给我提示Component series.scatter3D not exists. Load it first，让我很懵逼。

找了很久终于解决，原因是echarts-gl引入错误（真的是粗心）

记录一下

npm install echarts echarts-gl

安装完成后在plugins文件夹下新建两个文件 echarts.js和echarts-gl.js

echarts.js

import Vue from 'vue'
import echarts from 'echarts' // 引入echarts
Vue.prototype.$echarts = echarts // 引入组件（将echarts注册为全局）
复制代码

echarts-gl.js

import Vue from 'vue'
import echartsGL from 'echarts-gl' // 引入echarts
Vue.prototype.$echartsGL = echartsGL // 引入组件（将echarts注册为全局）
复制代码

nuxt.config.js的plugins中加入

'~plugins/echarts','~plugins/echarts-gl'
复制代码

复制一下官网上的代码

import pointData from '../../data/life-expectancy-table'
    export default {
        layout: 'basic',
        name: 'Echarts',
        data() {
            return {
            }
        },
        methods: {
            echartsInit() {
                // 找到容器
                let data = pointData;
                let myChart = this.$echarts.init(document.getElementById('myChart'))
                var symbolSize = 2.5;
                let option = {
                    grid3D: {},
                    xAxis3D: {
                        type: 'category'
                    },
                    yAxis3D: {},
                    zAxis3D: {},
                    dataset: {
                        dimensions: [
                            'Income',
                            'Life Expectancy',
                            'Population',
                            'Country',
                            {name: 'Year', type: 'ordinal'}
                        ],
                        source: data
                    },
                    series: [
                        {
                            type: 'scatter3D',
                            symbolSize: symbolSize,
                            encode: {
                                x: 'Country',
                                y: 'Life Expectancy',
                                z: 'Income',
                                tooltip: [0, 1, 2, 3, 4]
                            }
                        }
                    ]
                };
                myChart.setOption(option)
            },
        },
        mounted() {
            this.echartsInit()
        }
    }
复制代码

搞定