用ajax实现echarts的可视化

最新推荐文章于 2022-11-25 09:14:07 发布

原创最新推荐文章于 2022-11-25 09:14:07 发布 · 置顶 · 566 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #ajax

js 同时被 3 个专栏收录

6 篇文章

订阅专栏

jsp

2 篇文章

订阅专栏

ajax

1 篇文章

订阅专栏

本文介绍如何使用Ajax从服务器获取数据，并利用ECharts进行安置类型的统计图表展示。通过具体实例展示了Ajax请求配置及ECharts图表配置的各项参数。

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

用ajax实现echarts的可视化

后台的数据
一个list集合，后期贴图
ajax的实现

// 安置类型统计
$.ajax({
	url:"${pageContext.request.contextPath}/count/groupByResettlementType",
	date:{},
	type:"POST",
	dataType:'json',
	success:function(data){
		var Lists=data;
		var myChart = echarts.init(document.getElementById('main'));
		option = {
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: [Lists[0].resettlementType, Lists[1].resettlementType, Lists[2].resettlementType, Lists[3].resettlementType, Lists[4].resettlementType]
                },
                color:['#93d200', '#67e0e3','#ffdb5c','#ef5350','#e062ae'],
                series : [
                    {
                        name: '安置类型统计',
                        type: 'pie',
                        radius : '70%',
                        center: ['60%', '50%'],
                        data:[
                            {value:Lists[0].count, name:Lists[0].resettlementType},
                            {value:Lists[1].count, name:Lists[1].resettlementType},
                            {value:Lists[2].count, name:Lists[2].resettlementType},
                            {value:Lists[3].count, name:Lists[3].resettlementType},
                            {value:Lists[4].count, name:Lists[4].resettlementType}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
		//使用刚指定的配置项和数据显示图表
		myChart.setOption(option);
	},
	error:function(exception){
		
	}
})