var arrs =[ [ 7, 3, 9, 11, 23 ], [ 2, '', 4, '', 4 ], [ 5, '', 5, '', 19 ], [ '', 3, '', 11, '' ], [ '', 2, '', 4, '' ] ] option = { tooltip: { trigger: "axis", axisPointer: { type: "shadow", }, formatter: function (val) { const strArr = []; val.forEach((e, i) => { if (i === 1 || i === 3 || !e.data) { return; } const str = `

${e.seriesName} ${e.data || 0}

`; strArr.push(str); }); const res = `

${val[0].name} ${strArr.join(" ")}

`; return res; }, }, legend: { right: 20, textStyle: { color: "#9E9E9E", //字体颜色 }, borderRadius: 0, itemWidth: 10, itemHeight: 10, }, grid: { left: "10px", right: "30px", bottom: "30px", top: "13%", containLabel: false, }, yAxis: { type: "value", show: false, }, xAxis: { type: "category", data: ["一月", "二月", "三月", "四月", "五月"], axisTick: { show: false }, triggerEvent: true, axisLine: { lineStyle: { color: "#DEE3E9", }, }, axisLabel: { color: "rgba(0, 0, 0, 0.45)", }, }, series: [ { name: "当期", type: "bar", barWidth: 38, itemStyle: { normal: { label: { show: false, position: "right", color: "#0060FF", fontSize: 14, formatter: "{c}", }, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#0060FF" }, { offset: 1, color: "#0060FF" }, ]), }, }, data: arrs[0], }, { name: "", type: "bar", barWidth: 32, stack: "Total", barGap: -0.92, itemStyle: { borderColor: "transparent", color: "transparent", }, emphasis: { itemStyle: { borderColor: "transparent", color: "transparent", }, }, data: arrs[1], }, { name: "增长", type: "bar", barWidth: 32, stack: "Total", itemStyle: { normal: { barBorderRadius: [0, 0, 0, 0], borderColor: '#44D7B6', borderWidth: 1, label: { show: true, position: "right", color: "#56C08D", fontSize: 14, // formatter: "+{c}", formatter: function (v) { const data = arrs[0][v.dataIndex]; const data1 = arrs[2][v.dataIndex]; let str = `{a|+${data1}}\n{b|${data}}`; return str; }, rich: { a: { color: "#56C08D", fontSize: 14, }, b: { fontSize: 14, color: "#000", }, }, }, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "rgba(147, 238, 210, 0.85)" }, { offset: 1, color: "rgba(90, 216, 166, 0.85)" }, ]), }, }, data: arrs[2], }, { name: "", type: "bar", barWidth: 32, stack: "Total", barGap: -0.92, itemStyle: { borderColor: "transparent", color: "transparent", }, emphasis: { itemStyle: { borderColor: "transparent", color: "transparent", }, }, data: arrs[3], }, { name: "减少", type: "bar", barWidth: 32, stack: "Total", itemStyle: { normal: { label: { show: true, fontSize: 14, color: "#FFA600", position: "right", // formatter: "-{c}", formatter: function (v) { const data = arrs[0][v.dataIndex]; const data1 = arrs[4][v.dataIndex]; let str = `{a|-${data1}}\n{b|${data}}`; return str; }, rich: { a: { color: "#FFA600", fontSize: 14, }, b: { fontSize: 14, color: "#000", }, }, }, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#FFA600" }, { offset: 1, color: "#FEDB65" }, ]), }, }, data: arrs[4], }, ], };

Echarts在线免费图表