echarts实现一个页面多个饼状图共用方法的封装
2018-01-17 11:34
585 查看
封装想法来源:当初在进行数据的处理时,想着如果能够用一种可视化的效果来呈现那用户体验绝非一般了,于是借用了功能强大的百度Echarts,由于Echarts本身渲染图表的时候,除了需要给出需要展示的数据值(data)之外,Echarts自带的一些配置参数重复写多次也是一件开发效率极低的事,因此,就想着把Echarts的配置参数封装到一个方法中,集体调用,需要做某些小改动时再传递相应的参数即可。
<!--效果-->
Echarts类库下载网址: http://echarts.baidu.com/download.html
<!--具体参数的处理-->
<!--调用公共方法并传递参数-->
<!-- 初始化 echarts -->
//注:当页面要渲染多个饼状图的时候,有多少个图就分别初始化多少次,传递对应的ID即可
<!--公共 echarts 配置参数 封装--> (重点,fn为需要呈现的数据值)
<!-- 初始化变量渲染公共参数-->
<!--HTML 代码-->
//注:需要渲染Echarts所在的div必须设置宽高,因为echarts中Canvas绘制图表时需要根据外层盒子的宽高来渲染
<!--效果-->
Echarts类库下载网址: http://echarts.baidu.com/download.html
<script src="../echarts.js"></script> //echarts类库的引入
<!--具体参数的处理-->
var warnNum = '40%'; //参数举例 var joinAllMan= '60%'; //参数举例
var warnStates = (function(){ var warnNumCount = warnNum; var joinAllManCount = joinAllMan; return { warnStatesData : function(){ var res = []; if(parseInt(warnNumCount)<parseInt(joinAllManCount)){ if(parseInt(warnNumCount)==0){ res.push( { name: '正常', value:parseInt(joinAllManCount) } ); }else{ res.push( { name: '预警', value: parseInt(warnNumCount) }, { name: '正常', value:parseInt(joinAllManCount)-parseInt(warnNumCount) } ); } }else{ res.push( { name: '预警', value: parseInt(warnNumCount) } ); } return res; } }; })();
<!--调用公共方法并传递参数-->
var answerWarnOption = LookData(warnStates.warnStatesData(warnNum,joinAllMan));
<!-- 初始化 echarts -->
//注:当页面要渲染多个饼状图的时候,有多少个图就分别初始化多少次,传递对应的ID即可
var answerWarnChart = echarts.init(document.getElementById('answerWarn'));
<!--公共 echarts 配置参数 封装--> (重点,fn为需要呈现的数据值)
function LookData(fn){ return{ title : { text: '', subtext: '', x:'center' }, tooltip : { trigger: 'item', formatter: "{b}: {d}%" }, series : [ { name:'', type:'pie', selectedMode: 'single', radius : '80%', center: ['50%', '50%'], label: { normal: { position: 'inner' } }, labelLine: { normal: { show: false } }, data: fn, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] } }
<!-- 初始化变量渲染公共参数-->
answerWarnChart.setOption(answerWarnOption);
<!--HTML 代码-->
//注:需要渲染Echarts所在的div必须设置宽高,因为echarts中Canvas绘制图表时需要根据外层盒子的宽高来渲染
<div id="answerState" style="width: 500px;height: 300px;"></div> <div id="answerWarn" style="width: 500px;height: 300px;"></div>
相关文章推荐
- asp.net 参数不同共用一个页面的实现方法
- asp.net 参数不同共用一个页面的实现方法
- jQuery封装一个方法实现监控页面所有ajax请求
- asp.net 参数不同共用一个页面的实现方法
- thinkphp 一个页面使用2次分页的实现方法
- 多种方法实现当jsp页面完全加载完成后执行一个js函数
- Oracle ADF 一个页面实现 维护区域Form和查看区域Table 方法
- 对Guava Cache的封装和使用(包括一个管理页面实现了查看统计信息、情况、查看记录等)
- 对Guava Cache的封装和使用(包括一个管理页面实现了查看统计信息、情况、查看记录等)
- asp.net在事件中启动线程来打开一个页面的实现方法
- 使用echarts类库,在后台封装option,提供两种使用struts2传递参数到页面的方法
- c:if+EL表达式实现新增/编辑共用一个页面
- 同一个表单 根据要求递交到不同页面的实现方法小结
- IOS广告移动的类(封装好了,所有页面共用一个广告)
- 用js实现在加载完成一个页面后自动执行一个方法
- 用js实现在加载完成一个页面后自动执行一个方法
- 两个域名共用一个空间的实现方法
- thinkphp 一个页面使用2次分页的实现方法
- Oracle ADF 一个页面实现 维护区域Form和查看区域Table 方法 另一种方法(推荐)
- js实现同一个页面多个渐变效果的方法