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实现动态增加文件域表单
Feb 12 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
利用jquery写的左右轮播图特效
Feb 12 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
JS中getYear()和getFullYear()区别分析
Jul 04 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
JavaScript中的一些实用小技巧总结
Apr 07 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
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
PHP默认安装产生系统漏洞
2006/10/09 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
JavaScript 继承详解(一)
2009/07/13 Javascript
JavaScript 函数式编程的原理
2009/10/16 Javascript
jQuery之选择组件的深入解析
2013/06/19 Javascript
jsonp原理及使用
2013/10/28 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
js+html获取系统当前时间
2017/11/10 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
Cpy和Python的效率对比
2015/03/20 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
介绍一下Make? 为什么使用make
2013/12/08 面试题
比较一下entity bean和session bean
2013/12/27 面试题
python re模块和正则表达式
2021/03/24 Python
手机促销活动方案
2014/02/05 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
嘉宾邀请函
2015/01/31 职场文书
专项资金申请报告
2015/05/15 职场文书
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python