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',
width: 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',
width: 1
}
}
}
],
yAxis : [
{
type : 'value',
splitLine: {
show: true
},
axisLine: {
lineStyle: {
color: '#ccc',
width: 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();