<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '',
},
tooltip: {
trigger: 'axis'
},
legend: {
data: []
},
toolbox: {
show: true,
feature: {
dataView: {show: false, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: false},
saveAsImage: {show: false}
}
},
calculable: true,
xAxis: [
{
type: 'category',
data: [<c:if test="${not empty findDqIndex}"><c:forEach var="i" begin="0" end="${findDqIndex.size()-1}"> '${findDqIndex[i].projectArea}', </c:forEach></c:if>]
}
],
yAxis: [
{
type: 'value'
}
],
series: [{
name: '数量',
type: 'bar',
barWidth: '30',
data: [<c:if test="${not empty findDqIndex}"><c:forEach var="i" begin="0" end="${findDqIndex.size()-1}"> '${findDqIndex[i].sum}', </c:forEach></c:if>],
markPoint: { //这个就是对数字显示进行美化显示
data: [
<c:if test="${not empty findDqIndex}">
<c:forEach var="i" begin="0" end="${findDqIndex.size()-1}" varStatus="status">
{value: ${findDqIndex[i].sum},xAxis:${status.index},yAxis:${findDqIndex[i].sum}},
//xAxis: 代表距左的位置 也就是值在第几个上显示
//yAxis:代表柱状图显示的高度 跟自己的值一样刚好在柱状图或折线图的头部显示
</c:forEach>
</c:if>
]
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () { //自动适应大小
myChart.resize();
});
</script>
echart柱状图折线图好看的显示数量方式
最新推荐文章于 2024-06-26 14:30:11 发布