I am currently utilizing Echarts and have successfully developed a bar chart. My goal is to incorporate two vertical dashed lines to distinguish between Source3 and Source4, as well as another dashed line to indicate the separation of SourceSix and SourceSeven. I have attempted various approaches with the markLine function in conjunction with a bar, but I am encountering issues figuring it out.
The current code snippet is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- including ECharts file -->
<script src="echarts.js"></script>
</head>
<body>
<div id="main" style="width: 1600px;height:800px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'Counts by Intel Source'
},
legend: {
data:['Count']
},
xAxis: {
type: 'category',
data: ['SourceOne','SourceTwo','SourceThree','SourceFour','SourceFive','SourceSix','SourceSeven','SourceEight'],
axisLabel: {
fontWeight: 'bold',
fontSize: 16,
margin: 1
}
},
yAxis: {
type: 'log',
axisLabel: {
fontWeight: 'bold'
}
},
labelLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
},
series: [
{
name: 'SourceOne',
type: 'bar',
stack: 'Chart 1',
color: '#ed2d2e',
data: [1819931,,,,,,,],
},
{
name: 'SourceTwo',
type: 'bar',
stack: 'Chart 1',
color: '#0bb5b5',
data: [,1291396,,,,,,]
},
{
name: 'SourceThree',
type: 'bar',
stack: 'Chart 1',
color: '#662c91',
data: [,,161,,,,,]
},
{
name: 'SourceFour',
type: 'bar',
stack: 'Chart 1',
color: '#0e107b',
data: [,,,133279,,,,]
},
{
name: 'SourceFive',
type: 'bar',
stack: 'Chart 1',
color: '#a11d20',
data: [,,,,1275,,,]
},
{
name: 'SourceSix',
type: 'bar',
stack: 'Chart 1',
color: '#f37d22',
data: [,,,,,119,,]
},
{
name: 'SourceSeven',
type: 'bar',
stack: 'Chart 1',
color: '#008c47',
data: [,,,,,,25224,]
},
{
name: 'SourceEight',
type: 'bar',
stack: 'Chart 1',
color: '#1859a9',
data: [,,,,,,,6798]
},
]
};
myChart.setOption(option);
</script>
The desired output can be viewed here: https://i.sstatic.net/oMJAc.png