详解Vue中使用Echarts的两种方式


Posted in Javascript onJuly 03, 2018

1. 直接引入echarts

先npm安装echarts

npm install echarts --save

开发:

main.js

import myCharts from './comm/js/myCharts.js'
Vue.use(myCharts)
myCharts.js
/**
 * 各种画echarts图表的方法都封装在这里
 */
import echarts from 'echarts'
(function() {
  var chart = {};
  chart.install = function(vue) {
    vue.prototype.$chart = {
      //画一条简单的线
      line1: function(id) {
        this.chart = echarts.init(document.getElementById(id));
        this.chart.clear();
        const optionData = {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }]
        };
        this.chart.setOption(optionData);
      },
    }
  }
  if(typeof exports == 'object') {
    module.exports = chart
  }
})()
hello.vue
...
<div id="chart1"></div>
...
mounted() {
  this.$chart.line1('chart1');
},

2、使用vue-echarts

先npm安装vue-echarts

npm install vue-echarts

开发:

main.js

import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
Vue.component('chart', ECharts)
hello.vue
...
<chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>
...
data: function() {
  return {
    orgOptions: {},
  }
},
...
mounted() {
  this.orgOptions = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }]
  }
}

总结

以上所述是小编给大家介绍的Vue中使用Echarts的两种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
脚本安需导入(装载)的三种模式的对比
Jun 24 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
获取url中用&amp;隔开的参数实例(分享)
May 28 Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
Angular通过指令动态添加组件问题
Jul 09 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
vue 虚拟DOM的原理
Oct 03 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 #Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 #Javascript
js实现各浏览器全屏代码实例
Jul 03 #Javascript
React Native基础入门之初步使用Flexbox布局
Jul 02 #Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 #Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 #Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 #Javascript
You might like
全国FM电台频率大全 - 27 陕西省
2020/03/11 无线电
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
php自动识别文字编码并转换为目标编码的方法
2015/08/08 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
jquery 锁定弹出层实现代码
2010/02/23 Javascript
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
vue实现搜索功能
2019/05/28 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
安装PyInstaller失败问题解决
2019/12/14 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
HTML5打开手机扫码功能及优缺点
2017/11/27 HTML / CSS
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
2014年大学生自我评价
2014/01/19 职场文书
优秀志愿者事迹材料
2014/02/03 职场文书
学生干部培训方案
2014/06/12 职场文书
团日活动总结格式
2015/05/11 职场文书
小学班长竞选稿
2015/11/20 职场文书
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL