y轴对应,主要是两个柱形图都设置index:0,折线图设置index:1
async getCountSupvProblem() {
const result = await getCountSupvProblem({
year: this.dateValue
});
const arr = Object.keys(result).sort((a, b) => {
return result[b].problemNum - result[a].problemNum
}).map(k => [k, result[k]])
const arr2 = new Map(arr)
console.log(arr2)
let map0 = [...arr2.keys()];
let map1 = [...arr2.values()];
let map2 = [...arr2.entries()];
let problemNumList = [];
let problemRateList = [];
let rectificationRateList = [];
map1.map(i => {
problemNumList.push(i.problemNum)
problemRateList.push(i.problemRate)
rectificationRateList.push(i.rectificationRate)
})
let rectificationRateList2 = []
rectificationRateList.map(i => {
rectificationRateList2.push(i.replace('%', ''))
})
let problemNumList2 = problemNumList.map(Number)
let problemRateList2 = problemRateList.map(Number)
let rectificationRateList3 = rectificationRateList2.map(Number)
let cityNameList = [];
for (let cityName in result) {
// 城市名称列表
cityNameList.push(cityName);
}
let options = {
categories: cityNameList,
series: [{
name: "问题数量",
type: "column",
data: problemNumList2,
index: 0,
},
{
name: "问题发现比率(%)",
type: "column",
data: problemRateList2,
index: 0,
},
{
name: "问题整改率(%)",
type: "line",
addPoint: true,
data: rectificationRateList3,
index: 1,
},
]
};
this.opts3 = {
dataLabel: true,
color: ["#4089B4", "#00FF00", "#FFC233"],
padding: [0, 0, 10, 0],
enableScroll: true, //开启图表拖拽功能
scrollAlign: 'left', //图表滚动条起始位置
legend: {
position: 'top',
float: 'right',
padding: 10,
},
xAxis: {
disableGrid: true,
fontSize: 12,
gridType: 'dash',
itemCount: 5, //x轴单屏显示数据的数量,默认为5个
scrollShow: true, //新增是否显示滚动条,默认false
scrollAlign: 'left', //滚动条初始位置
},
yAxis: {
disabled: false,
disableGrid: false,
splitNumber: 5,
gridType: "dash",
dashLength: 4,
gridColor: "#CCCCCC",
padding: 10,
showTitle: true,
data: [{
position: "left",
title: "问题数量",
titleOffsetY: -7,
min: 0,
textAlign: "left",
fontSize: 12,
},
{
position: "right",
title: "",
min: 0,
max: 100,
title: "",
textAlign: "right",
fontSize: 12,
},
]
},
extra: {
mix: {
column: {
width: 10,
}
},
},
},
this.chartData3 = options;
},