const createSvg = (shadowColor, shadowBlur) => ` `; const svgString = createSvg('#156dff', 8); const svg = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' }); const DOMURL = window.URL || window.webkitURL || window; const insetShadowUrl = DOMURL.createObjectURL(svg); const dataSet = [ ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], [120, 200, 150, 80, 70, 110, 130], ]; option = { backgroundColor: '#101631', xAxis: { type: 'category', axisLine: { show: true, lineStyle: { color: 'rgba(125, 147, 202, 1)', }, }, axisTick: { show: false, }, axisLabel: { color: 'rgba(125, 147, 202, 1)', padding: [10, 0, 0, 0], }, splitLine: { show: false, }, data: dataSet[0], }, yAxis: { type: 'value', axisLine: { show: true, lineStyle: { color: 'rgba(125, 147, 202, 1)', }, }, axisTick: { show: false, }, axisLabel: { color: 'rgba(255,255,255, 0.5)', formatter: '{value}%', }, splitLine: { show: true, lineStyle: { type: 'dashed', color: 'rgba(255,255,255,0.1)', width: 2, }, }, }, series: [ { //三个最低下的圆片 name: '', type: 'pictorialBar', symbolSize: [50, 15], symbolOffset: [1, 10], z: 12, itemStyle: { opacity: 1, color: '#12B9DB', // 100% 处的颜色, }, data: [1, 1, 1, 1, 1, 1, 1], }, { data: dataSet[1], type: 'pictorialBar', symbol: 'image://' + insetShadowUrl, barWidth: 50, }, { data: dataSet[1], type: 'bar', barWidth: 50, itemStyle: { color: 'transparent', shadowColor: 'blue', shadowBlur: 12, shadowOffsetX: 0, shadowOffsetY: 0, }, }, { name: '', type: 'pictorialBar', symbolSize: [50, 15], symbolOffset: [1, -10], z: 12, itemStyle: { opacity: 1, color: '#12B9DB', }, symbolPosition: 'end', data: dataSet[1], }, ], };

Echarts在线免费图表