ecahrs 柱状图+饼图+点击事件

最新推荐文章于 2022-11-04 15:44:58 发布

万德佛

最新推荐文章于 2022-11-04 15:44:58 发布

阅读量856

点赞数

分类专栏：前端 echarts 文章标签：前端 echarts

本文链接：https://blog.csdn.net/qq_39251440/article/details/113393320

版权

前端同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

echarts

16 篇文章 0 订阅

订阅专栏

饼图可根据个人需求来删减，以下是根据官网案例修改，仅供参考~

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>混合图型双饼图,且自定义是否显示柱状图legend,带点击事件</title>
	</head>
	<body>
		<div id="echarsID" style="height: 400px;"></div>
	</body>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js" type="text/javascript" charset="utf-8"></script>
	<!-- echars版本可以使用自己的 -->
	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.js" type="text/javascript" charset="utf-8"></script>
	<script>
		function showEchars() {
			//x坐标显示name
			var xAxisList = ['line1', 'line2', 'line3', 'line4', 'line5'];
			//柱状图value
			var seriesBarList = ['10', '23', '33', '12', '4'];
			//良品与不良品饼图
			var seriesPeiListOKAndNg = [{
				name: '良品(比例)',
				value: '60'
			}, {
				name: '不良品(比例)',
				value: '40'
			}];
			//柱状图参数对应饼图
			var seriesPeiListNgInfo = [{
				name: 'line1',
				value: '10'
			}, {
				name: 'line2',
				value: '23'
			}, {
				name: 'line3',
				value: '33'
			}, {
				name: 'line4',
				value: '12'
			}, {
				name: 'line5',
				value: '4'
			}];
			//legendList 可以不要,根据个人需求来,去除的话就是根据series 下的name来显示图例,图例如果不需要就设定为show:false
			//显示柱状图 legend
			//var legendList = ['不良数量','良品(比例)', '不良品(比例)'].concat(xAxisList);
			//不显示柱状图 legend
			var legendList = ['良品(比例)', '不良品(比例)'].concat(xAxisList);
			let myChart = echarts.init(document.getElementById('echarsID'));
			let option = {
				title: {
					text: '不良详细信息'
				},
				tooltip: {
					trigger: 'item',
					axisPointer: { // 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					},
					formatter: function(params) {
						var result = params.name + "<br>";
						if (params.value != null && params.componentSubType == 'pie') {
							result += params.marker + " " + params.seriesName + " : " + params.value + "</br>";
						} else {
							result += params.marker + " " + params.seriesName + " : " + params.value + "</br>";
						}
						return result;
					}
				},
				legend: {
					// left:'right',
					"right": "4%",
					"top": '12%',
					data: legendList,
					//show:false
				},
				xAxis: {
					type: 'category',
					data: xAxisList,
					axisTick: {
						alignWithLabel: true
					}
				},
				yAxis: {
					type: 'value'
				},
				grid: {//边距
					left: '4%',
					right: '4%',
					bottom: '3%',
					top: '40%',
					containLabel: true
				},
				//颜色
				color: ["#62858C", "#7A9994", "#98B3A5", "#B8CCBB", "#DCE6DA"],
				series: [{
						name: '不良数量',//显示在tooltip 里的名称,但也可以对应legend并显示图例
						type: 'bar',
						barWidth: '50', //柱状图宽度
						//设置柱状图的颜色
						itemStyle: {
							normal: {
								color: function(params) {
									//自定义 设置柱状图不同颜色
									var colorList = ["#62858C", "#7A9994", "#98B3A5", "#B8CCBB", "#DCE6DA"];
									return colorList[params.dataIndex]
								},
								//barBorderWidth: 1,//柱状图宽度
								barBorderRadius: 2,//柱状图的圆角设置
								label: {
									show: true,//柱状图value值显示
									position: 'insideTop', //靠顶部显示
									color: "#fff"  //字体颜色
								}
							}
						},
						data: seriesBarList
					},
					{
						name: '数量',//显示在tooltip 里的名称
						type: 'pie',//类型-饼图
						id: 'piea',//两个饼图id不能一样
						radius: '20%',//设置饼图大小
						color: ["#EFC94C", "#588F27"],//自定义  饼图颜色设置
						center: ['20%', '20%'], //饼图显示位置
						data: seriesPeiListOKAndNg,
						label: {
							formatter: '{b} : {c} ({d}%)'  //显示label
						}
					},
					{
						name: '数量',
						type: 'pie',
						id: 'pie',
						radius: '20%',
						center: ['45%', '20%'],
						data: seriesPeiListNgInfo,
						label: {
							formatter: '{b} : {c} ({d}%)'
						}
					}
				]
			};
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
			myChart.off('click');
			myChart.on('click', function(e) {
				console.log(e)
			});
		}
		showEchars();
	</script>
</html>

效果图:

万德佛

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ecahrs 柱状图+饼图+点击事件

饼图可根据个人需求来删减，以下是根据官网案例修改，仅供参考~<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>混合图型双饼图,且自定义是否显示柱状图legend,带点击事件</title> </head> <body> <div id="echarsID" style="height: 400px;">&lt
复制链接

扫一扫