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>
