Echart 的formatter及重写line chart

1. 默认formatter: "{a} <br/>{b} : {c} ({d}%)"

{a}：series的name属性
{b}：当前数据的name
{c}：当前数据的value
{d}：当前数据的百分比
这是Echarts预定义的，当然可以用formatter自定义 

2. 重写formatter

 formatter: function (params) {
    var res = params.name + ': ' + eio.util.formatCurrency(params.value) + '  (' + params.percent + '%)';
    return res;
} 

3. 

将数字加上$和两位小数点

formatCurrency: function(num) {
  num = num.toString().replace(/$|\,/g,'');
  if(isNaN(num)) {
    num = '0';
  }
  var sign = (num == (num = Math.abs(num)));
  num = Math.floor(num * 100 + 0.50000000000000000000001);
  var cents = num % 100;
  num = Math.floor(num / 100).toString();
  if(cents < 10) {
    cents = '0' + cents;
  }
  for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++) {
    num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3));
  }
  return (((sign)?'':'-') + '$' + num + '.' + cents);
}

横向的linechart

function getDetail() {
  var data = {'num1': 123, 'num2': 1231};
  initChart(data);
}
function initChart(data) {
  var numOne = 0;
  var numTwo = 0;
  var option = {
    color: ["#E7B13B", '#379392'],
    tooltip : {
      trigger: 'axis',
      axisPointer : {
        type : 'shadow'
      },
      formatter: function (params) {
        var totalNum = '';
        var totalNum2 = '';
        for (var i = 0, l = params.length; i < l; i++) {
          if (params[i].seriesName == 'num1') {
            if (numTwo != 0 && numOne !=0 && numTwo > numOne) {
              totalNum = params[i].seriesName + ': ' + formatCurrency(params[i].value) + '  (-' + parseFloat((numTwo - numOne)/ numTwo* 100).toFixed(2) + '% below numTwo)' + '<br/>';
            } else if (numTwo != 0 && numOne !=0 && numTwo < numOne){
              totalNum = params[i].seriesName + ': ' + formatCurrency(params[i].value) + '  (+' + parseFloat((numOne - numTwo)/numOne * 100).toFixed(2) + '% above numTwo)' + '<br/>';
            } else {
              totalNum = params[i].seriesName + ': ' + formatCurrency(params[i].value) + '<br/>';
            }
          }
          if (params[i].seriesName == 'num2') {
            totalNum2 = params[i].seriesName + ': ' + formatCurrency(params[i].value);
          }
        }
        return totalNum + totalNum2;
      }
    },
    legend: {
      data:['num1', 'num2'],
      x: '599',
      y : '60',
      orient: 'vertical',
      textStyle: {align: 'left', color: '#000'}
    },
    calculable : true,
    xAxis : [
      {
        type : 'value',
        boundaryGap : [0, 0.01],
        show: true,
        splitLine: {
          show: true
        },
        axisLine: {
          lineStyle: {
            color: '#ccc',
             1
          }
        }
      }
    ],
    yAxis : [
      {
        type : 'category',
        data : ['spend'],
        show: false
      }
    ],
    grid: {
      // borderWidth: 0,
      x: 30,
      y: 10,
      x2: 200,
      y2: 40
    },
    noDataLoadingOption: {
      effect: 'whirling'
    },
    series : [
      {
        name:'num2',
        type:'bar',
        itemStyle : {
          normal: {
            label : {
              show: true,
              position: 'inside',
              textStyle: {color: '#000'},
              formatter: function(param) {
                if (param.value <= 0) {
                  return '';
                } else {
                  return formatCurrency(param.value);
                }
              }
            }
          },
          emphasis : {
            label : {
              show: true,
              position: 'inside',
              textStyle: {color: '#000'},
              formatter: function(param) {
                if (param.value <= 0) {
                  return '';
                } else {
                  return formatCurrency(param.value);
                }
              }
            }
          }
        },
        data:[]
      },
      {
        name:'num1',
        type:'bar',
        itemStyle : {
          normal: {
            label : {
              show: true,
              position: 'inside',
              textStyle: {color: '#000'},
              formatter: function(param) {
                if (param.value <= 0) {
                  return '';
                } else {
                  return formatCurrency(param.value);
                }
              }
            }
          },
          emphasis : {
            label : {
              show: true,
              position: 'inside',
              textStyle: {color: '#000'},
              formatter: function(param) {
                if (param.value <= 0) {
                  return '';
                } else {
                  return formatCurrency(param.value);
                }
              }
            }
          }
        },
        data:[]
      }
    ]
  };
  var chart = echarts.init(页面的div);
  for (var key in data) {
    if (option.series[0].name == key) {
      numTwo = data[key];
      option.series[0].data.push(data[key]);
    }
    if (option.series[1].name == key) {
      numOne = data[key];
      option.series[1].data.push(data[key]);
    }
  }
  chart.setOption(option);
}

