启动项目时，echarts渲染失败，在created，mounted，updated。

项目场景：

用echarts做报表的时候，只能通过按钮的形式启动报表。无论把echarts.init放在created，mounted还是updated中都无法完成自启动。

问题描述

echart报错:TypeError: Cannot read properties of null (reading ‘getAttribute‘)“

数据undefined等等报错。

原因分析：

第一：created，mounted渲染时，data没有数据，init失败。

第二：updated时，组件先被构建，此时myChart.setOption的数据还没有从后台取出，init只有空框架。

解决方案：

把 echarts.init() 和 myChart.setOption() 放在vue的 updataed()生命周期 中，并且在组件中加入 v-if="data.length>0" 放在组件中。

 附上完整代码：

1.  
   <template>
2.  
   <div>
3.  
   <div>
4.  
   <div align="center" class="div-button">
5.  
   <a-button-group>
6.  
   <a-button type="primary" icon="el-icon-s-data" @click="histogram">柱形分析图</a-button>
7.  
   <a-button type="success" @click="piechart">饼状分析图<i class="el-icon-pie-chart"></i></a-button>
8.  
   <a-button type="primary" icon="el-icon-s-data" @click="brokenline">折线分析图</a-button>
9.  
   </a-button-group>
10.  
    </div>
11.  
    </div>
12.  
    <div v-if="keyData.length>0" ref="chart" :style="{width: '500px', height: '500px'}"></div>
13.  
    </div>
14.  
     
15.  
    </template>
16.  
     
17.  
    <script>
18.  
     
19.  
    export default {
20.  
    name: 'echarts3',
21.  
    data: function () {
22.  
    return {
23.  
    // tableData: [],
24.  
    keyData: [],
25.  
    valueData: [],
26.  
    timeData: [],//折线图数据
27.  
    pieData: [],//饼图数据
28.  
    }
29.  
    },
30.  
    methods: {
31.  
    queryList: function () {
32.  
    let url = "/qygl/echarts/list";
33.  
    this.axios.get(url, '').then((resp) => {
34.  
    if (resp.data) {
35.  
    this.keyData = [];
36.  
    this.valueData = [];
37.  
    this.timeData = [];
38.  
    this.pieData = [];
39.  
    resp.data.forEach((item) => {
40.  
    this.keyData.push(item.tname);
41.  
    this.valueData.push(item.sumprice);
42.  
    this.pieData.push({
43.  
    name: item.tname,
44.  
    value: item.sumprice
45.  
    });
46.  
    });
47.  
    console.log(this.valueData);
48.  
    } else {
49.  
    this.$message.warning(resp.message);
50.  
    }
51.  
    })
52.  
    },
53.  
    histogram: function () {
54.  
    this.$echarts.dispose(this.$refs.chart);//销毁echarts实例
55.  
    var myChart = this.$echarts.init(this.$refs.chart);//创建echarts实例
56.  
    myChart.setOption({
57.  
    title: {
58.  
    text: '柱状分析图'
59.  
    },
60.  
    tooltip: {
61.  
    trigger: 'axis',
62.  
    formatter: '{a} <br/>{b} : {c} '
63.  
    },
64.  
    xAxis: {
65.  
    type: 'category',
66.  
    data: this.keyData,
67.  
    },
68.  
    yAxis: {
69.  
    type: 'value',
70.  
    },
71.  
    series: [{
72.  
    name: '[tname,sumprice]',
73.  
    data: this.valueData,
74.  
    type: 'bar'
75.  
    }]
76.  
    })
77.  
    },
78.  
    piechart: function () {
79.  
    this.$echarts.dispose(this.$refs.chart);
80.  
    var myChart = this.$echarts.init(this.$refs.chart);
81.  
    myChart.setOption({
82.  
    title: {
83.  
    text: '饼状分析图',
84.  
    subtext: '',
85.  
    left: 'center'
86.  
    },
87.  
    tooltip: {
88.  
    trigger: 'item',
89.  
    formatter: '{a} <br/>{b} : {c} ({d}%)'
90.  
    },
91.  
    legend: {
92.  
    orient: 'vertical',
93.  
    left: 'left',
94.  
    },
95.  
    series: [{
96.  
    name: '[tname,sumprice]',
97.  
    type: 'pie',
98.  
    radius: '50%',
99.  
    data: this.pieData,
100.  
     emphasis: {
101.  
     itemStyle: {
102.  
     shadowBlur: 10,
103.  
     shadowOffsetX: 0,
104.  
     shadowColor: 'rgba(0,0,0,0.5)'
105.  
     }
106.  
     }
107.  
     }]
108.  
     })
109.  
     },
110.  
     brokenline: function () {
111.  
     this.$echarts.dispose(this.$refs.chart);
112.  
     var myChart = this.$echarts.init(this.$refs.chart);
113.  
     myChart.setOption({
114.  
     title: {
115.  
     text: '折线分析图',
116.  
     subtext: '',
117.  
     },
118.  
     tooltip: {
119.  
     trigger: 'axis',
120.  
     formatter: '{a} <br/> {c}'
121.  
     },
122.  
     xAxis: {
123.  
     type: 'time',
124.  
     data: []
125.  
     },
126.  
     yAxis: {
127.  
     type: 'value',
128.  
     },
129.  
     series: [{
130.  
     name: '[录入时间,总价格]',
131.  
     data: this.timeData,
132.  
     // data: [[1533164400000,150],[1533168000000,150],[1533189600000,200],[1533204000000,350],[1533211200000,200]],
133.  
     type: 'line'
134.  
     }]
135.  
     })
136.  
     },
137.  
     },
138.  
     updated() {
139.  
     this.histogram();
140.  
     },
141.  
     created() {
142.  
     {
143.  
     this.queryList();
144.  
     // this.histogram();//error
145.  
     }
146.  
     },
147.  
     mounted: function () {
148.  
     },
149.  
     }
150.  
     </script>
151.  
      

这篇好文章是转载于：学新通技术网