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({
 	//省略
 })
		}

这样就可解决上述问题了