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开发随笔一 preventDefault的必要
Nov 25 Javascript
js去除重复字符串两种实现方法
Jan 09 Javascript
JS操作图片(增,删,改) 例子
Apr 17 Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
discuz表情的JS提取方法分析
Mar 22 Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
JavaScript实现优先级队列
Dec 06 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
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
xml转json的js代码
2012/08/28 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
python中正则表达式的使用方法
2018/02/25 Python
Django学习笔记之ORM基础教程
2018/03/27 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
硕士研究生个人求职信
2013/12/04 职场文书
物流管理专业毕业生自荐信
2014/03/04 职场文书
加多宝凉茶广告词
2014/03/18 职场文书
初中学生期末评语
2014/04/24 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
解约证明模板
2015/06/19 职场文书