详解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 相关文章推荐
JS.findElementById()使用介绍
Sep 21 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 Javascript
Bootstrap零基础学习第一课之模板
Jul 18 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
深入浅析Vue.js计算属性和侦听器
May 05 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
小程序云开发教程如何使用云函数实现点赞功能
May 18 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
JS删除对象中某一属性案例详解
Sep 08 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和ACCESS写聊天室(一)
2006/10/09 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
jquery+php随机生成红包金额数量代码分享
2015/08/27 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
python2.7安装图文教程
2018/03/13 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
金山毒霸系列的笔试题
2013/04/13 面试题
什么是GWT的Module
2013/01/20 面试题
降消项目实施方案
2014/03/30 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
学校个人对照检查材料
2014/08/26 职场文书
2014年自愿离婚协议书范本
2014/09/25 职场文书
2014年转正工作总结
2014/11/08 职场文书
学校教师培训工作总结
2015/10/14 职场文书