ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
![](https://box.kancloud.cn/0cc8a68dc5c953d6cf6ae6dda1702836_942x436.gif) [运行一下](http://www.shouce.ren/study/api/s/7091) ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图形展示</title> </head> <body> <div class="detail-section"> <div id="canvas"> </div> </div> <script src="http://g.tbcdn.cn/bui/acharts/1.0.32/acharts-min.js"></script> <!-- https://g.alicdn.com/bui/acharts/1.0.29/acharts-min.js --> <script type="text/javascript"> var chart = new AChart({ theme : AChart.Theme.SmoothBase, id : 'canvas', width : 950, height : 500, plotCfg : { margin : [50,50,80] //画板的边距 }, seriesOptions : { //设置多个序列共同的属性 areaCfg : { //如果数据序列未指定类型,则默认为指定了xxCfg的类型,否则都默认是line markers : { single : true }, pointStart: 1940, pointInterval : 1 } }, yAxis : { formatter : function (value) { return value; } }, tooltip : { valueSuffix : '¥' }, series : [{ //中间存在断点,断点不做处理,不进行忽略 name: 'USA', data: [null, null, null, null, null, 6 , 11, 32, 110, 235, 369, 640,1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,24304, null, null, 24099, 24357, 24237, 24401, 24344, 23586,22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950, 10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 ] }, { name: 'USSR/Russia', connectNulls : true, //此配置项会将null的数据忽略掉 data: [null, null, null, null, null, null, null , null , null ,null,5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, null,33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,21000, 20000, 19000, 18000, 18000, 17000, 16000 ] }] }); chart.render(); </script> </body> </html> ~~~