' + data[0].name + '

'; data.forEach((item, index) => { tip += '

'; tip += '

' + item.marker + item.seriesName + '：

'; tip += '

' + item.value + (item.seriesType === 'line' ? '%' : '') + '

'; tip += '

'; if (payload.data.tipList) { payload.data.tipList.forEach((sub_item) => { tip += '

'; tip += '

' + item.marker + payload.data.tipTitle[index] + '：

'; tip += '

' + sub_item[item.dataIndex] + '

'; tip += '

'; }); } }); return tip; }, }, grid: { // 距离上右下左的距离 left: 15, right: 15, bottom: 2, top: 45, // 是否包含文本 containLabel: true, }, legend: { type: 'scroll', itemWidth: 10, itemHeight: 3, itemGap: 10, left: 'center', itemStyle: { color: 'inherit', }, textStyle: { color: '#2CD3FD', fontSize: 12, }, }, // 字体 textStyle: { fontSize: 10, color: '#4176a3', }, xAxis: { type: 'category', data: payload.data.x, axisLine: { lineStyle: { type: 'solid', color: '#4176a3', width: '0.5', //坐标线的宽度 }, }, axisTick: { show: false, }, //坐标轴斜着显示 axisLabel: { interval: 0, rotate: 0, color: '#96cbfa', fontSize: 12, formatter(params) { return formatter(params, wordNum); }, }, }, yAxis: [ { name: payload.unit.bar, nameGap: 10, nameTextStyle: { align: 'left', fontSize: 11, color: '#4176a3', }, minInterval: 1, type: 'value', axisLine: { lineStyle: { type: 'solid', color: '#4176a3', //左边线的颜色 width: '1', //坐标线的宽度 }, color: '#4176a3', minInterval: 1, }, axisLabel: { fontSize: 12, }, // 刻度 axisTick: { show: false, }, // y轴线 splitLine: { show: true, lineStyle: { color: 'rgba(65, 118, 163, 0.3)', width: 1, type: 'solid', }, }, }, { name: payload.unit.line, axisLabel: { //align: 'right', formatter: '{value} %', fontSize: 12, }, nameGap: 10, nameTextStyle: { align: 'right', fontSize: 11, color: '#4176a3', }, minInterval: 1, type: 'value', axisLine: { lineStyle: { type: 'solid', color: '#4176a3', //左边线的颜色 width: '1', //坐标线的宽度 }, color: '#4176a3', minInterval: 1, }, // 刻度 axisTick: { show: false, }, // y轴线 splitLine: { show: true, lineStyle: { color: 'rgba(65, 118, 163, 0.3)', width: 1, type: 'solid', }, }, }, ], series: [], }; const getBar = (name, color, data) => { return { yAxisIndex: 0, showBackground: false, barMaxWidth: 8, name, data, type: 'bar', itemStyle: { borderRadius: [4, 4, 0, 0], color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: color[0], // 0% 处的颜色 }, { offset: 1, color: color[1], // 100% 处的颜色 }, ]), }, }; }; const getLine = (name, color, data) => { return { yAxisIndex: 1, name, data, type: 'line', smooth: false, itemStyle: { color, }, lineStyle: { width: 1, color, shadowColor: 'rgba(0, 0, 0, .3)', shadowBlur: 0, shadowOffsetY: 5, shadowOffsetX: 5, }, }; }; if (bar1.length > 0) { option.series.push(getBar(payload.title.bar[0], payload.color.bar[0], bar1)); } if (bar2.length > 0) { option.series.push(getBar(payload.title.bar[1], payload.color.bar[1], bar2)); } if (bar3.length > 0) { option.series.push(getBar(payload.title.bar[2], payload.color.bar[2], bar3)); } if (line1.length > 0) { option.series.push(getLine(payload.title.line[0], payload.color.line[0], line1)); } if (line2.length > 0) { option.series.push(getLine(payload.title.line[1], payload.color.line[1], line2)); } if (line3.length > 0) { option.series.push(getLine(payload.title.line[2], payload.color.line[2], line3)); }

柱状图+则线图