echarts 柱状图,不等分y轴,自定义y轴数据值

echarts 柱状图,不均分y轴

	/./ 定义数据最大值
	var maxRegisteredSize = 2900
	// 封装 y 轴坐标值数据
	var packageYAxis= function(obj) {
		var objData = [];
		for (var i = 0; i < obj.length; i++) {
			//封装y轴的数据值于图标位置值
			var jsonObj = {};
			jsonObj.name = obj[i];
			jsonObj.value = calculatedYSize(obj[i]);
			objData.push(jsonObj);
		}
		return objData;
	}
	// 定义数值在 y 轴中的的位置,使用比例计算该值在 y 轴中的位置 
	var calculatedYSize = function(obj) {
		// y 轴每个刻度的大小数据
		var baseNum = 100;
		// 显示在图标中的位置值
		var size = 0;
		/* * 
		*  定义y轴刻度大小为[0,50,200,500,1000,3000]
		*  每个刻度真实大小为100,
		*  在数据值小于50的时候,刻度显示位置是真实值得2倍,
		*  在数据值大于50且小于200时,(数据值-50 )/ (刻度值-50)* baseNum  + 100;
		*  以此类推,求出数据在图表中显示的位置值,
		* /
		if (obj < 50) {
			size =  obj * 2;
		} else if (obj < 200) {
			size = (obj - 50)  /(200 - 50) * baseNum  +100;
		} else if (obj < 500) {
			size = (obj - 200)  /(500 - 200) * baseNum  + 200;
		} else if (obj < 1000) {
			size = (obj - 500)/(1000 - 500) * baseNum  + 300;
		} else if (obj >= 1000) {
			var val = '';
			for (var i = 0; i < (this.maxRegisteredSize + "").length - 1; i++) {
				val += '0';
			}
			//  图表显示最大值
			var value = (parseInt((this.maxRegisteredSize + "").substr(0, 1)) + 1) + val
			// 图表显示的位置值
			size = parseInt(this.maxRegisteredSize - 1000)/(parseInt(value) - 1000) * baseNum + 400;
		}
		return size;
	}
	/* *
	*  objName : x轴的名字
	*  yValue1: y轴值1
	* yValue2 : y轴值2
	* maxRegisteredSize : 数据值,最大值
	*/
	var initOverall = function(xName, yValue1, yValue2) {
		var myChart = echarts.init(document.getElementById('pmrboxbottom'));
		option = {
			tooltip: {
				trigger: 'axis',
				formatter: function(params) {
					return params[1].axisValue + "
" + "注册量:" + params[1].data.name + "
" + "活跃量:" + params[0].data.name; } }, calculable: true, xAxis: [{ type: 'category', data: xName, axisLabel: { interval: 0, rotate: 40, textStyle: { color: '#00A9AB', fontSize: 14 } }, }], yAxis: [{ type: 'value', axisLabel: { textStyle: { color: '#00A9AB' }, formatter: function(value, index) { // Y轴的自定义刻度值,对应图上的y轴的值 if (index == 0) { value = 0 } else if (index == 1) { value = 50 } else if (index == 2) { value = 200 } else if (index == 3) { value = 500 } else if (index == 4) { value = 1000 } else if (index >= 5) { // 向上取整值,例如:2000,3000... // 显示为最大刻度的值 var val = ''; for (var i = 0; i < (this.maxRegisteredSize + "").length - 1; i++) { val += '0'; } value = (parseInt((this.maxRegisteredSize + "").substr(0, 1)) + 1) + val } return value + ''; } }, symbolSize: [0, 10] }], series: [{ name: '活跃量', type: 'bar', data: packageYAxis(yValue1), itemStyle:{ color:'#67E0E3' } }, { name: '注册量', type: 'bar', data: packageYAxis(yValue2), itemStyle:{ color:'#FE9B1A' } } ], grid: { left: 40, top: 10, right: 10, bottom: 20 } }; myChart.setOption(option); } var initBar = function() { $.ajax({ url: path, data: { }, type: "post", dataType: "json", success: (obj) => { //封装数据。 此步骤省略 //加载图表 initOverall(name, value1, value2, maxRegisteredSize); }, error: () => { } }); } initBar();

效果图:
echarts 柱状图,不等分y轴,自定义y轴数据值_第1张图片

参考链接
[1]: https://echarts.apache.org/zh/index.html
[2]: https://blog.csdn.net/qq_35501764/article/details/106328723

你可能感兴趣的:(echarts 柱状图,不等分y轴,自定义y轴数据值)