echart

格式化 千分位
 window.formatData = function(v)
     {
      v += "";
      if(4 <= v.length)
      {
       var re=/(\d{1,3})(?=(\d{3})+(?:$|\.))/g;  
       v = v.replace(re,"$1,");
      }
      return v;
     };
/**
   * 添加单,小于是红色
    */
window.addUnit = function(v)
       {
      if(!v || "-" == v) return "-";
      if(parseFloat(v) < 0)//大于0
      {
       return "<span style='color:red'>" + v+ "%</span>";
      }
      return v + "%";
     };
tooltip 为 鼠标移上柱图或线图 显示的图例
    tooltip : {
              trigger: 'axis',
          formatter:function(params)
              {
               var title = "";
               for(var i = 0; i < params.length; i++)
               {
                   
                var arrs = params[i];
                var value = arrs[2];
                if("销量" == arrs[0] || $("#target").store().value == 1)
                {
                 if(-1 != (value).indexOf("."))
                 {
                  var s1 = (value).substr(0,(value).indexOf("."));
                  var s2 = (value).substr((value).indexOf("."));
                  value = formatData(s1) + s2 + "万辆";
                 }
                 else value = formatData(value) + "辆";
                }
                else value += "%";
                
                
                
                if(0 == i)
                {
                 title += arrs[1] + "<br>" + arrs[0] + ":" + value + "<br>";
                }
                else title += arrs[0] + ":" + value + "<br>";
               }
               return title;
              }
            }
dataZoom 为图下可以拉伸的进度条
dataZoom : {
                       show : true,
                       realtime : true,
                       start : zoomStart,
                       end : zoomEnd,
                       zoomLock:false,
                       height : 35
                   }
legend  为 图上的图例
legend: {
                       data:json.legend.data
                   }
grid 可以控制 X轴 文字的高度
grid:{
                      y2:75,
                      y:35
                  }
xAxis yAxis X轴 Y轴
轴 的边线
axisLine:{show: true,lineStyle:{color:'#BBBBBB'}}
轴 的 刻度
axisLine:{show: true,lineStyle:{color:'#BBBBBB'}}
轴 的 网格线
splitLine : {show : true,lineStyle:{color:'#F0F0F0'}},
无论多少个都全部显示
axisLabel:{interval:0}
显示数据的格式
axisLabel : {
                   formatter: '{value}',
                   margin:30,
                   formatter:function(v1,v2,v3){ return window.formatData(v1+"%");}
                  }
series对应 legend 图例 一般有几个图例 series里面就有几组数据
name:对应图例
type: 主要是什么 例如 bar 柱子  line 线
itemStyle : 控制显示数据的格式下
"itemStyle": {
                "normal": {
                    "color": "#4f81bd",
                    "label": {
                        "show": true,
                        "position": "insideBottom",
                        "textStyle": {
                            "color": "#000",
                            "fontFamily": "微软雅黑",
                            "fontSize": "12px"
                        }
                    }
                }
            }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值