echarts柱状图自定义分页下标

开发背景：亿信华辰

实现效果

 

 主要就是加了分页图标，根据页码渲染柱状图的时候给该页的条数 (用到了slice) ，然后监听小箭头点击事件，刷新图表数据，更改箭头颜色。

html

<div style="overflow:visible;width:300px;">
    <div id="main" style="width:100%;height:100%;"></div>
    <div id="paginationContainer" class="pagination">
		<button id="prev" disabled><div class="arrow leftArrow disabledArrow"></div></button>
        <span id="pageInfo" style="color:#DEF1FF">1 / 2</span>
        <button id="next"><div class="arrow rightArrow"></div></button>
    </div>
</div>

　　

js 

var myChart = null;
var myData = null;
var myProperty = null;
// 每页显示的数据数量
var pageSize = 5;
// 当前页码
var currentPage = 1;
// 总页数
var pageCount = 0;
/*
 * 初始化方法
 *
 * @params cwidget 组件对象
 * @params vardata 取数定义中定义的变量，json格式：{'var1':'xxx'}
 * @params storagedata 组件自己需要存储的值，字符串格式
 * @params events 事件，用户在右边属性上设置的事件, json格式：{'evt1': function(){...}, 'evt2':function(){....}}
 * @params resources 资源及权限校验，json格式：{'resids': ['EBI$12$xxx$1$xxx.rpttpl','EBI$12$xxx$1$xxx.coolrpt'], 'pms': [true, false]}
 */
function init(cwidget, vardata, events, storagedata, resources) {
    if (!window["CoolUtil"]) {
        EUI.include(EUI.getContextPath() + "ecoolvwidgetmgr/htmlwidgeteditor/tool/coolutil.js");
    }
    cwidget.setUniqueID(CoolUtil.getUniqueId('05qq90512344bqw977c39998a04a9ad', cwidget));
    var basedom = cwidget.basedom; 
    getValue(cwidget);
    initMyData(vardata);
    initMyChart(basedom);
    reloadMyChart();
    if(cwidget.isresultview){
        cwidget.refresh = function(cwidget, vardata){
            refreshDatas(cwidget, vardata);
        }
        //只在结果界面的时候执行，例如只想在结果界面绑定click事件
    }
}

function initMyChart(basedom) {
    if (myChart) return;
    if (!window['echarts']) {
        EUI.include("vfs/root/products/ebi/sys/coolrpt/coolresource/js/third/echarts5.min.js");
    }
   // 初始化图表
   myChart = echarts.init(document.getElementById('main'));
}

function reloadMyChart(basedom) {
    // 总页数
    pageCount = Math.ceil(myData.xData.length / pageSize);

    document.getElementById('pageInfo').innerText = `${currentPage} / ${pageCount}`;

    // 初始加载图表
    updateChart();
    // 动态生成分页控件HTML
    if (myData.yDataBar.length > pageSize) {
        document.getElementById('paginationContainer').innerHTML = `
            <button id="prev" disabled><div class="arrow disabledArrowLeft"></div></button>
            <span id="pageInfo" style="color:#DEF1FF;font-size:14px;">1 / ${pageCount}</span>
            <button id="next"><div class="arrow rightArrow"></div></button>
        `;
        // 添加分页按钮事件监听器
        document.getElementById('prev').addEventListener('click', function() {
            if (currentPage > 1) {
                currentPage--;
                updateChart();
            }
        });

        document.getElementById('next').addEventListener('click', function() {
            if (currentPage < pageCount) {
                currentPage++;
                updateChart();
            }
        });
    } else {
        document.getElementById('paginationContainer').innerHTML = '';
    }

}

function updateChart() {
    var option = getMyOption();
    myChart.setOption(option);
    document.getElementById('pageInfo').innerText = `${currentPage} / ${pageCount}`;
    
    // 更新分页按钮的状态
    updatePaginationButtons();
}

function getMyOption() {
    if (myProperty.pageSize) {
        pageSize = myProperty.pageSize;    
    }
   var start = (currentPage - 1) * pageSize;
   var end = Math.min(start + pageSize, myData.yDataBar.length);
   var option = {
        "grid": {
            "top": myProperty.gridTop,
            "bottom": myProperty.gridBottom,
            "left": myProperty.gridLeft,
            "right": myProperty.gridRight,
        },
        "tooltip": getToolTip(),
        "xAxis": getXaxis(start, end),
        "yAxis": getYAxis(start, end),
        "series": getSeries(start, end)
    }
   
    return option;
}

