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

2021-05-18 10:27

阅读:330

标签:second   判断   设置   dep   正则表达   style   正则   gets   item   

使用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: true
11               }
12         }
13     }
14 }此处为C#代码,可用循环来生成echarts需要的json,在原来的json类型中,加入itemStyle项,这样就能够调整label和labelLine,写在其它地方不可以。    

 在取得echarts的option以后,用js,进行判断是否显示

1        var opt = option.series[0];//有可能有多个series,根据需要选择调整哪个series
2        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 : true
7                         }
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里面的其他参数判断,不一定用name
5                 } 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的知识点

标签:second   判断   设置   dep   正则表达   style   正则   gets   item   

原文地址:http://www.cnblogs.com/pocn/p/7737859.html


评论


亲,登录后才可以留言!