ECharts柱状图分页显示（数据循环）

s小布丁

已于 2024-04-07 11:18:09 修改

阅读量4k

点赞数 6

分类专栏： Echarts 文章标签： echarts

于 2020-12-23 20:08:33 首次发布

本文链接：https://blog.csdn.net/m0_49529959/article/details/111589470

版权

Echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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 (自己下载)

s小布丁

关注

6
点赞
踩
13

收藏

觉得还不错? 一键收藏
5
评论
ECharts柱状图分页显示（数据循环）

1.html代码片段<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts柱状图分页显示（数据循环）</title>  <script src="./echarts.min.js"></script></head><body>
复制链接

扫一扫