Echarts构建图表

Echarts学习—构建图表

相信有很多的前端开发人员在开发Echarts图表的过程中都遇到对图表结构过无从下手，面对一大堆的专业词汇一脸懵逼的样子，在经过了一段时间的踩坑后，终于摸索出了一套完善的学习方法

首先来进行图表构造

图表构建

本次以 VUE 为案例

创建并引入一个Echarts图表（只展示代码部分，配置环境等略过）

<template>
        <div class="chart-box">
            <div id="myChart" ></div>
        </div>
</template>
<script>
export default {
    created(){
    },
    mounted(){
        this.newcharts();
    },
    methods: {
 	  newcharts(){
        // 基于准备好的dom，初始化echarts实例
        //记得给予图表宽高
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
			 xAxis: {
			        type: 'category',
			        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			    },
			    yAxis: {
			        type: 'value'
			    },
			    series: [{
			        data: [820, 932, 901, 934, 1290, 1330, 1320],
			        type: 'line'
			    }]
        });
    }
  }

}
</script>
<style scoped>
 #myChart{
    width: 100%;
    height:100%;
}
</style>

图表创建报错Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of null"

Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of null"

这种情况是渲染的容器还未生成，所以出现错误

这种情况我们可以用ref和$refs 来代替document.getElementById（）获取该图形容器对象

为此我们在构建的容器上添加ref

之后代码如下

 var charts_new = this.$refs.mychart;
        if (charts_new){
          let myChart = this.$echarts.init(charts_new)
          myChart.setOption({
        	//省略
          })
		}

这样就可解决上述问题了