function center3_d(data1,data){ const myChartss = echarts.init(document.getElementById('center3_d'), 'vintage'); // const data1 = [10, 20, 10, 30, 30]; const data2 = [100, 100, 100, 100, 100]; const path = 'path://M1390,595h79l-39,22Z'; const myColor = ['#fff', '#fff', '#fff', '#fff', '#fff']; const option12 = { grid: { left: 100, bottom: 100 }, xAxis: { axisLabel: { padding:15, interval: 0, textStyle: { color: function (param, index) { return myColor[index] }, fontSize: 16, fontWeight: 100, }, margin: 20, }, splitLine: { show: false }, axisLine: { show: false, }, splitArea: { show: false, }, axisTick: { show: false }, data: data }, yAxis: { axisLine: { lineStyle: { color: '#6e6e6e', width: 1, } }, axisLabel: { interval: 0, formatter: '{value}%', textStyle: { fontSize: 16, color: '#fff', }, margin: 20, }, splitLine: { show: true, }, axisTick: { lineStyle: { color: '#fff', width: 1, height: 5, } }, }, series: [{ type: 'bar', barWidth: 60, barGap: '-100%', stack: '广告', itemStyle: { color: function (params) { const colorList = [ new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: '#39b3ff' }, { offset: 0.5, color: '#39b3ff' }, { offset: 0.5, color: '#39b3ff' }, { offset: 1, color: '#39b3ff' }]), new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: '#39b3ff' }, { offset: 0.5, color: '#39b3ff' }, { offset: 0.5, color: '#39b3ff' }, { offset: 1, color: '#39b3ff' }]), new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: '#39b3ff' }, { offset: 0.5, color: '#39b3ff' }, { offset: 0.5, color: '#39b3ff' }, { offset: 1, color: '#39b3ff' }]), new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: '#39b3ff' }, { offset: 0.5, color: '#39b3ff' }, { offset: 0.5, color: '#39b3ff' }, { offset: 1, color: '#39b3ff' }]), new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: '#39b3ff' }, { offset: 0.5, color: '#39b3ff' }, { offset: 0.5, color: '#39b3ff' }, { offset: 1, color: '#39b3ff' }]), ]; return colorList[params.dataIndex] }, }, data: data1 }, { "name": "", "type": "pictorialBar", symbol: path, "symbolSize": [60, 20], "symbolOffset": [0, 0], "z": 12, "symbolPosition": "end", itemStyle: { color: '#e2e2e2', opacity: 0, }, "data": data2 }, { "name": "", "type": "pictorialBar", symbol: path, "symbolSize": [60, 20], "symbolOffset": [0, 20], "z": 12, itemStyle: { opacity: 1, color: function (params) { const colorList = [ new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: '#39b3ff' }, { offset: 0.5, color: '#39b3ff' }, { offset: 0.5, color: '#39b3ff' }, { offset: 1, color: '#39b3ff' }]), new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: '#39b3ff' }, { offset: 0.5, color: '#39b3ff' }, { offset: 0.5, color: '#39b3ff' }, { offset: 1, color: '#39b3ff' }]), new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: '#39b3ff' }, { offset: 0.5, color: '#39b3ff' }, { offset: 0.5, color: '#39b3ff' }, { offset: 1, color: '#39b3ff' }]), new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: '#39b3ff' }, { offset: 0.5, color: '#39b3ff' }, { offset: 0.5, color: '#39b3ff' }, { offset: 1, color: '#39b3ff' }]), new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: '#39b3ff' }, { offset: 0.5, color: '#39b3ff' }, { offset: 0.5, color: '#39b3ff' }, { offset: 1, color: '#39b3ff' }]), ]; return colorList[params.dataIndex] }, }, "data": [1, 1, 1, 1, 1] }, { "name": "", "type": "pictorialBar", symbol: path, "symbolSize": [60, 20], "symbolOffset": [0, 0], "z": 12, label: { show: true, formatter: "{c}人", position: 'top', distance: 5, color: '#fff', fontWeight: 100, textShadowColor: 'rgba(255, 255, 255, .6)', fontSize: 16, textShadowBlur: '0', textShadowOffsetX: 1, textShadowOffsetY: 1, }, itemStyle: { opacity: 1, color: function (params) { const colorList = ['#39b3ff', '#39b3ff', '#39b3ff', '#39b3ff', '#39b3ff']; return colorList[params.dataIndex] }, }, "symbolPosition": "end", "data": data1 }, { name: '', type: "effectScatter", rippleEffect: { period: 1, scale: 5, brushType: 'fill' }, z: 20, symbolPosition: 'end', symbol: path, "symbolSize": [15, 5], "symbolOffset": [0, 9], itemStyle: { normal: { color: '#fff', } }, data: data1 }, ] }; const backImg = "/asset/get/s/data-1622796959507-HTopachtJ.png" myChartss._dom.style.backgroundImage = "url('" + backImg + "')"; myChartss.setOption(option12); }