| html.sr |
| |
| extends ../layouts/basic |
| |
| block extra_head |
| title Apache ECharts |
| script(src="https://unpkg.com/scrollreveal") |
| script(src="#{cdnPayRoot}/#{ecWWWLang}/asset/lottie/js/lottie.min.js?_v_=#{cdnPayVersion}") |
| |
| 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-apache Apache |
| .home-brand ECharts |
| .home-subtitle 一个基于 JavaScript 的开源可视化图表库 |
| .home-btn-panel |
| a.btn.btn-main.btn-index-home(href='./feature.html') |
| include ../components/svg/index-learn |
| span 快速入门 |
| a.btn.btn-main.btn-index-home(href='./download.html') |
| include ../components/svg/index-example |
| span 所有示例 |
| .home-chart |
| img(src="images/index-home-pie.png") |
| |
| 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 |
| .index-features |
| h2 特性 |
| hr |
| .row |
| .col-md-6.index-feature |
| .index-feature-left |
| .index-feature-icon-bg#bg-icon-1 |
| .index-feature-icon#icon-1 |
| .index-feature-right |
| h3 丰富的图表类型 |
| p 内置的 20 多种图表、强大的自定义系列以及来自社区贡献的扩展插件，助你轻松实现各种可视化需求。 |
| .col-md-6.index-feature |
| .index-feature-left |
| .index-feature-icon-bg#bg-icon-2 |
| .index-feature-icon#icon-2 |
| .index-feature-right |
| h3 强劲的渲染引擎 |
| p 采用增量渲染、流式加载等技术，千万级数据的图表也能在网页上流畅交互。 |
| .col-md-6.index-feature |
| .index-feature-left |
| .index-feature-icon-bg#bg-icon-3 |
| .index-feature-icon#icon-3 |
| .index-feature-right |
| h3 丰富的图表类型 |
| p 内置的 20 多种图表、强大的自定义系列以及来自社区贡献的扩展插件，助你轻松实现各种可视化需求。 |
| .col-md-6.index-feature |
| .index-feature-left |
| .index-feature-icon-bg#bg-icon-4 |
| .index-feature-icon#icon-4 |
| .index-feature-right |
| h3 丰富的图表类型 |
| p 内置的 20 多种图表、强大的自定义系列以及来自社区贡献的扩展插件，助你轻松实现各种可视化需求。 |
| .col-md-6.index-feature |
| .index-feature-left |
| .index-feature-icon-bg#bg-icon-5 |
| .index-feature-icon#icon-5 |
| .index-feature-right |
| h3 丰富的图表类型 |
| p 内置的 20 多种图表、强大的自定义系列以及来自社区贡献的扩展插件，助你轻松实现各种可视化需求。 |
| .col-md-6.index-feature |
| .index-feature-left |
| .index-feature-icon-bg#bg-icon-6 |
| .index-feature-icon#icon-6 |
| .index-feature-right |
| h3 丰富的图表类型 |
| p 内置的 20 多种图表、强大的自定义系列以及来自社区贡献的扩展插件，助你轻松实现各种可视化需求。 |
| a.more(href='#') 了解更多特性 |
| |
| script(type='text/javascript'). |
| var animationMap = {}; |
| function setLottieAnimatiion(id, path) { |
| var container = id; |
| if (typeof(id) === 'string') { |
| container = document.getElementById(id); |
| } |
| |
| animationMap[id] = lottie.loadAnimation({ |
| container, // the dom element that will contain the animation |
| renderer: 'svg', |
| loop: false, |
| autoplay: true, |
| path, // the path to the animation json |
| }); |
| } |
| setLottieAnimatiion('icon-1', 'asset/lottie/json/chart.json'); |
| setLottieAnimatiion('icon-2', 'asset/lottie/json/simple.json'); |
| setLottieAnimatiion('icon-3', 'asset/lottie/json/fly.json'); |
| setLottieAnimatiion('icon-4', 'asset/lottie/json/analysis.json'); |
| setLottieAnimatiion('icon-5', 'asset/lottie/json/compatible.json'); |
| setLottieAnimatiion('icon-6', 'asset/lottie/json/grown.json'); |
| |
| for(var i = 0; i < 6; i++) { |
| setLottieAnimatiion('bg-icon-' + (i + 1), 'asset/lottie/json/bg_0'+ (i + 1) + '.json'); |
| } |
| |
| $('.list-item').mouseenter(function(event) { |
| var num = +$(this).attr('feat'); |
| var list = $('.list-item .item'); |
| |
| //- if (num === 0 || num === 3) { |
| //- $(list[num]).css('border-bottom', 0); |
| //- } |
| |
| //- if (num === 1 || num === 4) { |
| //- $(list[num - 1]).css('border-bottom', 0); |
| //- $(list[num]).css('border-bottom', 0); |
| //- } |
| |
| //- if (num === 2 || num === 5) { |
| //- $(list[num - 1]).css('border-bottom', 0); |
| //- } |
| |
| var id = $(this).find('.feature-icon-panel')[0].id; |
| animationMap[id].goToAndPlay(0); |
| }); |
| |
| $('.list-item').mouseleave(function(event) { |
| var num = +$(this).attr('feat'); |
| var list = $('.list-item .item'); |
| |
| if (num === 0 || num === 3) { |
| $(list[num]).css('border-bottom', '1px solid rgba(151,151,151,0.25)'); |
| } |
| |
| if (num === 1 || num === 4) { |
| $(list[num - 1]).css('border-bottom', '1px solid rgba(151,151,151,0.25)'); |
| $(list[num]).css('border-bottom', '1px solid rgba(151,151,151,0.25)'); |
| } |
| |
| if (num === 2 || num === 5) { |
| $(list[num - 1]).css('border-bottom', '1px solid rgba(151,151,151,0.25)'); |
| } |
| }); |
| |
| //- ScrollReveal().reveal('#feature-section', {delay: 0}); |
| //- ScrollReveal().reveal('#feature-section .title p', {delay: 300}); |
| //- ScrollReveal().reveal('#feature-section .title p.more', {delay: 600}); |
| //- ScrollReveal().reveal('#feature-section .list-item .left', {delay: 900}); |
| //- ScrollReveal().reveal('#feature-section .list-item .right h3', {delay: 1200}); |
| //- ScrollReveal().reveal('#feature-section .list-item .right .content', {delay: 1500}); |
| |
| section#publication |
| .container |
| #start-line |
| .paper |
| .content |
| h2 ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization |
| p.note 如果您在科研项目、产品、学术论文、技术报告、新闻报告、教育、专利以及其他相关活动中使用了 Apache ECharts，欢迎引用本论文。 |
| .link |
| a(href="http://www.cad.zju.edu.cn/home/vagblog/VAG_Work/echarts.pdf").pdf Visual Informatics, 2018 [PDF] |
| .icon |
| #paper-icon |
| #end-line |
| |
| script(type='text/javascript'). |
| (function () { |
| var hasStartLineShow = false; |
| var hasPaperShow = false; |
| var hasEndLineShow = false; |
| |
| setLottieAnimatiion('paper-icon', 'asset/lottie/json/paper.json'); |
| |
| |
| $('#page-index').scroll(function () { |
| var startLine = $("#start-line").offset().top; |
| var endLine = $("#end-line").offset().top; |
| |
| if (startLine >= $(window).scrollTop() && startLine < ($(window).scrollTop() + $(window).height())) { |
| if (!hasStartLineShow) { |
| if (animationMap['start-line']) { |
| animationMap['start-line'].goToAndPlay(0); |
| } |
| else { |
| setLottieAnimatiion('start-line', 'asset/lottie/json/start_line.json'); |
| } |
| |
| if (animationMap['paper-icon']) { |
| animationMap['paper-icon'].goToAndPlay(0); |
| } |
| else { |
| setLottieAnimatiion('paper-icon', 'asset/lottie/json/paper.json'); |
| } |
| hasStartLineShow = true; |
| hasPaperShow = true; |
| } |
| } |
| else { |
| if (!hasStartLineShow) { |
| hasStartLineShow = false; |
| } |
| } |
| |
| if (endLine <= 100) { |
| if (!hasEndLineShow) { |
| if (animationMap['end-line']) { |
| animationMap['end-line'].goToAndPlay(0); |
| } |
| else { |
| setLottieAnimatiion('end-line', 'asset/lottie/json/end_line.json'); |
| } |
| |
| hasEndLineShow = true; |
| } |
| } |
| else { |
| if (!hasEndLineShow) { |
| hasEndLineShow = false; |
| } |
| } |
| }); |
| |
| })() |
| |
| section.normal#about-section |
| .container |
| h3 关注我们 |
| hr |
| p 关注我们以及时获得更多最新动态 |
| .btn-panel |
| a#btn-github(href='https://github.com/apache/incubator-echarts') |
| .btn-content |
| .btn-logo |
| include ../components/svg/github |
| +svgGithub('#081642') |
| span GitHub |
| .icon-v-right |
| |
| a#btn-weixin |
| .btn-content.zh |
| .btn-logo |
| include ../components/svg/wechart |
| span 公众号 |
| .weixin-code |
| img(src="images/ercode.jpg") |
| |
| a#btn-weibo(href='https://weibo.com/echarts') |
| .btn-content |
| .btn-logo |
| include ../components/svg/weibo |
| span 微博 |
| .icon-v-right |
| |
| a#btn-twitter(href='https://twitter.com/echartsjs') |
| .btn-content |
| .btn-logo |
| include ../components/svg/twitter |
| span Twitter |
| .icon-v-right |
| |
| include ../components/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='#{cdnPayRoot}/#{ecWWWLang}/js/index.js?_v_=#{homeVersion}') |
| <script async defer src="https://buttons.github.io/buttons.js"></script> |
