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