柱状图加折线图 柏拉图 echarts

2024-01-08 15:24:02

在这里插入图片描述
配置项

var colors = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589']
option = {
  tooltip : {
		trigger : 'axis',
		axisPointer : { // 坐标轴指示器,坐标轴触发有效
			type : 'line' // 默认为直线,可选为:'line' | 'shadow'
		},
		formatter : function(params) {
			return params[0].name + '<br/>' + params[0].seriesName + ' : '
					+ params[0].value + '<br/>' + params[1].seriesName + ' : '
					+ (params[1].value + params[0].value);
		}
	},
legend : {
		selectedMode : false,
		data : ['数量', '百分比']
	},
	xAxis : [{
		type : 'category',
		data : ['不良品1', '不良品2', '不良品3', '不良品4', '不良品5', '不良品6']
		}, {
		type : 'category',
		show : false,
		boundaryGap : false,
		data : ['Cosco', 'CMA', 'APL', 'OOCL', 'Wanhai', 'Zim', "333"]
	}],
	yAxis : [{
				type : 'value',
				boundaryGap : [0, 0.1],
				splitLine : false
			}, {
				type : 'value',
				name : '百分比',
				axisLabel : {
					formatter : '{value} %'
				},
				splitLine : false
			}],
	series : [{
				name : '数量',
				type : 'bar',
				barCategoryGap : '0%',
				itemStyle : {
					normal : {
					  color : function(obj) {
							if (obj.dataIndex >= 0) {
								return colors[obj.dataIndex];
							}
						},
					}
				},
				data : [300, 200, 180, 150, 120, 50]
			}, {
				name : '百分比',
				type : 'line',
				xAxisIndex : 1,
				yAxisIndex : 1,
				data : [86, 90, 91, 92, 95, 98, 100]
			}

	]
};

文章来源:https://blog.csdn.net/weixin_45652891/article/details/135411228
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。