function updatePaginationButtons() {
    var prevButton = document.getElementById('prev');
    var nextButton = document.getElementById('next');
    var prevArrow = prevButton.querySelector('.arrow');
    var nextArrow = nextButton.querySelector('.arrow');

    if (currentPage === 1) {
        prevButton.disabled = true;
        prevArrow.classList.remove('leftArrow');
        prevArrow.classList.add('disabledArrowLeft');
    } else {
        prevButton.disabled = false;
        prevArrow.classList.add('leftArrow');
        prevArrow.classList.remove('disabledArrowLeft');
    }

    if (currentPage === pageCount) {
        nextButton.disabled = true;
        nextArrow.classList.remove('rightArrow');
        nextArrow.classList.add('disabledArrowRight');
    } else {
        nextButton.disabled = false;
        nextArrow.classList.add('rightArrow');
        nextArrow.classList.remove('disabledArrowRight');
    }
}
function getSeries(start, end) {
    var series = [];    
    getBarSeries(series,start, end);
    getLineSeries(series,start, end);
    getPointSeries(series,start, end);
    return series;
}

function getLineSeries(series) {
    var yDataLine = myData.yDataLine;
    if (!yDataLine || yDataLine.length == 0) {
        return;
    }
    var caption = myData.caption;
   var lineColor = myProperty.lineColor[0];
        series.push({
            name: caption[1],
            type: "line",
            symbolSize: myProperty.symbolSize,
            symbol: 'circle',
            yAxisIndex: 1,
            tooltip: {
                formatter: '{value}%'
            },
            itemStyle: {
                normal: {
                    color: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.5,
                        colorStops: [{
                            offset: 0, color: lineColor,// 0% 处的颜色
                        }, {
                            offset: 0.49, color: lineColor, // 100% 处的颜色
                        }, {
                            offset: 0.5, color: HEX2RGB(lineColor, 0) // 100% 处的颜色
                        }, {
                            offset: 0.6, color: HEX2RGB(lineColor, 0) // 100% 处的颜色
                        }, {
                            offset: 0.7, color: lineColor, // 100% 处的颜色
                        }, {
                            offset: 1, color: HEX2RGB(lineColor, 0), // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    },
                }
            },
            lineStyle: {
                normal: {
                    width: myProperty.lineWidth,
                    color: lineColor,
                }
            },
            data: yDataLine.slice(start, end).map(function (ele) {
                return ele; // ele.substr(0, ele.length - 1)
            }),
        })
}

function getBarSeries(series, start, end) {
    var yDataBar = myData.yDataBar;
    var caption = myData.caption;
    series.push({
            name: caption[0],
            type: "bar",
            yAxisIndex: 0,
            barWidth: myProperty.barWidth,
            itemStyle: {
                normal: {
                    color:
                    {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: HEX2RGB(myProperty.barColor[0], 1),
                        }, {
                            offset: 1,
                            color: HEX2RGB(myProperty.barColor[0], 0),
                        }],
                        global: false // 缺省为 false
                    },
                }
            },
            data: yDataBar.slice(start, end)
        })
}

function getPointSeries(series, start, end) {
    var yDataBar = myData.yDataBar;
    var caption = myData.caption;
    series.push({
            name: caption[0],
            type: "pictorialBar",
            yAxisIndex: 0,
            barMaxWidth: myProperty.barWidth,
            symbolPosition: 'end',
            symbol: 'rect',
            symbolSize: [myProperty.barWidth, 10],
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                        offset: 0,
                        color: myProperty.pointColor[0],
                    }, {
                        offset: 0.5,
                        color: "#fff",
                    },{
                        offset: 1,
                        color: myProperty.pointColor[0],
                    }],
                    global: false // 缺省为 false
                },
                shadowColor: myProperty.pointColor[0],
                shadowBlur: 20,
            },
            zlevel: 2,
            data: yDataBar.slice(start, end),
        })
}

