/** * 堆叠柱状图 * @param dataSource 堆叠数据源,seriesDataLabel数据label,stack堆叠,colorArrow颜色渐变方向,isPositive是否是正数 * @param yAxisData y轴数据 * @param unit 单位 * @param colors 颜色 * @param isPositive 是否是正数 */ const seriesDataLabel = { show: true, position: 'inside', color: '#fff', formatter: function (params) { return -params.data.value; } } const { dataSource = [], yAxisData = [], unit = '', colors = [['rgba(0, 59, 68, 1)', 'rgba(113, 236, 255, 1)'], ['rgba(84, 61, 7, 1)', 'rgba(254, 188, 34, 1)'], ['rgba(19, 45, 85, 1)', 'rgba(54, 134, 255, 1)']], isPositive = true, } = { unit: "元", dataSource: [ { data: [330, 420, 330, 320, 300, 280, 230], name: '测试1', }, { data: [{ isPositive: true, value: 240 }, { isPositive: true, value: 200 }, { isPositive: true, value: 190 }, { isPositive: true, value: 180 }, { isPositive: true, value: 170 }, { isPositive: true, value: 150 }, { isPositive: true, value: 140 }].map(i => { i.value = -i.value; return i }), name: '测试2', stack: 'Total', seriesDataLabel, colorArrow: 'left', }, { data: [550, 530, 480, 510, 450, 400, 390], name: '测试3', stack: 'Total', }, ], yAxisData: ['技术部1', '技术部2', '技术部3', '技术部3', '技术部5', '技术部6', '技术部7' ] }; let seriesData = []; let legendNames = []; dataSource && dataSource.forEach((item, index) => { legendNames.push(item.name); seriesData.push({ name: item.name, type: 'bar', barWidth: 18, label: item.seriesDataLabel ? item.seriesDataLabel : { show: true, position: 'inside', color: '#fff', // fontSize: 11, // fontWeight: 500, }, itemStyle: { barBorderRadius: 3, ...(Array.isArray(colors[index]) && colors[index].length > 1 ? { color: item.colorArrow && item.colorArrow === 'left' ? new echarts.graphic.LinearGradient( 1, 0, 0, 0, [{ offset: 0, color: colors[index][0] }, { offset: 1, color: colors[index][1] } ] ) : new echarts.graphic.LinearGradient( 0, 0, 1, 0, [{ offset: 0, color: colors[index][0] }, { offset: 1, color: colors[index][1] } ] ) } : {}), }, stack: item.stack ? item.stack : false, emphasis: { focus: 'series' }, data: item.data }) }) option = { backgroundColor:'rgba(19, 45, 85, 1)', dataZoom: dataZoomLS('y', yAxisData.length > 7 ? true : false, 6), color: colors, tooltip: deepMerge(tooltipLS(unit), { formatter: function (params) { let result = params.map(function (item, index) { return '

' + '' + item.seriesName + ': ' + ((typeof item.data === 'object' && item.data !== null) ? (item.data.isPositive ? item.data.value * -1 : item.data.value) : item.data) + unit + ''; }); result.unshift(`

${params[0].name}

`); return result.join(' '); } }), legend: { textStyle: { color: '#EEE' }, data: legendNames || [] }, grid: { left: '3%', right: 40, bottom: '3%', top: 30, containLabel: true }, xAxis: deepMerge(xAxisLS('value', [], ''), { axisTick: { show: false }, axisLine: { show: false }, axisLabel: { formatter: function (value, index) { //把负数变成正数 if (isPositive && (value < 0)) { value = Math.abs(value); } return value; } } }), yAxis: deepMerge(yAxisLS('category', yAxisData), { axisLine: { show: true } }), series: seriesData, } function tooltipLS(unit, trigger = 'axis') { return { trigger, padding: 15, axisPointer: { type: 'shadow',//cross label: { show: true, backgroundColor: '#333333', }, }, backgroundColor: 'rgba(10,26,52,0.7)', // 提示框浮层的背景颜色。 borderRadius: 15, textStyle: { // 提示框浮层的文本样式。 }, extraCssText: 'box-shadow: 0 2px 25px #5cc0fd inset', formatter: function (params) { let result = params.map(function (item) { return '

' + item.marker + item.seriesName + ': ' + item.value + unit + ''; }); result.unshift(`

${params[0].name}

' + item.marker + item.seriesName + ': ' + item.value + unit + ''; }); result.unshift(`

${params[0].name}

`); return result.join(' '); } }; } function xAxisLS(type = 'category', data, unit) { const axisLabel = { show: true, fontSize: 12, textStyle: { color: 'rgba(172, 201, 226, 1)', }, }; const axisTick = { show: true, }; const axisLine = { show: true, lineStyle: { color: 'rgba(200, 225, 246, 1)', type: 'solid', }, }; const splitLine = { show: false, lineStyle: { color: 'rgba(160, 222, 255, 1)', type: 'dashed', opacity: 0.3 }, }; const name = unit if (type == 'category') { return { name, data: data || [], type: 'category', axisLabel, axisTick, axisLine, splitLine, }; } else { return { name, type: 'value', axisLabel, axisTick, axisLine, splitLine, }; } } function yAxisLS(type = 'value', data, unit, inverse = true) { const axisLabel = { show: true, showMaxLabel: true, fontSize: 12, textStyle: { color: 'rgba(172, 201, 226, 1)', }, }; const nameTextStyle = { lineHeight: 20 } const axisTick = { show: false, }; const axisLine = { show: false, lineStyle: { color: 'rgba(200, 225, 246, 1)', type: 'solid', }, }; const splitLine = { show: false, lineStyle: { color: 'rgba(160, 222, 255, 1)', type: 'dashed', opacity: 0.3 }, }; const name = unit if (type == 'category') { return { inverse, name, nameTextStyle, data: data || [], type: 'category', axisLabel, axisTick, axisLine, splitLine, }; } else { return { name, nameTextStyle, type: 'value', axisLabel, axisTick, axisLine, splitLine, }; } } function dataZoomLS(type = 'y', show = true, endValue = 6, start = 0) { const zoomLock = true //禁止拉伸 const width = 8 const yAxisIndex = 0 const top = 20 const right = 10 const startValue = 0; const handleIcon = "M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z"; const handleSize = "100%" const handleStyle = { color: "#066a7a", } const backgroundColor = "transparent" const fillerColor = "#066a7a" const textStyle = { color: "transparent", } const dataBackground = { lineStyle: { color: "transparent", }, areaStyle: { color: "transparent", }, } const borderColor = "transparent" if (type == 'y') { return { show, zoomLock, //禁止拉伸 width, yAxisIndex, start, top, right, startValue, endValue, handleIcon, handleSize, handleStyle, backgroundColor, fillerColor, textStyle, dataBackground, borderColor, } } else { return { show, zoomLock, //禁止拉伸 width, // bottom: 30, top, right, startValue, endValue, handleIcon, handleSize, handleStyle, backgroundColor, fillerColor, textStyle, dataBackground, borderColor, } } } function timelineLS(timeLineData = [], playInterval = 3000, currentIndex = 0, type = 'category', tooltipUnit = '') { return { show: true, axisType: type, tooltip: { show: true, formatter: function (params) { return params.name + tooltipUnit; } }, autoPlay: true, currentIndex, playInterval, label: { show: true, interval: 'auto', color: '#B6D3FF', emphasis: { color: '#3686FF', borderColor: "#3686FF", } }, itemStyle: { color: '#B6D3FF', borderColor: '#B6D3FF', emphasis: { color: '#3686FF', borderColor: "#3686FF", } }, lineStyle: { // color: '#B6D3FF' }, checkpointStyle: { color: '#3686FF', borderColor: "#3686FF", emphasis: { color: '#3686FF', borderColor: "#3686FF", } }, controlStyle: { color: '#B6D3FF', borderColor: '#B6D3FF', emphasis: { color: '#3686FF', borderColor: "#3686FF", } }, data: timeLineData } } function deepMerge(target, merged) { console.log(1) for (var key in merged) { if (target[key] && typeof target[key] === "object") { deepMerge(target[key], merged[key]); continue; } if (typeof merged[key] === "object") { target[key] = _.cloneDeep(merged[key]); continue; } target[key] = merged[key]; } return target; }

左右堆叠柱状图