[echart.js] line-sample_클릭시막대그래프라인표시

WEB/기타
[echart.js] line-sample_클릭시막대그래프라인표시

silverline79 2024. 12. 17. 20:22
<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/en/editor.html?c=line-simple
-->
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div style="width:700px; height:300px;">
	<div id="container" style="width:100%; height: 100%" class="chart"></div>
	<div id="areaName" style="font-size:16px"></div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.1/dist/echarts.min.js"></script> 
<!-- Uncomment this line if you want to dataTool extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.1/dist/extension/dataTool.min.js"></script>
        --> 
<!-- Uncomment this line if you want to use gl extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
        --> 
<!-- Uncomment this line if you want to echarts-stat extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
        --> 
<!-- Uncomment this line if you want to use map
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.1/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.1/map/js/world.js"></script>
        --> 
<!-- Uncomment these two lines if you want to use bmap extension
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@{{version}}/dist/extension/bmap.min.js"></script>
        --> 

<script type="text/javascript">
var areaName = document.getElementById("areaName");
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};

var option;



option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [
         {
          value: 50,
          itemStyle: {
            color: '#9ebfff',
			borderWidth:'3',
          }
        },
        {
          value: 200,
          itemStyle: {
            color: '#69b9c7',
			borderWidth:'3',
          }
        },
        {
          value: 150,
          itemStyle: {
            color: '#d763d6',
			borderWidth:'3',
          }
        },
        {
          value: 100,
          itemStyle: {
            color: '#c9a454',
			borderWidth:'3',
          }
        },
         {
          value: 60,
          itemStyle: {
            color: '#e3d63f',
			borderWidth:'3',
          }
        },
         {
          value: 150,
          itemStyle: {
            color: '#6590f1',
			borderWidth:'3',
          }
        },
         {
          value: 150,
          itemStyle: {
            color: '#e33fd6',
			borderWidth:'3',
          }
        },
      ],
      type: 'bar',
	  barWidth: '50%', //bar width조정
    }
  ]
};

if (option && typeof option === 'object') {
    myChart.setOption(option);
}
 window.onresize = myChart.resize;


myChart.on('click', function(params){
	option.series[0].data.forEach((data, index) => {
		console.log(data)
    	if (index === params.dataIndex) {
           if (!data.isChecked) {
           		data.itemStyle.borderColor = '#205eea';
          		data.isChecked = true;	
				console.log(data)			
           }
        } else {
        	if (data.isChecked) {
          	 data.itemStyle.borderColor = 'none';
              data.isChecked = false;
          }
        
        }  		
    })
  
    myChart.setOption(option)	 	  
	areaName.innerHTML = params.name + '타이틀'

});


 </script>
</body>
</html>