import * as echarts from 'echarts'
import {
	setOptions
} from "./echarts.js";
import {
	ref,
	onMounted,
	nextTick
} from 'vue'
import {
	getSelectDldjCount,
	getSelectQllbCount,
	getSelectDllfCount,
	getSelectJzncJzjgCount
} from '../service/http.js'
/* export function setEcharts(ele,option){
    setOptions(ele,option)
} */

/* 道路等级 */
export function setEchartsPie(ele,data) {
	let optionArr = [
		{
			value: 0,
			name: 'A级',
			itemStyle: {
				color: '#50C5C5',
			},
		},
		{
			value: 0,
			name: 'B级',
			itemStyle: {
				color: '#67CBFF',
			},
		},
		{
			value: 0,
			name: 'C级',
			itemStyle: {
				color: '#71EAB4',
			},
		},
		{
			value: 0,
			name: 'D级',
			itemStyle: {
				color: '#F1B062',
			},
		},
	]
	optionArr.forEach(item => {
		for(let i=0;i<data.length;i++){
			if(item.name == data[i].aqjdSf){
				item.value = data[i].dataCount * 10000;
			}
		}
	})
	let option =  getPie3D(
		optionArr,
		0.56
	)
	setOptions(ele, option)
}

export function setRoadEchartsPie(ele,data) {
	let optionArr = [
		{
			value: 0,
			name: '快速路',
			itemStyle: {
				color: '#50C5C5',
			},
		},
		{
			value: 0,
			name: '主干路',
			itemStyle: {
				color: '#67CBFF',
			},
		},
		{
			value: 0,
			name: '次干路',
			itemStyle: {
				color: '#71EAB4',
			},
		},
		{
			value: 0,
			name: '其它',
			itemStyle: {
				color: '#F1B062',
			},
		},
	]
	optionArr.forEach(item => {
		for(let i=0;i<data.length;i++){
			if(item.name == data[i].dldj){
				item.value = data[i].dlldcd * 10000;
			}
		}
	})
	let option =  getPie3D(
		optionArr,
		0.56
	)
	setOptions(ele, option)
}

/* 桥梁类别 */
export function setEchartsBar(ele,arr) {
	option2.yAxis.data = []
	option2.series[0].data = []
	arr.forEach(item => {
		option2.yAxis.data.push(item.qllb)
		option2.series[0].data.push(item.qlzc)
	})
	setOptions(ele, option2)

}
/* 道路路幅 */
export function setEchartsSolidBar(ele,arr) {
	option3.xAxis.data = []
	option3.series[0].data = []
	option3.series[1].data = []
	arr.forEach(item => {
		option3.xAxis.data.push(item.lfxs)
		option3.series[0].data.push(item.dlldcd)
		option3.series[1].data.push(item.dlldcd)
	})
	setOptions(ele, option3)
}

