/** * 折线伪3D柱状图配置 * @param dataSource * [ { timelineLabel: '2020年', xAxisData: [], series:[{ name: '预算金额', type:'line', data: [] }, { name: '异常金额', type:'bar', data: [] }, ], }] * * @param unit 单位 * @param colors 颜色 * @param colorStops 柱状渐变颜色 */ let { dataSource = [], unit = '万元', colors = ['#4DE4FF', '#CEDE0F'], colorStops = [ { offset: 0, color: 'rgba(206, 222, 15, 0.9)' }, { offset: 0.5, color: 'rgba(206, 222, 15,0.9)' }, { offset: 0.5, color: 'rgba(206, 222, 15, 0.4)' }, { offset: 1, color: 'rgba(206, 222, 15, 0.4)' } ], shadowColor = '#4DE4FF', legendNames = [{ name: '测试1', }, { name: '测试2', icon: 'roundRect' }], playInterval = 4000, yUnit = '单位：万元', } = { dataSource: [ { timelineLabel: '2020年', xAxisData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], series: [{ name: '测试1', type: 'line', data: [6, 19, 116, 154, 66, 154, 148, 141, 174, 136, 114, 119] }, { name: '测试2', type: 'bar', data: [10, 17, 150, 125, 100, 75, 50, 75, 100, 125, 150, 175] }, ], }, { timelineLabel: '2021年', xAxisData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月'], series: [{ name: '预算金额', type: 'line', data: [19, 6, 86.5, 50.5, 155, 196.5, 193, 148, 183] }, { name: '异常金额', type: 'bar', data: [18, 19.5, 194, 54, 162.5, 60, 90, 146, 100] }, ], }, ] }; let options = []; let timeLineData = []; dataSource && dataSource.forEach((item, index) => { timeLineData.push(item.timelineLabel); let seriesData = [] item.series.forEach((series, index) => { if (series.type === 'line') { seriesData.push({ symbol: 'circle', symbolSize: 10, smooth: true, showSymbol: false, lineStyle: { width: 3, shadowColor, shadowBlur: 12, shadowOffsetY: 0 }, ...series, }) } else if (series.type === 'bar') { seriesData.push({ symbolPosition: 'end', symbol: 'diamond', symbolOffset: ['0%', '-50%'], symbolSize: [14, 6], ...series, type: 'pictorialBar', }, { barWidth: 15, itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: colorStops } }, ...series, }) } }); item.series = seriesData; options.push({ color: colors, xAxis: deepMerge(xAxisLS('category', item.xAxisData), { axisTick: { show: false, } }), ...item, }) }) const option = { baseOption: { backgroundColor: 'rgba(19, 45, 85, 1)', colors: colors, timeline: timelineLS(timeLineData, playInterval), legend: { data: legendNames || [], textStyle: { color: '#EEE' }, }, tooltip: deepMerge(tooltipLS(unit), { formatter: function (params) { let result = params.map(function (item, index) { if (item.seriesType !== 'bar') { return `

${item.marker} ${item.seriesName}：${item.value}${unit} ${params[0].name}

`); return result.join(' '); } }), grid: { left: '3%', right: 20, bottom: 60, top: 35, containLabel: true }, yAxis: deepMerge(yAxisLS('value', [], yUnit), { splitLine: { show: true, } }), series: [] }, options }; 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; }