const createSvg = ({width, height, borderWidth, startColor, endColor, insetShadowBlur, outShadowBlur}) => { const padding = 3 * outShadowBlur; const gWidth = width + 2 * padding; const gHeight = height + 2 * padding; const rectPath = `m${padding} ${padding} l${width} ${0} l${0} ${height} l${-width} ${0 - 20} 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] ]; 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]); console.log(api.style(), params) const h = api.coord([0, 0])[1]; const barWidth = 50; const outShadowBlur = 5; const width = barWidth + 3 * outShadowBlur; const height = h - px[1] + 6 * outShadowBlur; const x = px[0] - width * 0.5; const y = px[1] - 3 * outShadowBlur; const svgUrl = cretateSvgUrl({ width, height, borderWidth: 5, startColor: '#156dff', endColor: '#00eaeb', insetShadowBlur: 16, outShadowBlur, }); return { type: 'image', style: { image: svgUrl, x, y, width, height, }, }; }, data: dataSet[1], }, ], };

斜角柱图