export function setEchartsNSolidBar(ele ,data) {
	let nxAxisData = ["100m以上", "24-100m", "10-24m", "1-10m"]
	let nSeriesData = [0, 0, 0, 0];
	for(let i=0;i<data.length;i++){
		nxAxisData.forEach((item,index)=>{
			if(item == data[i].jzgd){
				nSeriesData[index] = data[i].jzmj;
			}
		})
	}
	let option4 = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow',
			},
			formatter: function(params, ticket, callback) {
				const item = params[1];
				return item.name + ' : ' + item.value;
			},
		},
		grid: {
			left: 0,
			right: 0,
			top: 40,
			bottom: 0,
			containLabel: true,
		},
		xAxis: {
			type: 'category',
			data: nxAxisData,
			axisLine: {
				show: false,
				lineStyle: {
					width: 2,
					color: '#2B7BD6',
				},
			},
			axisTick: {
				show: false,
			},
			axisLabel: {
				fontSize: 14,
				color: "#A2BCC9",
				fontFamily: 'siyuan',
				//margin: 15,
				fontWeight: 'bold'
			},
		},
		yAxis: {
			type: 'value',
			axisLine: {
				show: false,
				lineStyle: {
					width: 2,
					color: '#2B7BD6',
				},
			},
			splitLine: {
				show: false,
				lineStyle: {
					color: '#153D7D',
				},
			},
			axisTick: {
				show: false,
			},
			axisLabel: {
				show: false,
				fontSize: 14,
			},
			// boundaryGap: ['20%', '20%'],
		},
		series: [{
			type: 'custom',
			renderItem: (params, api) => {
				const location = api.coord([api.value(0), api.value(1)]);
				return {
					type: 'group',
					children: [{
						type: 'NCubeLeft',
						shape: {
							api,
							xValue: api.value(0),
							yValue: api.value(1),
							x: location[0],
							y: location[1],
							xAxisPoint: api.coord([api.value(0), 0]),
						},
						style: {
							fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: nColorArr[1][0],
							},
								{
									offset: 1,
									color: nColorArr[1][1],
								},
							]),
						},
					},
						{
							type: 'NCubeRight',
							shape: {
								api,
								xValue: api.value(0),
								yValue: api.value(1),
								x: location[0],
								y: location[1],
								xAxisPoint: api.coord([api.value(0), 0]),
							},
							style: {
								fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: nColorArr[2][0],
								},
									{
										offset: 1,
										color: nColorArr[2][1],
									},
								]),
							},
						},
						{
							type: 'NCubeTop',
							shape: {
								api,
								xValue: api.value(0),
								yValue: api.value(1),
								x: location[0],
								y: location[1],
								xAxisPoint: api.coord([api.value(0), 0]),
							},
							style: {
								fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: nColorArr[0][0],
								},
									{
										offset: 1,
										color: nColorArr[0][0],
									},
								]),
							},
						},
					],
				};
			},
			data: nSeriesData,
		},
			{
				type: 'bar',
				label: {
					normal: {
						show: true,
						position: 'top',
						formatter: (e) => {
							// return e.value + '次';
							return e.value;
						},
						fontSize: 14,
						color: "#fff",
						fontFamily: 'siyuan',
						fontWeight: 'bold',
						offset: [0, -15],
					},
				},
				itemStyle: {
					color: 'transparent',
				},
				tooltip: {},
				data: nSeriesData,
			},
		],
	};
	setOptions(ele, option4)
}
/* 各年代建筑结构类型统计 */
export function setEchartsSBar(ele,data,type) {
	let dataX = ['1980年及以前', '1981-1990年', '1991-2000年', '2001-2010年','2011-2015年','2016年至今'];
	let dataY1 = ["城镇-砌体结构-其它", "城镇-钢筋混凝土结构-非单跨框架", "城镇-木结构", "城镇-砌体结构-内框架结构", "城镇-钢筋混凝土结构-单跨框架", "城镇-钢结构","城镇-砌体结构-底部框架-抗震墙结构","城镇-钢筋混凝土结构", "城镇-砌体结构", "城镇-其它"];
	let dataY2 = ["农村-钢结构", "农村-钢筋混凝土结构", "农村-窑洞", "农村-混杂结构","农村-砌体结构-其它", "农村-土木/石木结构", "农村-砌体结构-底部框架-抗震墙结构","农村-木（竹）结构", "农村-砌体结构","农村-其它"];
	let dataYData1 =  [
		{
			"name": "城镇-砌体结构-其它",
			"data": [0,0,0,0,0,0]
		},
		{
			"name": "城镇-钢筋混凝土结构-非单跨框架",
			"data": [0,0,0,0,0,0]
		},
		{
			"name": "城镇-木结构",
			"data": [0,0,0,0,0,0]
		},
		{
			"name": "城镇-砌体结构-内框架结构",
			"data": [0,0,0,0,0,0]
		},
		{
			"name": "城镇-钢筋混凝土结构-单跨框架",
			"data": [0,0,0,0,0,0]
		},
		{
			"name": "城镇-钢结构",
			"data": [0,0,0,0,0,0]
		},
		{
			"name": "城镇-砌体结构-底部框架-抗震墙结构",
			"data": [0,0,0,0,0,0]
		},
		{
			"name": "城镇-钢筋混凝土结构",
			"data": [0,0,0,0,0,0]
		},
		{
			"name": "城镇-砌体结构",
			"data": [0,0,0,0,0,0]
		},
		{
			"name": "城镇-其它",
			"data": [0,0,0,0,0,0]
		},
	];
	let dataYData2 = [
		{
			"name": "农村-钢结构",
			"data": [0,0,0,0,0,0]
		},
		{
			"name": "农村-钢筋混凝土结构",
			"data": [0,0,0,0,0,0]
		},
		{
			"name": "农村-窑洞",
			"data": [0,0,0,0,0,0]
		},
		{
			"name": "农村-混杂结构",
			"data": [0,0,0,0,0,0]
		},
		{
			"name": "农村-砌体结构-其它",
			"data": [0,0,0,0,0,0]
		},
		{
			"name": "农村-土木/石木结构",
			"data": [0,0,0,0,0,0]
		},
		{
			"name": "农村-砌体结构-底部框架-抗震墙结构",
			"data": [0,0,0,0,0,0]
		},
		{
			"name": "农村-木（竹）结构",
			"data": [0,0,0,0,0,0]
		},
		{
			"name": "农村-砌体结构",
			"data": [0,0,0,0,0,0]
		},
		{
			"name": "农村-其它",
			"data": [0,0,0,0,0,0]
		}
	]
	let dataTitle;
	let dataYData;
	if(type=="城镇"){
		dataTitle = dataY1;
		dataYData = dataYData1;
	}else{
		dataTitle = dataY2;
		dataYData = dataYData2;
	}
	for (let key in data) {
		if(dataX.indexOf(key) > -1){
			for (let i = 0; i < dataYData.length; i++) {
				for(let j = 0; j < data[key].length; j++){
					if(dataYData[i].name == data[key][j].jglx){
						dataYData[i].data[dataX.indexOf(key)] = data[key][j].jzmj;
					}
				}
			}
		}
	}
	let option5 = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				// Use axis to trigger tooltip
				type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
			}
		},
		legend: {
			top: 10,
			itemWidth: 6,
			itemHeight: 6,
			textStyle: {
				color: 'white',
				fontSize: 12
			},
			padding: [0, 1, 8, 0],
			width: "100%"
		},
		grid: {
			left: '0',
			right: '0',
			bottom: '0',
			top: 100,
			containLabel: true
		},
		xAxis: {
			type: 'value',
			axisLabel: {
				color: "white"
			},
			splitLine: {
				show: false
			},
			max: function(value) {
				return value.max - 20;
			}
		},
		yAxis: {
			type: 'category',
			data: dataX,
			axisLabel: {
				color: "#8FADCC"
			},
			splitLine: {
				show: false
			},
			// name: "单位/万m2",
			// nameTextStyle: {
			// 	color: '#8FADCC',
			// },
			//nameLocation: "end"
		},
		series: [{
			name: dataTitle[0],
			type: 'bar',
			stack: 'total',
			/* label: {
			  show: true
			}, */
			emphasis: {
				focus: 'series'
			},
			data: dataYData[0].data,
			barWidth: 4,
			itemStyle: {
				normal: {
					color: "#0080FF"
				},
			},
		},
			{
				name: dataTitle[1],
				type: 'bar',
				stack: 'total',
				/* label: {
                  show: true
                }, */
				emphasis: {
					focus: 'series'
				},
				data: dataYData[1].data,
				barWidth: 4,
				itemStyle: {
					normal: {
						color: "#4CC3FF"
					},
				},
			},
			{
				name:  dataTitle[2],
				type: 'bar',
				stack: 'total',
				/* label: {
                  show: true
                }, */
				emphasis: {
					focus: 'series'
				},
				data: dataYData[2].data,
				barWidth: 4,
				itemStyle: {
					normal: {
						color: "#7FEAFF"
					},
				},
			},
			{
				name: dataTitle[3],
				type: 'bar',
				stack: 'total',
				// label: {
				//   show: true
				// },
				emphasis: {
					focus: 'series'
				},
				data: dataYData[3].data,
				barWidth: 4,
				itemStyle: {
					normal: {
						color: "#40FFFF"
					},
				},
			},
			{
				name: dataTitle[4],
				type: 'bar',
				stack: 'total',
				/* label: {
                  show: true
                }, */
				emphasis: {
					focus: 'series'
				},
				data:  dataYData[4].data,
				barWidth: 4,
				itemStyle: {
					normal: {
						color: "#00FFAA"
					},
				},
			},
			{
				name: dataTitle[5],
				type: 'bar',
				stack: 'total',
				/* label: {
                  show: true
                }, */
				emphasis: {
					focus: 'series'
				},
				data: dataYData[5].data,
				barWidth: 4,
				itemStyle: {
					normal: {
						color: "#00FF55"
					},
				},
			},
			{
				name: dataTitle[6],
				type: 'bar',
				stack: 'total',
				/* label: {
                  show: true
                }, */
				emphasis: {
					focus: 'series'
				},
				data: dataYData[6].data,
				barWidth: 4,
				itemStyle: {
					normal: {
						color: "#B7FF26"
					},
				},
			},
			{
				name: dataTitle[7],
				type: 'bar',
				stack: 'total',
				/* label: {
                  show: true
                }, */
				emphasis: {
					focus: 'series'
				},
				data: dataYData[7].data,
				barWidth: 4,
				itemStyle: {
					normal: {
						color: "#FFFF26"
					},
				},
			},
			{
				name: dataTitle[8],
				type: 'bar',
				stack: 'total',
				/* label: {
                  show: true
                }, */
				emphasis: {
					focus: 'series'
				},
				data: dataYData[8].data,
				barWidth: 4,
				itemStyle: {
					normal: {
						color: "#FFDB26"
					},
				},
			},
			{
				name: dataTitle[9],
				type: 'bar',
				stack: 'total',
				// label: {
				//   show: true
				// },
				emphasis: {
					focus: 'series'
				},
				data:  dataYData[9].data,
				barWidth: 4,
				itemStyle: {
					normal: {
						color: "#FFB44C"
					},
				},
			}
		]
	};
	setOptions(ele, option5)
}



