在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 相关文章推荐
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
JS对HTML表格进行增删改操作
Aug 22 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
JS实现的样式切换功能tableCSS实例
Dec 30 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
关于vue-resource报错450的解决方案
Jul 24 Javascript
详解Vue双向数据绑定原理解析
Sep 11 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
JS中注入eval, Function等系统函数截获动态代码
Apr 03 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
js中不同的height, top的区别对比
2015/09/24 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
Bootstrap进度条实现代码解析
2017/03/07 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
JS实现移动端在线签协议功能
2019/08/22 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
python虚拟环境virualenv的安装与使用
2016/12/18 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
Python socket实现简单聊天室
2018/04/01 Python
Django进阶之CSRF的解决
2018/08/01 Python
python编程使用协程并发的优缺点
2018/09/20 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
面向对象概念面试题(.NET)
2016/11/04 面试题
我的中国梦口号
2014/06/16 职场文书
大学生就业自荐书
2014/06/16 职场文书
学风建设演讲稿
2014/09/12 职场文书
企业法人授权委托书
2014/09/25 职场文书
活动宣传稿范文
2015/07/23 职场文书
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers