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

2019-11-19 15:12:31

字体：大中小

来源：转载

供稿：网友

前言

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

说明

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

总结

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

上一篇：SeaJS中use函数用法实例分析

下一篇：seajs模块压缩问题与解决方法实例分析