zoukankan      html  css  js  c++  java
  • 关于echarts、layer.js和jqGrid的知识点

    使用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 }],       
    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  }
  • 相关阅读:
    优化TableView性能
    iOS应用性能调优的25个建议和技巧
    iOS-常见问题
    iOS开发——高级技术&地图功能的实现
    iOS开发——高级技术&调用地图功能的实现
    iOS开发——高级技术&通讯录功能的实现
    iOS开发——高级技术&系统应用于系统服务
    iOS开发——高级技术&蓝牙服务
    iOS开发——高级技术&社交服务
    ANDROID_MARS学习笔记_S01原始版_005_RadioGroupCheckBoxToast
  • 原文地址:https://www.cnblogs.com/pocn/p/7737859.html
Copyright © 2011-2022 走看看