export var option2 = {
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'shadow'
		}
	},
	//legend: {},
	grid: {
		left: '0',
		right: '0',
		bottom: '0',
		top: '15',
		containLabel: true
	},
	xAxis: {
		type: 'value',
		//boundaryGap: [0, 1],
		axisLabel: {
			color: "white"
		},
		splitLine: {
			show: false
		},
		show: true,
		// max: function (value) {
		//     return value.max - 5;
		// }
	},
	yAxis: {
		type: 'category',
		//data: ['特大桥', '大桥', '中桥', '小桥', '涵洞'],
		data: [],
		axisLabel: {
			color: "white"
		},


	},
	series: [{
		type: 'bar',
		color: "#7FEAFF",
		//data: [26, 25, 22, 28, 30],
		data: [],
		barWidth: 4
	}]
};


export function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k) {
	// 计算
	let midRatio = (startRatio + endRatio) / 2;

	let startRadian = startRatio * Math.PI * 2;
	let endRadian = endRatio * Math.PI * 2;
	let midRadian = midRatio * Math.PI * 2;

	// 如果只有一个扇形，则不实现选中效果。
	if (startRatio === 0 && endRatio === 1) {
		isSelected = false;
	}

	// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
	k = typeof k !== 'undefined' ? k : 1 / 3;

	// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
	let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
	let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;

	// 计算高亮效果的放大比例（未高亮，则比例为 1）
	let hoverRate = isHovered ? 1.05 : 1;

	// 返回曲面参数方程
	return {
		u: {
			min: -Math.PI,
			max: Math.PI * 3,
			step: Math.PI / 32,
		},

		v: {
			min: 0,
			max: Math.PI * 2,
			step: Math.PI / 20,
		},

		x: function(u, v) {
			if (u < startRadian) {
				return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
			}
			if (u > endRadian) {
				return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
			}
			return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
		},

		y: function(u, v) {
			if (u < startRadian) {
				return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
			}
			if (u > endRadian) {
				return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
			}
			return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
		},

		z: function(u, v) {
			if (u < -Math.PI * 0.5) {
				return Math.sin(u);
			}
			if (u > Math.PI * 2.5) {
				return Math.sin(u);
			}
			return Math.sin(v) > 0 ? 1 : -1;
		},
	};
}

