vue.js如何将echarts封装为组件一键使用详解


Posted in Javascript onOctober 10, 2017

前言

本文主要给大家介绍了关于vue.js将echarts封装为组件一键使用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

说明

做项目的时候为了让数据展示的更加直观,总会用到图表相关的控件,而说到图表控件第一时间当然想到ECharts这个开源项目,而它不像iview、element-ui这些组件使用起来那么便捷,需要绕一个小弯,为了图方便于是对ECharts进行了一层封装

控件演示

vue.js如何将echarts封装为组件一键使用详解

控件使用

概要

  • 基于echarts的二次封装
  • 由数据驱动
  • 控件源码见src/components/charts

文档

props

属性 说明 类型
_id 图表唯一标识,当id重复将会报错 String
_titleText 图表标题 String
_xText x轴描述 String
_yText y轴描述 String
_chartData 图表数据 Array
_type 图表类型,提供三种(LineAndBar/LineOrBar/Pie)

调用示例

<chart
 :_id="'testCharts'"
 :_titleText="'访问量统计'"
 :_xText="'类别'"
 :_yText="'总访问量'"
 :_chartData="chartData"
 :_type="'Pie'"></chart>
 //测试数据样例 [["类别1",10],["类别2",20]]

实现方式

创建一个待渲染的dom

<template>
 <div :id="_id" class="chart"></div>
</template>

绘制函数

function drawPie(chartData,id,titleText,xText,yText) {
 var chart = echarts.init(document.getElementById(id))
 var xAxisData = chartData.map(function (item) {return item[0]})
 var pieData = []
 chartData.forEach((v,i)=>{
  pieData.push({
  name:v[0],
  value:v[1]
  })
 })
 chart.setOption({
  title : {
  text: titleText,
  subtext: '',
  x:'center'
  },
  tooltip : {
  trigger: 'item',
  formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
  orient: 'vertical',
  left: 'left',
  data: xAxisData
  },
  series : [
  {
   name: xText,
   type: 'pie',
   radius : '55%',
   center: ['50%', '60%'],
   data:pieData,
   itemStyle: {
   emphasis: {
    shadowBlur: 10,
    shadowOffsetX: 0,
    shadowColor: 'rgba(0, 0, 0, 0.5)'
   }
   }
  }
  ]
 })
 }

挂载结束、数据源改变时重绘

watch:{
  _chartData(val){
  switch (this._type){
   case "LineAndBar":
   drawLineAndBar(val,this._id,this._titleText,this._xText,this._yText);
   break
   case "LineOrBar":
   drawLineOrBar(val,this._id,this._titleText,this._xText,this._yText);
   break
   case "Pie":
   drawPie(val,this._id,this._titleText,this._xText,this._yText);
   break
   default:
   drawLineAndBar(val,this._id,this._titleText,this._xText,this._yText);
   break
  }
  }
 },
 mounted() {
  switch (this._type){
  case "LineAndBar":
   drawLineAndBar(this._chartData,this._id,this._titleText,this._xText,this._yText);
   break
  case "LineOrBar":
   drawLineOrBar(this._chartData,this._id,this._titleText,this._xText,this._yText);
   break
  case "Pie":
   drawPie(this._chartData,this._id,this._titleText,this._xText,this._yText);
   break
  default:
   drawLineAndBar(this._chartData,this._id,this._titleText,this._xText,this._yText);
   break
  }
 }

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery替换字符串(实例代码)
Nov 13 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
jQuery实现简单下拉导航效果
Sep 07 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
javascript之IE版本检测超简单方法
Aug 20 Javascript
bootstrap常用组件之头部导航实现代码
Apr 20 Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 Javascript
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
vscode中Vue别名路径提示的实现
Jul 31 Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 #Javascript
基于vue的换肤功能的示例代码
Oct 10 #Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 #Javascript
利用JS hash制作单页Web应用的方法详解
Oct 10 #Javascript
认识jQuery的Promise的具体使用方法
Oct 10 #jQuery
JavaScript如何获取到导航条中HTTP信息
Oct 10 #Javascript
使用Dropzone.js上传的示例代码
Oct 10 #Javascript
You might like
又十个超级有用的PHP代码片段
2015/09/24 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
PHP中list方法用法示例
2016/12/01 PHP
php实现微信小程序授权登录功能(实现流程)
2019/11/13 PHP
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
2017/12/10 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
linux 下实现python多版本安装实践
2014/11/18 Python
探究Python中isalnum()方法的使用
2015/05/18 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
python模拟斗地主发牌
2020/04/22 Python
团队精神演讲稿
2013/12/31 职场文书
医药工作岗位求职信分享
2013/12/31 职场文书
大一新生学期自我评价
2014/04/09 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
优秀党员个人总结
2015/02/14 职场文书
关于运动会的广播稿
2015/08/19 职场文书
工作自我评价范文
2019/03/21 职场文书
导游词之千岛湖
2019/09/23 职场文书
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
在redisCluster中模糊获取key方式
2021/07/09 Redis
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python