在vue中使用vue-echarts-v3的实例代码


Posted in Javascript onSeptember 13, 2018

特征

•轻量,高效,按需绑定事件
•支持按需导入ECharts.js图表​​和组件
•支持组件调整大小事件自动更新视图

一、安装

npm install --save echarts vue-echarts-v3

二、用法

用 vue-cli 搭建的项目,打开 build 文件夹中的 webpack.base.conf.js 文件

1、webpack 1.x 修改成如下

{
    test: /\.js$/,
    loader: 'babel',
    include: [
      path.join(prjRoot, 'src'),
      path.join(prjRoot, 'node_modules/vue-echarts-v3/src')
    ],
     exclude: /node_modules(?![\\/]vue-echarts-v3[\\/]src[\\/])/
   },

2、webpack 2.x 修改成如下

{
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test'), resolve('node_modules/vue-echarts-v3/src')]
   }

3、导入所有图表和组件

import IEcharts from 'vue-echarts-v3/src/full.js';

4、手动导入ECharts.js模块以减少捆绑包大小

import IEcharts from 'vue-echarts-v3/src/lite.js';
import 'echarts/lib/component/title'; //引入标题组件
import 'echarts/lib/component/legend'; //引入图例组件
import 'echarts/lib/component/tooltip'; //引入提示框组件
import 'echarts/lib/component/toolbox'; //引入工具箱组件
// ...(引入自己需要的)
import 'echarts/lib/chart/pie'; //以饼图为例

三、例子

关于Echarts的API使用参照 Echarts官网

•从接口获取的动态数据可以直接通过props从父组件传过来,替换下面的series[0].data数组中的数据
•也可以从这个组件中从接口获取动态数据。但option属性对应的变量pie必须写在computed中return出来,不能再写在data中,否则获取不到数据

<template>
 <div class="echarts">
  <IEcharts :option="pie" @ready="onReady" @click="onClick"></IEcharts>
 </div>
</template>
<script>
import IEcharts from 'vue-echarts-v3/src/lite.js';
import 'echarts/lib/component/title'; //引入标题组件
import 'echarts/lib/component/legend'; //引入图例组件
import 'echarts/lib/chart/pie';
 export default {
  components: {IEcharts},
  data: () => ({
   pie: {
    title: {
     text: 'ECharts Demo'
    },
    tooltip: {},
    legend:{
     type: 'plain',
     orient: 'vertical',
     right: 10,
     top: 20,
    },
    series: [{
     type: 'pie',
     data: [
      {name: 'A', value: 1211},
      {name: 'B', value: 2323},
      {name: 'C', value: 1919}
     ]
    }]
   }
  }),
  methods: {
   onReady(instance) {
    console.log(instance);
   },
   onClick(event, instance, echarts) {
    console.log(arguments);
   }
  }
 };
</script>
<style scoped>
 .echarts{
  width: 400px;
  height: 400px;
  margin: auto;
  text-align: center;
 }
</style>

总结

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

Javascript 相关文章推荐
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
JQuery实现动态表格点击按钮表格增加一行
Aug 24 Javascript
jQuery获取对象简单实现方法小结
Oct 30 Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
详解vue渲染从后台获取的json数据
Jul 06 Javascript
JavaScript满天星导航栏实现方法
Mar 08 Javascript
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 #Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 #Javascript
vue interceptor 使用教程实例详解
Sep 13 #Javascript
Vue点击切换颜色的方法
Sep 13 #Javascript
node中的cookie的具体使用
Sep 13 #Javascript
vue动态改变背景图片demo分享
Sep 13 #Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 #Javascript
You might like
PHP的FTP学习(二)[转自奥索]
2006/10/09 PHP
PHP读取目录下所有文件的代码
2008/01/07 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
10条php编程小技巧
2015/07/07 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
Django的分页器实例(paginator)
2017/12/01 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
ORACLE第二个十问
2013/12/14 面试题
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
2014年部门工作总结
2014/11/12 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
婚庆司仪开场白
2015/05/29 职场文书
python常见的占位符总结及用法
2021/07/02 Python