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 Math对象
Aug 13 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
Sep 29 Javascript
Javascript获取表单名称(name)的方法
Apr 02 Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
php 修改密码实现代码
May 24 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
js滚轮事件 js自定义滚动条的实现
Jan 18 Javascript
js实现盒子移动动画效果
Aug 09 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新手上路(十)
2006/10/09 PHP
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
Python字符编码判断方法分析
2016/07/01 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
Django和Flask框架优缺点对比
2019/10/24 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
HR喜欢的自荐信格式
2013/10/08 职场文书
专升本自我鉴定
2013/10/10 职场文书
财务经理的岗位职责
2013/12/17 职场文书
文员岗位职责
2015/02/04 职场文书
停课通知书
2015/04/24 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python