function getPie3D(pieData, internalDiameterRatio) {
	let series = [];
	let sumValue = 0;
	let startValue = 0;
	let endValue = 0;
	let legendData = [];
	let k =
		typeof internalDiameterRatio !== 'undefined'
			? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
			: 1 / 3;
	for (let i = 0; i < pieData.length; i++) {
		sumValue += pieData[i].value;

		let seriesItem = {
			name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
			type: 'surface',
			parametric: true,
			wireframe: {
				show: false,
			},
			pieData: pieData[i],
			pieStatus: {
				selected: false,
				hovered: false,
				k: 1 / 10,
			},
		};
		if (typeof pieData[i].itemStyle != 'undefined') {
			let itemStyle = {};
			typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
			typeof pieData[i].itemStyle.opacity != 'undefined'
				? (itemStyle.opacity = pieData[i].itemStyle.opacity)
				: null;

			seriesItem.itemStyle = itemStyle;
		}
		series.push(seriesItem);
	}
	for (let i = 0; i < series.length; i++) {
		endValue = startValue + series[i].pieData.value;

		series[i].pieData.startRatio = startValue / sumValue;
		series[i].pieData.endRatio = endValue / sumValue;
		series[i].parametricEquation = getParametricEquation(
			series[i].pieData.startRatio,
			series[i].pieData.endRatio,
			false,
			false,
			k,
			series[i].pieData.value
		);

		startValue = endValue;

		legendData.push(series[i].name);
	}

	return {
		// backgroundColor: '#163561',
		// legend: {
		// 	textStyle: {
		// 		color:'#FFFFFF',
		// 		fontSize: 18,
		// 	},
		// 	data: legendData,
		// 	formatter: (params) => {
		// 		return params;
		// 	},
		// },
		xAxis3D: {},
		yAxis3D: {},
		zAxis3D: {},
		grid3D: {
			viewControl: {
				autoRotate: false,
				projection: 'perspective', // 先设置为这个perspective
				distance: 110,
				alpha: 30,
				beta: 30,
			},
			left: 'center',
			width: '100%',
			show: false,
			boxHeight: 10,
		},
		series: series,
	};
}








