option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
extraCssText: 'width:150px;height:auto;background-color:rgba(27, 90, 135, 0.95);color:#fff;border:none',
formatter: (params) => {
let arr = params.filter((item) => item.data > 0)
console.log(arr)
let demo = ''
arr.forEach((item) => {
demo = `<div style="width:140px;padding:10px;background: rgba(27, 90, 135, 0.95);border-radius: 5px;box-sizing: border-box;">
<P style="font-style: normal;font-weight: 400;font-size: 12px;line-height: 16px;color: #E3FFFF;margin:0">
${item.seriesName}:${item.data}
</P>
</div>`
})
return demo
},
},
color:['#41AEEB','#72F7FF','#FFE49B'],
legend: {
textStyle: {
color: 'rgba(255, 255, 255, 0.8)',
fontSize: 14,
},
right: 0,
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: '30%',
containLabel: true,
},
xAxis: [
{
type: 'category',
data: ['调度员', '安全员', '驾驶员'],
axisLabel: {
interval: 0,
color: '#D7D8DD',
fontSize:14,
},
axisLine: {
lineStyle: {
color: '#697f98',
fontSize: 12,
},
},
},
],
yAxis: [
{
axisTick: {
show: false,
},
type: 'value',
boundaryGap: [0, '50%'],
axisLabel: {
color: 'rgba(255, 255, 255, 0.8)',
fontSize:14,
},
nameTextStyle: {
color: 'rgba(255,255,255,0.8)',
fontSize:14,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#697f97',
},
},
},
],
series: [
{
name: '调度员',
type: 'bar',
emphasis: {
focus: 'none',
},
data: [320, 0, 0],
itemStyle: {
normal: {
color: (params) => {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{ offset: 0, color: '#41AEEB' },
{ offset: 1, color: 'rgba(65, 174, 235, 0)' },
],
false
)
},
},
},
},
{
name: '安全员',
type: 'bar',
emphasis: {
focus: 'none',
},
data: [0, 111, 0],
itemStyle: {
normal: {
color: (params) => {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{ offset: 0, color: '#72F7FF' },
{ offset: 1, color: 'rgba(114, 247, 255, 0)' },
],
false
)
},
},
},
},
{
name: '驾驶员',
type: 'bar',
emphasis: {
focus: 'none',
},
data: [0, 0, 191],
itemStyle: {
normal: {
color: (params) => {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{ offset: 0, color: '#FFE49B' },
{ offset: 1, color: 'rgba(255, 228, 155 ,0)' },
],
false
)
},
},
},
},
{
name: '驾驶员',
type: 'bar',
emphasis: {
focus: 'none',
},
data: [0, 0, 110],
itemStyle: {
normal: {
color: (params) => {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{ offset: 0, color: '#FFE49B' },
{ offset: 1, color: 'rgba(255, 228, 155 ,0)' },
],
false
)
},
},
},
}, // TODO: 这里再次复制一个即代表 驾驶员多一根数据 data 数据设置 还要根据 [0,0,xxx]设置
],
}