const createSvg = (shadowColor, shadowBlur) => ` `; // 定义svg颜色 const svgString = createSvg('#00AAFF', 8); const svgStringDY = createSvg('#FBB03B', 8); const svg = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' }); const svgDY = new Blob([svgStringDY], { type: 'image/svg+xml;charset=utf-8' }); const DOMURL = window.URL || window.webkitURL || window; const insetShadowUrl = DOMURL.createObjectURL(svg); const insetShadowUrlDY = DOMURL.createObjectURL(svgDY); const dataSet = [ ['Mon', 'Tue', 'Wed'], [120, 200, 150], [220, 300, 450], ]; option = { backgroundColor: '#101631', tooltip: { trigger: 'axis', axisPointer: { //type: "shadow", textStyle: { color: '#fff', }, }, }, xAxis: { type: 'category', axisLine: { show: false, }, axisTick: { show: false, }, axisLabel: { color: 'rgba(255,255,255, 0.5)', }, splitLine: { show: false, }, data: dataSet[0], }, yAxis: { type: 'value', axisLine: { show: false, }, axisTick: { show: false, }, axisLabel: { color: 'rgba(255,255,255, 0.5)', }, splitLine: { show: true, lineStyle: { type: 'dashed', color: 'rgba(255,255,255,0.1)', width: 2, }, }, }, series: [ { name: '1', data: dataSet[1], type: 'pictorialBar', symbol: 'image://' + insetShadowUrl, symbolOffset: [-15, 0], barWidth: '10%', }, { name: '1', data: dataSet[1], barWidth: '10%', barGap: "50%", type: 'bar', itemStyle: { color: 'transparent', borderWidth: 2, borderColor: "#3FA9F5", }, xAxis:"15" }, { barWidth: '10%', name: '2', symbolOffset: [15, 0], data: dataSet[2], type: 'pictorialBar', symbol: 'image://' + insetShadowUrlDY, }, { name:"2", barGap: "50%", data: dataSet[2], type: 'bar', barWidth: '10%', itemStyle: { color: 'transparent', borderWidth: 2, borderColor:"rgba(251, 176,59)" }, }, ], };

柱状图内阴影(阴影为SVG、边框为bar)