const createSvg = (shadowColor, shadowBlur) => ` `; const svgString = createSvg('rgba(138, 167, 216, 0.3)', 6); const svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"}); const DOMURL = window.URL || window.webkitURL || window; const insetShadowUrl = DOMURL.createObjectURL(svg); var data = [ { name: '功能1', value: 20 }, { name: '功能2', value: 82 }, { name: '功能3', value: 91 }, { name: '功能4', value: 34 }, { name: '功能5', value: 90 }, { name: '功能6', value: 30 }, { name: '功能7', value: 10 } ] option = { backgroundColor: "#041730", xAxis: { data: data.map(item => item.name), //坐标轴 axisLine: { show: false }, //坐标值标注 axisLabel: { show: true, color: '#B3D6FF', }, axisTick: { show: false } }, yAxis: { //坐标轴 axisLine: { show: false, }, //坐标值标注 axisLabel: { show: false }, //分格线 splitLine: { show: false }, axisTick: { show: false } }, series: [ { name: 'a', tooltip: { show: false }, type: 'bar', barWidth: 10, itemStyle: { color: '#8AA7D8', barBorderRadius: [5, 5, 0, 0] }, data: data, }, { tooltip: { show: false }, type: "pictorialBar", symbol: 'image://' + insetShadowUrl, symbolRepeat: false, symbolClip: true, symbolSize: ['22', '100%'], data: [100, 100, 100, 100, 100, 100, 100], //TODO 此处需要根据实际数据修改最大值 legendHoverLink: false, markPoint: { symbol: 'image://' + insetShadowUrl, symbolSize: [22, 32], symbolOffset: [0, -24], data: [ { value: 20, xAxis: 0, yAxis: 100 }, { value: 82, xAxis: 1, yAxis: 100 }, { value: 91, xAxis: 2, yAxis: 100 }, { value: 34, xAxis: 3, yAxis: 100 }, { value: 90, xAxis: 4, yAxis: 100 }, { value: 30, xAxis: 5, yAxis: 100 }, { value: 10, xAxis: 6, yAxis: 100 } ], label: { color: '#ffffff' } } } ] };

Echarts在线免费图表