多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
![](https://box.kancloud.cn/dde08c1f16c080be9403a39b5b74be16_903x444.gif) [运行一下](http://www.shouce.ren/study/api/s/7067) ~~~ <!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 : { categories : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'] }, seriesOptions : { //设置多个序列共同的属性 lineCfg : { //不同类型的图对应不同的共用属性,lineCfg,areaCfg,columnCfg等,type + Cfg 标示 smooth : true, labels : { //标示显示文本 label : { //文本样式 y : -15 }, //渲染文本 renderer : function(value,item){ //通过item修改属性 if(value > 25){ item.fill = 'red'; item['font-weight'] = 'bold'; item['font-size'] = 16; } return value; } } } }, tooltip : { valueSuffix : '°C'/*, shared : true, //是否多个数据序列共同显示信息 crosshairs : true //是否出现基准线 */ }, series : [{ name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] },{ name: 'Berlin', data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] }] }); chart.render(); </script> </body> </html> ~~~