vue(echarts引入)，以及报错处理，动态赋值不刷新试图

1.index.js中引入

 

src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js">

2.在webpack.base.config.js添加 externals

 

let webpackConfig = {
    context: path.resolve(__dirname, '../'),
    entry: {
        app: './src/main.js'
    },
  externals: {
    echarts: 'echarts'
  },

3.在需要用到echarts的vue文件中

 

import echarts from 'echarts'

4.

<div id='moneysitu' style='width:100%;height:300px'>div>

 

initEcharts() {
var moneysitu = echarts.init(document.getElementById('moneysitu'));
var optionmoneysitu = {
    title : {
        text: '基金情况',
        subtext: '',
        x:'left'
    },
    tooltip : {
        trigger: 'item',
        show:false,
        formatter: "{a} 
{b} : {c} ({d}%)"
    },
    legend: {
        //orient : 'vertical',
        x : 'left',
        y : 'bottom',
        data:['新增概算','已付定金','资金结余','已收定金']
    },
    toolbox: {
        show : false,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true,
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : false,
    series : [
        {
            name:'访问来源',
            type:'pie',
            selectedMode: 'single',
            radius : [0, 40],
            color:['#ff9232'],
            // for funnel
            x: '50%',
            width: '100%',
            funnelAlign: 'right',
            //max: 1548,
            itemStyle : {
                normal : {
                    label : {
                        position : 'inner'
                    },
                    labelLine : {
                        show : false
                    }
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'center',
                    //formatter:'{c}\n{d}%'
                    formatter:function(){
                        return '2017\n年度基金情况\n(亿元)'
                    },
                    textStyle:{
                        fontSize:10,
                        color:'#000'
                    }
                }
            },
            data:[
                {value:335, name:''}
            ]
        },
        {
            name:'',
            type:'pie',
            radius : [40, 60],
            // for funnel
            x: '60%',
            width: '35%',
            color:['rgb(70,194,225)','rgb(255,112,112)','rgb(255,198,84)','rgb(196,234,221)'],
            funnelAlign: 'left',
            //max: 1048,
            label: {
                normal: {
                    show: true,
                    position: 'outer',
                    formatter:'{b}\n{d}%',
                    color:'#000'
                }
            },
            labelLine: {
                normal: {
                    show: true,
                    length:0,

                }
            },
            data:[
                {value:335, name:'新增概算'},
                {value:310, name:'已付定金'},
                {value:234, name:'资金结余'},
                {value:135, name:'已收定金'}
            ]
        }
    ]
};
moneysitu.setOption(optionmoneysitu);}

 

// 报错TypeError: Cannot read property 'getAttribute' of null"

// 解决方法

created () {// 加上this.$nextTick

this.$nextTick(() => {

初始化该echarts图表方法 this.initEcharts();

})

}

// 动态赋值后视图不重新渲染,push赋值，直接等于赋值无效果

// 解决

watch: {

后台返回数据: {

handler(newVal) {

this.initEcharts()

},

deep: true //对象内部属性的监听，关键。 }

}