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 相关文章推荐
详解JavaScript函数绑定
Aug 18 Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 Javascript
前端性能优化及技巧
May 06 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
教你快速搭建Node.Js服务器的方法教程
Mar 30 Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
Sep 12 Javascript
jquery使用FormData实现异步上传文件
Oct 25 jQuery
详解Angular Karma测试的持续集成实践
Nov 15 Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 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
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
用session做客户验证时的注意事项
2006/10/09 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
PHP 无限级分类
2017/05/04 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
vue使用自定义指令实现拖拽
2021/01/29 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
Python中文编码那些事
2014/06/25 Python
Python的装饰器用法学习笔记
2016/06/24 Python
使用python实现生成用户信息
2017/03/20 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
.NET remoting的两种通道是什么
2016/05/31 面试题
迟到检讨书500字
2014/02/05 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
户外活动总结
2015/02/04 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
使用nginx配置访问wgcloud的方法
2021/06/26 Servers
JavaScript实现简单的音乐播放器
2022/08/14 Javascript