在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的replace方法详细介绍
Nov 09 Javascript
教你用javascript实现随机标签云效果_附代码
Mar 16 Javascript
AngularJS 服务详细讲解及示例代码
Aug 17 Javascript
js 递归和定时器的实例解析
Feb 03 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
Vue中render方法的使用详解
Jan 26 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
vue样式穿透 ::v-deep的具体使用
Jun 04 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 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
关于手调机和数调机的选择
2021/03/02 无线电
PHP三层结构(上) 简单三层结构
2010/07/04 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
JavaScript代码复用模式实例分析
2012/12/02 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python编码时应该注意的几个情况
2013/03/04 Python
Python检测网站链接是否已存在
2016/04/07 Python
python实现SMTP邮件发送功能
2020/06/16 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
Python3数字求和的实例
2019/02/19 Python
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
2019/04/15 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
临床医师个人自我评价
2014/04/06 职场文书
松材线虫病防治方案
2014/06/15 职场文书
目标责任书格式范文
2015/05/11 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers