使用echarts和layer.js直接去官方文档,能解决大部分问题。
但是有些问题,解释不够清楚,在这里记录一下。
1、echarts的使用
第一点:关于echarts的labelline在数据为零的时候,不显示的问题。
调整option里面的data的内容为:
1 { ?2 ????name : ‘xxx‘, 3 ????value:" + xxx + ", 4 ????itemStyle:{ 5 ?????????normal:{ 6 ????????????label:{ 7 ?????????????????show: true 8 ??????????????}, 9 ????????????labelLine: {10 ?????????????????show: true11 ??????????????}12 ????????}13 ????}14 }此处为C#代码,可用循环来生成echarts需要的json,在原来的json类型中,加入itemStyle项,这样就能够调整label和labelLine,写在其它地方不可以。 ???
在取得echarts的option以后,用js,进行判断是否显示
1 var opt = option.series[0];//有可能有多个series,根据需要选择调整哪个series2 function hidePieline(opt) {3 ???? jQuery.each(opt.data, function (i, item) {4 ??????? if (item.value == 0) {5 ?????????? item.itemStyle.normal.labelLine.show = false;6 ?????????? item.itemStyle.normal.label.show = false;7 ???????? }8 ??? });9 } ?
第二点:关于echarts的柱图,点击X轴label的问题
1 ?? xAxis: [{2 ????? type: ‘category‘,3 ????? data: arg.data.categories,4 ????? triggerEvent: true ?//在echart3中,设置triggerEvent为true即可。这样柱子跟x轴label都可以点5 ?? }],
1 ????????????????在echarts2中把clickable设为true的属性2 ????????????????????xAxis: [{3 ????????????????????????type: ‘category‘,4 ????????????????????????data: datas[0].categories,5 ????????????????????????axisLabel:{6 ????????????????????????????clickable : true7 ????????????????????????}8 ????????????????????}], ??????
1 ????????????var xxx = echarts.init(document.getElementById(‘xxx‘));2 ????????????xxx.on(‘click‘, function (params) {3 ????????????????if (params.name == undefined) {4 ???????? 在这里根据params来判断是点击的柱子还是x轴label,可以用params里面的其他参数判断,不一定用name5 ????????????????} else {6 ????????????????}7 ????????????}); ???????????
2、layer.js的使用。参看官方文档即可。
3、jqGrid的使用
在使用jqGrid的时候,为colModel直接传递DateTime类型时,会直接识别为/Date(1446704778000)/,可以通过正则表达式来转换
1 eval(rowObject.PlanFinishDate.replace(/\/Date\((\d+)\)\//gi, "new Date($1)")).format(‘yyyy-M-d‘);
format方式是用JS自定义的方法
1 ????????????Date.prototype.format = function (fmt) { 2 ????????????????var o = { 3 ????????????????????"M+": this.getMonth() + 1, //月份 ?4 ????????????????????"d+": this.getDate(), //日 ?5 ????????????????????"h+": this.getHours(), //小时 ?6 ????????????????????"m+": this.getMinutes(), //分 ?7 ????????????????????"s+": this.getSeconds(), //秒 ?8 ????????????????????"q+": Math.floor((this.getMonth() + 3) / 3), //季度 ?9 ????????????????????"S": this.getMilliseconds() //毫秒 10 ????????????????};11 ????????????????fmt = fmt || "yyyy-MM-dd";12 ????????????????if (/(y+)/.test(fmt))13 ????????????????????fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));14 ????????????????for (var k in o)15 ????????????????????if (new RegExp("(" + k + ")").test(fmt))16 ????????????????????????fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));17 ????????????????return fmt;18 ????????????}
关于echarts、layer.js和jqGrid的知识点
原文地址:http://www.cnblogs.com/pocn/p/7737859.html