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);
            }
  • 相关阅读:
    解析Javascript事件冒泡机制(转)
    JavaScript事件处理的三种方式(转)
    javaScript中"=="和"==="运算符的区别
    博客
    基础知识巩固二
    基础知识巩固
    知识小结(浮点数问题)
    关于电脑桌面图标消失并且右键无法点击的情况
    JS随笔(二)
    关于JS学习笔记
  • 原文地址:https://www.cnblogs.com/wu-peng/p/13259821.html
Copyright © 2011-2022 走看看