const createSvg = ({width, height, borderWidth, startColor, endColor, insetShadowBlur, slope = 20, left = true}) => { let rectPath = ''; if (left) { rectPath = `m${0} ${0} l${width} ${0} l${0} ${height} l${-width} ${0 - slope} z`; } else { rectPath = `m${0} ${0} l${width} ${0} l${0} ${height - slope} l${-width} ${slope} z`; } return (` `); }; const cretateSvgUrl = (svgOption) => { const svgString = createSvg(svgOption); const svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"}); const DOMURL = window.URL || window.webkitURL || window; const insetShadowUrl = DOMURL.createObjectURL(svg); return insetShadowUrl; }; const dataSet = [ ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], [120, 200, 150, 80, 70, 110, 130], [180, 300, 100, 40, 80, 100, 230], ]; option = { backgroundColor: '#101631', 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: [ { type: 'custom', hoverAnimation: true, renderItem: (params, api) => { const index = api.value(0); const value = api.value(1); const px = api.coord([index, value]); const h = api.coord([0, 0])[1]; const barWidth = 40; const outShadowBlur = 0; const width = barWidth; const height = h - px[1]; const x = px[0] - width * 0.5 - 22; const y = px[1]; const svgUrl = cretateSvgUrl({ width, height, borderWidth: 5, startColor: '#156dff', endColor: '#00eaeb', insetShadowBlur: 16, }); return { type: 'image', style: { image: svgUrl, x, y, width, height, shadowColor: '#156dff', shadowBlur: 10, }, }; }, itemStyle: { color: 'yellow', borderColor: 'green', shadowColor: 'green', shadowBlur: 10, }, data: dataSet[1], }, { type: 'custom', hoverAnimation: true, renderItem: (params, api) => { const index = api.value(0); const value = api.value(1); const px = api.coord([index, value]); console.log(api.style(), value) const h = api.coord([0, 0])[1]; const barWidth = 40; const outShadowBlur = 0; const width = barWidth; const height = h - px[1]; const x = px[0] - width * 0.5 + 22; const y = px[1]; const svgUrl = cretateSvgUrl({ width, height, borderWidth: 5, startColor: '#00eaeb', endColor: '#00eaeb', insetShadowBlur: 16, left: false, }); return { type: 'image', style: { image: svgUrl, x, y, width, height, shadowColor: '#00eaeb', shadowBlur: 10, }, }; }, itemStyle: { color: 'yellow', borderColor: 'green', shadowColor: 'green', shadowBlur: 10, }, data: dataSet[2], }, ], };

内发光 外发光

内发光外发光