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.显示的样式

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值