js echarts踩坑记录

最近有遇到要用echart的场景,踩了几个坑,在此记录下,
ehchart的官网
dat工具 用于做选项设置,可以动态改变echart的设置,如下图

高级柱状图

• 问题1.echart在vue中使用时,报错 echarts Cannot read properties of undefined (reading ‘init’)
  问题原因:用的echarts版本是 "echarts": "^5.4.0", 导入的时候是 import echarts from 'echarts' , 应该是5.4.0版本上api做了拆分, 把导入改成import * as echarts from "echarts"; 就行了

• 问题2 调用echarts.init 时报错 echarts Initialize failed: invalid dom
  问题原因:初始化时未获取到dom元素, 检查下挂载的dom元素是不是放在v-if或者v-show中, 或者检查echarts.init的调用时机(最好在mounted中)

• 问题3 dat.gui的使用问题, 在官方的示例中是做了封装处理, 无法看到是怎么初始化dat的, 下面给个示例代码

			let dom_chart = document.getElementById('echarts_container');
            if (!this.chart) {
                this.chart = echarts.init(dom_chart, null, {
                    renderer: 'canvas',
                    useDirtyRect: false
                });
            }

            // datgui参数
            var app = {};
            var option;
            const posList = [
                'left',
                'right',
                'top',
                'bottom',
                'inside',
                'insideTop',
                'insideLeft',
                'insideRight',
                'insideBottom',
                'insideTopLeft',
                'insideTopRight',
                'insideBottomLeft',
                'insideBottomRight'
            ];
            app.configParameters = {
                rotate: {
                    min: -90,
                    max: 90
                },
                align: {
                    options: {
                        left: 'left',
                        center: 'center',
                        right: 'right'
                    }
                },
                verticalAlign: {
                    options: {
                        top: 'top',
                        middle: 'middle',
                        bottom: 'bottom'
                    }
                },
                position: {
                    options: posList.reduce(function (map, pos) {
                        map[pos] = pos;
                        return map;
                    }, {})
                },
                distance: {
                    min: 0,
                    max: 100
                }
            };
            let that = this
            app.config = {
                rotate: 90,
                align: 'left',
                verticalAlign: 'middle',
                position: 'insideBottom',
                distance: 15,
                onChange: function () {
                    const labelOption = {
                        rotate: app.config.rotate,
                        align: app.config.align,
                        verticalAlign: app.config.verticalAlign,
                        position: app.config.position,
                        distance: app.config.distance
                    };
                    that.chart.setOption({
                        series: [
                            {
                                label: labelOption
                            },
                            {
                                label: labelOption
                            },
                            {
                                label: labelOption
                            },
                            {
                                label: labelOption
                            }
                        ]
                    });
                }
            };
            const labelOption = {
                show: true,
                position: app.config.position,
                distance: app.config.distance,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                rotate: app.config.rotate,
                formatter: '{c}  {name|{a}}',
                fontSize: 16,
                rich: {
                    name: {}
                }
            };

            // 数据
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['Forest', 'Steppe', 'Desert', 'Wetland']
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar', 'stack'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },
                        data: ['2012', '2013', '2014', '2015', '2016']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: 'Forest',
                        type: 'bar',
                        barGap: 0,
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [320, 332, 301, 334, 390]
                    },
                    {
                        name: 'Steppe',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [220, 182, 191, 234, 290]
                    },
                    {
                        name: 'Desert',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [150, 232, 201, 154, 190]
                    },
                    {
                        name: 'Wetland',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [98, 77, 101, 99, 40]
                    }
                ]
            };

            if (option && typeof option === 'object') {
                this.chart.setOption(option);
            }
            if (!this.datgui) {
                this.datgui = new datgui.GUI({ name: '选项设置', autoPlace: true });
            }

            // 设置显示位置
            let dom_dat = document.getElementsByClassName('dg ac');
            // 通过获得chart的位置来设置datgui的位置
            let pos = this.getDomAbsolutePos(dom_chart)
            dom_dat[0].style.top = `${pos.top}px`

            // 设置datgui, onChange中执行echart逻辑
            for (let key of Object.keys(app.configParameters)) {
                // 先判断参数类型
                const param = app.configParameters[key]
                if ("min" in param) {
                    // 范围值的
                    this.datgui.add(app.config, key).min(param.min).max(param.max).onChange(app.config.onChange)
                } else if ("options" in param) {
                    // 下拉框的
                    this.datgui.add(app.config, key, param.options).onChange(app.config.onChange)
                }
            }

            window.addEventListener('resize', this.chart.resize);

        getDomAbsolutePos(obj) {
            let top = 5 - obj.clientHeight, left = 0;
            //从目标元素开始向外遍历，累加top和left值  
            for (; obj != null; obj = obj.offsetParent) {
                top += obj.offsetTop;
                left += obj.offsetLeft;
            }
            return {
                top,
                left
            }
        },