| extends ../layouts/basic |
| |
| block variablesLang |
| include ./_variablesLang.jade |
| |
| block extra_head |
| title Apache ECharts |
| |
| block content |
| nav(class='navbar navbar-default navbar-fixed-top', role="navigation") |
| include ./nav |
| |
| .page-main#page-index |
| #main-content |
| section#home-section |
| video#video-index(muted="true", loop='true', src='#{cdnFreeRoot}/#{ecWWWLang}/video/index-4.mp4', poster='#{cdnPayRoot}/#{ecWWWLang}/video/index-4.jpg?_v_=#{cdnPayVersion}') |
| |
| a#video-index-play.video-index-btn.video-play-btn.video-btn(href='javascript:;', onclick='playVideo("video-index")') |
| include ../components/svg/play |
| a#video-index-pause.video-index-btn.video-pause-btn.video-btn(href='javascript:;', onclick='pauseVideo("video-index")') |
| include ../components/svg/pause |
| |
| .description |
| include ../components/svg/echarts-logo |
| a#index-play-btn(href='javascript:;', onclick='playIndexVideo()') |
| .btn-panel |
| a.btn.btn-index-home(href='./download.html', style="letter-spacing:0px") Download |
| a.btn.btn-index-home(href='https://github.com/apache/echarts', style="letter-spacing:0px") Source Code |
| .main-bg |
| |
| //- section.banner-section(style='background: #1e2e55') |
| //- a(href='https://jing.baidu.com/h5/xzzb.html') |
| //- img.banner-img(src='images/banners/2017-09-12-zhibo.png', style='max-width: 1000px') |
| |
| |
| script(type='text/javascript'). |
| (function () { |
| var ua = navigator.userAgent; |
| var ie = ua.match(/MSIE\s([\d.]+)/) || ua.match(/Trident\/.+?rv:(([\d.]+))/); |
| var edge = ua.match(/Edge\/([\d.]+)/); |
| window.supportTouch = 'ontouchstart' in window && !ie && !edge; |
| })() |
| |
| |
| section#feature-section |
| .container |
| .row.features |
| p Apache ECharts<sup>TM</sup> is a top-level project of <a target="_blank" href="https://www.apache.org/">The Apache Software Foundation</a> (ASF). |
| |
| .row.features |
| .col-sm-4 |
| .feature-icon-panel |
| include ../components/svg/heart |
| h3 Free to use |
| p Open sourced under Apache-2.0 License |
| .col-sm-4 |
| .feature-icon-panel |
| include ../components/svg/function |
| h3 Rich Features |
| p Caters for all needs |
| .col-sm-4 |
| .feature-icon-panel |
| include ../components/svg/community |
| h3 Active Community |
| p <!-- Place this tag where you want the button to render. --> |
| <a class="github-button" href="https://github.com/apache/echarts" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star apache/echarts on GitHub">GitHub Stars</a> |
| |
| .row.feature-detail#feature-4 |
| .col-sm-4.col |
| h2 Brand-new v4.0 |
| p Rendering ability for ten-million-level data |
| p Supports both SVG and Canvas rendering |
| p Seperates data and style configuring |
| p Accessibility supports |
| p Wechart and Powerpoint supports |
| .feature-btn |
| a(href="./tutorial.html") Learn More |
| include ../components/svg/more |
| .col-sm-8.col |
| video.lazy#video-feature-4.feature-video(loop='true' muted="true" data-src='#{cdnFreeRoot}/#{ecWWWLang}/video/feature-4.mp4' poster='#{cdnPayRoot}/#{ecWWWLang}/video/feature-4.jpg?_v_=#{cdnPayVersion}') |
| |
| a#video-feature-4-play.feature-play-btn.video-play-btn.video-btn(href='javascript:;', onclick='playVideo("video-feature-4")') |
| include ../components/svg/play |
| a#video-feature-4-pause.feature-play-btn.video-pause-btn.video-btn(href='javascript:;', onclick='pauseVideo("video-feature-4")') |
| include ../components/svg/pause |
| //- img.lazy#video-feature-4(data-src="images/features/scatterGL4.jpg") |
| .row.feature-detail#feature-dimension |
| .col-sm-4.col.mobile |
| h2 Multi-dimension data analysis |
| h3 Brush data for detail |
| p Dig more out of data |
| h3 Multi-chart interaction |
| p Analysis the relationship between multiple charts |
| .feature-btn |
| a(href="./tutorial.html") Learn More |
| include ../components/svg/more |
| .col-sm-8.col |
| #col-desktop |
| img.lazy(data-src="#{cdnPayRoot}/#{ecWWWLang}/images/feature-1.png?_v_=#{cdnPayVersion}") |
| video.lazy#video-feature-1.feature-video(loop='true' muted="true" data-src='#{cdnFreeRoot}/#{ecWWWLang}/video/feature-1.mp4' poster='#{cdnPayRoot}/#{ecWWWLang}/video/feature-2.jpg?_v_=#{cdnPayVersion}') |
| a#video-feature-1-play.feature-play-btn.video-play-btn.video-btn(href='javascript:;', onclick='playVideo("video-feature-1")') |
| include ../components/svg/play |
| a#video-feature-1-pause.feature-play-btn.video-pause-btn.video-btn(href='javascript:;', onclick='pauseVideo("video-feature-1")') |
| include ../components/svg/pause |
| //- img.lazy#video-feature-1(data-src="#{cdnPayRoot}/#{ecWWWLang}/video/feature-2.jpg?_v_=#{cdnPayVersion}") |
| .col-sm-4.col.pc#col-analysis |
| h2 Multi-dimension data analysis |
| h3 Brush data for detail |
| p Dig more out of data |
| h3 Multi-chart interaction |
| p Analysis the relationship between multiple charts |
| .feature-btn |
| a(href="./tutorial.html") Learn More |
| include ../components/svg/more |
| .row.feature-detail |
| .col-sm-4.col#col-data |
| h2 Charts for all sized devices |
| h3 PC / Phone / Pad / Large Screen ... |
| p Responsive design for all devices |
| .feature-btn |
| a(href="./tutorial.html") Learn More |
| include ../components/svg/more |
| .col-sm-8.col |
| #col-desktop |
| img.lazy(data-src="#{cdnPayRoot}/#{ecWWWLang}/images/index-feature.jpg?_v_=#{cdnPayVersion}") |
| |
| script(type='text/javascript'). |
| window.supportTouch && (document.getElementById('ch-main').className += ' ch-on-touch'); |
| |
| section#publication |
| .container |
| .col-sm-8.col |
| h2 ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization |
| p.note <i class="note-icon"><img classs="lazy" data-src="#{cdnPayRoot}/#{ecWWWLang}/images/note.svg?_v_=#{cdnPayVersion}" /></i> Please cite the following paper whenever you use ECharts in your R&D projects, products, research papers, technical reports, news reports, books, presentations, teaching, patents, and other related intelligence activities. |
| p.link Visual Informatics, 2018 |
| a(href="https://www.sciencedirect.com/science/article/pii/S2468502X18300068") [PDF] |
| .col-sm-4.col |
| .img-container |
| img.lazy(data-src="#{cdnPayRoot}/#{ecWWWLang}/images/pipeline.jpg?_v_=#{cdnPayVersion}", alt="") |
| |
| section.normal#about-section |
| .container |
| h3 Follow Us |
| p You may follow Apache ECharts to keep informed. |
| .btn-panel |
| a#btn-github(href='https://github.com/apache/echarts') |
| .btn-content |
| img.lazy(data-src='#{cdnPayRoot}/#{ecWWWLang}/images/icon-github.png?_v_=#{cdnPayVersion}') |
| span GitHub |
| .btn-shadow |
| |
| a#btn-weibo(href='https://weibo.com/echarts') |
| .btn-content |
| img.lazy(data-src='#{cdnPayRoot}/#{ecWWWLang}/images/icon-weibo.png?_v_=#{cdnPayVersion}') |
| span Weibo |
| .btn-shadow |
| |
| a#btn-twitter(href='https://twitter.com/echartsjs') |
| .btn-content |
| img.lazy(data-src='#{cdnPayRoot}/#{ecWWWLang}/images/icon-twitter.png?_v_=#{cdnPayVersion}') |
| span Twitter |
| .btn-shadow |
| |
| include ./footer |
| |
| block extra_js |
| script. |
| window.lazyLoadOptions = { |
| elements_selector: ".lazy" |
| }; |
| script(src='https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js') |
| script(src="#{getAssetUrl(cdnPayRoot, ecWWWLang + '/js/index.js')}") |
