配置项如下
var legendData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
var yAxisData = ['检修区域南厂', '东修区域南厂', '加工组装区域', '动车焊接区域', '轮轴区域'];
// 累计利润
var leiji = [
[10, 15, 10, 15, 10],
[20, 25, 20, 25, 20],
[30, 35, 30, 35, 30],
[40, 45, 40, 45, 40],
[50, 55, 50, 55, 50],
[60, 65, 60, 65, 60],
[70, 75, 70, 75, 70],
[80, 85, 80, 85, 80],
[90, 95, 90, 95, 90],
[100, 105, 100, 105, 100],
[110, 115, 110, 115, 110],
[120, 125, 120, 125, 140],
];
// 进度
var jindu = [
[30, 20, 10, 15, 10],
[20, 25, 20, 25, 20],
[30, 35, 30, 35, 30],
[10, 15, 10, 15, 10],
[20, 25, 20, 25, 20],
[30, 35, 30, 35, 30],
[10, 15, 10, 15, 10],
[20, 25, 20, 25, 20],
[30, 35, 30, 35, 30],
[10, 15, 10, 15, 10],
[20, 25, 20, 25, 20],
[30, 35, 30, 35, 30],
];
var colorArr = [
'#33AEEE',
'#2950FF',
'#00F1FF',
'#9EFFCC',
'#4BCD6C',
'#BEF01B',
'#FFDE81',
'#FFBE02',
'#FF8C4B',
'#FBADA0',
'#E790FE',
'#E386AB',
];
var data = [];
leiji.forEach(function (item, i) {
var dataArr = [];
leiji[i].forEach(function (item, j) {
dataArr.push({
vaule: leiji[i][j],
taxt: jindu[i][j],
});
});
data.push(dataArr);
});
console.log(data);
var seriesData = [];
legendData.forEach(function (item, i) {
seriesData.push({
name: legendData[i],
type: 'line',
data: leiji[i],
symbolSize: 8,
symbol: 'circle',
label: {
show: true,
position: [20,10],
formatter: function (params) {
return params.value + ',\n' +
`{a|${jindu[params.seriesIndex][params.dataIndex]}%}`;
},
rich: {
a: {
color: '#fff',
align: 'center',
fontSize: 12,
padding: [8, 0],
fontFamily: 'PingFang',
},
},
textStyle: {
color: 'rgba(215,234,245,1)',
fontSize: 12,
},
},
itemStyle: {
normal: {
color: colorArr[i], //点的颜色
lineStyle: {
color: colorArr[i], //线的颜色
width: 1, // 折线图线条粗细设置
},
},
},
});
});
option = {
backgroundColor: '#031f2d',
legend: {
right: '5',
bottom: '20',
itemWidth: 15,
itemHeight: 8,
itemGap: 15,
textStyle: {
color: '#E3E3E5',
fontSize: 12,
fontFamily: 'PingFang',
},
icon: 'rect',
data: legendData,
},
grid: {
left: '2%',
right: '2%',
bottom: '100',
top: '10%',
containLabel: true,
},
yAxis: {
type: 'category',
boundaryGap: false,
data: yAxisData,
axisTick: {
show: false, // 隐藏x轴的分割点
},
axisLabel: {
textStyle: {
fontSize: 12,
color: '#E3E3E5',
fontFamily: 'PingFang',
},
formatter: function (params) {
let valueTxt = '';
if (params.length > 3) {
valueTxt = params.substring(0, 3) + '\n' + params.substring(3, params.length);
} else {
valueTxt = params;
}
return valueTxt;
},
},
axisLine: {
show: false,
lineStyle: {
color: '#CCCCCC',
type: 'dashed',
},
},
splitLine: {
show: true,
lineStyle: {
color: '#CCCCCC',
type: 'dashed',
},
},
},
xAxis: {
type: 'value',
axisTick: {
show: false, // 隐藏x轴的分割点
},
axisLine: {
show: false,
lineStyle: {
color: '#CCCCCC',
},
},
axisLabel: {
textStyle: {
fontSize: 12,
color: '#E3E3E5',
fontFamily: 'PingFang',
},
},
position: 'top',
splitLine: {
show: false,
lineStyle: {
color: '#CCCCCC',
},
},
},
series: seriesData,
};