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

这样就可解决上述问题了