Echarts实现图表下钻

最新推荐文章于 2025-04-30 11:08:29 发布

原创最新推荐文章于 2025-04-30 11:08:29 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

Echarts 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用Echarts实现图表的下钻功能，通过drillDown.js处理逻辑，结合CategodyController.java进行数据交互，创建丰富的图表交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片界面

<!DOCTYPE html>
<html style="height: 100%">
   <head><meta charset="utf-8"> </head>
   <body style="height: 100%; margin: 0">
      <div style="margin-left:40%;margin-top:2%">
        <button id='return-button' value=''>back to things</button>       
      </div>
      <div id="container" style="height: 50%;width: 50%"></div>
      <!-- 引入echart-all.js 也可以使用项目自己有的。该成对应路径即可-->
      <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
	  <!-- 下面创建的js文件 -->
      <script type="text/javascript" src="./drillDown.js"></script>
      <script type="text/javascript" >
	  var dom = document.getElementById("container");
	
	  $('#return-button').on('click',function(){
	  	  var myChart = echarts.init(dom);
		  var option = drillDown.getOption();
		  $.ajax({
		  	type:'get',
		  	url:"/category/getAllCategody.do",
		  	dataType : 'json',
            success : function (msg){
                 option.xAxis.data = msg.xAxis;
                 //option.series[0].data = msg.yAxis[0];
                 option.series[0].data = msg.yAxis;
                 myChart.setOption(option, true);
            }
		  });
	  }
	  </script>
   </body>
</html>

drillDown.js

var drillDown = {
    getOption : function () {
        var option = null;
        option = {
             title: {
                 text: 'Basic drilldown',
                 left: 'center'
                 },
             legend: {
                 left: 'left',
                 data: ['category']
             },
             xAxis: {
                 type: 'category',
                 data: ['Animals', 'Fruits', 'Cars']
             },               
             yAxis: {
                  type: 'value'
             },
             series: [
                {
                   name: 'category',
                   type: 'bar',
                   
                 }
                ]
             };
             $.ajax(
             type : 'get',
             //url : interfaceUrl + '&category=' + object.name, // 此处替换成写逻辑的地方,下面是我自己的
             url: "/category/getAllCategory.do",
             dataType : 'json',
             success : function (msg){
                 option.xAxis.data = msg.xAxis;
                 //option.series[0].data = msg.yAxis[0];
                 option.series[0].data = msg.yAxis;
                 myChart.setOption(option, true);
             }
         );
             return option;
    },
    initChart : function (myChart,option) {
        myChart.setOption(option);
        myChart.on('click',function(object){
             
        // 初始化
        var myChart = echarts.init(dom);

         $.ajax(
             type : 'get',
             //url : interfaceUrl + '&category=' + object.name, // 此处替换成写逻辑的地方,下面是我自己的
             url: "/category/getAllCategory.do?product="+object.product
             dataType : 'json',
             success : function (msg){
                 option.xAxis.data = msg.xAxis;
                 //option.series[0].data = msg.yAxis[0];
                 option.series[0].data = msg.yAxis;
                 myChart.setOption(option, true);
             }
         );
         
        myChart.setOption(option, true);
    });
  },
};

处理逻辑

CategodyController.java

	@Controller
	@RequestMapping("/category")
	public class CategoryController{
		@RequestMapping("getAllCategory.do")
		public Map<String,Object> getCategory(){
			Map<String,Object> map = new HashMap<String,Object>();
			ResultBean result = getAllCategroy();
			result.put("xAxis",result.getCategory());
			result.put("yAixs",reulst.getValue());
			return result;
		}
		
		@RequestMapping("getCategoryByName.do")
		public Map<String,Object> getCategoryByName(String product){
			Map<String,Object> map = new HashMap<String,Object>();
			ResultBean result = getAllCategroyByName(product);
			result.put("xAxis",result.getCategory());
			result.put("yAixs",reulst.getValue());
			return result;
		}

		public ResultBean getAllCategory(){
			
			ResultBean result = new ResultBean();
			//查询要显示的数据 格式按 (商品项),这里根据自己的具体需要实现
			String[] names = getNames();
			//查询要显示的数据 数量，跟上面是一一对应的，这里根据自己的具体需要实现
			String[] values = getValues();
			result.setCategory(names);
			result.setValue(values);
		}
		public class ResultBean{
			private String[] categories;
			private String[] values;
			public String[] getCategory(){
				return this.cateGories;
			}
			
			public String[] getValue(){
				return this.values;
			}
			public void setCategory(String[] category){
				this.category = category;
			}
			public void setValue(String[] values){
				this.values= values;
			}
		}
	}