vue使用echarts图表的详细方法


Posted in Javascript onOctober 22, 2018

本文为大家分享了vue使用echarts图表的方法,供大家参考,具体内容如下

该示例使用 vue-cli  脚手架搭建

安装echarts依赖

npm install echarts -S

或者使用国内的淘宝镜像:

安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

使用

cnpm install echarts -S

创建图表

全局引入

main.js

// 引入echarts
import echarts from 'echarts'

Vue.prototype.$echarts = echarts

Hello.vue

<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
export default {
 name: 'hello',
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 },
 mounted(){
  this.drawLine();
 },
 methods: {
  drawLine(){
    // 基于准备好的dom,初始化echarts实例
    let myChart = this.$echarts.init(document.getElementById('myChart'))
    // 绘制图表
    myChart.setOption({
      title: { text: '在Vue中使用echarts' },
      tooltip: {},
      xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    });
  }
 }
}

注意:这里echarts初始化应在钩子函数mounted()中,这个钩子函数是在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用

按需引入

上面全局引入会将所有的echarts图表打包,导致体积过大,所以我觉得最好还是按需引入。

Hello.vue

// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
 name: 'hello',
 data() {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 },
 mounted() {
  this.drawLine();
 },
 methods: {
  drawLine() {
   // 基于准备好的dom,初始化echarts实例
   let myChart = echarts.init(document.getElementById('myChart'))
   // 绘制图表
   myChart.setOption({
    title: { text: 'ECharts 入门示例' },
    tooltip: {},
    xAxis: {
     data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {},
    series: [{
     name: '销量',
     type: 'bar',
     data: [5, 20, 36, 10, 10, 20]
    }]
   });
  }
 }
}

这里之所以使用 require 而不是 import,是因为 require 可以直接从 node_modules 中查找,而 import 必须把路径写全。

页面展示

vue使用echarts图表的详细方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
threejs太阳光与阴影效果实例代码
Apr 05 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 #Javascript
Koa 使用小技巧(小结)
Oct 22 #Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 #Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 #Javascript
Node.js中的不安全跳转如何防御详解
Oct 21 #Javascript
详解Axios 如何取消已发送的请求
Oct 20 #Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 #Javascript
You might like
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
dedecms函数分享之获取某一栏目所有子栏目
2014/05/19 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
2015/04/22 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
python写日志封装类实例
2015/06/28 Python
python实现微信防撤回神器
2019/04/29 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
Python sorted对list和dict排序
2020/06/09 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
软件测试工程师结构化面试题库
2016/11/23 面试题
工商管理本科毕业生求职信范文
2013/10/05 职场文书
公司拓展活动方案
2014/02/13 职场文书
高中生操行评语大全
2014/04/25 职场文书
走进科学观后感
2015/06/18 职场文书
Golang的继承模拟实例
2021/06/30 Golang
详解Go语言中配置文件使用与日志配置
2022/06/01 Golang