多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
![](https://box.kancloud.cn/9ec497d67829e617346a16132c7af6ef_908x440.gif) [运行一下](http://www.shouce.ren/study/api/s/7099) ~~~ <!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] //画板的边距 }, xAxis : { type : 'time', formatter : function (value) { return AChart.Date.format(new Date(value),'yyyy-mm-dd'); }, autoAppend : 20 //自动附加的offset }, yAxis : { min : 0 }, seriesOptions : { //设置多个序列共同的属性 /*columnCfg : { //公共的样式在此配置 }*/ }, tooltip : { valueSuffix : '¥' }, series : [ { name: 'Africa', type : 'column', pointStart : new Date(2010,01,01).getTime(), pointInterval : 24 * 3600 * 1000, data: [34.4, 21.8, {y : 20.1,attrs : {fill : '#ff0000'}}, 20, 19.6, 19.5, 19.1, 18.4, 18, 17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8, 11.7, 11.2], labels : { //显示的文本信息 label : { rotate : -90, y : 10, 'fill' : '#fff', 'text-anchor' : 'end', textShadow: '0 0 3px black', 'font-size' : '14px' } } }] }); chart.render(); </script> </body> </html> ~~~