echarts柱状图动态数据分页实现

需求：后台返回数据条目不固定，实现柱状图动态分页功能

1. 这里先定义假数据11条，比如每页5条，先预处理下timeline的data

var chartData = {
        X: ['名称1', '名称2', '名称3', '名称4', '名称5', '名称6', '名称7', '名称8', '名称9', '名称10', '名称11'],
        Y1: [460, 490, 400, 530, 500, 500, 490, 400, 530, 500, 500],
        Y2: [455, 440, 420, 520, 510, 500, 490, 400, 530, 500, 500],
        Y3: [430, 420, 440, 510, 550, 500, 490, 400, 530, 500, 500],
    };
// 处理柱状图分页
var pageArr = [];
for (var i = 0; i < Math.ceil(chartData.X.length / 5); i  ) {
    pageArr.push(i);
}

2.配置基础option参数，需要注意的是，动态数据需要动态追加到options，所以，我们先定义一项options用来配置我们所需要的样式，后面页码直接push到options里会沿用第一项的样式。x、y轴数据用slice方法切出前5项。

var myChart = echarts.init(document.getElementById('loadChart'));
var option = {
        timeline: {
            data: pageArr,
            label: {
                formatter: function (s) { return s   1 }, // 数据从0开始，格式化时要加1
            },
            autoPlay: false,
            playInterval: 3000,
            top: '0%',
            tooltip: { formatter: function (s) { return "第"   (s.value   1)   "页"; } }
        },
        options: [
            {
                color: ['#a4c4bf', '#1b9a9c', '#007abb'],
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    data: ["当前潮流", "稳定限额", "控后潮流"],
                    right: '2%',
                    icon: "rect",
                    itemWidth: 14,
                    textStyle: {
                        fontSize: 16,
                    },
                },
                calculable: true,
                grid: {
                    left: '2%',
                    right: '2%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: chartData.X.slice(0, 5),

                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            fontSize: 16,
                            interval: 0
                        },
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            fontSize: 16,
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: "dashed",
                                color: "#007173",
                            },
                        },
                    }
                ],
                series: [
                    {
                        'name': '当前潮流', 'type': 'bar', 'barWidth': '18%',
                        'data': chartData.Y1.slice(0, 5)
                    },
                    {
                        'name': '稳定限额', 'type': 'bar', 'barWidth': '18%',
                        'data': chartData.Y2.slice(0, 5)
                    },
                    {
                        'name': '控后潮流', 'type': 'bar', 'barWidth': '18%',
                        'data': chartData.Y3.slice(0, 5)
                    }]
            },
        ]
    };

3.把数据切成每5条一组，push到option的options里面

// 切分数据每5个一组
    for (var i = 1; i < pageArr.length   1; i  ) {
        var obj = {
            series: [
                { 'data': chartData.Y1.slice(i * 5, i * 5   5) },
                { 'data': chartData.Y2.slice(i * 5, i * 5   5) },
                { 'data': chartData.Y3.slice(i * 5, i * 5   5) }
            ],
            xAxis: [{ 'data': chartData.X.slice(i * 5, i * 5   5) }]
        }
        option.options.push(obj);
    }
myChart.setOption(option);

4.赋上效果图

这篇好文章是转载于：学新通技术网