1、安装echarts依赖
npm install echarts -S
2、main.js中配置 :
// 引入echarts import echarts from ‘echarts‘ Vue.prototype.$echarts = echarts
3、在页面中//，引入基本模板
let echarts = require(‘echarts/lib/echarts‘)
4、接下来就是页面代码：并且在methods中写drawLine()方法如下：（我的需求是单击表格行触发openDialog事件，打开对应的弹出框，弹出框里有echarts和表格）
我把echarts放入dialog里，就一直报错
问题定位：
经过反复的调试后发现，通过$refs获取不到el-dialog对话框中的子组件对象，返回的都是undefined，这也就导致了上图的错误。
解决办法：
在通过this.$refs 获取el-dialog对话框中的子组件对象之前加入以下函数即可：
加上下面这个代码：
this.$nextTick(function () {
this.drawLine();
});
主要代码简易版：
控件代码
<el-dialog title="收货地址" :visible.sync="dialogTableVisible" class="openDialogClass">
<div ref="bar_dv" class="dialogEchartsClass" :style="{width: ‘300px‘, height: ‘300px‘}" ></div>
</el-dialog>
// 引入基本模板 let echarts = require(‘echarts/lib/echarts‘)
打开弹出框调用drawLine()方法：
openDiaog(){ this.dialogTableVisible=true this.$nextTick(function () { this.drawLine(); }) },
drawLine方法：
drawLine(){ let bar_dv = this.$refs.bar_dv; let myChart = echarts.init(bar_dv); // 绘制图表 myChart.setOption({ title: { text: ‘在Vue中使用echarts‘ }, tooltip: {}, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: ‘销量‘, type: ‘bar‘, data: [5, 20, 36, 10, 10, 20] }] }); },
