echarts横向柱状图超出文字用省略号代替

解决方案

最终实现效果图

关键性代码

var maxLength = 25;
//判断长度，超出使用...代替
if (params && params.length > maxLength) {
    return params.substring(0, maxLength - 1) + '...';
} else {
    return params;
}

全部代码 ，传入不同的id和数据，生成对应的横向柱状图

// 横向 柱状图
    function bar_chart_top(id, topDataArray) {

        if (!topDataArray) {
            return;
        }

        var dom = document.getElementById(id);
        var myChart = echarts.init(dom);
        var option;

        // var topDataArray = [
        //     {"name": "苏溪镇1", "total": "3361"},
        //     {"name": "七级2", "total": "2227"},
        //     {"name": "后标营店3", "total": "2231"},
        //     {"name": "苏溪镇小店4", "total": "1336"},
        //     {"name": "七级qipa250刀5", "total": "1227"},
        //     {"name": "后标营店6", "total": "1223"},
        //     {"name": "苏溪镇www.qipa250.com", "total": "336"},
        //     {"name": "qipa250七级小刀8", "total": "227"}
        // ];

        option = {
            // legend: {},
            // tooltip: {},
            dataset: {
                // 用 dimensions 指定了维度的顺序。直角坐标系中，
                // 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
                // 如果不指定 dimensions，也可以通过指定 series.encode
                // 完成映射，参见后文。
                dimensions: ['name', 'total'],
                source: topDataArray
            },
            textStyle: {color: '#000000'},    // 文字颜色
            grid: {
                top: '5%',//距上边距
                left: '40%',//距离左边距
                right: '8%',//距离右边距
                bottom: '5%',//距离下边距
            },
            xAxis: {show: false},           // 不显示x轴
            yAxis: {
                type: 'category',
                inverse: true,          // 从高到低显示
                max: 8, //最多显示几个Y坐标
                axisTick: {
                    show: false//不显示坐标轴刻度线
                },
                axisLine: {
                    show: false,//不显示坐标轴线
                },
                axisLabel: {
                    formatter: function (params) {
                        var maxLength = 25;
                        //判断长度，超出使用...代替
                        if (params && params.length > maxLength) {
                            return params.substring(0, maxLength - 1) + '...';
                        } else {
                            return params;
                        }
                    }
                }
            },
            color: '#9788FF',
            series: [{
                type: 'bar',
                barMaxWidth: 15, // 最大宽度, 在柱子数量少的时候，剩下的柱子不要太粗，否则不好看
                // barGap:2,   // 同一类目下的柱间距：barGap:2
                // barCateGoryGap:20, //关键第二句：值或为百分比 ‘60%’
                // 柱形图右边的标签显示
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        distance: 1,
                        // position: 'insideRight',
                        textStyle: {
                            color: '#000000',
                            // color: 'black',
                            fontSize: '12'
                        },
                        formatter: topDataArray['total']
                    }
                }
            }]
        };

        if (option && typeof option === 'object') {
            myChart.setOption(option, true);
            dom.style.width =  '800px';
            dom.style.height = '400px';
            myChart.resize(width, height);
        }
    }