getDetail();

纵向的linechart, 重写format

///js/lib/echarts.js
function getDetail() {
  var data = {
    'hours': {'01/22': "1.00", '02/21': "0.00"},
    'data1': [0, 0],
    'date': ["01/22", "02/21"],
    'data2': [0, 0],
    'num': {'01/22': "123", '02/21': ""}
  };
  initChart(data, data.hours, data.num);
}

function initChart(data, hours, num) {
  var option = {
    color: ['#3E83DE', '#6FB440'],
    tooltip : {
      trigger: 'axis',
      axisPointer : {
        type : 'shadow'
      },
      formatter: function (params) {
        var res = params[0].name;
        if (num[params[0].name] != 0) {
          res += '<br>No.: ' + num[params[0].name];
        }
        var totalNum = 0;
        var totalNum2 = 0;
        for (var i = 0, l = params.length; i < l; i++) {
          if (params[i].seriesName == 'Data1' && res.indexOf('<br/>') > -1 ) {
            var res1 = res.slice(0, res.indexOf('<br/>'));
            var res2 = res.slice(res.indexOf('<br/>'));
            res = res1;
            res += '<br/>Hours: ' + hours[params[0].name];
            res += '<br/>' + params[i].seriesName + ': ' + formatCurrency(params[i].value);
            res += res2;
            totalNum = params[i].value;
          } else if (params[i].seriesName == 'Data1' && res.indexOf('<br/>') <= -1 ) {
            res += '<br/>Hours: ' + hours[params[0].name];
            res += '<br/>' + params[i].seriesName + ': ' + formatCurrency(params[i].value);
            totalNum = params[i].value;
          } else {
            res += '<br/>' + params[i].seriesName + ': ' + formatCurrency(params[i].value);
            totalNum2 = params[i].value;
          }
        }
        res += '<br/>Total: ' + formatCurrency(parseFloat(totalNum2) + parseFloat(totalNum));
        return res;
      }
    },
    legend: {
      data:['Data1','Data2'],
      x: '599',
      y : '127',
      orient: 'vertical',
      padding: [0, 40, 0, -40],
      textStyle: {align: 'left', color: '#000'}
    },
    grid: {
      x: 70,
      y: 10,
      x2: 150,
      y2: 40
    },
    calculable : true,
    xAxis : [
      {
        type : 'category',
        splitLine: {show:false},
        data : [],
        axisLine: {
          lineStyle: {
            color: '#ccc',
             1
          }
        }
      }
    ],
    yAxis : [
      {
        type : 'value',
        splitLine: {
          show: true
        },
        axisLine: {
          lineStyle: {
            color: '#ccc',
             1
          }
        }
      }
    ],
    noDataLoadingOption: {
      effect: 'whirling'
    },
    series : [
    {
      name:'Data1',
      type:'bar',
      barWidth : 30,
      stack: 'stack',
      itemStyle : {
        normal: {
          label : {
            show: true,
            position: 'inside',
            textStyle: {color: '#000'},
            formatter: function(param) {
              if (param.value <= 0) {
                return '';
              } else {
                return formatCurrency(param.value);
              }
            }
          }
        },
        emphasis : {
          label : {
            show: true,
            position: 'inside',
            textStyle: {color: '#000'},
            formatter: function(param) {
              if (param.value <= 0) {
                return '';
              } else {
                return formatCurrency(param.value);
              }
            }
          }
        }
      },
      data:[]
      },
      {
        name:'Data2',
        type:'bar',
        barWidth : 30,
        stack: 'stack',
        itemStyle : {
          normal: {
            label : {
              show: true,
              position: 'inside',
              textStyle: {color: '#000'},
              formatter: function(param) {
                if (param.value <= 0) {
                  return '';
                } else {
                  return formatCurrency(param.value);
                }
              }
            }
          },
          emphasis : {
            label : {
              show: true,
              position: 'inside',
              textStyle: {color: '#000'},
              formatter: function(param) {
                if (param.value <= 0) {
                  return '';
                } else {
                  return formatCurrency(param.value);
                }
              }
            }
          }
        },
        data:[]
      }
    ]
  };
  var chart = echarts.init($('#id').find('.chart')[0]);
  option.xAxis[0].data = data.date;
  option.series[0].data = data.data1;
  option.series[1].data = data.data2;
  chart.setOption(option);
}

getDetail();