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 相关文章推荐
js动态删除div元素基本思路及实现代码
May 08 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
实例解析js中try、catch、finally的执行规则
Feb 24 Javascript
js仿淘宝商品放大预览功能
Mar 15 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
微信小程序动态显示项目倒计时
Jun 20 Javascript
p5.js实现动态图形临摹
Oct 23 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 Javascript
html实现随机点名器的示例代码
Apr 02 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防注入代码
2010/04/07 PHP
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
Yii2中datetime类的使用
2016/12/17 PHP
PHP的介绍以及优势详细分析
2019/09/05 PHP
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
如何利用nodejs实现命令行游戏
2020/11/24 NodeJs
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
python查看zip包中文件及大小的方法
2015/07/09 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
酒店前台接待岗位职责
2013/12/03 职场文书
特色蛋糕店创业计划书
2014/01/28 职场文书
租房协议书怎么写
2014/04/10 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
Python音乐爬虫完美绕过反爬
2021/08/30 Python