• 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);
            }
  • 相关阅读:
    详解java定时任务
    Java之Exception
    Java设计模式
    Java中的static关键字解析
    浅析Java中的final关键字
    深入理解Java的接口和抽象类
    一个故事讲清楚NIO
    Java并发编程:线程池的使用
    Java垃圾回收机制
    ubuntu sublime text 2 破解版
  • 原文地址:https://www.cnblogs.com/wu-peng/p/13259821.html
Copyright © 2020-2023  润新知