ducha-qianduan/public/taishi/center3_d.js

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);
}