1.html代码片段
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts柱状图分页显示(数据循环)</title>
<!-- <script src="./echarts.min.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:420px;"></div>
<script>
//分割数组
function arrayChunk(array, size){
let data = []
for (let i = 0; i < array.length; i += size) {
data.push(array.slice(i, i + size))
}
return data
}
//声明数组
var obj = {
"title":'各区县完成比例',
"data":["学校1","学校2","学校3","学校4","学校5","学校6","学校7"],
"dataSource":[3.13,6,0.3,5,3,5,3]
};
//分页数字
const Pages = [];
var options = [];
var yAxisArr = arrayChunk(obj.data,3)
var seriesArr = arrayChunk(obj.dataSource,3)
for (var j = 0; j < yAxisArr.length; j++) {
Pages.push(j+1);
}
for (var index = 0; index < Pages.length; index++) {
let yAxis = {};
let series = {};
let title = {};
let tooltip = {};
let legend = {};
let grid = {};
let xAxis = {};
let color = '#318EFD';
if (index == 0) {
title.text="测试2"
tooltip.trigger ='axis'
legend.data = 'GDP'
grid.y2 = 80
color = color
//柱子横向
// xAxis.type = 'value'
// xAxis.name = '%'
// xAxis.boundaryGap = [0, 0.01]
// yAxis.type="category"
// yAxis.data = yAxisArr[index]
//柱子纵向
yAxis.type = 'value'
yAxis.name = '%'
yAxis.boundaryGap = [0, 0.01]
xAxis.type="category"
xAxis.data = yAxisArr[index]
series.data = seriesArr[index]
series.name = "完成率"
series.type ="bar"
series.barWidth= 30
}else{
yAxis.data = yAxisArr[index]
series.data = seriesArr[index]
}
options.push({
yAxis:yAxis,
series:series,
title:title,
tooltip:tooltip,
legend:legend,
grid:grid,
xAxis:xAxis,
color:color,
})
}
console.log('options',options);
var num = 0;
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
timeline: {
data: Pages,
axisType: 'category',
realtime: true,
label: {
formatter: function (s) {
return s;
}
},
symbolSize: 14,
autoPlay: false,
playInterval: 1000,
tooltip: {
formatter: function (s) {
num = s.dataIndex;
return s.dataIndex + 1;
}
}
},
options: options,
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
2.显示效果
3.echarts.min.js (自己下载)