看了echarts的官网介绍:http://echarts.baidu.com/doc/example.html
看了网上人使用js对echarts的封装:http://blog.csdn.net/xuemoyao/article/details/22602837
这篇文章虽然很好,但是感觉不是我的菜,过于复杂了。
所以献丑也写一下,哈
先来做一下分析,echarts提供了很多种类型的图表,被分为几个大类,每个大类中有若干种,可以通过对series做一些简单的调整来互相转化。注意,由于时间关系我并没有分析全部的echarts图表数据结构,而且echarts也在一直更新,所以观点可能比较片面。
如标准折线图添加这句话就变成面积图
itemStyle: {normal: {areaStyle: {type: ‘default‘}}}
好吧,都是对图表数据显示样式的修改。
然后来分析一下图表需要的数据格式
1、折线图,柱状图格式
data:[220, 182, 191, 234, 290, 330, 310]
2、饼图、漏斗图、仪表格式
data:[ {value:335, name:‘直接访问‘}, {value:310, name:‘邮件营销‘}, {value:234, name:‘联盟广告‘}, {value:135, name:‘视频广告‘}, {value:1548, name:‘搜索引擎‘} ]
上面是我需要用到的一些图的数据格式,根据我的理解,可以统一使用{key:value}这种形式保存数据,在数据传入时判断图表类型在格式化成需要的样子。另外,考虑到在一个表中显示多个数据序列(如折线图),所以需要给数据加一个名称作为图例,最终数据格式为:
{ name:‘淘宝周销售数据‘, data:{‘周一’:1,‘周二’:5,‘周三’:4,‘周四’:3,‘周五’:9,‘周六’:6,‘周日’:2,} }
最后经过一天的思考和设计,结果如下:
ECHelper.prototype.Line = function(data){ //分析数据获取x轴,暂时以第一个数据的所有key做x轴 var xAxis = (function(dd){ var array; for(var kk in dd){//取对象第一个属性 array = dd[kk].data; break; } var xaxis = []; for(var k in array){ xaxis.push(k); } return xaxis; })(data); //获取图例和数据 var legend = []; var dds = []; for(var k in data){ legend.push(data[k].name); dds.push({name:data[k].name,type:‘line‘,data:this.formatData(data[k].data,‘array‘)}) } //模板对象 var opt = { legend: { data:legend }, tooltip : { trigger: ‘axis‘ }, xAxis : [ { type : ‘category‘, data : xAxis } ], yAxis : [ { type : ‘value‘ } ], series : dds }; return opt; };
该函数的输入对象格式为:
{ ‘[email protected]@end‘:{name,data} }
基本上已经足够满足要求了。上面的方法结构已经很清晰,但是博客园不提供代码收起功能,所以看起来模块直接很混乱,没办法。封装效果如下:
时间: 2024-10-07 22:21:17