html.sr

extends ../layouts/basic

block extra_head
    title Apache ECharts
    script(src="https://cdn.jsdelivr.net/npm/scrollreveal@4.0.7/dist/scrollreveal.min.js")
    script(src="https://cdn.jsdelivr.net/npm/lottie-web@5.7.6/build/player/lottie.min.js")

block content
    nav(class='navbar navbar-default navbar-fixed-top', role="navigation")
        include ../components/nav

    .page-main#page-index
        #main-content
            section#home-section
                .home-brand-panel.description.container
                    .home-info
                        .home-brand Apache ECharts
                        .home-subtitle 一个基于 JavaScript 的开源可视化图表库
                        .home-btn-panel
                            a.btn.btn-main.btn-index-home(href='#{host}/tutorial.html#5%20分钟上手%20ECharts')
                                include ../components/svg/index-learn
                                span 快速入门
                            a.btn.btn-main.btn-index-home(href='#{host}/examples/zh/index.html')
                                include ../components/svg/index-example
                                span 所有示例
                            a.btn.btn-main.btn-index-home.btn-index-github(href='https://github.com/apache/echarts', target='_blank')
                                include ../components/svg/github
                                +svgGithub('#081642')
                    .home-chart
                        img(src="#{cdnPayRoot}/#{ecWWWLang}/images/index-home-pie.png?_v_=#{cdnPayVersion}")

            section
                .container
                    a.event(href='https://echarts-5-live.bj.bcebos.com/echarts-5-event.html?ref=ec-event')
                        picture
                            source.lazy(data-srcset="#{cdnPayRoot}/#{ecWWWLang}/images/event/20200128-apache-echarts-5.webp?_v_=#{cdnPayVersion}", type="image/webp")
                            source.lazy(data-srcset="#{cdnPayRoot}/#{ecWWWLang}/images/event/20200128-apache-echarts-5.png?_v_=#{cdnPayVersion}", type="image/jpeg")
                            img.lazy(data-src="#{cdnPayRoot}/#{ecWWWLang}/images/event/20200128-apache-echarts-5.png?_v_=#{cdnPayVersion}", alt="Apache ECharts 5 Official Release")

            section#feature-section
                .container
                    .index-features
                        h2.reveal 特性
                        hr.reveal
                        a.more.reveal(href='#{host}/feature.html') 查看完整特性
                    .row
                        .col-md-6
                            .index-feature#index-feature-1
                                .index-feature-left.reveal
                                    .index-feature-icon-bg#bg-icon-1
                                    .index-feature-icon#icon-1
                                .index-feature-right.reveal
                                    h3.reveal 丰富的图表类型
                                    p.reveal-later 提供开箱即用的 20 多种图表和十几种组件，并且支持各种图表以及组件的任意组合。
                        .col-md-6
                            .index-feature#index-feature-2
                                .index-feature-left.reveal
                                    .index-feature-icon-bg#bg-icon-2
                                    .index-feature-icon#icon-2
                                .index-feature-right
                                    h3.reveal 强劲的渲染引擎
                                    p.reveal-later Canvas、SVG 双引擎一键切换，增量渲染、流加载等技术实现千万级数据的流畅交互。
                        .col-md-6
                            .index-feature#index-feature-3
                                .index-feature-left.reveal
                                    .index-feature-icon-bg#bg-icon-3
                                    .index-feature-icon#icon-3
                                .index-feature-right
                                    h3.reveal 专业的数据分析
                                    p.reveal-later 通过数据集管理数据，支持数据过滤、聚类、回归，帮助实现同一份数据的多维度分析。
                        .col-md-6
                            .index-feature#index-feature-4
                                .index-feature-left.reveal
                                    .index-feature-icon-bg#bg-icon-4
                                    .index-feature-icon#icon-4
                                .index-feature-right
                                    h3.reveal 优雅的可视化设计
                                    p.reveal-later 默认设计遵从可视化原则，支持响应式设计，并且提供了灵活的配置项方便开发者定制。
                        .col-md-6
                            .index-feature#index-feature-5
                                .index-feature-left.reveal
                                    .index-feature-icon-bg#bg-icon-5
                                    .index-feature-icon#icon-5
                                .index-feature-right
                                    h3.reveal 健康的开源社区
                                    p.reveal-later 活跃的社区用户保证了项目的健康发展，也贡献了丰富的第三方插件满足不同场景的需求。
                        .col-md-6
                            .index-feature#index-feature-6
                                .index-feature-left.reveal
                                    .index-feature-icon-bg#bg-icon-6
                                    .index-feature-icon#icon-6
                                .index-feature-right
                                    h3.reveal 友好的无障碍访问
                                    p.reveal-later 智能生成的图表描述和贴花图案，帮助视力障碍人士了解图表内容，读懂图表背后的故事。
            section#publication
                .container
                    #start-line
                    .paper
                        .content
                            h2.reveal-latest ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization
                            p.note.reveal-latest 如果您在科研项目、产品、学术论文、技术报告、新闻报告、教育、专利以及其他相关活动中使用了 Apache ECharts，欢迎引用本论文。
                            .single-btn-panel.reveal-latest
                                a(href="http://www.cad.zju.edu.cn/home/vagblog/VAG_Work/echarts.pdf").pdf.reveal-later Visual Informatics, 2018 [PDF]
                        .icon
                            #paper-icon
                    #end-line
            section.normal#about-section.reveal-about
                .container
                    h3 关注我们
                    hr
                    p 关注我们以及时获得更多最新动态
                    .btn-panel.row
                        .col-lg-3.col-sm-6
                            a#btn-github(href='https://github.com/apache/echarts')
                                .btn-content
                                    .btn-logo
                                        include ../components/svg/github
                                        +svgGithub('#081642')
                                        span GitHub
                                    .icon-v-right

                        .col-lg-3.col-sm-6
                            a#btn-weixin
                                .btn-content.zh
                                    .btn-logo
                                        include ../components/svg/wechart
                                        span 公众号
                                    .weixin-code
                                        img(src="#{cdnPayRoot}/#{ecWWWLang}/images/ercode.jpg?_v_=#{cdnPayVersion}")

                        .col-lg-3.col-sm-6
                            a#btn-weibo(href='https://weibo.com/echarts')
                                .btn-content
                                    .btn-logo
                                        include ../components/svg/weibo
                                        span 微博
                                    .icon-v-right

                        .col-lg-3.col-sm-6
                            a#btn-twitter(href='https://twitter.com/ApacheECharts')
                                .btn-content
                                    .btn-logo
                                        include ../components/svg/twitter
                                        span Twitter
                                    .icon-v-right
        include ../components/footer

block extra_js
    script(src='https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js')
    script(src='#{cdnPayRoot}/#{ecWWWLang}/js/index.js?_v_=#{homeVersion}')
    <script async defer src="https://buttons.github.io/buttons.js"></script>

    script.
        window.lazyLoadOptions = {
            elements_selector: ".lazy"
        };
    script(src='https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js')