Echarts-x轴数据换行显示 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Echarts异步数据加载</title>
 8     <!-- 引入echarts -->
 9     <script src="./echarts.min.js"></script>
10 </head>
11 <body>
12    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
13     <div id="main" style="width: 600px;height:400px;"></div>
14     <script type="text/javascript">
15         
16     
17         // 基于准备好的dom，初始化echarts实例
18         var myChart = echarts.init(document.getElementById('main'));
19 
20         // 指定图表的配置项和数据
21         var option = {
22             title: {
23                 text: 'ECharts 入门示例'
24             },
25             tooltip: {},
26             legend: {
27                 data:['销量']
28             },
29             xAxis: {
30                 axisLabel: {//坐标轴刻度标签的相关设置。
31                      formatter : function(params){
32                        var newParamsName = "";// 最终拼接成的字符串
33                                 var paramsNameNumber = params.length;// 实际标签的个数
34                                 var provideNumber = 5;// 每行能显示的字的个数
35                                 var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
36                                 /**
37                                  * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
38                                  */
39                                 // 条件等同于rowNumber>1
40                                 if (paramsNameNumber > provideNumber) {
41                                     /** 循环每一行,p表示行 */
42                                     for (var p = 0; p < rowNumber; p++) {
43                                         var tempStr = "";// 表示每一次截取的字符串
44                                         var start = p * provideNumber;// 开始截取的位置
45                                         var end = start + provideNumber;// 结束截取的位置
46                                         // 此处特殊处理最后一行的索引值
47                                         if (p == rowNumber - 1) {
48                                             // 最后一次不换行
49                                             tempStr = params.substring(start, paramsNameNumber);
50                                         } else {
51                                             // 每一次拼接字符串并换行
52                                             tempStr = params.substring(start, end) + "\n";
53                                         }
54                                         newParamsName += tempStr;// 最终拼成的字符串
55                                     }
56 
57                                 } else {
58                                     // 将旧标签的值赋给新标签
59                                     newParamsName = params;
60                                 }
61                                 //将最终的字符串返回
62                                 return newParamsName
63                     }
64 
65                 }, 
66                 data: ["12-1808:00","12-1811:00","12-1814:00","12-1817:00","12-1820:00","12-1823:00"]
67             },
68             yAxis: {},
69             series: [{
70                 name: '销量',
71                 type: 'bar',
72                 data: [5, 20, 36, 10, 10, 20]
73             }]
74         };
75         
76 
77         // 使用刚指定的配置项和数据显示图表。
78         myChart.setOption(option);
79     </script>
80 </body>
81 </html>

 

posted @ 2018-02-05 17:55  Various  阅读(3622)  评论(0)    收藏  举报