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);
            }
  • 相关阅读:
    cad 创建自定义菜单
    标准C++的类型转换符
    Assert usages
    c++排序算法与模板和STL_zhuan
    C++ 中int,char,string,CString类型转换
    C++ 之 C style string
    数据库优化细节——转
    C++容器——zhuan
    公共类库_address:http://www.cnblogs.com/wuhuacong/archive/2012/03/26/2418786.html
    C++学习篇——C++ STL中迭代器介绍(收集)
  • 原文地址:https://www.cnblogs.com/wu-peng/p/13259821.html
Copyright © 2011-2022 走看看