实现echarts前后台交互

最新推荐文章于 2025-05-20 17:40:04 发布

原创最新推荐文章于 2025-05-20 17:40:04 发布 · 3.1k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #java

java 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍使用ECharts实现南丁格尔玫瑰图的过程，包括前端HTML、JavaScript代码配置及后端Java数据处理，涵盖数据获取、图表配置及响应式设计。

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

前端

先把官方的demo拿过来，唯一要变的就是data中的值

option = {
    title : {
        text: '南丁格尔玫瑰图',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        x : 'center',
        y : 'bottom',
        data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true,
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'面积模式',
            type:'pie',
            radius : [30, 110],
            center : ['75%', '50%'],
            roseType : 'area',
            data:[
                {value:10, name:'rose1'},
                {value:5, name:'rose2'},
                {value:15, name:'rose3'},
                {value:25, name:'rose4'},
                {value:20, name:'rose5'},
                {value:35, name:'rose6'},
                {value:30, name:'rose7'},
                {value:40, name:'rose8'}
            ]
        }
    ]
};

HTML

div中需要设置宽高，如何没有好像出不来效果

<div id=“myChart” style="width=400px;height=300px;"></div>

JS

//需要在前端页面调用该方法就行
function getCharts (){
var mychart = echarts.init(document.getElementById("myChart"));
	var option = {
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        x : 'center',
        y : 'bottom',
        data:[]
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true,
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'面积模式',
            type:'pie',
            radius : [30, 110],
            center : ['75%', '50%'],
            roseType : 'area',
            data:[ ]
        }
    ]
	}
	mychart.setOption(option);
	window.addEventListener("resize",function(){
	mychart.resize();
	});
//中间写ajax请求，在请求成功的success中需要把后台的值放进data中
success:function(result){
	var names=[];
	var beWorth= [];
	$.each(result,function(key,values){
		names.push(values.name);
			var obj = new object();
			obj.name = values.name;
			obj.value = values.value;
			beWorth.push(obj);
	)}
	mychart.setOption({
		legend:{
			data:names
			},
		series:{
			name:'XXXX',
			data:beWorth
			}
	})
}
}

JAVA

在查询时首先要去重，并且统计个数，我在下面简单做一个表的查询，你们可以根据自己定义的表进行修改

service层

public List<对象> getName(){
	String sql = "select distinct 字段名(taskname) from 表";
	//把查询的list结果返回出去就好
}
public Integer getCount(String name){
	String sql = "select count(1) from 表 where  taskname = ?";
	//查询每个taskname的数量
}


controller层
public void getEchart(){
	Map<String,Object> map = new HashMap<>();
	List<Map<String,Object>>  list = new ArrayList<Map<String,Object>>();
	List<对象> list = service.getName();
	for(对象 obj: list){
		String dataName = obj.getStr(字段名);
		Integer dataCount = service.getCount(dataName );
		if(dataCount != 0 ){
			map.put("name",dataName );
			map.put("value",dataCount );
		}
		list.add(map);
	}
	//最后只要把list返回出去就好了
}

有看不懂的可以提出来，出错的地方可以指出来。