Cannot read property ‘getAttribute‘ of null“ vue导入echarts报错

news/2024/7/10 2:30:26 标签: vue
<templete>
	<div>
		<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
          <div
            id="main"
            style="width: 600px;height:400px;"
          ></div>
	</div>
</templete>
<script>
import echarts from 'echarts'
export default {
  mounted() {
    // console.log(document.getElementById('main'))
    this.drawChart()
  },
  methods: {
    drawChart() {
      this.$nextTick(function () {
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'))
        // 绘制图表
        myChart.setOption({
          title: {
            text: 'ECharts 入门示例'
          },
          tooltip: {},
          xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }]
        })
        console.log(document.getElementById('main'))
      })
    }
  }
}
</script>

http://www.niftyadmin.cn/n/1867337.html

相关文章

HTML文件和webpage,ASP.NET Web Pages - 页面布局

使用布局页面在之前的内容中&#xff0c;您已看到在多个网页中引用相同的内容是很简单的。创建一致外观的另一种方法是使用布局网页。布局网页包含网页的结构&#xff0c;而不是内容。当网页(内容页)链接到布局页时&#xff0c;它会根据布局页(模板)来显示。布局页类似普通的网…

如何利用sublime_text3编辑公式?

如何利用sublime_text3编辑公式&#xff1f; 安装软件sublime软件: http://www.sublimetext.com/安装Package Control&#xff1a; 详见&#xff1a;https://www.imjeff.cn/blog/62/&#xff08;ps: 写的很好&#xff0c;建议直接参考&#xff0c;本文部分直接引用&#xff…

vue 父组件给子组件传值及父组件触发子组件事件

父组件 <template><div><!-- 顶部导航 --><topNavtitle"XXX"click"goBack"ref"child"></topNav></div></template><script> import topNav from ../../components/topNavbar export default {…

html3对标签,html标签3(转载)

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼练习h1{color : red ;}alert(我帅吗?)you are beautiful girl !!> you are beautiful girl ! Meta标签&#xff1a;Meta标签介绍&#xff1a;元素可提供有关页面的原信息(mata-information)&#xff0c;针对搜索引擎和更新频度…

推荐几个有关机器学习的微信公众号

个人观点&#xff0c;欢迎吐槽&#xff0c;欢迎推荐 机器学习研究会 特点&#xff1a;北京大学大数据与机器学习创新中心旗下的学生组织&#xff0c;时下最前沿咨询 数据挖掘入门与实战 特点&#xff1a;和其名字一样&#xff0c;入门的好帮手&#xff0c;实践的小能手 AI…

html锚点无法回顶部,不定高,好像使用锚点返回不了顶部啊

2-5、定位回到顶部* {margin: 0;padding: 0;}html,body {width: 100%;height: 100%;font-size: 14px;}header {height: 35px;background: #666;}header a {line-height: 35px;color: #fff;text-decoration: none;margin: 0 15px;}.container {height: 200%;}a[href"#top&q…

Markdown中代码段的标注显示特殊字符`如何输入?

在编辑 Markdown文件中&#xff0c;要输入代码段&#xff1a; 可用以下格式&#xff1a; [三个锐音符] [编辑语言的名称] [三个锐音符] 例如&#xff1a;从sklearn输出数据集 from sklearn import datasets 对于特殊字符【】名叫锐音符&#xff0c;很多人不知道怎么样输入?…

vue项目运行报错

先删除node,然后用cnpm i基本就能解决 npm install -g cnpm --registryhttps://registry.npm.taobao.org cnpm i