在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 相关文章推荐
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
js checkbox(复选框) 使用集锦
Apr 28 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
用 js 写一个 js 解释器过程详解
Aug 02 Javascript
微信小程序实现按字母排列选择城市功能
Nov 25 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
第一节--面向对象编程
2006/11/16 PHP
PHP执行速率优化技巧小结
2008/03/15 PHP
php adodb连接不同数据库
2009/03/19 PHP
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
javascript知识点收藏
2007/02/22 Javascript
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
javascript中this指向详解
2016/04/23 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
军训生自我鉴定范文
2013/12/27 职场文书
规划编制实施方案
2014/03/15 职场文书
单位工程竣工验收方案
2014/03/16 职场文书
毕业大学生自荐信
2014/06/17 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
生活小常识广播稿
2014/09/16 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
大专护理专业自荐信
2015/03/25 职场文书
个人借条范本
2015/05/25 职场文书
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS