在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 相关文章推荐
javascript prototype,executing,context,closure
Dec 24 Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
javascript字符串拼接的效率问题
Dec 25 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
javascript中几个容易混淆的概念总结
Apr 14 Javascript
基于jQuery实现网页打印功能
Dec 01 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
原生js开发的日历插件
Feb 04 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Oct 25 Javascript
jQuery实现计算器功能
Oct 19 jQuery
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
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
python导出hive数据表的schema实例代码
2018/01/22 Python
python实现猜数字小游戏
2020/03/24 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
python是否适合网页编程详解
2019/10/04 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
团购业务员岗位职责
2014/03/15 职场文书
股指期货心得体会
2014/09/10 职场文书
2015年社区妇联工作总结
2015/04/21 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python
Tomcat弱口令复现及利用
2022/05/06 Servers