详解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 相关文章推荐
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
Dec 28 Javascript
Js 中debug方式
Feb 07 Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
JS简单判断函数是否存在的方法
Feb 13 Javascript
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
node实现简单的增删改查接口实例代码
Aug 22 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 Javascript
js实现复制粘贴的两种方法
Dec 04 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
php+javascript的日历控件
2009/11/19 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
JTrackBar水平拖动效果
2007/07/15 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
基于jQuery实现二级下拉菜单效果
2016/02/01 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
js实现二级导航功能
2017/03/03 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
铭立家具面试题
2012/12/06 面试题
珍惜水资源建议书
2014/03/12 职场文书
汽车广告策划方案
2014/05/31 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
消防志愿者活动方案
2014/08/23 职场文书
基层工作经验证明样本
2014/11/16 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书