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 相关文章推荐
开发跨浏览器javascript常见注意事项
Jan 01 Javascript
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
Jquery实现三层遍历删除功能代码
Apr 23 Javascript
javascript禁用键盘功能键让右击及其他键无效
Oct 09 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
详细谈谈JavaScript中循环之间的差异
Aug 23 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
PHP 开源框架22个简单简介
2009/08/24 PHP
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
初次接触php抽象工厂模式(Elgg)
2010/03/21 PHP
php函数实现判断是否移动端访问
2015/03/03 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
学习jQuey中的return false
2015/12/18 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
p5.js入门教程之图片加载
2018/03/20 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
优化Python代码使其加快作用域内的查找
2015/03/30 Python
python通过socket查询whois的方法
2015/07/18 Python
Python函数的周期性执行实现方法
2016/08/13 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
Python是什么 Python的用处
2020/05/26 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
中学运动会广播稿
2014/01/19 职场文书
挂职自我鉴定
2014/02/26 职场文书
火锅店营销方案
2014/02/26 职场文书
交通志愿者活动总结
2014/06/27 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python