amcharts实现3d墙线条图表效果
代码语言:html
所属分类:图表
代码描述:amcharts实现3d墙线条图表效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background: #5d3bb4; padding: 0; margin: 0; } #chartdiv { width: 100%; height: 350px; background: #5d3bb4; background: linear-gradient(to bottom, #626dd4, #5d3bb4); color: #fff; font-weight: 100; overflow: hidden; } .amcharts-graph-g4 { filter: url(#blur); } </style> </head> <body translate="no"> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts.js"></script> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts-serial.js"></script> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts-light.js"></script> <div id="chartdiv"></div> <script> var chart = AmCharts.makeChart("chartdiv", { "type": "serial", "theme": "light", "addClassNames": true, "marginLeft": 25, "marginRight": 25, "marginTop": 45, "marginBottom": 0, "autoMarginOffset": 15, "startDuration": 2, "sequencedAnimation": false, "dataProvider": [{ "month": "JAN", "value1": 40, "value2": 15, "value3": 0, "value4": 20, "color": "#807fd3" }, { "month": "FEB", "value1": 10, "value2": 15, "value3": 0, "value4": 0, "color": "#6e6abc" }, { "month": "MAR", "value1": 40, "value2": 15, "value3": 0, "value4": 20, "color": "#807fd3" }, { "month": "APR", "value1": 22, "value2": 15, "value3": 0, "value4": 2, "color": "#6e6abc" }, { "month": "MAY", "value1": 53, "value2": 15, "value3": 0, "value4": 33, "color": "#807fd3" }, { "month": "JUN", "value1": 15, "value2": 15, "value3": 0, "value4": -5, "color": "#6e6abc" }, { "month": "JUL", "value1": 65, "value2": 15, "value3": 0, "value4": 45, "color": "#807fd3" }, { "month": "AUG", "value1": 30, "value2": 15, "value3": 0, "value4": 10, "color": "#6e6abc" }, { "month": "SEP", "value1": 58, "value2": 15, "value3": 0, "value4": 38, "color": "#807fd3" }, { "month": "OCT", "value1": 15, "value2": 15, "value3": 0, "value4": -5, "co.........完整代码请登录后点击上方下载按钮下载查看
网友评论0