function getYAxis(start, end) {
    return [{
        type: "value",
       // min:  myProperty.leftMin,
        //max:  myProperty.leftMax,
        position: 'left',
        name: myProperty.yLeftName,
        nameTextStyle: {
            color: myProperty.yNamecolor,
            fontSize: myProperty.yNamesize,
            align: "center",
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: "dashed",
                color: 'rgba(30,136,229,0.3)'
            }
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: true,
            color: myProperty.axisFontcolor,
            fontSize: myProperty.axisFontsize
        },
        splitArea: {
            show: false
        },
    }]
}
/**
, {
        type: "value",
        position: 'right',
        min:  myProperty.rightMin,
        max:  myProperty.rightMax,
        name: myProperty.yRightName,
        nameTextStyle: {
            color: myProperty.yNamecolor,
            fontSize: myProperty.yNamesize,
            align: "left",
        },
        splitLine: {
            show: false,
            lineStyle: {
                type: "dashed",
                color: 'rgba(30,136,229,0.3)'
            }
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: true,
            color: myProperty.axisFontcolor,
            fontSize: myProperty.axisFontsize,
            formatter: '{value}%'
        },
        splitArea: {
            show: false
        },
    }
*/
// 定义一个函数来处理标签换行
function wrapText(text) {
    var maxLength = myProperty.xLabelMaxLength; // 设置每行的最大字符数
    if (text.length <= maxLength) {
        return text;
    }
    var wrappedText = '';
    for (var i = 0; i < text.length; i += maxLength) {
        wrappedText += text.substring(i, i + maxLength) + '\n';
    }
    return wrappedText.trim();
}

