zoukankan      html  css  js  c++  java
  • Echart处理X轴显示不全问题

     function loadchatFisheryChart(data) {
                var xAxisData = data.Select(function (t) { return t.Name; }).ToArray();
                var seriesData = data.Select(function (t) { return t.Yield; }).ToArray();
                var myChart = echarts.init(document.getElementById('chatFishery'));
                var option = {
                    legend: {
                        data: ['产量']
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: "{b} : {c}吨",
                        axisPointer: {            // 坐标轴指示器,坐标轴触发有效
                            type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: xAxisData,
                        axisLabel: {
                            interval: 0,
                            //rotate: 40  ,//斜体展示
                            formatter: function (value) {
                                var ret = "";//拼接加
    返回的类目项
                                var maxLength = 4;//每项显示文字个数
                                var valLength = value.length;//X轴类目项的文字个数
                                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                                if (rowN > 1)//如果类目项的文字大于3,
                                {
                                    for (var i = 0; i < rowN; i++) {
                                        var temp = "";//每次截取的字符串
                                        var start = i * maxLength;//开始截取的位置
                                        var end = start + maxLength;//结束截取的位置
                                        //这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧
                                        temp = value.substring(start, end) + "
    ";
                                        ret += temp; //拼接最终的字符串
                                    }
                                    return ret;
                                }
                                else {
                                    return value;
                                }
                            }
                        }
                        
                    },
                   
                    yAxis: {
                        type: 'value',
                        minInterval: 100, //设置成1保证坐标轴分割刻度显示成整数。
                        name: '吨'
                    },
                    series: [{
                        name: '产量',
                        barMaxWidth: 30,//最大宽度
                        data: seriesData,
                        type: 'bar'
                    }]
                };
    
    
                myChart.setOption(option);
            }
  • 相关阅读:
    C C++ POSIX 的一些 IO 操作
    左式堆的合并
    IDEA Maven 项目默认编译项目为JDK 1.5
    spring学习总结(一)_Ioc基础(中)
    SpringBoot(十五)_springboot实现预览pdf
    PostgreSQL之性能优化(转)
    PostgreSQL之Sequence序列(转)
    PostgreSQL之连接数修改
    CAS登陆过程UML中文版
    node 和npm 版本更新
  • 原文地址:https://www.cnblogs.com/wu-peng/p/13259821.html
Copyright © 2011-2022 走看看