Echart에 series total 기능이 기본으로 제공되지 않아서 구현해주어야 한다.
legend에서 시리즈를 숨길때 total value가 반영
<!DOCTYPE html>
<html lang ="en" >
<head >
<script src ="./index.js" > </script >
<meta charset ="UTF-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1.0" >
<title > Document</title >
<script src ="https://code.jquery.com/jquery-1.9.1.min.js" > </script >
<script src ="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js" > </script >
</head >
<style >
.flex-container {
display :flex;
width : 100% ;
height : 200px ;
}
.flex-container-item1 {
width : 100% ;
flex : 1 ;
border : 1px solid red;
}
.flex-container-item2 {
width : 100% ;
flex : 2 ;
border : 1px solid red;
}
</style >
<body >
<div >
<h1 > hellow world</h1 >
</div >
<div class ="flex-container" >
<div class ="flex-container-item1" id ="main1" > 1</div >
<div class ="flex-container-item1" id ="main2" > 2</div >
<div class ="flex-container-item1" id ="main3" > 3</div >
</div >
<div class ="flex-container" >
<div class ="flex-container-item1" id ="main4" > 1</div >
<div class ="flex-container-item1" id ="main5" > 2</div >
<div class ="flex-container-item1" id ="main6" > 3</div >
</div >
<script >
function creatChart (target )let result = 0 ;
let array = [];
let chartDom = document .getElementById(target);
let myChart = echarts.init(chartDom);
let series = [
{name : 'Email' ,type : 'bar' ,stack : 'AD' ,emphasis : {focus : 'series' },data : [120 , 132 , 101 , 134 , 90 , 230 , 210 ]},
{name : 'Union Ads' ,type : 'bar' ,stack : 'AD' ,emphasis : {focus : 'series' },data : [220 , 182 , 191 , 234 , 290 , 330 , 310 ]},
{name : 'Video Ads' ,type : 'bar' ,stack : 'AD' ,emphasis : {focus : 'series' },data : [150 , 232 , 201 , 154 , 190 , 330 , 410 ]},
{name : 'Baidu' ,type : 'bar' ,stack : 'AD' ,emphasis : {focus : 'series' },data : [620 , 732 , 701 , 734 , 1090 , 1130 , 1120 ]},
{name : 'Google' ,type : 'bar' ,stack : 'AD' ,emphasis : {focus : 'series' },data : [120 , 132 , 101 , 134 , 290 , 230 , 220 ]},
{name : 'Bing' ,type : 'bar' ,stack : 'AD' ,emphasis : {focus : 'series' },data : [60 , 72 , 71 , 74 , 190 , 130 , 110 ]},
{name : 'Others' ,type : 'bar' ,stack : 'AD' ,emphasis : {focus : 'series' },data : [62 , 82 , 91 , 84 , 109 , 110 , 120 ]}
];
sum();
let option;
option = {
tooltip : {
trigger : 'axis' ,
axisPointer : {
type: 'shadow' ,
label:{
formatter: function (params )for ( let i = 0 ; i < params.seriesData.length; i++){
result += params.seriesData[i].value
}
let resultFinal = "total: " + result
result = 0 ;
return resultFinal;
}
}
}
},
legend : {
data: series.map(item =>grid : {
left : '3%' ,
right : '4%' ,
bottom : '3%' ,
containLabel : true
},
xAxis : [
{
type : 'category' ,
data : ['Mon' , 'Tue' , 'Wed' , 'Thu' , 'Fri' , 'Sat' , 'Sun' ]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
...series,
{
name : ' A total of ' ,
type : 'bar' ,
stack : 'AD' ,
tooltip : {
show : false
},
stack : '' ,
color : '#FFFFFF' ,
label : {
normal : {
show : true ,
position : 'top'
},
},
data : array,
z : -1 ,
barGap : '-100%' ,
}
]
};
function sum (for ( let z = 0 ; z < series[0 ].data.length; z++){
for ( let i = 0 ; i < series.length; i++){
result += series[i].data[z];
}
array.push(result)
result = 0 ;
}
}
myChart.on('legendselectchanged' , function (params ) 0
for ( let z = 0 ; z < series[0 ].data.length; z++){
for ( let i = 0 ; i < series.length; i++){
if (params.selected[series[i].name])
result += series[i].data[z];
}
array.push(result)
result = 0 ;
}
myChart.setOption(option);
});
myChart.setOption(option);
window .addEventListener('resize' , function ("main1" );
</script >
</body >
</html > 