function getXaxis(start, end) {
    var xdata = myData.xData.map(function (val, ind) {
        if (myProperty.xMonthFlag != "1") {
            return val;
        }
        // return val.substr(0, 4) + "年" + val.substr(4, 2) + "月"
        var str = val.substr(4, 2);
        var num=Number(str);
        if (num < 10) {
            str = str.substr(1, 1);
        }
        return str + "月"
    });
    return [{
        type: "category",
        offset: 10,
        axisLine: {
            show: false
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        splitArea: {
            show: false
        },
        axisLabel: {
            interval: 0,
            color: myProperty.axisFontcolor,
            fontSize: myProperty.axisFontsize,
            formatter: function(value) {
                 return wrapText(value);
             }
        },
        data: xdata.slice(start, end)
    }]
}

function getToolTip() {
    return {
        trigger: "axis",
        axisPointer: {
            type: 'shadow'
        },
        position: function (point, params, dom, rect, size) {
            return point;
        },
        className: "barlinetool",
        formatter: function (params) {
            var caption = myData.caption;
            var _html = "<div class='tool-left'>";
            caption.forEach((ele, idx) => {
                var i = idx;
                var param = params[i];
                var data = param.data + "%" ;//idx > 1 ? param.data + "%" : param.data;
                _html += "<div class='tool-title'>" + ele + " " + data + "</div>";
            });
            _html += "</div>";
            return _html;
        },
    }
}

function getLegend() {
    var captionTop = myData["captionTop"]
    if (!captionTop) {
        captionTop = myData["caption"]
    }
    return {
        data: captionTop,
        textStyle: {
            color: "#FFFFFF"
        },
    }
}

/**
* 初始化myChart
* @param {*} basedom 
 */
function initMyChart2(basedom) {
    if (myChart || !basedom) return;
    if (!window['echarts']) {
        EUI.include("vfs/root/products/ebi/sys/coolrpt/coolresource/js/third/echarts5.min.js");
    }
    myChart = echarts.init(basedom);
}

/**
* 初始化数据
* @param {*} vardata 
*/
function initMyData(vardata) {
    if (!vardata) return;
    myData = {};
    for (var key in vardata) {
        if (vardata.hasOwnProperty(key)) {
            var element = vardata[key];
            myData[key] = getParseValue(element);
        }
    }
}

function reloadMyData(vardata) {
    if (!vardata) return;
    for (var key in vardata) {
        if (vardata.hasOwnProperty(key)) {
            var element = vardata[key];
            myData[key] = getParseValue(element);
        }
    }
}

/**
 * 16进制转rgb
 * @param {*} hex 
 */
function HEX2RGB(hex, alpha) {
    var r, g, b;
    hex = "" + hex;
    if (typeof hex !== "string") return;
    if (hex.charAt(0) == "#") {
        hex = hex.substring(1);
    }
    if (hex.length == 3) {
        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
    }
    if (/^[0-9a-fA-F]{6}$/.test(hex)) {
        r = parseInt(hex.substr(0, 2), 16);
        g = parseInt(hex.substr(2, 2), 16);
        b = parseInt(hex.substr(4, 2), 16);
        return "rgba(" + r + "," + g + "," + b + "," + alpha + ")";
    }
    return hex;
}

/**
 * 定义了自定义属性时，必须实现该方法，方法名为setProperty
 * 当在属性面板上修改属性后，会调用该方法
 * @param key  属性名
 * @param value  属性值
 * @param cwidget  组件对象
 * @returns
 */
function setProperty(key, value, cwidget) {
    var option = myChart.getOption();
    value = getParseValue(value);
    myProperty[key] = value;
    option = getMyOption();
    myChart.setOption(option);
}

/**
 * 刷新操作，数据改变时，调用该方法，重新渲染数据
 * @param cwidget 组件对象
 * @param vardata 取数定义中定义的变量，json格式：{'var1':'xxx'}
 * @param storagedata  组件自己需要存储的值，字符串格式
 * @returns
 */
function refreshDatas(cwidget, vardata, storagedata) {
    var basedom = cwidget.basedom;
    reloadMyData(vardata); // initMyData
    var opt = getMyOption();
    myChart.setOption(opt);
}


/**
 * 组件大小改变时执行
 * @param cwidget 组件对象
 * @returns
 */
function resize(cwidget) {
    if (myChart) {
        myChart.resize();
    }
}

/**
 * 获取组件的参数值
 * @param cwidget 组件对象
 * @returns
 */
function getValue(cwidget) {
    myProperty = {
        gridLeft: cwidget.getProperty("gridLeft"),
        gridTop: cwidget.getProperty("gridTop"),
        gridBottom: cwidget.getProperty("gridBottom"),
        gridRight: cwidget.getProperty("gridRight"),
        barColor: cwidget.getProperty("barColor"),
        barWidth: cwidget.getProperty("barWidth"),
        pointColor: cwidget.getProperty("pointColor"),
        lineColor: cwidget.getProperty("lineColor"),
        lineWidth: cwidget.getProperty("lineWidth"),
        symbolSize: cwidget.getProperty("symbolSize"),
        axisFontcolor: cwidget.getProperty("axisFontcolor"),
        axisFontsize: cwidget.getProperty("axisFontsize"),
        yLeftName: cwidget.getProperty("yLeftName"),
        yRightName: cwidget.getProperty("yRightName"),
        yNamecolor: cwidget.getProperty("yNamecolor"),
        yNamesize: cwidget.getProperty("yNamesize"),
        xMonthFlag: cwidget.getProperty("xMonthFlag"),
        leftMax: cwidget.getProperty("leftMax"),
        rightMax: cwidget.getProperty("rightMax"),
        leftMin: cwidget.getProperty("leftMin"),
        rightMin: cwidget.getProperty("rightMin"),
        pageSize: cwidget.getProperty("pageSize"),
        xLabelMaxLength: cwidget.getProperty("xLabelMaxLength"),
    };
    if (myProperty.pageSize) {
        pageSize = myProperty.pageSize;    
    }
    for (var key in myProperty) {
        if (myProperty.hasOwnProperty(key)) {
            var element = myProperty[key];
            myProperty[key] = getParseValue(element);
        }
    }
}

/**
* 获取组件的参数名称
* @param cwidget 组件对象
* @returns
 */
function getParamName(cwidget) { }
function getParseValue(value) {
    try {
        value = JSON.parse(value);
    } catch (error) { }
    return value;
}


/*
 * 销毁操作,销毁自己相关的东西
 */
function dispose(cwidget) {
    if (myChart) {
        myChart.dispose();
        myChart = null;
    }
    myProperty = null;
    myData = null;
}

 

css

@charset "utf-8";
/* CSS Document */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
}
.pagination button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
}
.pagination span {
    margin: 0 10px;
    color: white;
}
.arrow {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}
.leftArrow {
    border-right: 6px solid #00b0ff;
}
.rightArrow {
    border-left: 6px solid #00b0ff;
}
.disabledArrowRight {
    border-left: 6px solid gray; /* 或者 border-left */
}
.disabledArrowLeft {
    border-right: 6px solid gray; /* 或者 border-left */
}
.barlinetool{
    padding:0 !important;
    background-color: transparent !important;
    border:none !important;
}
.tool-left{
    padding: 10px 10px;
    background-color: rgba(32, 155, 253, 0.36);
    border: 1px solid #2D80FE;
    border-radius: 6px;
}

.tool-left>div{
    margin-bottom:15px;
}
.tool-title{
    font-size:15px;
    color:#fff;
    text-align:left;
}
.val{
    color:#00B7FF;
    font-size:30px;
    line-height:20px;
    font-weight: bold;
}
.name{
    color:#fff;
    font-size:30px;
    line-height:20px;
}

.spanDom{
    width:100%;
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
}