请选择 进入手机版 | 继续访问电脑版

石家庄老站长

点击联系客服
客服QQ:509006671 客服微信:mengfeiseo
 找回密码
 立即注册
查看: 9|回复: 0

在vue中使用echarts

[复制链接]

1

主题

1

帖子

-7

积分

限制会员

积分
-7
发表于 2021-5-2 23:44:25 | 显示全部楼层 |阅读模式
因为需要在项目中可视化数据,也就是用图表表示,所以echarts是众所周知的非常强大的插件。

Npm  install  echarts  -S

也可以使用淘宝上的镜子。

npminstall-gcn  pm-registry=https://registry  . NPM  . Taobao  . org

Cnpm  install  echarts  -S

生成图表

首先,需要全球引入

在Main.js中

//echarts介绍

Import  echarts  from  'echarts  '

Vue.prototype.$echarts=echarts

在Echarts.vue中

Template

迪夫

DIV  ID=' My  chart  ' : Style=' { width  : ' 300 px  ',height  3360' 300px'}'/div

/div

/template

脚本(脚本)

Export  default  {

name  : ' hello  ',

数据(){

Return  {

MSG  : ' welcome  to  yourvue  . js  app  '

}

},

Mounted(){

this  . drawline();

},

Methods: {

DrawLine(){

//根据准备好的DOM初始化echarts实例

letmychart=echarts  . init(document  . getelementbyid(' my  chart  '))

//绘制图表

MyChart.setOption({

Title: {text: '是Vue中的echarts'},

工具提示: {},

XAxis: {

数据: [“衬衫”、“毛衣”、“短衫”、“裤子”、“高跟鞋”、“袜子”]

},

YAxis: {},

系列: [{

Name:“销售”,

:型“酒吧”,

data  3360[5,20,36,10,10,20]

}]

});

}

}

}

/脚本

风格(音乐)

/style

所以我们引进了echarts,并保存在浏览器中。





使用ECharts时报告了错误。

Error  in  mou
nted hook: “TypeError: Cannot read property ‘init’ of undefined”
原因:echarts的引入方式错误:
正确的echarts引入方式:


let echarts = require(‘echarts’)




其实产生这个的原因是因为echarts的版本太高了,我们现在来看package.json里面的echarts的版本


一时半会拿不准问题原因,到处搜罗了一下,发现可能是版本问题,我下载的是最新的,于是卸载了echarts,安装了低版本
npm install echarts@4.8.0 --save或者let echarts = require(‘echarts’)

发现安装低于5的版本,这三种方式引入的都可以使用


现在我把本地的依赖都清除,然后在package.json里面把echarts删除,然后重新安装依赖看看
现在的版本是5.1.1



当使用全局引入的时候就会报错了




使用import的时候也是会报错


使用require就不会报错了





总结:如果echarts版本在5.0以下使用三种引入的方式都行,
如果echarts的版本在5.0以上,只能使用require的方式引入
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|无图版|手机版|小黑屋|石家庄@IT精英团

GMT+8, 2021-5-16 04:11 , Processed in 0.038534 second(s), 19 queries .

Powered by Discuz! X3.4

© 2001-2021 Comsenz Inc.

快速回复 返回顶部 返回列表