Javascript Echarts如何在条形图的特定条形之间添加垂直虚线？
我正在与Echarts合作，并创建了一个条形图。我试图添加两条垂直虚线来分隔Source3和Source4，并添加另一条垂直虚线来显示Source6和Source7的分隔。我曾经尝试过在一个条上乱画标记线，然后在一个条后添加一条线作为数据的一部分，但我似乎能解决这个问题 守则：Javascript Echarts如何在条形图的特定条形之间添加垂直虚线？,javascript,echarts,Javascript,Echarts,我正在与Echarts合作，并创建了一个条形图。我试图添加两条垂直虚线来分隔Source3和Source4，并添加另一条垂直虚线来显示Source6和Source7的分隔。我曾经尝试过在一个条上乱画标记线，然后在一个条后添加一条线作为数据的一部分，但我似乎能解决这个问题 守则： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- including ECharts file -->
<script src="echarts.js"></script>
</head>
<body>
<!-- prepare a DOM container with width and height -->
<div id="main" style="width: 1600px;height:800px;"></div>
<script type="text/javascript">
// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById('main'));
// specify chart configuration item and data
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]
},
]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
</script>
我使用以下选项成功实现了与您所期望的效果类似的效果：我已将您的x轴转换为“值”x轴，以便我们可以在系列之间的特定位置放置标记线。在执行此操作时，您需要为每个数据点指定一个x轴索引，但它还允许您向sourceThree和sourceSix添加一个额外的点，这将允许您在两者之间绘制一条线作为类型：'average'标记线：
option = {
title : {
text: 'Chart Title',
subtext: 'subtitle'
},
tooltip : {
trigger: 'axis',
axisPointer:{
show: true,
type : 'cross',
lineStyle: {
type : 'dashed',
width : 1
}
},
formatter : function (params) {
return params.seriesName + ' : [ '
+ params.value[0] + ', '
+ params.value[1] + ' ]';
}
},
xAxis : [
{
type : 'value'
}
],
yAxis : [
{
type : 'log',
axisLine: {
lineStyle: {
color: '#dc143c'
}
}
}
],
series : [
{
name:' SourceOne',
type:'bar',
data:[
[1, 1819931]
]
},
{
name:' SourceTwo',
type:'bar',
data:[
[2, 1291396]
]
},
{
name:' SourceThree',
type:'bar',
data:[
[3, 161], [4, 0]
],
markLine : {
silent: true, // ignore mouse events
data : [
// Horizontal Axis (requires valueIndex = 0)
{type : 'average', name: 'Marker Line', valueIndex: 0, itemStyle:{normal:{color:'#1e90ff'}}},
]
}
},
{
name:' SourceFour',
type:'bar',
data:[
[4, 133279]
]
},
{
name:' SourceFive',
type:'bar',
data:[
[5, 1275]
]
},
{
name:' SourceSix',
type:'bar',
data:[
[6, 119], [7, 0] // this extra data point is the hack to get your marker line in between your series
],
markLine : {
silent: true, // ignore mouse events
label: {show: false},
data : [
// Horizontal Axis (requires valueIndex = 0)
{type: 'average', name: 'Line Marker', valueIndex: 0},
]
}
},
{
name:' SourceSeven',
type:'bar',
data:[
[7, 25224]
]
},
{
name:' SourceEight',
type:'bar',
data:[
[8, 6798]
]
}
]
};
我使用以下选项成功实现了与您所期望的效果类似的效果：我已将您的x轴转换为“值”x轴，以便我们可以在系列之间的特定位置放置标记线。在执行此操作时，您需要为每个数据点指定一个x轴索引，但它还允许您向sourceThree和sourceSix添加一个额外的点，这将允许您在两者之间绘制一条线作为类型：'average'标记线：
option = {
title : {
text: 'Chart Title',
subtext: 'subtitle'
},
tooltip : {
trigger: 'axis',
axisPointer:{
show: true,
type : 'cross',
lineStyle: {
type : 'dashed',
width : 1
}
},
formatter : function (params) {
return params.seriesName + ' : [ '
+ params.value[0] + ', '
+ params.value[1] + ' ]';
}
},
xAxis : [
{
type : 'value'
}
],
yAxis : [
{
type : 'log',
axisLine: {
lineStyle: {
color: '#dc143c'
}
}
}
],
series : [
{
name:' SourceOne',
type:'bar',
data:[
[1, 1819931]
]
},
{
name:' SourceTwo',
type:'bar',
data:[
[2, 1291396]
]
},
{
name:' SourceThree',
type:'bar',
data:[
[3, 161], [4, 0]
],
markLine : {
silent: true, // ignore mouse events
data : [
// Horizontal Axis (requires valueIndex = 0)
{type : 'average', name: 'Marker Line', valueIndex: 0, itemStyle:{normal:{color:'#1e90ff'}}},
]
}
},
{
name:' SourceFour',
type:'bar',
data:[
[4, 133279]
]
},
{
name:' SourceFive',
type:'bar',
data:[
[5, 1275]
]
},
{
name:' SourceSix',
type:'bar',
data:[
[6, 119], [7, 0] // this extra data point is the hack to get your marker line in between your series
],
markLine : {
silent: true, // ignore mouse events
label: {show: false},
data : [
// Horizontal Axis (requires valueIndex = 0)
{type: 'average', name: 'Line Marker', valueIndex: 0},
]
}
},
{
name:' SourceSeven',
type:'bar',
data:[
[7, 25224]
]
},
{
name:' SourceEight',
type:'bar',
data:[
[8, 6798]
]
}
]
};