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;
/* background-color: cadetblue; */
width: 100%;
height: 200px;
}
.flex-container-item1 {
width: 100%;
/* background-color: teal; */
flex: 1;
border: 1px solid red;
}
.flex-container-item2 {
width: 100%;
/* background-color: teal; */
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>
//for total value
function creatChart(target){
let result = 0;
let array = [];
// Create the echarts instance
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: {
// Use axis to trigger tooltip
type: 'shadow', // 'shtotalow' as default; can also be 'line' or 'shtotalow'
label:{
//for total value
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: {
//for total value
data: series.map(item => item.name),
},
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%',
}
]
};
//for total value
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) {
array.length = 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);
});
//chart Resize code
myChart.setOption(option);
window.addEventListener('resize', function(){
myChart.resize();
});
}
creatChart("main1");
// creatChart("main2");
// creatChart("main3");
// creatChart("main4");
// creatChart("main5");
// creatChart("main6");
</script>
</body>
</html>
