| extends ../layouts/basic |
| |
| block variablesLang |
| include ./_variablesLang.jade |
| |
| block extra_head |
| title Download Themes - Apache ECharts |
| link(rel='stylesheet', type='text/css', href='#{cdnPayRoot}/#{ecWWWLang}/vendors/prettify/prettify.css?_v_=#{cdnPayVersion}') |
| |
| block content |
| nav(class='navbar navbar-default navbar-fixed-top') |
| include ./nav |
| |
| .page-main |
| .page-info |
| #themes.container |
| h1 Download Themes |
| p Change the looking of your charts. |
| p You can also make your own theme along with using the themes we provide. |
| p.page-info-echarts Apache ECharts<sup>TM</sup> |
| |
| .page-content.container#themes |
| .row |
| each themeName, idx in theme |
| .col-sm-4.theme |
| a(class="download-theme" href="#{cdnPayRoot}/#{ecWWWLang}/asset/theme/#{themeName}.js?_v_=#{cdnPayVersion}" download="#{themeName}.js" target="_blank") |
| img(src="#{cdnPayRoot}/#{ecWWWLang}/asset/theme/thumb/#{themeName}.png?_v_=#{cdnPayVersion}" alt="") |
| p #{themeName} |
| |
| section.section-bg#theme-configure-section |
| .container |
| #theme-builder |
| a.btn.btn-main.btn-thirdary.more-btn(href="#{host}/en/theme-builder.html") Theme Builder |
| p Make a custom theme and use it for your charts. Currently, this tool has Chinese version only. |
| |
| section |
| .container |
| #theme-example |
| h4 An example of using a theme |
| pre(class="html"). |
| <script src="echarts.js"></script> |
| <!-- import vintage theme --> |
| <script src="theme/vintage.js"></script> |
| <script> |
| // The second parameter is the name of the theme imported |
| var chart = echarts.init(document.getElementById('main'), 'vintage'); |
| chart.setOption({ |
| ... |
| }); |
| </script> |
| |
| include ./footer |
| |
| block extra_js |
| script(src="#{cdnThirdParty.prettifyJS}") |
| script(src="#{cdnThirdParty.prettifyCSSHandlerJS}") |
| script. |
| document.getElementById('nav-download').className = 'active'; |
| |
| $('pre').addClass('prettyprint'); |
| prettyPrint(); |
| |
| $('.download-theme').click(function () { |
| _hmt.push(['_trackEvent', 'download-theme', 'download-theme', '']); |
| }); |