账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue从后台获取数据,无法渲染echart
    39
    0

    报错:`TypeError: Cannot use 'in' operator to search for '_ec_inner'
    at ExtendedClass.setOption (Global.js?6023:119)
    at ECharts.echartsProto.setOption (echarts.js?deac:385)

    是数据没拿到之前就渲染的问题吗? 要怎么改 求助

    前端

    mounted(){
            this.$store.dispatch('getThemeData');
            this.init();
           
        },
        computed:{
            ...mapGetters(['themeData'])
        },
        methods:{
            init(){
                   
                    let option={
                    title : {
                        text: 'Theme of postings',
                        x:'center',
                        textStyle:{
                            color:'#ccc',
                            //字体风格,'normal','italic','oblique'
                            fontStyle:'normal',
                            //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                            fontWeight:'bold',
                            //字体系列
                            fontFamily:'sans-serif',
                            //字体大小
                         fontSize:30
                        }
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        textStyle:{
                            //字体风格,'normal','italic','oblique'
                            fontStyle:'normal',
                            //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                            fontWeight:'normal',
                            //字体系列
                            fontFamily:'sans-serif',
                            //字体大小
                         fontSize:14
                        },
                        orient: 'vertical',
                        left: 'left',
                        top:'10%',
                        data:['Disclosure of air pollution',
                        'Dissatisfaction with the poor air quality',
                        'Report of behavioral changes',
                        'Health concern for his or her health',
                        'Banter about the poor air quality','Evaluation of government policy',
                        'Appeal to the government to reduce air pollution']
                        
                    },
                    toolbox: {
                        text:'dsdd',
                        show : true,
                        feature : {
                            mark : {show: true},
                            magicType : {
                                show: true,
                                type: ['pie', 'funnel']
                            },
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    series : [
                        {
                            name:'Theme of Postings',
                            type:'pie',
                            radius : [30, 110],
                            center : ['50%', '60%'],
                            roseType : 'area',
                            data:this.themeData
                        }
                    ]
                    }
                    
                
                this.myChart = this.$echarts.init(document.querySelector('.theme .main'));
                this.myChart.setOption(this.option)
                
            }
        },

    vuex管理数据

    const getters = {
        themeData: (state) => {
          return state.theme_data;
        },
      }
      
      // actions
      const actions = {
        getThemeData:(context)=>{
            axios.get('static/theme.json').then((res)=>{
                return res.data.data;
            }).then((data)=>{
                context.commit('setThemeData',data);
            })
        }
        
      
        
      }
      
      // mutations
      const mutations = {
          setThemeData:(state,data)=>{
            var temp=[];
            for(var i=0;i<data.length;i++){
                console.log(data[i])
                let t={
                    value:data[i].percent,
                    name:data[i].theme
                }
                temp.push(t);
            }
            
            state.theme_data=temp;
    
          }
    1
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 孤单一人 普通会员 1楼
      502 Bad Gateway

      502 Bad Gateway


      nginx
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部