实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
AخA
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="utf-8">
5
    <title>图形展示</title>
6
</head>
7
<body>
8
 
9
<div class="detail-section">
10
    <div id="canvas">
11
 
12
    </div>
13
</div>
14
 
15
<script src="https://ku.shouce.ren/libs/js/acharts-min1.0.32.js"></script>
16
<!-- https://g.alicdn.com/bui/acharts/1.0.29/acharts-min.js -->
17
 
18
 
19
  <script type="text/javascript">
20
        var chart = new AChart({
21
          theme : AChart.Theme.SmoothBase,
22
          id : 'canvas',
23
          width : 950,
24
          height : 500,
25
          plotCfg : {
26
            margin : [50,50,80] //画板的边距
27
          },
28
          invert : true,
29
          xAxis : {   //坐标轴更改位置和文本配置信息
30
            position : 'left', //x轴居左
31
            labels : {
32
              label : {
33
                'text-anchor' : 'end',
34
                x : -12,
35
                y : 0
36
              }
37
            }
38
          },
39
          yAxis : {
40
            position : 'bottom',
41
            labels : {
42
              label : {
43
                'text-anchor' : 'end',
44
                y : 20,
45
                x : 12
46
              }
47
            }
48
          },
49
          seriesOptions : { //设置多个序列共同的属性
50
            areaCfg : { //如果数据序列未指定类型,则默认为指定了xxCfg的类型,否则都默认是line
51
              markers : {
52
                single : true
53
              },
54
              pointStart: 1940,
55
              pointInterval: 1
56
 
57
            }
58
          },
59
          tooltip : {
60
            valueSuffix : '°C'
61
          },
62
          series : [{
63
              name: 'Africa',
64
              data: [106, 107, 111, 133, 221, 767, 1766,855]
65
          }, {
66
              name: 'Europe',
67
              data: [163, 203, 276, 408, 547, 729, 628,460]
68
          }]
69
 
70
        });
71
 
72
        chart.render();
73
      </script>
74
 
75
</body>
76
</html>