let
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
backgroundColor: "#0000005c",
borderColor: "#6FD0FF",
borderWidth: 1,
padding: [2, 10],
textStyle: {
color: "#6FD0FF",
fontSize: 12,
fontWeight: 600,
align:'left'
},
formatter:function (params) {
return `
<div>${params[0].axisValue}</div>
<div style="width:100px;display: flex;justify-content: space-between">
<div>${params[0].marker}${params[0].seriesName}</div>
<div>${params[0].value}个</div>
</div>
<div style="width: 100%;display: flex;justify-content: space-between">
<div>${params[1].marker}${params[1].seriesName}</div>
<div>${-(params[1].value)}个</div>
</div>
<div style="width: 100%;display: flex;justify-content: space-between">
<div>${params[2].marker}${params[2].seriesName}</div>
<div>${Math.abs(params[2].value)}个</div>
</div>
`
}
},
legend: {
top: "6%",
data: ['发现', '处置完成', '未处置'],
textStyle: {
color: "#FFFFFF"
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'value',
axisLabel: {
show: true,
color: "#89C3FF",
fontSize:15,
fontWeight:400,
formatter: function (value, index) {
if(value<0){
return Math.abs(value);
}else {
return value;
}
},
},
splitLine: {
show: true,
lineStyle: {
color: "#154982",
width: 3
}
}
}
],
yAxis: [
{
type: 'category',
axisTick: {
show: false
},
axisLabel: {
show: true,
color: "#89C3FF",
fontSize:15,
fontWeight:400,
},
splitLine: {
show: true,
lineStyle: {
color: "#154982",
width: 3
}
},
data:['周一','周二','周三','周四']
}
],
series: [
{
name: '未处置',
type: 'bar',
barWidth:15,
emphasis: {
focus: 'series'
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#7A9BFF' },
{ offset: 1, color: '#2647AC' }
])
},
data: [100,100,100,100]
},
{
name: '发现',
type: 'bar',
stack: 'Total',
barWidth:15,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#88E84D' },
{ offset: 1, color: '#01750F' }
])
},
emphasis: {
focus: 'series'
},
data: [-100,-100,-100,-100]
},
{
name: '处置完成',
type: 'bar',
stack: 'Total',
barWidth:15,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#FFD853' },
{ offset: 1, color: '#B15C00' }
])
},
emphasis: {
focus: 'series'
},
data: [100,100,100,100]
}
]
};
echarts双向柱状图
最新推荐文章于 2024-05-06 15:39:52 发布