echarts柱状图、折线图求合，通过formatter回调函数⾃定义tooltip展⽰格式
前⼀篇⽂章写了思路⼀：给series集合末尾多加⼀栏⽤于展⽰合计，但缺点较多，所以⼜想了另⼀个⽅法。
思路⼆：通过tooltip中的函数formatter⾃定义⿏标触发时的展⽰格式，先看展⽰效果
最底下加了合计⼀栏
当我们去掉“安卓”选项时：合计的值也动态的改变了
好了，接下来就看实际的代码吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts2</title>
<!-- 引⼊ echarts.js -->
<script src="cdn.bootcss/echarts/3.5.4/echarts.min.js"></script>
</head>
</head>
<body>
<!-- 为ECharts准备⼀个具备⼤⼩（宽⾼）的Dom -->
<div id="main"></div>
<script type="text/javascript">
/
/ 基于准备好的dom，初始化echarts实例
var myChart = echarts.ElementById('main'));
// 指定图表的配置项和数据
var option = {
tooltip : {
trigger :'axis',
axisPointer : {
type : 'line'
},
formatter:''//思路⼆：给tooltip⼀个函数，点击的时候展⽰数据
},
title: {
text:'xxx激活设备数',
left:'left' ,
top:'10px',
textStyle: {
color: '#666',
fontWeight: 'normal'
}
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
grid: {
y: '10%',
y2: '10%'
},
legend: {
data:['安卓','诺基亚','苹果']
},
xAxis:{
type: 'category',
axisLabel:{
interval: 0,    // {number}
rotate: 40
},
data: ['星期三','星期四','星期五']
},
yAxis:{
type: 'value',
min: 0,
textstyleinterval: 10000
},
series: [
{
name:'安卓',
type:'line',
stack:'xxx',
itemStyle: {
normal: {
color: '#548dd5'
}
},
data:  [["星期三",10000],["星期四",15000],["星期五",20000]]
data:  [["星期三",10000],["星期四",15000],["星期五",20000]]
},
{
name:'诺基亚',
type:'line',
stack:'xxx',
itemStyle: {
normal: {
color: '#000'
}
},
data:  [["星期三",11000],["星期四",16000],["星期五",25000]]
},
{
name:'苹果',
type:'line',
stack:'xxx',
itemStyle: {
normal: {
color: '#e56c0a'
}
},
data:  [["星期三",12000],["星期四",18000],["星期五",28000]]
}
]
};
//替换formatter
var fun = function(params) {
var myseries = option.series;
var chartType = option.odao_admin.chart_type;
var data3 =0;
var axis =[];
for(var i=0,l=params.length;i<l;i++){
for (var j = 0; j < myseries.length; j++) {
if(myseries[j].name == params[i].seriesName){
axis.push(params[i].axisValue)
var res = axis[0] +'</br>'; //取对应x轴的值
}
}
}
for(var i=0,l=params.length;i<l;i++){
for (var j = 0; j < myseries.length; j++) {
if(myseries[j].name == params[i].seriesName){
var color = params[i].color;
if(chartType == 'bar_back'){
res += '<span >'+' ● '+'</span>' +  params[i].seriesName +' : '+params[i].data[                                                }else{
res += '<span >'+' ● '+'</span>' +  params[i].seriesName +' : '+params[i].data[                                                }
}
}
}
for(var i=0,l=params.length;i<l;i++){
if(chartType == 'bar_back'){
data3 += params[i].data[0]  //反转图重新计算总和
}else{
data3 += params[i].data[1]
}
}
var res =res + '<span >'+' ● '+'</span>' + ' 合计：' +data3;
return res;
}
//加载页⾯时候替换tooltip的formatter
/
/加载页⾯时候替换tooltip的formatter
option["tooltip"]["formatter"] = fun
// 使⽤刚指定的配置项和数据显⽰图表。
myChart.setOption(option);
//legend点击事件，根据传过来的obj.selected得到状态是true的params对应的series的下标，再去计算总和
<("legendselectchanged", function(obj) {
var changefun = function(params) {
var b = obj.selected
, d = [];
var data3 =0;
var myseries = option.series;
var chartType = option.odao_admin.chart_type;
var axis =[];
for(var i=0,l=params.length;i<l;i++){
for (var j = 0; j < myseries.length; j++) {
if(myseries[j].name == params[i].seriesName){
axis.push(params[i].axisValue)
var res = axis[0] +'</br>'; //取x轴的值
}
}
}
for(var i=0,l=params.length;i<l;i++){
for (var j = 0; j < myseries.length; j++) {
if(myseries[j].name == params[i].seriesName){
var color = params[i].color;
if(chartType == 'bar_back'){
res += '<span >'+' ● '+'</span>' +  params[i].seriesName +' : '+params[i].data[0]+'</br>';                                }else{
res += '<span >'+' ● '+'</span>' +  params[i].seriesName +' : '+params[i].data[1]+'</br>';                                }
}
}
}
for(var key in b){
if(b[key]){
for(var i=0,l=params.length;i<l;i++){
var changename = params[i].seriesName;
if(changename == key){
d.push(i);      //得到状态是true的legend对应的params的下标
}
}
}
}
for(var i=0,l=d.length;i<l;i++){
for(var j=0,h=params.length;j<h;j++){
if(d[i] == j){
if(chartType == 'bar_back'){
data3 += params[i].data[0]  //反转图重新计算总和
}else{
data3 += params[i].data[1]
}
}
}
}
var res =res + '<span >'+' ● '+'</span>' + ' 合计：' +data3;
return res;
}
option["tooltip"]["formatter"] = fun1
myChart.setOption(option);
})
</script>
</body>
</body>
</html>
代码有点长，有看不懂的地⽅，欢迎各位留⾔，我会尽量解答。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。