用ajax实现echarts的可视化

用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} 
{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){ } })

你可能感兴趣的:(js,jsp,ajax,echarts)