echarts怎么引入到vue中?

准备工作:

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

npm install echarts -S 
//或
cnpm install echarts -S

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

全局引用:

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

  1. import echarts from 'echarts'

  2. Vue.prototype.$echarts = echarts;

接着,我们就可以在任何一个组件中使用echarts了,接下来我们在初始化项目中的helloWorld组件中使用echarts配置图标,具体如下:

<template>
    <div>
         <div style="width:500px;height:500px" ref="chart"></div>
    </div>
</template>
<script>
export default{
   data () {
  return {};
 },
 methods: {
  initCharts () {
  let myChart = this.$echarts.init(this.$refs.chart);
  console.log(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了。

局部使用:

当然,很多时候没必要在全局引入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,则必须重新引入了。

Image placeholder
前端答疑
未设置
  27人点赞

没有讨论,发表一下自己的看法吧

推荐文章
axios怎么引入到vue中?

Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。在vue项目之中使用axios是一个非常明智的选择,因为vue官方已经宣称不再维护vue-resource,并且推荐使

vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

vue引入swipervue使用swipervue脚手架使用swiper/引入js文件/引入css文件欢迎加入前端交流群来获取视频资料以及前端学习资料:749539640转载文章请注明出处! 如果只是

.vue文件怎么引入本地图片

.vue文件怎么引入本地图片.vue文件引入本地图片,需要先将本地图片复制到项目的src\assets目录中,否则不能使用。然后在template标签中,使用img标签引用图片即可。本地图片路径:在.

vue源码解读(四)Vue中的异步更新策略

欢迎star我的github仓库,共同学习~目前vue源码学习系列已经更新了6篇啦~https://github.com/yisha0307/...快速跳转: Vue的双向绑定原理(已完成) 说说vu

jsp怎么引入css样式?

JSP页面引入CSS样式有三种方法,且其优先级不同。具体如下:外部样式,内嵌样式,行内样式。优先级依次增高!下面给大家具体介绍一下:1、外部样式jsp可以在link标签中使用href属性引入css文件

css怎么设置div居中?

css设置div居中的方法1、利用margin,div1的宽减去div2的宽就是div2margin-left的数值:(100-40)/2=30div1的高减去div2的高就是div2margin-t

css怎么写在html中?

css怎么写在html中?css样式写法可以分为:●内嵌式●内部样式表●外部样式表HTML中直接写css只能使用内嵌式和内部样式表。(相关课程推荐:css视频教程)一、内嵌式将css代码写在HTML元

ajax怎么在vue中使用?

ajax怎么在vue中使用?axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护本文为大家介绍vue使用a

ie11下不能引入外部css怎么解决?

ie11下不能引入外部css怎么解决?问题:在IE11下使用link标签引入css时,无法正常引入,直接在页面中使用style标签没问题。原因:头文件的问题。解决方法:●删除头部的●或者,将头部改成

YOLO目标检测从V1到V3结构详解

本文主要内容是对YOLO系列进行综述目标检测评价指标IoU(Intersection-over-Union)指标IoU简称交并比,顾名思义数学中交集与并集的比例。假设有两个集合A与B,IoU即等于A与

jquery怎么设置checkbox不选中?

jquery怎么设置checkbox不选中?jquery对checkbox进行操作需要使用prop()方法。1、设置不选中:$("#my-checkbox").prop("checked",false

vue中如何关闭eslint检测?

vue中如何关闭eslint检测?有了eslint的校验,可以来规范开发人员的代码,是挺好的。但是有些像缩进、空格、空白行之类的规范,在开发过程中一直报错,未免太过于苛刻了。所以,下面来介绍下怎么在v

vue中的diff算法详解

1.当数据发生变化时,vue是怎么更新节点的?要知道渲染真实DOM的开销是很大的,比如有时候我们修改了某个数据,如果直接渲染到真实dom上会引起整个dom树的重绘和重排,有没有可能我们只更新我们修改的

理解Vue中间件管道

通常,在构建SPA时,需要保护某些路由。例如假设有一个只允许经过身份验证的用户访问的dashboard路由,我们可以通过使用auth中间件来确保合法用户才能访问它。在本教程中,我们将学到怎样用Vue-

jquey怎么引用css样式

jquey怎么引用css样式jquery引用css只需要一行代码即可,通过传入一个标签,来创建link标签,传入type、href、以及rel给link标签添加属性,最后再调用appendTo方法,将

jquery判断checkbox是否被选中?

jquery判断checkbox是否被选中?一、is()方法进行判断$("input[type='checkbox']").is(':checked')返回true或false二、attr()方法进行

echarts支持vue吗?

echarts支持vue吗?echarts支持vue。可以通过在vue项目的main.js中全局引入echarts,然后将其绑定到vue原型上:importechartsfrom'echarts'Vu

echarts和vue的区别是什么?

echarts:ECharts,缩写来自EnterpriseCharts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/

在react中怎么引用js

在react中怎么引用js推荐两种引入的方法,当然也可以自己编写一个JS类(ES6语法)实现动态插入JS到页面,然后在React项目引入。第一种:使用插件react-load-script如果没有安装

RTSP网络摄像头/海康大华硬盘录像机网页无插件直播方案EasyNVR如何实现RTMP/FLV/HLS/RTSP直播流分发

背景需求对于摄像机直播,客户反馈的最多就是实现web直播、摆脱插件,可以自定义集成等问题。我们熟悉的EasyNVR已经完美的解决了这些问题。然而对于web播放也存在一些问题,通常我们web播放RTMP

jquery怎么判断值是否在数组中?

要判断数组中是否包含某个元素,从原理来来说,就是遍历整个数组,然后判断是否相等Jquery方法可以使用Jquery提供的方法:使用$.inArray()来判断。inArray()函数用于在数组中查找指

node中文什么意思?

起初,RyanDahl称他的项目为web.js,就是一个Web服务器,但是项目的发展超过了他最初单纯开发一个Web服务器的想法,变成了构建网络应用的一个基础框架,这样可以在它的基础上构建更多的东西,诸

react-native中IOS的webview和js层通信 - UIWebview

前言在9012的最后一篇写到了在rn中安卓的webview的通信原理,而作为0202年的第一篇,继续讨论上年rn中webview通信剩下的部分。背景:对于webview,了解过的人都知道在ios端会存

leveldb源代码分析系列1.1:memtable中comparator的实现

leveldb中memtable封装了一个skiplist用来存储真正的数据,跳跃列表的实现一定需要定义存储项的序关系,而在leveldb中这个序关系通过comparator相关类来实现。leveld

如何将样式加入到react组件上

如何将样式加入到react组件上一、使用行内样式想给虚拟dom添加行内样式,需要使用表达式传入样式对象的方式来实现://注意这里的两个括号,第一个表示我们在要JSX里插入JS了,第二个是对象的括号 H