| 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 look 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="https://fastly.jsdelivr.net/npm/echarts/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}/#{ecWWWLang}/theme-builder.html") Theme Builder |
| p Make a custom theme and use it for your charts. |
| |
| 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 (e) { |
| typeof _hmt === 'object' && _hmt && _hmt.push(['_trackEvent', 'download-theme', 'download-theme', '']); |
| var ctx = this; |
| if (ctx.origin === location.origin) { |
| return; |
| } |
| // cross origin |
| e.preventDefault(); |
| function onload(res) { |
| var download = ctx.getAttribute('download'); |
| var url; |
| if (res && res instanceof Blob) { |
| if (window.navigator.msSaveOrOpenBlob) { |
| if (window.navigator.msSaveOrOpenBlob(res, download)) { |
| return; |
| } |
| } else { |
| url = URL.createObjectURL(res); |
| } |
| } |
| var a = document.createElement('a'); |
| a.href = url || ctx.href; |
| a.target = ctx.target; |
| a.setAttribute('download', download); |
| a.style.display = 'none'; |
| document.body.appendChild(a); |
| a.click(); |
| document.body.removeChild(a); |
| url && URL.revokeObjectURL(url); |
| } |
| if ((typeof URL !== 'undefined' && typeof URL.createObjectURL === 'function') || window.navigator.msSaveOrOpenBlob) { |
| var xhr = new XMLHttpRequest(); |
| xhr.open('GET', ctx.href); |
| xhr.responseType = 'blob'; |
| xhr.onload = function () { |
| onload(this.status === 200 && this.response); |
| }; |
| xhr.onerror = function (e) { |
| console.error('failed to download theme', e); |
| }; |
| xhr.send(); |
| } else { |
| onload(); |
| } |
| _hmt.push(['_trackEvent', 'download-theme', 'download-theme', '']); |
| }); |