自定义boolbox按钮

梦兮呀

于 2024-01-01 17:31:01 发布

阅读量384

点赞数 11

文章标签： echarts

本文链接：https://blog.csdn.net/isluya/article/details/135326907

版权

自定义toolbox按钮，实现点击时将图表中最后一个元素删除的功能。完成后将代码写入下面的方框中。

点击前：

点击后：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自定义boolbox按钮</title>
		<script src="js/echarts.min.js"></script>
	</head>
	<body>
		<div id="main" style="width: 600px;height:400px;"></div>
				
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			var option = {
			        title: {
			          text: '销量图'
			        },
					//图例
			        legend: {
			          data: ['销量']
			        },
					//文本标签
					label:{
						show:true,
						color: 'yellow',
					},
					toolbox: {
					        feature: {
					            myTool1: {
					                show: true,
					                title: '删除最后一个元素',
					                icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',		               
									 onclick: function (params) {
					                    var option = myChart.getOption();
					                    var data = option.series[0].data;
										var data2 = option.xAxis[0].data;
										data2.pop();
					                    data.pop();
					                    myChart.setOption(option);
					                }
					            }
					          
					        }
					    },
			        xAxis: {
			          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
			        },
			        yAxis: {},
			        series: [
			          {
			            name: '销量',
			            type: 'bar',
			            data: [5, 20, 36, 10, 10, 20]
			          }
			        ]
			      };
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
		</script>
	</body>
</html>