echarts 实现饼状图和柱状图

1.引入所需要的js      （Java开发交流群 677807540   大家可以一起讨论技术欢迎加入  (需要js可以加群下载)）

<script src="${basePath}/js/echarts/echarts.js"></script>
<script src="${basePath}/js/echarts/basisdataEchats.js"></script>

2.其实echsrts封装的非常好 我们只需要  上传数据，填写颜色等 改改设置就ok了，这里只需要上传数据。

 $("#barpie").basisdataEcharts({   //这里填写要放的div的id就可以了
                xdata: ["无学历", "小学", "初中", "高中","中专","中专函授","通过培训达到中专水平","大专","成人大专","本科","成人本科","研究生","博士"],
                <c:if test="${not empty provinceList[0]}">
                bardata: [${provinceList[0].ILLITERACY},
                    ${provinceList[0].PRIMARY_SCHOOL},
                    ${provinceList[0].MIDDLE_SCHOOL},
                    ${provinceList[0].HIGH_SCHOOL},
                    ${provinceList[0].SPECIAL_SCHOOL},
                    ${provinceList[0].SPEC_SCH_THROU_TRAIN},
                    ${provinceList[0].COR_SPECIAL_SCHOOL},
                    ${provinceList[0].JUNIOR_COLLEGE},
                    ${provinceList[0].ADULT_COLLEGE},
                    ${provinceList[0].BACHELOR},
                    ${provinceList[0].ADULT_ADUATE_COURSE},
                    ${provinceList[0].MASTER},
                    ${provinceList[0].DOCTOR}],
                piedata:[{value:${provinceList[0].ILLITERACY}, name:'无学历'},
                    {value:${provinceList[0].PRIMARY_SCHOOL}, name:'小学'},
                    {value:${provinceList[0].MIDDLE_SCHOOL}, name:'初中'},
                    {value:${provinceList[0].HIGH_SCHOOL}, name:'高中'},
                    {value:${provinceList[0].SPECIAL_SCHOOL}, name:'中专'},
                    {value:${provinceList[0].SPEC_SCH_THROU_TRAIN}, name:'中专函授'},
                    {value:${provinceList[0].COR_SPECIAL_SCHOOL}, name:'通过培训达到中专水平'},
                    {value:${provinceList[0].JUNIOR_COLLEGE}, name:'大专'},
                    {value:${provinceList[0].ADULT_COLLEGE}, name:'成人大专'},
                    {value:${provinceList[0].BACHELOR}, name:'本科'},
                    {value:${provinceList[0].ADULT_ADUATE_COURSE}, name:'成人本科'},
                    {value:${provinceList[0].MASTER}, name:'研究生'},
                    {value:${provinceList[0].DOCTOR}, name:'博士'}
                   
                    
                    ]
                </c:if>
		    <c:if test="${not empty AllSum[0]}">
            bardata: [${AllSum[0].ILLITERACY},
                ${AllSum[0].PRIMARY_SCHOOL},
                ${AllSum[0].MIDDLE_SCHOOL},
                ${AllSum[0].HIGH_SCHOOL},
                ${AllSum[0].SPECIAL_SCHOOL},
                ${AllSum[0].SPEC_SCH_THROU_TRAIN},
                ${AllSum[0].COR_SPECIAL_SCHOOL},
                ${AllSum[0].JUNIOR_COLLEGE},
                ${AllSum[0].ADULT_COLLEGE},
                ${AllSum[0].BACHELOR},
                ${AllSum[0].ADULT_ADUATE_COURSE},
                ${AllSum[0].MASTER},
                ${AllSum[0].DOCTOR}],
            piedata:[{value:${AllSum[0].ILLITERACY}, name:'无学历'},
                {value:${AllSum[0].PRIMARY_SCHOOL}, name:'小学'},
                {value:${AllSum[0].MIDDLE_SCHOOL}, name:'初中'},
                {value:${AllSum[0].HIGH_SCHOOL}, name:'高中'},
                {value:${AllSum[0].SPECIAL_SCHOOL}, name:'中专'},
                {value:${AllSum[0].SPEC_SCH_THROU_TRAIN}, name:'中专函授'},
                {value:${AllSum[0].COR_SPECIAL_SCHOOL}, name:'通过培训达到中专水平'},
                {value:${AllSum[0].JUNIOR_COLLEGE}, name:'大专'},
                {value:${AllSum[0].ADULT_COLLEGE}, name:'成人大专'},
                {value:${AllSum[0].BACHELOR}, name:'本科'},
                {value:${AllSum[0].ADULT_ADUATE_COURSE}, name:'成人本科'},
                {value:${AllSum[0].MASTER}, name:'研究生'},
                {value:${AllSum[0].DOCTOR}, name:'博士'}
               
                
                ]
            </c:if>
            });
	     
			});

3.显示的样式