分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

关于echarts、layer.js和jqGrid的知识点

发布时间:2023-09-06 01:20责任编辑:傅花花关键词:js

使用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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved