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" ></div>
14    <script type="text/javascript">
15
16
17// 基于准备好的dom，初始化echarts实例
18var myChart = echarts.ElementById('main'));
19
20// 指定图表的配置项和数据
21var option = {
22            title: {
23                text: 'ECharts ⼊门⽰例'
24            },
25            tooltip: {},
26            legend: {
27                data:['销量']
28            },
29            xAxis: {
30                axisLabel: {//坐标轴刻度标签的相关设置。
31                      formatter : function(params){
32var newParamsName = "";// 最终拼接成的字符串
33var paramsNameNumber = params.length;// 实际标签的个数
34var provideNumber = 5;// 每⾏能显⽰的字的个数
35var rowNumber = il(paramsNameNumber / provideNumber);// 换⾏的话，需要显⽰⼏⾏，向上取整
36/**
37                                * 判断标签的个数是否⼤于规定的个数，如果⼤于，则进⾏换⾏处理如果不⼤于，即等于或⼩于，就返回原标签38*/
39// 条件等同于rowNumber>1
40if (paramsNameNumber > provideNumber) {
41/** 循环每⼀⾏,p表⽰⾏ */
42for (var p = 0; p < rowNumber; p++) {
43var tempStr = "";// 表⽰每⼀次截取的字符串
44var start = p * provideNumber;// 开始截取的位置
45var end = start + provideNumber;// 结束截取的位置
46// 此处特殊处理最后⼀⾏的索引值
47if (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//将最终的字符串返回
62return newParamsName
63                    }
64
65                },
66data: ["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>setoption
81 </html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。