当前位置：网站首页 > IT知识 > 正文

9、echarts 在 vue 中怎么引用?(必会)

liuian 2025-06-18 22:20 45 浏览

首先我们初始化一个 vue 项目，执行 vue init webpack echart,接着我们进入初始化的项目下。安装 echarts，

npm install echarts -S //或

cnpm install echarts -S

安装完成之后，我们就可以开始引入我们需要的 echarts 了，接下来介绍几种使用 echarts 的方式。

全局引用：

首先在 main.js 中引入 echarts，将其绑定到 vue 原型上：

import echarts from 'echarts'

Vue.prototype.$echarts = echarts;

接着，我们就可以在任何一个组件中使用 echarts 了。

局部使用：

当然，很多时候没必要在全局引入 ecahrts，那么我们只在单个组件内使用即可，代码更加简单：

<template>

<div>

<div style="width:500px;height:500px" ref="chart"></div>

</div>

</template>

<script>

const echarts = require('echarts');

export default{

data () {

return {};

},

methods: {

initCharts () {

let myChart = echarts.init(this.$refs.chart);

// 绘制图表

myChart.setOption({

title: { text: '在 Vue 中使用 echarts' },

tooltip: {},

xAxis: {

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

},

yAxis: {},

series: [{

name: '销量',

type: 'bar',

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

}]

});

}

},

mounted () {

this.initCharts();

}

}

</script>

可以看到，我们直接在组件内引入 echarts，接下来跟全局引入的使用一样。区别在于，这种方式如果你想在其他组件内用 echarts，则必须重新引入了。

vue init

上一篇：.net core集成vue（.net core集成cas）
下一篇：零基础入门vue开发（vue快速入门与实战开发）

相关推荐

acer清除开机密码（acer电脑开机密码忘记怎么重置）: 如果您忘记了ACER笔记本电脑的BIOS密码，您可以按照以下方法清除BIOS密码：1.通过CMOS电池清除BIOS密码第一种方法是通过清除CMOS电池来清除BIOS密码。CMOS电池是电脑主板上的一...

宽带连接错误651是什么意思（宽带连接错误651是什么意思呀）: 宽带连接错误651为调制解调器（modem）发出的错误报告，一般情况下是未找到指定的端口。以下介绍以下这种错误发生的情况和具体的解决方法：【宽带连接错误651是什么意思】　　遇到宽带连接错误651时，...

电脑重装系统在哪里（电脑重装系统去哪里比较好）: 重装电脑系统是一个相对复杂的过程，首先需要备份重要数据，然后准备一个可启动的安装介质，如U盘或光盘。接下来，进入BIOS设置，将启动顺序调整为首先从安装介质启动。然后，按照屏幕上的指示进行系统安装，选...

win10专业版激活密钥无法激活: 如果您的Windows10专业版激活密钥被阻止，您可以尝试以下几种方法：1. 检查激活密钥是否正确：请确保您输入的激活密钥是正确的，并且与您的Windows10专业版版本匹配。2...

闪迪内存卡数据恢复（闪迪sd卡数据恢复）: 首先，不要继续往闪迪内存卡中写入新的数据，以免覆盖原有数据。然后，可以使用数据恢复软件来尝试恢复误删的文件，如Recuva、EaseUSDataRecoveryWizard等，这些软件可以扫描内...

电脑内存条通用吗（电脑内存条通用吗怎样区分）: 不是通用的。内存条是CPU可通过总线寻址，并进行读写操作的电脑部件。电脑上的内存条是不通用的，选择内存条的时候，需要查清主板支持的内存条的种类，在电脑上安装主板支持的内存条。内存条分为DDRDDR2...

系统维护中怎么解决（系统维护中一般要多久才能恢复）: 系统正在维护中意思是系统正在更新或者升级中。网站或软件代码程序出现了问题，或者网站、软件需要更新升级的时候，一般会关闭进行查找问题，处理问题，内容进行更新。处理完了才会开通网站访问。为了清除系统运行中...

电脑桌面隐藏的文件夹怎么找出来: 要查看电脑上隐藏的文件夹，可以采取以下几种方法：方法一：使用文件夹选项按下键盘上的Windows键和E键打开“文件资源管理器”。找到“查看”和“选项”两个选项并勾选。选中“显示隐藏的文件、文件夹和驱动...

搜狗中文手写输入法下载（下载搜狗手写版）: 点击输入框弹出搜狗键盘，进入搜狗工具栏的设置图标，手写设置，勾选“手写注音”。在输入法点击那个键盘，就会有那个输入方式的选项，选择手写输入就可以了。呼出输入法，点击输入法上方的键盘图样，找到手写输入，...

免费云服务器怎么样（云服务器哪些是免费）: 搞软件开发的人都知道，对于一些网络应用软件必须要租用服务器存放才能被更多用户使用。如一些应用于浏览软件、传输软件、远程登录软件等。如果是像以往那样租用物理机服务器，成本费用非常高昂。但是现在有云服务器...

斐讯路由器登录密码忘记了怎么办: 1.斐讯无线路由器密码忘记，要重设密码，首先长按路由器背面的reset键，将路由器恢复出厂设置。2.路由器恢复出厂设置以后，在电脑浏览器地址栏中输入：192.168.1.1并按下回车键，“用户名”输...

软件之家软件分享（软件之家软件合集）: 驱动精灵，驱动人生，360驱动大师。云之家挺好用的，通讯录是按组织架构的，跟微信一样可以看到所有人的动态，还有小组一般是按公司、部门、行业、兴趣分的，老板开讲可以把最上级的意思快速传达给所有员工。我们...

pps网络电视直播软件下载（ppstv版官方下载）

鲁大师下载安装免费版（鲁大师app下载）: 解决方法吧。第一种方法：一般情况下，我们安装的时候软件也需要一定的时间，我们可以多等待一会。第二种方法：安装到99%你直接关掉安装。然后自己到安装目录文件里找到启动程序，就可以用了。第三种方法：1、可...

ssd坏道检测与修复（ssd硬盘坏道检测）: 1、固态硬盘（SSD硬盘）损坏分两方面，一方面是出现硬盘坏块，另一方面是出现物理损坏。2、固态硬盘如果出现坏块是不可修复的。SSD硬盘坏块不是所谓的逻辑坏块。SSD硬盘内部是晶体管，损坏后不能恢复，这...

一周热门

最近发表

首页
收录
顶部