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 相关文章推荐
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 Javascript
原生js 秒表实现代码
Jul 24 Javascript
Android中资源文件(非代码部分)的使用概览
Dec 18 Javascript
javascript打开word文档的方法
Apr 16 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 23 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
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
杏林同学录(八)
2006/10/09 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
python将文本转换成图片输出的方法
2015/04/28 Python
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
Python数据类型详解(一)字符串
2016/05/08 Python
Python多进程与服务器并发原理及用法实例分析
2018/08/21 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
全球工业:Global Industrial
2020/02/01 全球购物
求职信范文英文版
2014/01/05 职场文书
毕业生自荐书
2014/02/02 职场文书
大学毕业寄语大全
2014/04/10 职场文书
感恩教育活动总结
2014/05/05 职场文书
市场督导岗位职责
2015/04/10 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书