vue与Echarts 如何解决bar3d报错问题

Question

Echarts的demo地址

将该demo和vue结合的时候出现该问题：

---

代码如下：

import echarts from 'echarts'
    export default{
        name:"",
        data () {
            return{
                charts:"",
                UPDATE_DURATION:100,
                audioContext:""
            }
        },
        created:function(){
            this.audioContext= new AudioContext();
            this.action()
        },
        methods:{
            initVisualizer(audioBuffer) {
                console.log("sasds")
                    inited = true;
                    var source = this.audioContext.createBufferSource();
                    source.buffer = audioBuffer;

                    // Must invoked right after click event
                    if (source.noteOn) {
                        source.noteOn(0);
                    }
                    else {
                        source.start(0);
                    }

                    var analyzer = this.audioContext.createAnalyser();
                    var gainNode = this.audioContext.createGain();
                    analyzer.fftSize = 4096;

                    gainNode.gain.value = 1;
                    source.connect(gainNode);
                    gainNode.connect(analyzer);
                    analyzer.connect(this.audioContext.destination);

                    var frequencyBinCount = analyzer.frequencyBinCount;
                    var dataArray = new Uint8Array(frequencyBinCount);


                    var beta = 0;
                    function update() {
                        var self=this
                        analyzer.getByteFrequencyData(dataArray);

                        var item = [];
                        var size = 50;
                        var dataProvider = [];
                        
                        for (var i = 0; i < size * size; i++) {
                            var x = i % size;
                            var y = Math.floor(i / size);
                            var dx = x - size / 2;
                            var dy = y - size / 2;
                    
                            var angle = Math.atan2(dy, dx);
                            if (angle < 0) {
                                angle = Math.PI * 2 + angle;
                            }
                            var dist = Math.sqrt(dx * dx + dy * dy);
                            var idx = Math.min(
                                frequencyBinCount - 1, Math.round(angle / Math.PI / 2 * 60 + dist * 60) + 100
                            );
                    
                            var val = Math.pow(dataArray[idx] / 100, 3);
                            dataProvider.push([x, y, Math.max(val, 0.1)]);
                        }
                        this.charts = echarts.init(document.getElementById(id))
                        this.charts.setOption({
                            grid3D: {
                                viewControl: {
                                    beta: beta,
                                    alpha: Math.sin(beta / 10 + 40) * (beta % 10 + 5) / 15 * 30 + 30,
                                    distance: Math.cos(beta / 50 + 20) * (beta % 10 + 5) / 15 * 50 + 80,
                                    animationDurationUpdate: self.UPDATE_DURATION,
                                    animationEasingUpdate: 'linear'
                                }
                            },
                            series: [{
                                data: dataProvider
                            }]
                        });
                        beta += 2;

                        setTimeout(update, self.UPDATE_DURATION);
                    };

                    update();
                },
                drawPie(id){
                    console.log("sasdsasd")
                    var self=this
                   this.charts = echarts.init(document.getElementById(id))
                   this.charts.setOption({
                               tooltip: {},
                            visualMap: {
                                show: false,
                                min: 0.1,
                                max: 4,
                                inRange: {
                                    color: ['#010103', '#2f490c', '#b0b70f', '#fdff44', '#fff']
                                }
                            },
                            xAxis3D: {
                                type: 'value'
                            },
                            yAxis3D: {
                                type: 'value'
                            },
                            zAxis3D: {
                                type: 'value',
                                min: -6,
                                max: 6
                            },
                            grid3D: {
                                show: false,
                                environment: '#000',
                                viewControl: {
                                    distance: 100
                                },
                                postEffect: {
                                    enable: true,
                                    FXAA: {
                                        enable: true
                                    }
                                },
                                light: {
                                    main: {
                                        shadow: true,
                                        intensity: 10,
                                        quality: 'high'
                                    },
                                    ambientCubemap: {
                                        texture: '/static/asd.hdr',
                                        exposure: 0,
                                        diffuseIntensity: 0.2
                                    }
                                }
                            },
                            series: [{
                                type:'bar3D',
                                silent: true,
                                shading: 'lambert',
                                data: [],
                                barSize: 1,
                                lineStyle: {
                                    width: 4
                                },
                                // animation: false,
                                animationDurationUpdate: self.UPDATE_DURATION
                            }]
                        })
                },
                action(){
                       console.log("sasd")
                        var _self=this
                       this.$axios.get('/static/music/break.mp3')
                      .then(function (response) {
                              console.log("wancc")
                              initVisualizer('/static/music/break.mp3')
                      })
                      .catch(function (error) {
                         console.log(2);
                      });
                }
        },
        mounted(){
            this.$nextTick(function(){
                this.drawPie('main')
            })
        }

    }

Answer 1

应该是还需要引入echarts-gl模块

npm install echarts-gl -save

import echarts from 'echarts'
import echarts from 'echarts-gl'