//export const wid = 50
export const wid = 20
export const offsetY = Math.tan(Math.PI / 9) * (wid / 2)
export const CubeLeft = echarts.graphic.extendShape({
	shape: {
		x: 0,
		y: 0
	},
	buildPath: function(ctx, shape) {
		const xAxisPoint = shape.xAxisPoint
		const c0 = [shape.x, shape.y + offsetY - 1]
		const c1 = [shape.x - wid / 2, shape.y]
		const c2 = [shape.x - wid / 2, xAxisPoint[1] - offsetY]
		const c3 = [shape.x, xAxisPoint[1] - 1]
		ctx
			.moveTo(c0[0], c0[1])
			.lineTo(c1[0], c1[1])
			.lineTo(c2[0], c2[1])
			.lineTo(c3[0], c3[1])
			.closePath()
	}
})
// 绘制右侧面
export const CubeRight = echarts.graphic.extendShape({
	shape: {
		x: 0,
		y: 0
	},
	buildPath: function(ctx, shape) {
		const xAxisPoint = shape.xAxisPoint
		const c0 = [shape.x, shape.y + offsetY - 1]
		const c1 = [shape.x, xAxisPoint[1] - 1]
		const c2 = [shape.x + wid / 2, xAxisPoint[1] - offsetY]
		const c3 = [shape.x + wid / 2, shape.y]
		ctx
			.moveTo(c0[0], c0[1])
			.lineTo(c1[0], c1[1])
			.lineTo(c2[0], c2[1])
			.lineTo(c3[0], c3[1])
			.closePath()
	}
})
// 绘制顶面
export const CubeTop = echarts.graphic.extendShape({
	shape: {
		x: 0,
		y: 0
	},
	buildPath: function(ctx, shape) {
		const c1 = [shape.x, shape.y + offsetY - 1]
		const c2 = [shape.x + wid / 2, shape.y]
		const c3 = [shape.x, shape.y - offsetY + 1]
		const c4 = [shape.x - wid / 2, shape.y]
		ctx
			.moveTo(c1[0], c1[1])
			.lineTo(c2[0], c2[1])
			.lineTo(c3[0], c3[1])
			.lineTo(c4[0], c4[1])
			.closePath()
	}
})

// 注册三个面图形
echarts.graphic.registerShape('CubeLeft', CubeLeft)
echarts.graphic.registerShape('CubeRight', CubeRight)
echarts.graphic.registerShape('CubeTop', CubeTop)

export let barColor = '#387EE7'
export let barGridientColor = '#122A54'
export let shadowColor = 'rgba(0,255,248,1)'
export let shadowBlur = 50

export let renderItem = (params, api) => {
	const location = api.coord([api.value(0), api.value(1)])
	location[0] = location[0] + wid * 0
	const xlocation = api.coord([api.value(0), 0])
	xlocation[0] = xlocation[0] + wid * 0
	return {
		type: 'group',
		children: [{
				type: 'CubeLeft',
				shape: {
					x: location[0],
					y: location[1],
					xAxisPoint: xlocation
				},
				style: {
					fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 1,
							color: barColor
						},
						{
							offset: 0,
							color: barGridientColor
						}
					]),

					stroke: shadowColor,
					lineWidth: 1
				}
			},
			{
				type: 'CubeRight',
				shape: {
					x: location[0],
					y: location[1],
					xAxisPoint: xlocation
				},
				style: {
					fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 1,
							color: barColor
						},
						{
							offset: 0,
							color: barGridientColor
						}
					]),

					stroke: shadowColor,
					lineWidth: 1
				}
			},
			{
				type: 'CubeTop',
				shape: {
					x: location[0],
					y: location[1],
					xAxisPoint: xlocation
				},
				style: {
					fill: shadowColor,
					stroke: shadowColor,
					lineWidth: 1
				}
			}
		],
	}
}

