// 路径配置
require.config({
paths: {
echarts: '${ctx}/js/other/echart'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/pie', // 使用柱状图就加载bar模块,按需加载
'echarts/chart/bar'
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
var echart = ec.init(document.getElementById('echart'));
option = {
title: {
text: '统计',
subtext: '按照类别统计',
x: 'center'
},
//这里控制鼠标悬浮显示百分比
tooltip: {
trigger: 'item',
formatter: "{a} {b} : {c}次 ({d}%)"
},
toolbox: {
show: true,
feature: {
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
orient: 'vertical',
x: 'left',
data: [
<c:forEach items="${repairStat}" var="map" varStatus="sts">
<c:choose>
<c:when test="${map.key != null}">'${map.key}'</c:when>
<c:otherwise>'未知项点'</c:otherwise>
</c:choose>
<c:if test="${not sts.last}">, </c:if>
</c:forEach>
]
},
calculable: false,
series: [
{
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
selectedMode: 'multiple',
data: [
<c:forEach items="${repairStat}" var="map" varStatus="sts">
{
value: '${map.value}',
name: <c:choose><c:when test="${map.key != null}">'${map.key}'
</c:when><c:otherwise>'未知项点'</c:otherwise></c:choose>
}
<c:if test="${not sts.last}">, </c:if>
</c:forEach>
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
//下面控制显示饼状图上百分比
normal:{
label:{
show: true,
formatter: '{b} : {c}次 ({d}%)'
},
labelLine :{show:true}
}
}
}
]
};
echart.setOption(option); // 为echarts对象加载数据
}
);