配置项如下
var tridata = {
"chart": [{
month: "系统1",
value: 78,
},
{
month: "系统2",
value: 50,
},
{
month: "系统3",
value: 45,
},
]
}
var xAxisMonth = [],
barData = [],
lineData = [];
for (let i = 0; i < tridata.chart.length; i++) {
xAxisMonth.push(tridata.chart[i].month);
barData.push({
"name": xAxisMonth[i],
"value": tridata.chart[i].value
});
lineData.push({
"name": xAxisMonth[i],
"value": tridata.chart[i].ratio
});
}
option = {
title: {
left: 20,
top: "0%",
text: '场景事件数TOP',
textStyle: {
color: '#6a9cd5',
fontSize: 14,
}
},
grid: {
top: '20%',
bottom: 40,
left: 30,
right: 40,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
},
formatter: function (params) {
// return params[0]["data"].name + "<br/>" + '训练人次: ' + params[1]["data"].value + "<br/>" + '合格率: ' + params[0]["data"].value;
}
},
xAxis: [{
type: 'category',
show: false,
data: [],
axisLabel: {
textStyle: {
color: '#6a9cd5'
}
}
},
{
type: 'category',
position: "bottom",
data: xAxisMonth,
boundaryGap: true,
// offset: 40,
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#19345d'
}
},
axisLabel: {
color: '#6a9cd5'
}
}
],
yAxis: [{
show: true,
offset: 0,
splitLine: {
show: true,
lineStyle: {
color: "#19345d"
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true,
color: '#6a9cd5'
}
}],
color: ['#e54035'],
series: [{
name: '',
type: 'pictorialBar',
xAxisIndex: 1,
barCategoryGap: '0',
symbol: 'path://d="M150 50 L130 130 L170 130 Z"',
itemStyle: {
normal: {
color: function (params) {
let colorList = [
'rgba(13,177,205,0.8)', 'rgba(29,103,182,0.6)',
'rgba(13,177,205,0.8)', 'rgba(29,103,182,0.6)',
'rgba(13,177,205,0.8)', 'rgba(29,103,182,0.6)'
];
return colorList[params.dataIndex];
}
},
emphasis: {
opacity: 1
}
},
data: barData,
}, ]
}