错误提示:
在运行Vue项目时出现了上述错误,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的,代码如下:
// 基于准备好的dom,初始化echarts实例 var bar_dv = document.getElementById('bar_dv'); let myChart = this.$echarts.init(bar_dv)
解决办法:
1、利用Vue中的ref和$refs 来代替document.getElementById()获取该图形容器对象,代码如下:
<template> <div id="bar_dv" ref="chart" > </div> </template> <script> /*默认数据*/ const DEFAULT_DATA = { xAxisData: ["重庆", "西安", "福州", "杭州", "长沙", "南昌"], yAxisData: [43, 41.8, 41.7, 41.6, 40.6, 40.6], }; export default { name: 'EHistogram', /*接收外部传入一个label变量*/ props: ['label', 'itemColor', 'backgroundColor', 'itemDataType', 'xAxisName', 'yAxisName', 'eventType'], data() { return { msg: 'Welcome to Your Vue.js App', } }, mounted() { this.drawLine(); }, methods: { drawLine() { // 基于准备好的dom,初始化echarts实例 //var bar_dv = document.getElementById('bar_dv'); var bar_dv = this.$refs.chart; if (bar_dv){ console.log('bar_dv不为空'); let myChart = this.$echarts.init(bar_dv) // 绘制图表 '火炉省会城市极端高温对比' myChart.setOption({ title: {text: this.label}, color: [this.itemColor], backgroundColor: [this.backgroundColor], tooltip: {}, xAxis: { name: this.xAxisName, data: DEFAULT_DATA.xAxisData, nameTextStyle: { fontSize: 14, fontWeight: 'bolder' } }, yAxis: { name: this.yAxisName, nameTextStyle: { fontSize: 14, fontWeight: 'bolder' } }, series: [{ name: this.itemDataType, type: 'bar', data: DEFAULT_DATA.yAxisData, }] }); console.log("this.eventType:" + this.eventType); myChart.on(this.eventType, function (params) { window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name)); }); }else { console.log('bar_dv为空!'); } } }, } </script> <style scoped> </style>
到此为止该问题就算解决了,如果觉得还可以点个赞哦!