echarts创建立体柱状图（堆叠或单独），面积折线图渐变配置项参考

参考效果如图

配置项中需要注意的几个要点：

1. 颜色取值需要有范围，以突出立体感

2. 对于需要堆叠的数据，设置相同stack

3. 对于pictorialBar类型的图，数据大小和图形显示位置通过data和symbolPosition: 'end'，symbolOffset: [0, '50%'],symbolSize: [barWidth, 10]进行调整

4. symbol: 'diamond'展示的是菱形图形，其他类型的可以参考官网配置项

示例代码如下：

const colors = [
				{
					type: 'linear',
					x: 0,
					x2: 1,
					y: 0,
					y2: 0,
					colorStops: [{ offset: 0, color: '#23D67D' }, { offset: 0.5, color: '#23D67D' }, { offset: 0.5, color: '#0BBE65' }, { offset: 1, color: '#0BBE65' }]
				},
				{
					type: 'linear',
					x: 0,
					x2: 1,
					y: 0,
					y2: 0,
					colorStops: [{ offset: 0, color: '#3370FF' }, { offset: 0.5, color: '#3370FF' }, { offset: 0.5, color: '#678EEB' }, { offset: 1, color: '#678EEB' }]
				},

				{
					type: 'linear',
					x: 0,
					x2: 1,
					y: 0,
					y2: 0,
					colorStops: [{ offset: 0, color: '#DFBA03' }, { offset: 0.5, color: '#DFBA03' }, { offset: 0.5, color: '#FFD500' }, { offset: 1, color: '#FFD500' }]
				}
			];
			const data=[12,24,43,54,32,43,54];
			let barWidth = 20;
			const bottomData = [1,1,1,1,1,1,1];
			const topdata = [36,72,129,162,96,129,162];
            option = {
                tooltip: {
								trigger: 'axis',
								confine: true,
								axisPointer: { // 坐标轴指示器，坐标轴触发有效
									type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
								}
							},
   
				dataZoom: [
					{
						type: 'inside',
						start: 0,
						end: 100,
						zoomOnMouseWheel: true
					}
				],
				label: {
					show: true,
					position: 'top',
					fontSize: 14,
					color: '#3DC3F0',
					fontWeight: 'bold'
				},
				xAxis: [
					{
						data: ["周一","周二","周三","周四","周五","周六","周日"],
						axisTick: { show: false },
						axisLine: { lineStyle: { color: '#d4d1d5' } },
						axisLabel: { rotate: 0, color: '#333' }
					}
				],
				grid: {
					top: 30,
					left: 50,
					right: 20,
					bottom: 30
				},
				yAxis: {
					axisLine: { show: false },
					axisTick: { show: false }
				},
				series: [
					{
						z: 1,
						name: '数据一',
						type: 'bar',
						barWidth: 20,
						data: data,
						stack: 'equal',
						label: { show: false },
						itemStyle: { normal: { color: colors[0] } }
					},
					{
						z: 1,
						name: '数据二',
						type: 'bar',
						barWidth: 20,
						data: data,
						stack: 'equal',
						label: { show: false },
						itemStyle: { normal: { color: colors[1] } }
					},
					{
						z: 1,
						name: '数据三',
						type: 'bar',
						barWidth: 20,
						data: data,
						stack: 'equal',
						label: { show: false },
						itemStyle: { normal: { color: colors[2] } }
					},
					{
						z: 2,
						name: '底部',
						type: 'pictorialBar',
						symbolPosition: 'end',
						data: [12,24,43,54,32,43,54],
						symbol: 'diamond',
						label: { show: false },
						symbolOffset: [0, '-50%'],
						symbolSize: [barWidth, 10],
						itemStyle: { normal: { color: colors[1] } }
					},
					{
						z: 2,
						name: '底部',
						type: 'pictorialBar',
						symbolPosition: 'end',
						data: [24,48,86,108,64,86,108],
						symbol: 'diamond',
						label: { show: false },
						symbolOffset: [0, '-50%'],
						symbolSize: [barWidth, 10],
						itemStyle: { normal: { color: colors[2] } }
					},
					{
						z: 2,
						name: '底部',
						type: 'pictorialBar',
						data: bottomData,
						symbol: 'diamond',
						label: { show: false },
						symbolOffset: [0, '50%'],
						symbolSize: [barWidth, 10],
						itemStyle: { normal: { color: colors[0] } }
					},
					{
						z: 3,
						name: '上部1',
						type: 'pictorialBar',
						symbolPosition: 'end',
						data: topdata,
						label: { show: false },
						symbol: 'diamond',
						symbolOffset: [0, '-50%'],
						symbolSize: [barWidth, 10],
						itemStyle: { normal: { borderColor: '#FAFF6D', borderWidth: 2, color: '#FAFF6D' } }
					}
				]
};

 

 

 

面积折线图效果展示

配置项参考

series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        symbol: "none",
        smooth: true,
        itemStyle: {
						color: "#5B8FF9"
					},
					lineStyle: {
						normal: {
							color: "#5B8FF9",
							shadowBlur: 3,
							shadowColor: hexToRgba("#5B8FF9", 0.5),
							shadowOffsetY: 8
						}
					},
					areaStyle: {
						normal: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: hexToRgba("#5B8FF9", 0.3)
								}, {
									offset: 1,
									color: hexToRgba("#5B8FF9", 0.1)
								}],
								globalCoord: false // 缺省为 false
							},
							shadowColor: hexToRgba("#5B8FF9", 0.1),
							shadowBlur: 10
						}
					}
    }];
// 转化色值
const hexToRgba = (hex, opacity) => {
					let rgbaColor = '';
					let reg = /^#[\da-f]{6}$/i;
					if (reg.test(hex)) {
						rgbaColor =
							`rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt('0x' + hex.slice(3, 5))},${parseInt('0x' + hex.slice(5, 7))},${opacity})`;
					}
					return rgbaColor;
				};