data = { "series": [ { "fields": [ { "values": [ "华中", "华北" ], }, { "values": [ [ "1月", "2月", "3月", "4月", "5月", "7月" ], [ "3月" ] ], }, { "values": [ [ 202.19, 202.19, 202.19, 202.19, 202.19, 202.19 ], [ 202.19 ] ], }, { "values": [ [ 177, 155, 177, 167, 177, 172 ], [ 188 ] ], }, { "values": [ [ 1120, 1400, 1680, 840, 1400, 280 ], [ 280 ] ], }, { "values": [ [ 24.26, 24.26, 24.26, 24.26, 24.26, 24.26 ], [ 24.26 ] ], } ], } ], } let fields = data.series[0].fields let cnt = fields[0].values.length // 地区 let orgsnames = fields[0].values let xdata = [] for (let i = 0; i < cnt; i++) { xdata = xdata.concat(fields[1].values[i]) } xdata = Array.from(new Set(xdata)) xdata.sort(function (a, b) { return parseInt(a) - parseInt(b) }) let xlen = xdata.length let ret = [] for (let i = 0; i < cnt; i++) { let snamen = { sname: fields[0].values[i], xdata: xdata } let tars = [] let cj = [] let sour = [] let buy = [] for (let j = 0; j < xlen; j++) { tars[j] = 0 cj[j] = 0 sour[j] = 0 buy[j] = 0 let intimeTar = fields[1].values[i] let sourceTar = fields[3].values[i] let targetTar = fields[2].values[i] let cjTar = fields[5].values[i] let buyTar = fields[4].values[i] let intimeLen = intimeTar.length for (k = 0; k < intimeLen; k++) { if (xdata[j] === intimeTar[k]) { tars[j] = targetTar[k] cj[j] = cjTar[k] sour[j] = sourceTar[k] buy[j] = buyTar[k] break } } } snamen.cj = cj snamen.tars = tars snamen.buy = buy snamen.sour = sour ret.push(snamen) } console.log(ret) let labelColor = "#cfe2f3" var colors = ["#56A64B", "#73BF69", "#96D98D", "#3274D9", "#5794F2", "#8AB8FF", "#FF780A", "#FF9830", "#FFB357"]; let series = [] for (let i = 0; i < cnt; i++) { let buyseries = { type: 'line', data: ret[i].buy, label: { show: true, position: "top", formatter: (param) => { return param.data === 0 ? '' : param.data } }, areaStyle: { //区域填充样式 normal: { //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "rgba(106,171,100,.4)" }, { offset: 1, color: "rgba(106,171,100, 0)" } ], false), shadowColor: 'rgba(106,171,100, 0.3)', //阴影颜色 shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 } }, } let sourseries = { name: ret[i].sname, type: 'bar', data: ret[i].sour, stack: 'group' + i, barMaxWidth: "40%", label: { show: true, position: "inside", color: "white", formatter: (param) => { return param.data === 0 ? '' : param.data } } } let cjseries = { data: ret[i].cj, type: 'scatter', stack: 'group' + i, itemStyle: { normal: { barBorderRadius: [100, 100, 0, 0], }, }, label: { show: true, position: "top", formatter: (param) => { let idx = param.dataIndex let data = ret[i].tars[idx] return data === 0 ? '' : data } } } series.push(buyseries) series.push(sourseries) series.push(cjseries) } series.push( { type: 'line', name: '营业额', data: [], xAxisIndex: 1 }, { type: 'bar', name: '人数', xAxisIndex: 1, data: [] }, { show: false, type: 'scatter', name: '客单价', data: [], xAxisIndex: 1 }, ) let has = false let legend = [ { selectedMode: 'multipe', textStyle: { color: "#ffffff" }, data: (function () { // var res = [].concat(orgsnames); let res = [] for (let i = 0; i < cnt; i++) { res.push({ name: orgsnames[i], }) } return res; })(), }, { textStyle: { color: "#ffffff" }, bottom: 5, data: [{ name: "营业额" }, { name: "人数" }, { name: "客单价" }] } ] option = { title: { text: "多维度" }, backgroundColor: "#181B1F", color: colors, grid: { left: '50', right: '20' }, legend: legend, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', axisPointer: { type: 'shadow', }, }, confine: true, formatter: (params) => { let html = ''; let idx = params[0].dataIndex html += `${params[0].axisValueLabel}
`; for (let i = 0; i < cnt; i++) { html += `地区：${ret[i].sname}
`; html += `人数：${ret[i].sour[idx]}
`; html += `客单价：${ret[i].tars[idx]}
`; html += `营业额：${ret[i].buy[idx]}
`; } return html; }, }, xAxis: [ { nameTextStyle: { color: labelColor, }, type: 'category', // boundaryGap: false, axisPointer: { type: 'shadow' }, axisLabel: { //坐标轴刻度标签的相关设置 color: labelColor, textStyle: { color: labelColor, }, }, splitLine: { show: true, lineStyle: { color: '#25272C' }, }, data: xdata, axisLine: { show: true, lineStyle: { color: "#50525A" } } }, { show: false, nameTextStyle: { color: labelColor, }, type: 'category', // boundaryGap: false, axisPointer: { type: 'shadow' }, axisLabel: { //坐标轴刻度标签的相关设置 textStyle: { color: labelColor, }, }, splitLine: { show: true, lineStyle: { color: '#25272C' }, }, data: xdata, axisLine: { show: true, lineStyle: { color: "#50525A" } } }, ], yAxis: [{ type: 'value', nameTextStyle: { color: labelColor, }, axisLabel: { //坐标轴刻度标签的相关设置 textStyle: { color: labelColor, }, formatter: (param) => { return param > 1000 ? (param / 1000) + 'k' : param } }, splitLine: { show: true, lineStyle: { color: '#25272C' }, }, axisLine: { show: true, lineStyle: { color: "#50525A" } }, }], series: series };

多维图表+自定义legend