export let option3 = {
	// backgroundColor: 'rgba(0,0,0,.8)',
	grid: {
		left: '0',
		right: '0',
		top: '40',
		bottom: '0',
		containLabel: true
	},
	xAxis: {
		type: 'category',
		show: true,
		//data: ['一幅路', '两幅路', '三幅路', '四幅路', '其他'],
		data:[],
		axisLabel: {
			color: "white"
		},

	},
	yAxis: {
		type: 'value',
		show: true,
		axisLabel: {
			color: "white"
		},
		splitLine: {
			show: false
		},
	},
	tooltip: {
		show: true,
		padding: [5, 10],
		position: (point, params, dom, rect, size) => {
			let y = size.contentSize[1];
			return [rect.x, rect.y - y - 30];
		},
		formatter: function(params) {
			let returnData = '<div style="background:url(' + `@/assets/imgs/szzs.png` +
				');background-attachment: fixed;background-size: cover;padding:5px 10px;">';
			returnData += `<span style="`;
			returnData += `color: #fff;`;
			returnData += `">${params.name}:</span>`;
			returnData += `<span style="`;
			returnData += `color: #fff;`;
			returnData += `">${params.data}</span>`;
			returnData += '</div>';
			return returnData;
		},
		extraCssText: 'background:transparent;padding:0px;box-shadow: 0px 0px 0px 0px rgba(0,0,0,1);border:none;',

	},
	series: [{
			type: 'custom',
			renderItem: renderItem,
			//data: [2000, 5000, 4000, 1000, 100],
			data:[]
		},
		{
			type: 'bar',
			barWidth: wid + 2,
			itemStyle: {
				color: 'rgba(255,255,255,0.3)',
			},
			//data: [2000, 5000, 4000, 1000, 100]
			data:[]
		}
	]
}


/* 无底面立体柱状图 */
export const NoffsetX = 11; //bar宽
export const NoffsetY = 6; //倾斜角度
// 绘制左侧面
export const NCubeLeft = echarts.graphic.extendShape({
	shape: {
		x: 0,
		y: 0,
	},
	buildPath: function(ctx, shape) {
		// 会canvas的应该都能看得懂，shape是从custom传入的
		const xAxisPoint = shape.xAxisPoint;
		// console.log(shape);
		const c0 = [shape.x, shape.y];
		const c1 = [shape.x - NoffsetX, shape.y - NoffsetY];
		const c2 = [xAxisPoint[0] - NoffsetX, xAxisPoint[1] - NoffsetY];
		const c3 = [xAxisPoint[0], xAxisPoint[1]];
		ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
	},
});
// 绘制右侧面
export const NCubeRight = echarts.graphic.extendShape({
	shape: {
		x: 0,
		y: 0,
	},
	buildPath: function(ctx, shape) {
		const xAxisPoint = shape.xAxisPoint;
		const c1 = [shape.x, shape.y];
		const c2 = [xAxisPoint[0], xAxisPoint[1]];
		const c3 = [xAxisPoint[0] + NoffsetX, xAxisPoint[1] - NoffsetY];
		const c4 = [shape.x + NoffsetX, shape.y - NoffsetY];
		ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
	},
});
// 绘制顶面
export const NCubeTop = echarts.graphic.extendShape({
	shape: {
		x: 0,
		y: 0,
	},
	buildPath: function(ctx, shape) {
		const c1 = [shape.x, shape.y];
		const c2 = [shape.x + NoffsetX, shape.y - NoffsetY]; //右点
		// const c3 = [shape.x, shape.y - offsetX];
		const c3 = [shape.x, shape.y - NoffsetY * 2];
		const c4 = [shape.x - NoffsetX, shape.y - NoffsetY];
		ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
	},
});
// 注册三个面图形
echarts.graphic.registerShape('NCubeLeft', NCubeLeft);
echarts.graphic.registerShape('NCubeRight', NCubeRight);
echarts.graphic.registerShape('NCubeTop', NCubeTop);
export let nColorArr = [
	/* ["#12D5AF"],#B6EFFF,#06738A,#2BBDE7
	["#0BC19D", "rgba(13,8,16,0)"],
	["#68EFD4", "rgba(14,185,151,0)"], */
	["#B6EFFF"],
	["#06738A", "#06738A"],
	["#2BBDE7", "#2BBDE7"]
]
