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

前言

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

说明

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

控件演示

控件使用

概要

基于echarts的二次封装由数据驱动控件源码见src/组件/图表文档

小道具

属性说明类型_id图表唯一标识，当编号重复将会报错字符串_标题文本图表标题String _xText x轴描述String _yText y轴描述字符串_图表数据图表数据数组类型图表类型，提供三种（线条和条形图/线条或条形图/饼图)调用示例

图表： _ id=' TestCharts ' ' : _ title TExT=' '访问量统计' ' :_xText=' '类别：_yText=' '总访问量： _图表数据='图表数据' : _ type=' Pie '/chart//测试数据样例[['类别1',10],['类别2',20]]实现方式

创建一个待渲染的数字正射影像图

模板div : id=' _ id ' class=' chart '/div/template绘制函数

函数drawPie(chartData，id，titleText，xText，yText){ var chart=echart。init(文档。getelementbyid(id))var xAxisData=图表数据。map(function(item){ return item[0]})var Piedata=[]chart data。foreach((v，I)={ pieData。推送({ name :v[0]，value :v[1])}图表。设置选项({ title : { text : title text，挂载结束、数据源改变时重绘

观看： { _ chart data(val){ switch(这._ type){ case ' LineAndBar ' : draw LineAndBar(val，这个._id，这个_titleText，这个_xText，这个_ yText)；断句' line orbar ' : drawline orbar(val，this ._id，这个_titleText，这个_xText，这个_ yText)；破格'派：绘制饼图(val，这个_id，这个_titleText，这个_xText，这个_ yText)；打破默认的： DrawLineAndBar(val，这个._id，这个_titleText，这个_xText，这个_ yText)；break } } }，mounted() { switch(这个._ type){ case ' LineAndBar ' : draw LineAndBar(这_图表数据，这个_id，这个_titleText，这个_xText，这个_ yText)；断开大小写“line orbar”: draw line orbar(这_图表数据，这个_id，这个_titleText，这个_xText，这个_ yText)；破格'派：绘制饼图(这个_图表数据，这个_id，这个_titleText，这个_xText，这个_ yText)；断开默认的：画线和线条(这_图表数据，这个_id，这个_titleText，这个_xText，这个_ yText)；break } }总结

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