echarts中同一段代码，按需引入内容一样，高版本（5.1.2）的会报错？

一、场景

2020年写一个app，首页有个echarts折线图，当时package.json版本是4.8.0，我接手继续写，拉取项目后安装依赖，echarts老是提示安装不是，我当时就npm install echart --save，就安装一个高版本的，然后就报错了，提示echarts两个模块没有找到grid和legend

二、项目代码

echarts图表中的确也用了grid和legend，低版本4.8.0没引入也不会报错，高版本5.1.2如果没有引入就会报错,最后我把echarts给回退到4.8.0版本，不引人这两行也不会报错了，气死了

var echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/pie')
require('echarts/lib/chart/line')
require('echarts/lib/component/tooltip')
//下面两行是高版本需要加的
require('echarts/lib/component/grid')
require('echarts/lib/component/legend')

let lineOption = {
    tooltip: {
        trigger: 'axis',
        backgroundColor: '#fff',
        borderColor: '#eaeaea',
        borderWidth: 1,
        textStyle: {
            fontSize: 12,
            color: '#616161',
            borderColor: '#e7e7e7',
            borderWidth: 1,
            textBorderWidth: 2,
            textBorderColor: '#e7e7e7',
        },
        axisPointer: {
            type: 'line',
            lineStyle: {
                color: '#409EFF',
            },
        },
    },
    grid: {
        //上下左右位移设置
        top: '15',
        left: '50',
        right: '30',
    },
    legend: {
        //orient: 'vertical',
        bottom: '40',
        left: 'center',
        itemHeight: 5,
        //icon: 'rect',
        //align: 'bottom',

        textStyle: {
            color: '#616161',
            fontSize: 14,
        },
    },
    xAxis: {
        boundaryGap: false,
        // data: [],
        axisLine: {
            lineStyle: {
                color: '#eaeaea',
            },
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            color: '#616161',
        },
        splitLine: {
            show: false,
        },
    },
    yAxis: {
        axisLine: {
            //y轴线
            show: false,
        },
        axisTick: {
            //y轴刻度
            show: false,
        },
        axisLabel: {
            //y轴文字颜色
            color: '#616161',
        },
        splitLine: {
            //y轴分割线（横向）
            lineStyle: {
                color: '#eaeaea',
                type: 'dotted',
            },
        },
        type: 'value',
    },
    series: [
        {
            type: 'line',
            // data: [],
            itemStyle: {
                //
                color: '#409EFF',
            },
            lineStyle: {
                //折线图样式
                width: 1,
            },
            showSymbol: false, //是否显示拐点
            areaStyle: {
                //折线图区域设置
                normal: {
                    //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                            offset: 0,
                            color: '#FFFFFF',
                        },
                        {
                            offset: 1,
                            color: '#409EFF',
                        },
                    ]),
                },
            },
        },
    ],
}

三、总结

安装依赖时候，如果老是安装不上就把node_modules删了重新npm i多试试
如果没有需求，千万不要给已经写过不少内容的项目升级版本，容易出bug
报应啊，因为这个我多加班一个小时，第二天又研究了大半天…