| <!doctype html> |
| <html data-n-head-ssr lang="en" data-n-head="%7B%22lang%22:%7B%22ssr%22:%22en%22%7D%7D"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <title>Server Side Rendering - Cross Platform - How To Guides - Handbook - Apache ECharts</title><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="shortcut icon" type="image/png" href="https://echarts.apache.org/en/images/favicon.png"><link data-n-head="ssr" rel="stylesheet" href="https://fastly.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css"><link data-n-head="ssr" rel="stylesheet" href="https://echarts.apache.org/en/css/main.css"><link data-n-head="ssr" rel="stylesheet" href="https://fastly.jsdelivr.net/npm/docsearch.js@2.6.3/dist/cdn/docsearch.min.css"><link data-n-head="ssr" rel="preconnect" href="https://14syrifeto-dsn.algolia.net" crossorigin=""><script data-n-head="ssr" src="https://fastly.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script><script data-n-head="ssr" src="https://fastly.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script><script data-n-head="ssr" src="https://fastly.jsdelivr.net/npm/docsearch.js@2.6.3/dist/cdn/docsearch.min.js"></script><link rel="preload" href="/echarts-handbook/_nuxt/0323e7b.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/fa73816a85b29fbf7562.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/css/8117eb7.css" as="style"><link rel="preload" href="/echarts-handbook/_nuxt/js/b964c20bb1562bc48da6.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/css/093f748.css" as="style"><link rel="preload" href="/echarts-handbook/_nuxt/js/d28cad802cfdf9e4dbad.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/css/ba9ec8a.css" as="style"><link rel="preload" href="/echarts-handbook/_nuxt/js/bbca8d7f75f3cc39fb47.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/css/3556c50.css" as="style"><link rel="preload" href="/echarts-handbook/_nuxt/js/9d86a6602b3f4dd6c979.js" as="script"><link rel="stylesheet" href="/echarts-handbook/_nuxt/css/8117eb7.css"><link rel="stylesheet" href="/echarts-handbook/_nuxt/css/093f748.css"><link rel="stylesheet" href="/echarts-handbook/_nuxt/css/ba9ec8a.css"><link rel="stylesheet" href="/echarts-handbook/_nuxt/css/3556c50.css"> |
| </head> |
| <body> |
| <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png?_v_=20240226" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-input" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/echarts-handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/echarts-handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/echarts-handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/echarts-handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">Migration from v4 to v5</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/en/basics/release-note/5-3-0" class="nav-link"><span class="title">5.3</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/en/basics/release-note/5-4-0" class="nav-link"><span class="title">5.4</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/en/basics/release-note/5-5-0" class="nav-link"><span class="title">5.5</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/echarts-handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/echarts-handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/echarts-handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/echarts-handbook/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/echarts-handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/echarts-handbook/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/echarts-handbook/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/echarts-handbook/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-up"></span></a> <ul class="nav bd-sidenav level2"><li class="nav-item"><a href="/echarts-handbook/en/how-to/cross-platform/server" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/echarts-handbook/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/echarts-handbook/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Animation</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/echarts-handbook/en/how-to/animation/transition" class="nav-link"><span class="title">Data Transition</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/echarts-handbook/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----><li class="nav-item"><a href="/echarts-handbook/en/how-to/interaction/coarse-pointer" class="nav-link"><span class="title">Intelligent Pointer Snapping</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/echarts-handbook/en/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/en/best-practices/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/echarts-handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="server-side-rendering" tabindex="-1">Server-Side Rendering</h1> <p>Normally, Apache ECharts<sup>TM</sup> renders the chart dynamically in the browser and will re-render after user interactions. However, there are specific scenarios where we also need to render charts on the server side:</p> <ul><li>Reducing the FCP time and ensuring the chart is displayed immediately.</li> <li>Embedding charts in the environments such as Markdown, PDF that do not support scripts.</li></ul> <p>In these scenarios, ECharts offers both SVG and Canvas server-side rendering (SSR) solutions.</p> <table><thead><tr><th>Solution</th> <th>Rendering Result</th> <th>Pros</th></tr></thead> <tbody><tr><td>Server-Side SVG Rendering</td> <td>SVG string</td> <td>Smaller than Canvas images;<br>Vector SVG images are not blurred;<br>Support for initial animation</td></tr> <tr><td>Server-Side Canvas Rendering</td> <td>Image</td> <td>The image format is available for a wider range of scenarios, and is optional for scenarios that do not support SVG</td></tr></tbody></table> <p>In general, the server-side SVG rendering solution should be preferred, or if SVG is not applicable, the Canvas rendering solution can be considered.</p> <p>Server-side rendering also has some limitations, especially some operations related to interaction cannot be supported. Therefore, if you have interaction requirements, you can refer to "Server-Side Rendering with Hydration" below.</p> <h2 id="server-side-rendering-1" tabindex="-1">Server-Side Rendering</h2> <h3 id="server-side-svg-rendering" tabindex="-1">Server-Side SVG Rendering</h3> <blockquote><p>Version Update:</p> <ul><li>5.3.0: Introduced a new zero-dependency server-side string based SVG rendering solution, and support for initial animation</li> <li>5.5.0: Added a lightweight client runtime, which allows some interaction without the need to load the full ECharts on the client side</li></ul></blockquote> <p>We introduced a new zero-dependency server-side string based SVG rendering solution in 5.3.0.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token comment">// Server-side code</span> |
| <span class="token keyword">const</span> echarts <span class="token operator">=</span> <span class="token keyword">require</span><span class="token punctuation">(</span><span class="token string">'echarts'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| |
| <span class="token comment">// In SSR mode the first container parameter is not required</span> |
| <span class="token keyword">let</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
| renderer<span class="token operator">:</span> <span class="token string">'svg'</span><span class="token punctuation">,</span> <span class="token comment">// must use SVG rendering mode</span> |
| ssr<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// enable SSR</span> |
| width<span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">,</span> <span class="token comment">// need to specify height and width</span> |
| height<span class="token operator">:</span> <span class="token number">300</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| |
| <span class="token comment">// use setOption as normal</span> |
| chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| <span class="token comment">//...</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| |
| <span class="token comment">// Output a string</span> |
| <span class="token keyword">const</span> svgStr <span class="token operator">=</span> chart<span class="token punctuation">.</span><span class="token function">renderToSVGString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| |
| <span class="token comment">// If chart is no longer useful, consider disposing it to release memory.</span> |
| chart<span class="token punctuation">.</span><span class="token function">dispose</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| chart <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>The overall code structure is the almost same as in the browser, starting with <code>init</code> to initialise a chart example and then setting the configuration items for the chart via <code>setOption</code>. However, the parameters passed to <code>init</code> will be different from those used in the browser.</p> <ul><li>Firstly, since the SVG is rendered on the server side is string based, we don't need a container to display the rendered content, so we can pass <code>null</code> or <code>undefined</code> as the first <code>container</code> parameter in the <code>init</code>.</li> <li>Then in the third parameter of <code>init</code> we need to tell ECharts that we need to enable server-side rendering mode by specifying <code>ssr: true</code> in the display. Then ECharts will know it needs to disable the animation loop and event modules.</li> <li>We also have to specify the <code>height</code> and <code>width</code> of the chart, so if your chart size needs to be responsive to the container, you may need to think about whether server-side rendering is appropriate for your scenario.</li></ul> <p>In the browser ECharts automatically renders the result to the page after <code>setOption</code> and then determines at each frame if there is an animation that needs to be redrawn, but in Node.js we don't do this after setting <code>ssr: true</code>. Instead, we use <code>renderToSVGString</code> to render the current chart to an SVG string, which can then be returned to the front-end via HTTP Response or saved to a local file.</p> <p>Response to the browser (using Express.js as example):</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code>res<span class="token punctuation">.</span><span class="token function">writeHead</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
| <span class="token string-property property">'Content-Type'</span><span class="token operator">:</span> <span class="token string">'application/xml'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| res<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>svgStr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// svgStr is the result of chart.renderToSVGString()</span> |
| res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Or save to a local file</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code>fs<span class="token punctuation">.</span><span class="token function">writeFile</span><span class="token punctuation">(</span><span class="token string">'bar.svg'</span><span class="token punctuation">,</span> svgStr<span class="token punctuation">,</span> <span class="token string">'utf-8'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h4 id="animations-in-server-side-rendering" tabindex="-1">Animations in Server-Side Rendering</h4> <p>As you can see in the example above, even using server-side rendering, ECharts can still provide animation effects, which are achieved by embedding CSS animations in the output SVG string. There is no need for additional JavaScript to play the animation.</p> <p>However, the limitations of CSS animation prevent us from implementing more flexible animations in server-side rendering, such as bar chart racing animations, label animations, and special effects animations in the <code>lines</code> series. Animation of some of the series, such as the <code>pie</code>, have been specially optimised for server-side rendering.</p> <p>If you don't want this animation, you can turn it off by setting <code>animation: false</code> when <code>setOption</code>.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| animation<span class="token operator">:</span> <span class="token boolean">false</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h3 id="server-side-canvas-rendering" tabindex="-1">Server-Side Canvas Rendering</h3> <p>If you want the output to be an image rather than an SVG string, or if you're still using an older version, we'd recommend using <a href="https://github.com/Automattic/node-canvas">node-canvas</a> for server-side rendering, <a href="https://github.com/Automattic/node-canvas">node-canvas</a> is Canvas implementations on Node.js that provide an interface that is almost identical to the Canvas in the browser.</p> <p>Here's a simple example</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token keyword">var</span> echarts <span class="token operator">=</span> <span class="token keyword">require</span><span class="token punctuation">(</span><span class="token string">'echarts'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token keyword">const</span> <span class="token punctuation">{</span> createCanvas <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">require</span><span class="token punctuation">(</span><span class="token string">'canvas'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| |
| <span class="token comment">// In versions earlier than 5.3.0, you had to register the canvas factory with setCanvasCreator.</span> |
| <span class="token comment">// Not necessary since 5.3.0</span> |
| echarts<span class="token punctuation">.</span><span class="token function">setCanvasCreator</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</span> <span class="token function">createCanvas</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| |
| <span class="token keyword">const</span> canvas <span class="token operator">=</span> <span class="token function">createCanvas</span><span class="token punctuation">(</span><span class="token number">800</span><span class="token punctuation">,</span> <span class="token number">600</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token comment">// ECharts can use the Canvas instance created by node-canvas as a container directly</span> |
| <span class="token keyword">let</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>canvas<span class="token punctuation">)</span><span class="token punctuation">;</span> |
| |
| <span class="token comment">// setOption as normal</span> |
| chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| <span class="token comment">//...</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| |
| <span class="token keyword">const</span> buffer <span class="token operator">=</span> <span class="token function">renderChart</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBuffer</span><span class="token punctuation">(</span><span class="token string">'image/png'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| |
| <span class="token comment">// If chart is no longer useful, consider disposing it to release memory.</span> |
| chart<span class="token punctuation">.</span><span class="token function">dispose</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| chart <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span> |
| |
| <span class="token comment">// Output the PNG image via Response</span> |
| res<span class="token punctuation">.</span><span class="token function">writeHead</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
| <span class="token string-property property">'Content-Type'</span><span class="token operator">:</span> <span class="token string">'image/png'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| res<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>buffer<span class="token punctuation">)</span><span class="token punctuation">;</span> |
| res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h4 id="loading-of-images" tabindex="-1">Loading of images</h4> <p><a href="https://github.com/Automattic/node-canvas">node-canvas</a> provides an <code>Image</code> implementation for image loading. If you use to images in your code, we can adapt them using the <code>setPlatformAPI</code> interface that was introduced in <code>5.3.0</code>.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code>echarts<span class="token punctuation">.</span><span class="token function">setPlatformAPI</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| <span class="token comment">// Same with the old setCanvasCreator</span> |
| <span class="token function">createCanvas</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</span> <span class="token function">createCanvas</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token function">loadImage</span><span class="token punctuation">(</span>src<span class="token punctuation">,</span> onload<span class="token punctuation">,</span> onerror<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token keyword">const</span> img <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Image</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token comment">// must be bound to this context.</span> |
| img<span class="token punctuation">.</span>onload <span class="token operator">=</span> <span class="token function">onload</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>img<span class="token punctuation">)</span><span class="token punctuation">;</span> |
| img<span class="token punctuation">.</span>onerror <span class="token operator">=</span> <span class="token function">onerror</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>img<span class="token punctuation">)</span><span class="token punctuation">;</span> |
| img<span class="token punctuation">.</span>src <span class="token operator">=</span> src<span class="token punctuation">;</span> |
| <span class="token keyword">return</span> img<span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>If you are using images from remote, we recommend that you prefetch the image via an http request to get <code>base64</code> before passing it on as the URL of the image, to ensure that the image is loaded when render.</p> <h2 id="client-hydration" tabindex="-1">Client Hydration</h2> <h3 id="lazy-loading-full-echarts" tabindex="-1">Lazy-Loading Full ECharts</h3> <p>With the latest version of ECharts, the server-side rendering solution can do the following things along with rendering the chart:</p> <ul><li>Support for initial animation (i.e., the animation that is played when the chart is first rendered)</li> <li>Highlighting styles (i.e., the highlighting effect when the mouse moves over a bar in a bar chart)</li></ul> <p>But there are features that cannot be supported by server-side rendering:</p> <ul><li>Dynamically changing data</li> <li>Clicking on a legend to toggle whether the series is displayed or not</li> <li>Moving the mouse to show a tooltip</li> <li>Other interaction-related features</li></ul> <p>If you have such requirements, you can consider using server-side rendering to quickly output the first screen chart, then wait for <code>echarts.js</code> to finish loading and re-render the same chart on the client side, so that you can achieve normal interaction effects and dynamically change the data. Note that when rendering on the client side, you should turn on interactive components like <code>tooltip: { show: true }</code> and turn off the initial animation with <code>animation: 0</code> (the initial animation should be done by the SVG animation of the rendered result on the server side).</p> <p>As we can see, from the user experience point of view, there is almost no secondary rendering process, and the whole switching effect is very seamless. You can also use a library like <a href="https://www.npmjs.com/package/pace-js">pace-js</a> to display the loading progress bar during the loading of <code>echarts.js</code> as in the above example to solve the problem of no interactive feedback before the ECharts are fully loaded.</p> <p>Using server-side rendering with client-side rendering along with a lazy-loading <code>echarts.js</code> on the client side is a good solution for scenarios where the first screen needs to be rendered quickly and then the interaction needs to be supported. However, it takes some time to load the <code>echarts.js</code> and before it is fully loaded, there is no interactive feedback, in which case, a "Loading" text might be displayed to the user. This is a commonly recommended solution for scenarios where the first screen needs to be rendered quickly and then the interaction needs to be supported.</p> <h3 id="lightweight-client-runtime" tabindex="-1">Lightweight Client Runtime</h3> <p>Solution A provides a way for implementing complete interactions, but in some scenarios, we don't need complex interactions, we just hope to be able to perform some simple interactions on the client side based on server-side rendering, such as: clicking the legend to toggle whether the series is displayed. In this case, can we avoid loading at least a few hundred KBs of ECharts code on the client side?</p> <p>Starting from version v5.5.0, if the chart only needs the following effects and interactions, it can be achieved through server-side SVG rendering + client-side lightweight runtime:</p> <ul><li>Initial chart animation (implementation principle: the SVG rendered by the server comes with CSS animation)</li> <li>Highlight style (implementation principle: the SVG rendered by the server comes with CSS animation)</li> <li>Dynamically changing data (implementation principle: the lightweight runtime requests the server for secondary rendering)</li> <li>Click the legend to toggle whether the series is displayed (implementation principle: the lightweight runtime requests the server for secondary rendering)</li></ul> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chart-container<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span>800px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>600px</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/echarts/ssr/client/dist/index.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span> |
| const ssrClient = window['echarts-ssr-client']; |
| |
| const isSeriesShown = { |
| a: true, |
| b: true |
| }; |
| |
| function updateChart(svgStr) { |
| const container = document.getElementById('chart-container'); |
| container.innerHTML = svgStr; |
| |
| // Use the lightweight runtime to give the chart interactive capabilities |
| ssrClient.hydrate(container, { |
| on: { |
| click: (params) => { |
| if (params.ssrType === 'legend') { |
| // Click the legend element, request the server for secondary rendering |
| isSeriesShown[params.seriesName] = !isSeriesShown[params.seriesName]; |
| fetch('...?series=' + JSON.stringify(isSeriesShown)) |
| .then(res => res.text()) |
| .then(svgStr => { |
| updateChart(svgStr); |
| }); |
| } |
| } |
| } |
| }); |
| } |
| |
| // Get the SVG string rendered by the server through an AJAX request |
| fetch('...') |
| .then(res => res.text()) |
| .then(svgStr => { |
| updateChart(svgStr); |
| }); |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>The server side performs secondary rendering based on the information passed by the client about whether each series is displayed (<code>isSeriesShown</code>) and returns a new SVG string. The server-side code <a href="#server-side-svg-rendering">is the same as above</a>, and will not be repeated.</p> <blockquote><p>About state recording: Compared with pure client-side rendering, developers need to record and maintain some additional information (such as whether each series is displayed in this example). This is inevitable because HTTP requests are stateless. If you want to implement a state, either the client records the state and passes it like the above example, or the server retains the state (for example, through a session, but it requires more server memory and more complex destruction logic, so it is not recommended).</p></blockquote> <p>Using server-side SVG rendering plus client-side lightweight runtime, the advantage is that the client no longer needs to load hundreds of KBs of ECharts code, only needs to load a less than 4KB lightweight runtime code; and from the user experience, very little is sacrificed (supports initial animation, mouse highlighting). The disadvantage is that it requires a certain development cost to maintain additional state information, and it does not support interactions with high real-time requirements (such as displaying tooltips when moving the mouse). Overall, <strong>it is recommended to use it in environments with very strict requirements for code volume</strong>.</p> <h2 id="using-lightweight-runtime" tabindex="-1">Using Lightweight Runtime</h2> <p>The client-side lightweight runtime enables interaction with the SVG charts rendered by the server-side by understanding the content.</p> <p>The client-side lightweight runtime can be imported in the following ways:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code><span class="token comment"><!-- Method one: Using CDN --></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/echarts/ssr/client/dist/index.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> |
| <span class="token comment"><!-- Method two: Using NPM --></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>node_modules/echarts/ssr/client/dist/index.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h3 id="api" tabindex="-1">API</h3> <p>The following APIs are provided in the global variable <code>window['echarts-ssr-client']</code>:</p> <h4 id="hydrate(dom--htmlelement%2C-options--ecssrclientoptions)" tabindex="-1">hydrate(dom: HTMLElement, options: ECSSRClientOptions)</h4> <ul><li><code>dom</code>: The chart container, the content of which should be set as the SVG chart rendered by the server-side before calling this method</li> <li><code>options</code>: Configuration items</li></ul> <h5 id="ecssrclientoptions" tabindex="-1">ECSSRClientOptions</h5> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code>on<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| mouseover<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span>params<span class="token operator">:</span> ECSSRClientEventParams<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span><span class="token punctuation">,</span> |
| mouseout<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span>params<span class="token operator">:</span> ECSSRClientEventParams<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span><span class="token punctuation">,</span> |
| click<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span>params<span class="token operator">:</span> ECSSRClientEventParams<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span> |
| <span class="token punctuation">}</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Just like the <a href="https://echarts.apache.org/api.html#events.Mouse%20events">chart mouse events</a>, the events here are for the chart items (e.g., the bars of a bar chart, the data item of a line chart, etc.), not for the chart container.</p> <h5 id="ecssrclienteventparams" tabindex="-1">ECSSRClientEventParams</h5> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token punctuation">{</span> |
| type<span class="token operator">:</span> <span class="token string">'mouseover'</span> <span class="token operator">|</span> <span class="token string">'mouseout'</span> <span class="token operator">|</span> <span class="token string">'click'</span><span class="token punctuation">;</span> |
| ssrType<span class="token operator">:</span> <span class="token string">'legend'</span> <span class="token operator">|</span> <span class="token string">'chart'</span><span class="token punctuation">;</span> |
| seriesIndex<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> |
| dataIndex<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> |
| event<span class="token operator">:</span> Event<span class="token punctuation">;</span> |
| <span class="token punctuation">}</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <ul><li><code>type</code>: Event type</li> <li><code>ssrType</code>: Event object type, <code>legend</code> represents legend data, <code>chart</code> represents chart data object</li> <li><code>seriesIndex</code>: Series index</li> <li><code>dataIndex</code>: Data index</li> <li><code>event</code>: Native event object</li></ul> <h3 id="example" tabindex="-1">Example</h3> <p>See the "Lightweight Client Runtime" section above.</p> <h2 id="summary" tabindex="-1">Summary</h2> <p>Above, we introduced several different rendering solutions, including:</p> <ul><li>Client-side rendering</li> <li>Server-side SVG rendering</li> <li>Server-side Canvas rendering</li> <li>Client-side lightweight runtime rendering</li></ul> <p>These four rendering methods can be used in combination. Let's summarize their respective applicable scenarios:</p> <table><thead><tr><th>Rendering Solution</th> <th>Loading Volume</th> <th>Loss of Function and Interaction</th> <th>Relative Development Workload</th> <th>Recommended Scenario</th></tr></thead> <tbody><tr><td>Client-side rendering</td> <td>Largest</td> <td>None</td> <td>Minimum</td> <td>The first screen load time is not sensitive, and there is a high demand for complete functionality and interaction</td></tr> <tr><td>Client-side rendering (<a href="en/basics/import#shrinking-bundle-size">partial package importing</a> on demand)</td> <td>Large</td> <td>Large: the packages not included cannot use the corresponding functions</td> <td>Small</td> <td>The first screen load time is not sensitive, there is no strict requirement for code volume but hope to be as small as possible, only use a small part of ECharts functions, no server resources</td></tr> <tr><td>One-time server-side SVG rendering</td> <td>Small</td> <td>Large: unable to dynamically change data, does not support legend toggle series display, does not support tooltips and other interactions with high real-time requirements</td> <td>Medium</td> <td>The first screen load time is sensitive, low demand for complete functionality and interaction</td></tr> <tr><td>One-time server-side Canvas rendering</td> <td>Large</td> <td>Largest: the same as above and does not support initial animation, larger image volume, blurry when enlarged</td> <td>Medium</td> <td>The first screen load time is sensitive, low demand for complete functionality and interaction, platform restrictions cannot use SVG</td></tr> <tr><td>Server-side SVG rendering plus client-side ECharts lazy loading</td> <td>Small, then large</td> <td>Medium: cannot interact before lazy loading is completed</td> <td>Medium</td> <td>The first screen load time is sensitive, high demand for complete functionality and interaction, the chart is best not needed for interaction immediately after loading</td></tr> <tr><td>Server-side SVG rendering plus client-side lightweight runtime</td> <td>Small</td> <td>Medium: Cannot implement interactions with high real-time requirements</td> <td>Large (need to maintain chart status, define client-server interface protocol)</td> <td>The first screen load time is sensitive, low demand for complete functionality and interaction, very strict requirements for code volume, not strict requirements for interaction real-time</td></tr> <tr><td>Server-side SVG rendering plus client-side ECharts lazy loading, using lightweight runtime before lazy loading is completed</td> <td>Small, then large</td> <td>Small: Cannot perform complex interactions before lazy loading is completed</td> <td>Largest</td> <td>The first screen load time is sensitive, high demand for complete functionality and interaction, sufficient development time</td></tr></tbody></table> <p>Of course, there are some other combination possibilities, but the most common ones are the above. I believe that if you understand the characteristics of these rendering solutions, you can choose the appropriate solution based on your own scenario.</p></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">Contributors</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/how-to/cross-platform/server.md" title="Edit this Document" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">Edit this page on GitHub</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60" loading="lazy"> <span>Ovilia</span></a><a href="https://github.com/plainheart" target="_blank" class="post-contributor"><img alt="plainheart" src="https://avatars.githubusercontent.com/plainheart?size=60" loading="lazy"> <span>plainheart</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60" loading="lazy"> <span>pissang</span></a><a href="https://github.com/balloon72" target="_blank" class="post-contributor"><img alt="balloon72" src="https://avatars.githubusercontent.com/balloon72?size=60" loading="lazy"> <span>balloon72</span></a></div></div></div></div></div></div></div></div></div></div><script>window.__NUXT__=function(e,t,i,n,r,d,a,o,s,l,c,h,g,m,p,u,b,y,v,C,f,I,w,G,Z,S,V,B,W,R,A,N,X,H,k,z,L,Y,J,K,F,x,T,j,P,Q,D,M,U,E,O,q,_,$,ee,te,ie,ne){return{layout:"default",data:[{html:'<h1 id="server-side-rendering" tabindex="-1">Server-Side Rendering</h1>\n<p>Normally, Apache ECharts<sup>TM</sup> renders the chart dynamically in the browser and will re-render after user interactions. However, there are specific scenarios where we also need to render charts on the server side:</p>\n<ul>\n<li>Reducing the FCP time and ensuring the chart is displayed immediately.</li>\n<li>Embedding charts in the environments such as Markdown, PDF that do not support scripts.</li>\n</ul>\n<p>In these scenarios, ECharts offers both SVG and Canvas server-side rendering (SSR) solutions.</p>\n<table>\n<thead>\n<tr>\n<th>Solution</th>\n<th>Rendering Result</th>\n<th>Pros</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Server-Side SVG Rendering</td>\n<td>SVG string</td>\n<td>Smaller than Canvas images;<br>Vector SVG images are not blurred;<br>Support for initial animation</td>\n</tr>\n<tr>\n<td>Server-Side Canvas Rendering</td>\n<td>Image</td>\n<td>The image format is available for a wider range of scenarios, and is optional for scenarios that do not support SVG</td>\n</tr>\n</tbody>\n</table>\n<p>In general, the server-side SVG rendering solution should be preferred, or if SVG is not applicable, the Canvas rendering solution can be considered.</p>\n<p>Server-side rendering also has some limitations, especially some operations related to interaction cannot be supported. Therefore, if you have interaction requirements, you can refer to "Server-Side Rendering with Hydration" below.</p>\n<h2 id="server-side-rendering-1" tabindex="-1">Server-Side Rendering</h2>\n<h3 id="server-side-svg-rendering" tabindex="-1">Server-Side SVG Rendering</h3>\n<blockquote>\n<p>Version Update:</p>\n<ul>\n<li>5.3.0: Introduced a new zero-dependency server-side string based SVG rendering solution, and support for initial animation</li>\n<li>5.5.0: Added a lightweight client runtime, which allows some interaction without the need to load the full ECharts on the client side</li>\n</ul>\n</blockquote>\n<p>We introduced a new zero-dependency server-side string based SVG rendering solution in 5.3.0.</p>\n<md-code-block lang="ts" code="\'Ly8gU2VydmVyLXNpZGUgY29kZQpjb25zdCBlY2hhcnRzID0gcmVxdWlyZSgnZWNoYXJ0cycpOwoKLy8gSW4gU1NSIG1vZGUgdGhlIGZpcnN0IGNvbnRhaW5lciBwYXJhbWV0ZXIgaXMgbm90IHJlcXVpcmVkCmxldCBjaGFydCA9IGVjaGFydHMuaW5pdChudWxsLCBudWxsLCB7CiAgcmVuZGVyZXI6ICdzdmcnLCAvLyBtdXN0IHVzZSBTVkcgcmVuZGVyaW5nIG1vZGUKICBzc3I6IHRydWUsIC8vIGVuYWJsZSBTU1IKICB3aWR0aDogNDAwLCAvLyBuZWVkIHRvIHNwZWNpZnkgaGVpZ2h0IGFuZCB3aWR0aAogIGhlaWdodDogMzAwCn0pOwoKLy8gdXNlIHNldE9wdGlvbiBhcyBub3JtYWwKY2hhcnQuc2V0T3B0aW9uKHsKICAvLy4uLgp9KTsKCi8vIE91dHB1dCBhIHN0cmluZwpjb25zdCBzdmdTdHIgPSBjaGFydC5yZW5kZXJUb1NWR1N0cmluZygpOwoKLy8gSWYgY2hhcnQgaXMgbm8gbG9uZ2VyIHVzZWZ1bCwgY29uc2lkZXIgZGlzcG9zaW5nIGl0IHRvIHJlbGVhc2UgbWVtb3J5LgpjaGFydC5kaXNwb3NlKCk7CmNoYXJ0ID0gbnVsbDs\'" line-highlights="\'\'" />\n<p>The overall code structure is the almost same as in the browser, starting with <code>init</code> to initialise a chart example and then setting the configuration items for the chart via <code>setOption</code>. However, the parameters passed to <code>init</code> will be different from those used in the browser.</p>\n<ul>\n<li>Firstly, since the SVG is rendered on the server side is string based, we don\'t need a container to display the rendered content, so we can pass <code>null</code> or <code>undefined</code> as the first <code>container</code> parameter in the <code>init</code>.</li>\n<li>Then in the third parameter of <code>init</code> we need to tell ECharts that we need to enable server-side rendering mode by specifying <code>ssr: true</code> in the display. Then ECharts will know it needs to disable the animation loop and event modules.</li>\n<li>We also have to specify the <code>height</code> and <code>width</code> of the chart, so if your chart size needs to be responsive to the container, you may need to think about whether server-side rendering is appropriate for your scenario.</li>\n</ul>\n<p>In the browser ECharts automatically renders the result to the page after <code>setOption</code> and then determines at each frame if there is an animation that needs to be redrawn, but in Node.js we don\'t do this after setting <code>ssr: true</code>. Instead, we use <code>renderToSVGString</code> to render the current chart to an SVG string, which can then be returned to the front-end via HTTP Response or saved to a local file.</p>\n<p>Response to the browser (using Express.js as example):</p>\n<md-code-block lang="ts" code="\'cmVzLndyaXRlSGVhZCgyMDAsIHsKICAnQ29udGVudC1UeXBlJzogJ2FwcGxpY2F0aW9uL3htbCcKfSk7CnJlcy53cml0ZShzdmdTdHIpOyAvLyBzdmdTdHIgaXMgdGhlIHJlc3VsdCBvZiBjaGFydC5yZW5kZXJUb1NWR1N0cmluZygpCnJlcy5lbmQoKTs\'" line-highlights="\'\'" />\n<p>Or save to a local file</p>\n<md-code-block lang="ts" code="\'ZnMud3JpdGVGaWxlKCdiYXIuc3ZnJywgc3ZnU3RyLCAndXRmLTgnKTs\'" line-highlights="\'\'" />\n<h4 id="animations-in-server-side-rendering" tabindex="-1">Animations in Server-Side Rendering</h4>\n<p>As you can see in the example above, even using server-side rendering, ECharts can still provide animation effects, which are achieved by embedding CSS animations in the output SVG string. There is no need for additional JavaScript to play the animation.</p>\n<p>However, the limitations of CSS animation prevent us from implementing more flexible animations in server-side rendering, such as bar chart racing animations, label animations, and special effects animations in the <code>lines</code> series. Animation of some of the series, such as the <code>pie</code>, have been specially optimised for server-side rendering.</p>\n<p>If you don\'t want this animation, you can turn it off by setting <code>animation: false</code> when <code>setOption</code>.</p>\n<md-code-block lang="ts" code="\'c2V0T3B0aW9uKHsKICBhbmltYXRpb246IGZhbHNlCn0pOw\'" line-highlights="\'\'" />\n<h3 id="server-side-canvas-rendering" tabindex="-1">Server-Side Canvas Rendering</h3>\n<p>If you want the output to be an image rather than an SVG string, or if you\'re still using an older version, we\'d recommend using <a href="https://github.com/Automattic/node-canvas">node-canvas</a> for server-side rendering, <a href="https://github.com/Automattic/node-canvas">node-canvas</a> is Canvas implementations on Node.js that provide an interface that is almost identical to the Canvas in the browser.</p>\n<p>Here\'s a simple example</p>\n<md-code-block lang="ts" code="\'dmFyIGVjaGFydHMgPSByZXF1aXJlKCdlY2hhcnRzJyk7CmNvbnN0IHsgY3JlYXRlQ2FudmFzIH0gPSByZXF1aXJlKCdjYW52YXMnKTsKCi8vIEluIHZlcnNpb25zIGVhcmxpZXIgdGhhbiA1LjMuMCwgeW91IGhhZCB0byByZWdpc3RlciB0aGUgY2FudmFzIGZhY3Rvcnkgd2l0aCBzZXRDYW52YXNDcmVhdG9yLgovLyBOb3QgbmVjZXNzYXJ5IHNpbmNlIDUuMy4wCmVjaGFydHMuc2V0Q2FudmFzQ3JlYXRvcigoKSA9PiB7CiAgcmV0dXJuIGNyZWF0ZUNhbnZhcygpOwp9KTsKCmNvbnN0IGNhbnZhcyA9IGNyZWF0ZUNhbnZhcyg4MDAsIDYwMCk7Ci8vIEVDaGFydHMgY2FuIHVzZSB0aGUgQ2FudmFzIGluc3RhbmNlIGNyZWF0ZWQgYnkgbm9kZS1jYW52YXMgYXMgYSBjb250YWluZXIgZGlyZWN0bHkKbGV0IGNoYXJ0ID0gZWNoYXJ0cy5pbml0KGNhbnZhcyk7CgovLyBzZXRPcHRpb24gYXMgbm9ybWFsCmNoYXJ0LnNldE9wdGlvbih7CiAgLy8uLi4KfSk7Cgpjb25zdCBidWZmZXIgPSByZW5kZXJDaGFydCgpLnRvQnVmZmVyKCdpbWFnZS9wbmcnKTsKCi8vIElmIGNoYXJ0IGlzIG5vIGxvbmdlciB1c2VmdWwsIGNvbnNpZGVyIGRpc3Bvc2luZyBpdCB0byByZWxlYXNlIG1lbW9yeS4KY2hhcnQuZGlzcG9zZSgpOwpjaGFydCA9IG51bGw7CgovLyBPdXRwdXQgdGhlIFBORyBpbWFnZSB2aWEgUmVzcG9uc2UKcmVzLndyaXRlSGVhZCgyMDAsIHsKICAnQ29udGVudC1UeXBlJzogJ2ltYWdlL3BuZycKfSk7CnJlcy53cml0ZShidWZmZXIpOwpyZXMuZW5kKCk7\'" line-highlights="\'\'" />\n<h4 id="loading-of-images" tabindex="-1">Loading of images</h4>\n<p><a href="https://github.com/Automattic/node-canvas">node-canvas</a> provides an <code>Image</code> implementation for image loading. If you use to images in your code, we can adapt them using the <code>setPlatformAPI</code> interface that was introduced in <code>5.3.0</code>.</p>\n<md-code-block lang="ts" code="\'ZWNoYXJ0cy5zZXRQbGF0Zm9ybUFQSSh7CiAgLy8gU2FtZSB3aXRoIHRoZSBvbGQgc2V0Q2FudmFzQ3JlYXRvcgogIGNyZWF0ZUNhbnZhcygpIHsKICAgIHJldHVybiBjcmVhdGVDYW52YXMoKTsKICB9LAogIGxvYWRJbWFnZShzcmMsIG9ubG9hZCwgb25lcnJvcikgewogICAgY29uc3QgaW1nID0gbmV3IEltYWdlKCk7CiAgICAvLyBtdXN0IGJlIGJvdW5kIHRvIHRoaXMgY29udGV4dC4KICAgIGltZy5vbmxvYWQgPSBvbmxvYWQuYmluZChpbWcpOwogICAgaW1nLm9uZXJyb3IgPSBvbmVycm9yLmJpbmQoaW1nKTsKICAgIGltZy5zcmMgPSBzcmM7CiAgICByZXR1cm4gaW1nOwogIH0KfSk7\'" line-highlights="\'\'" />\n<p>If you are using images from remote, we recommend that you prefetch the image via an http request to get <code>base64</code> before passing it on as the URL of the image, to ensure that the image is loaded when render.</p>\n<h2 id="client-hydration" tabindex="-1">Client Hydration</h2>\n<h3 id="lazy-loading-full-echarts" tabindex="-1">Lazy-Loading Full ECharts</h3>\n<p>With the latest version of ECharts, the server-side rendering solution can do the following things along with rendering the chart:</p>\n<ul>\n<li>Support for initial animation (i.e., the animation that is played when the chart is first rendered)</li>\n<li>Highlighting styles (i.e., the highlighting effect when the mouse moves over a bar in a bar chart)</li>\n</ul>\n<p>But there are features that cannot be supported by server-side rendering:</p>\n<ul>\n<li>Dynamically changing data</li>\n<li>Clicking on a legend to toggle whether the series is displayed or not</li>\n<li>Moving the mouse to show a tooltip</li>\n<li>Other interaction-related features</li>\n</ul>\n<p>If you have such requirements, you can consider using server-side rendering to quickly output the first screen chart, then wait for <code>echarts.js</code> to finish loading and re-render the same chart on the client side, so that you can achieve normal interaction effects and dynamically change the data. Note that when rendering on the client side, you should turn on interactive components like <code>tooltip: { show: true }</code> and turn off the initial animation with <code>animation: 0</code> (the initial animation should be done by the SVG animation of the rendered result on the server side).</p>\n<p>As we can see, from the user experience point of view, there is almost no secondary rendering process, and the whole switching effect is very seamless. You can also use a library like <a href="https://www.npmjs.com/package/pace-js">pace-js</a> to display the loading progress bar during the loading of <code>echarts.js</code> as in the above example to solve the problem of no interactive feedback before the ECharts are fully loaded.</p>\n<p>Using server-side rendering with client-side rendering along with a lazy-loading <code>echarts.js</code> on the client side is a good solution for scenarios where the first screen needs to be rendered quickly and then the interaction needs to be supported. However, it takes some time to load the <code>echarts.js</code> and before it is fully loaded, there is no interactive feedback, in which case, a "Loading" text might be displayed to the user. This is a commonly recommended solution for scenarios where the first screen needs to be rendered quickly and then the interaction needs to be supported.</p>\n<h3 id="lightweight-client-runtime" tabindex="-1">Lightweight Client Runtime</h3>\n<p>Solution A provides a way for implementing complete interactions, but in some scenarios, we don\'t need complex interactions, we just hope to be able to perform some simple interactions on the client side based on server-side rendering, such as: clicking the legend to toggle whether the series is displayed. In this case, can we avoid loading at least a few hundred KBs of ECharts code on the client side?</p>\n<p>Starting from version v5.5.0, if the chart only needs the following effects and interactions, it can be achieved through server-side SVG rendering + client-side lightweight runtime:</p>\n<ul>\n<li>Initial chart animation (implementation principle: the SVG rendered by the server comes with CSS animation)</li>\n<li>Highlight style (implementation principle: the SVG rendered by the server comes with CSS animation)</li>\n<li>Dynamically changing data (implementation principle: the lightweight runtime requests the server for secondary rendering)</li>\n<li>Click the legend to toggle whether the series is displayed (implementation principle: the lightweight runtime requests the server for secondary rendering)</li>\n</ul>\n<md-code-block lang="html" code="\'PGRpdiBpZD0iY2hhcnQtY29udGFpbmVyIiBzdHlsZT0id2lkdGg6ODAwcHg7aGVpZ2h0OjYwMHB4Ij48L2Rpdj4KCjxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL2VjaGFydHMvc3NyL2NsaWVudC9kaXN0L2luZGV4Lm1pbi5qcyI-PC9zY3JpcHQ-CjxzY3JpcHQ-CmNvbnN0IHNzckNsaWVudCA9IHdpbmRvd1snZWNoYXJ0cy1zc3ItY2xpZW50J107Cgpjb25zdCBpc1Nlcmllc1Nob3duID0gewogIGE6IHRydWUsCiAgYjogdHJ1ZQp9OwoKZnVuY3Rpb24gdXBkYXRlQ2hhcnQoc3ZnU3RyKSB7CiAgY29uc3QgY29udGFpbmVyID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2NoYXJ0LWNvbnRhaW5lcicpOwogIGNvbnRhaW5lci5pbm5lckhUTUwgPSBzdmdTdHI7CgogIC8vIFVzZSB0aGUgbGlnaHR3ZWlnaHQgcnVudGltZSB0byBnaXZlIHRoZSBjaGFydCBpbnRlcmFjdGl2ZSBjYXBhYmlsaXRpZXMKICBzc3JDbGllbnQuaHlkcmF0ZShjb250YWluZXIsIHsKICAgIG9uOiB7CiAgICAgIGNsaWNrOiAocGFyYW1zKSA9PiB7CiAgICAgICAgaWYgKHBhcmFtcy5zc3JUeXBlID09PSAnbGVnZW5kJykgewogICAgICAgICAgLy8gQ2xpY2sgdGhlIGxlZ2VuZCBlbGVtZW50LCByZXF1ZXN0IHRoZSBzZXJ2ZXIgZm9yIHNlY29uZGFyeSByZW5kZXJpbmcKICAgICAgICAgIGlzU2VyaWVzU2hvd25bcGFyYW1zLnNlcmllc05hbWVdID0gIWlzU2VyaWVzU2hvd25bcGFyYW1zLnNlcmllc05hbWVdOwogICAgICAgICAgZmV0Y2goJy4uLj9zZXJpZXM9JyArIEpTT04uc3RyaW5naWZ5KGlzU2VyaWVzU2hvd24pKQogICAgICAgICAgICAudGhlbihyZXMgPT4gcmVzLnRleHQoKSkKICAgICAgICAgICAgLnRoZW4oc3ZnU3RyID0-IHsKICAgICAgICAgICAgICB1cGRhdGVDaGFydChzdmdTdHIpOwogICAgICAgICAgICB9KTsKICAgICAgICB9CiAgICAgIH0KICAgIH0KICB9KTsKfQoKLy8gR2V0IHRoZSBTVkcgc3RyaW5nIHJlbmRlcmVkIGJ5IHRoZSBzZXJ2ZXIgdGhyb3VnaCBhbiBBSkFYIHJlcXVlc3QKZmV0Y2goJy4uLicpCiAgLnRoZW4ocmVzID0-IHJlcy50ZXh0KCkpCiAgLnRoZW4oc3ZnU3RyID0-IHsKICAgIHVwZGF0ZUNoYXJ0KHN2Z1N0cik7CiAgfSk7Cjwvc2NyaXB0Pg\'" line-highlights="\'\'" />\n<p>The server side performs secondary rendering based on the information passed by the client about whether each series is displayed (<code>isSeriesShown</code>) and returns a new SVG string. The server-side code <a href="#server-side-svg-rendering">is the same as above</a>, and will not be repeated.</p>\n<blockquote>\n<p>About state recording: Compared with pure client-side rendering, developers need to record and maintain some additional information (such as whether each series is displayed in this example). This is inevitable because HTTP requests are stateless. If you want to implement a state, either the client records the state and passes it like the above example, or the server retains the state (for example, through a session, but it requires more server memory and more complex destruction logic, so it is not recommended).</p>\n</blockquote>\n<p>Using server-side SVG rendering plus client-side lightweight runtime, the advantage is that the client no longer needs to load hundreds of KBs of ECharts code, only needs to load a less than 4KB lightweight runtime code; and from the user experience, very little is sacrificed (supports initial animation, mouse highlighting). The disadvantage is that it requires a certain development cost to maintain additional state information, and it does not support interactions with high real-time requirements (such as displaying tooltips when moving the mouse). Overall, <strong>it is recommended to use it in environments with very strict requirements for code volume</strong>.</p>\n<h2 id="using-lightweight-runtime" tabindex="-1">Using Lightweight Runtime</h2>\n<p>The client-side lightweight runtime enables interaction with the SVG charts rendered by the server-side by understanding the content.</p>\n<p>The client-side lightweight runtime can be imported in the following ways:</p>\n<md-code-block lang="html" code="\'PCEtLSBNZXRob2Qgb25lOiBVc2luZyBDRE4gLS0-CjxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL2VjaGFydHMvc3NyL2NsaWVudC9kaXN0L2luZGV4Lm1pbi5qcyI-PC9zY3JpcHQ-CjwhLS0gTWV0aG9kIHR3bzogVXNpbmcgTlBNIC0tPgo8c2NyaXB0IHNyYz0ibm9kZV9tb2R1bGVzL2VjaGFydHMvc3NyL2NsaWVudC9kaXN0L2luZGV4LmpzIj48L3NjcmlwdD4\'" line-highlights="\'\'" />\n<h3 id="api" tabindex="-1">API</h3>\n<p>The following APIs are provided in the global variable <code>window[\'echarts-ssr-client\']</code>:</p>\n<h4 id="hydrate(dom--htmlelement%2C-options--ecssrclientoptions)" tabindex="-1">hydrate(dom: HTMLElement, options: ECSSRClientOptions)</h4>\n<ul>\n<li><code>dom</code>: The chart container, the content of which should be set as the SVG chart rendered by the server-side before calling this method</li>\n<li><code>options</code>: Configuration items</li>\n</ul>\n<h5 id="ecssrclientoptions" tabindex="-1">ECSSRClientOptions</h5>\n<md-code-block lang="ts" code="\'b24_OiB7CiAgbW91c2VvdmVyPzogKHBhcmFtczogRUNTU1JDbGllbnRFdmVudFBhcmFtcykgPT4gdm9pZCwKICBtb3VzZW91dD86IChwYXJhbXM6IEVDU1NSQ2xpZW50RXZlbnRQYXJhbXMpID0-IHZvaWQsCiAgY2xpY2s_OiAocGFyYW1zOiBFQ1NTUkNsaWVudEV2ZW50UGFyYW1zKSA9PiB2b2lkCn0\'" line-highlights="\'\'" />\n<p>Just like the <a href="https://echarts.apache.org/api.html#events.Mouse%20events">chart mouse events</a>, the events here are for the chart items (e.g., the bars of a bar chart, the data item of a line chart, etc.), not for the chart container.</p>\n<h5 id="ecssrclienteventparams" tabindex="-1">ECSSRClientEventParams</h5>\n<md-code-block lang="ts" code="\'ewogIHR5cGU6ICdtb3VzZW92ZXInIHwgJ21vdXNlb3V0JyB8ICdjbGljayc7CiAgc3NyVHlwZTogJ2xlZ2VuZCcgfCAnY2hhcnQnOwogIHNlcmllc0luZGV4PzogbnVtYmVyOwogIGRhdGFJbmRleD86IG51bWJlcjsKICBldmVudDogRXZlbnQ7Cn0\'" line-highlights="\'\'" />\n<ul>\n<li><code>type</code>: Event type</li>\n<li><code>ssrType</code>: Event object type, <code>legend</code> represents legend data, <code>chart</code> represents chart data object</li>\n<li><code>seriesIndex</code>: Series index</li>\n<li><code>dataIndex</code>: Data index</li>\n<li><code>event</code>: Native event object</li>\n</ul>\n<h3 id="example" tabindex="-1">Example</h3>\n<p>See the "Lightweight Client Runtime" section above.</p>\n<h2 id="summary" tabindex="-1">Summary</h2>\n<p>Above, we introduced several different rendering solutions, including:</p>\n<ul>\n<li>Client-side rendering</li>\n<li>Server-side SVG rendering</li>\n<li>Server-side Canvas rendering</li>\n<li>Client-side lightweight runtime rendering</li>\n</ul>\n<p>These four rendering methods can be used in combination. Let\'s summarize their respective applicable scenarios:</p>\n<table>\n<thead>\n<tr>\n<th>Rendering Solution</th>\n<th>Loading Volume</th>\n<th>Loss of Function and Interaction</th>\n<th>Relative Development Workload</th>\n<th>Recommended Scenario</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Client-side rendering</td>\n<td>Largest</td>\n<td>None</td>\n<td>Minimum</td>\n<td>The first screen load time is not sensitive, and there is a high demand for complete functionality and interaction</td>\n</tr>\n<tr>\n<td>Client-side rendering (<a href="en/basics/import#shrinking-bundle-size">partial package importing</a> on demand)</td>\n<td>Large</td>\n<td>Large: the packages not included cannot use the corresponding functions</td>\n<td>Small</td>\n<td>The first screen load time is not sensitive, there is no strict requirement for code volume but hope to be as small as possible, only use a small part of ECharts functions, no server resources</td>\n</tr>\n<tr>\n<td>One-time server-side SVG rendering</td>\n<td>Small</td>\n<td>Large: unable to dynamically change data, does not support legend toggle series display, does not support tooltips and other interactions with high real-time requirements</td>\n<td>Medium</td>\n<td>The first screen load time is sensitive, low demand for complete functionality and interaction</td>\n</tr>\n<tr>\n<td>One-time server-side Canvas rendering</td>\n<td>Large</td>\n<td>Largest: the same as above and does not support initial animation, larger image volume, blurry when enlarged</td>\n<td>Medium</td>\n<td>The first screen load time is sensitive, low demand for complete functionality and interaction, platform restrictions cannot use SVG</td>\n</tr>\n<tr>\n<td>Server-side SVG rendering plus client-side ECharts lazy loading</td>\n<td>Small, then large</td>\n<td>Medium: cannot interact before lazy loading is completed</td>\n<td>Medium</td>\n<td>The first screen load time is sensitive, high demand for complete functionality and interaction, the chart is best not needed for interaction immediately after loading</td>\n</tr>\n<tr>\n<td>Server-side SVG rendering plus client-side lightweight runtime</td>\n<td>Small</td>\n<td>Medium: Cannot implement interactions with high real-time requirements</td>\n<td>Large (need to maintain chart status, define client-server interface protocol)</td>\n<td>The first screen load time is sensitive, low demand for complete functionality and interaction, very strict requirements for code volume, not strict requirements for interaction real-time</td>\n</tr>\n<tr>\n<td>Server-side SVG rendering plus client-side ECharts lazy loading, using lightweight runtime before lazy loading is completed</td>\n<td>Small, then large</td>\n<td>Small: Cannot perform complex interactions before lazy loading is completed</td>\n<td>Largest</td>\n<td>The first screen load time is sensitive, high demand for complete functionality and interaction, sufficient development time</td>\n</tr>\n</tbody>\n</table>\n<p>Of course, there are some other combination possibilities, but the most common ones are the above. I believe that if you understand the characteristics of these rendering solutions, you can choose the appropriate solution based on your own scenario.</p>\n',postPath:"en/how-to/cross-platform/server",title:"Server Side Rendering - Cross Platform - How To Guides"}],fetch:{},error:null,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:n},{title:"入门篇",dir:r,children:[{title:"获取 ECharts",dir:d},{title:"在项目中引入 ECharts",dir:a},{title:"资源列表",dir:o,draft:e},{title:"寻求帮助",dir:s},{title:"版本特性",dir:l,children:[{title:"ECharts 5 特性介绍",dir:c},{title:"v4 升级 v5 指南",dir:h},{title:5.2,dir:g},{title:5.3,dir:m},{title:5.4,dir:p},{title:5.5,dir:u}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:y},{title:"配置项",dir:v,draft:e},{title:"系列",dir:C,draft:e},{title:"样式",dir:f},{title:"数据集",dir:I},{title:"数据转换",dir:w},{title:"坐标系",dir:G,draft:e},{title:"坐标轴",dir:Z},{title:"视觉映射",dir:i},{title:"图例",dir:S},{title:"事件与行为",dir:V}]},{title:"应用篇",dir:B,children:[{title:"常用图表类型",dir:W,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:R},{title:"堆叠柱状图",dir:A},{title:"动态排序柱状图",dir:N},{title:"极坐标系柱状图",dir:X,draft:e},{title:"阶梯瀑布图",dir:H},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:k,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:L},{title:"区域面积图",dir:Y},{title:"平滑曲线图",dir:J},{title:"阶梯线图",dir:K}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:F},{title:"圆环图",dir:x},{title:"南丁格尔图（玫瑰图）",dir:T}]},{title:"散点图",dir:j,children:[{title:"基础散点图",dir:P}]}]},{title:"移动端优化",dir:t,draft:e},{title:"跨平台方案",dir:Q,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:D},{title:"数据下钻",dir:M,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:U}]},{title:"动画",dir:E,children:[{title:"数据过渡动画",dir:O}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e},{title:"智能指针吸附",dir:$}]}]},{title:"最佳实践",dir:ee,children:[{title:"移动端优化",dir:t,draft:e},{title:te,dir:ie},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ne}]}],en:[{title:"Get Started",dir:n},{title:"Basics",dir:r,children:[{title:"Download ECharts",dir:d},{title:"Import ECharts",dir:a},{title:"Resources",dir:o,draft:e},{title:"Get Help",dir:s},{title:"What's New",dir:l,children:[{title:"ECharts 5 Features",dir:c},{title:"Migration from v4 to v5",dir:h},{title:5.2,dir:g},{title:5.3,dir:m},{title:5.4,dir:p},{title:5.5,dir:u}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:y},{title:"Chart Option",dir:v,draft:e},{title:"Series",dir:C,draft:e},{title:"Style",dir:f},{title:"Dataset",dir:I},{title:"Data Transform",dir:w},{title:"Coordinate",dir:G,draft:e},{title:"Axis",dir:Z},{title:"Visual Mapping",dir:i},{title:"Legend",dir:S},{title:"Event and Action",dir:V}]},{title:"How To Guides",dir:B,children:[{title:"Common Charts",dir:W,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:R},{title:"Stacked Bar",dir:A},{title:"Bar Racing",dir:N},{title:"Bar Polar",dir:X,draft:e},{title:"Waterfall",dir:H}]},{title:"Line",dir:k,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:L},{title:"Area Chart",dir:Y},{title:"Smoothed Line",dir:J},{title:"Step Line",dir:K}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:F},{title:"Ring Style",dir:x},{title:"Rose Style",dir:T}]},{title:"Scatter",dir:j,children:[{title:"Basic Scatter",dir:P}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:Q,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:D},{title:"Drilldown",dir:M,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:U}]},{title:"Animation",dir:E,children:[{title:"Data Transition",dir:O}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:e},{title:"Intelligent Pointer Snapping",dir:$}]}]},{title:"Best Practices",dir:ee,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:te,dir:ie},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ne}]}]},config:{routerBase:"/echarts-handbook",rootPath:"https://apache.github.io/echarts-handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:e,routePath:"/en/how-to/cross-platform/server",config:{_app:{basePath:"/echarts-handbook/",assetsPath:"/echarts-handbook/_nuxt/",cdnURL:null}}}}(!0,"mobile","visual-map","get-started","basics","download","import","resource","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","5-3-0","5-4-0","5-5-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","how-to","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","animation","transition","interaction","connect","coarse-pointer","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/echarts-handbook/_nuxt/0323e7b.js" defer></script><script src="/echarts-handbook/_nuxt/js/bbca8d7f75f3cc39fb47.js" defer></script><script src="/echarts-handbook/_nuxt/js/9d86a6602b3f4dd6c979.js" defer></script><script src="/echarts-handbook/_nuxt/js/fa73816a85b29fbf7562.js" defer></script><script src="/echarts-handbook/_nuxt/js/b964c20bb1562bc48da6.js" defer></script><script src="/echarts-handbook/_nuxt/js/d28cad802cfdf9e4dbad.js" defer></script><noscript data-n-head="ssr" data-body="true"><div class="no-script"><strong>很抱歉，Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript> |
| <script type="text/javascript">document.getElementById("nav-doc").className="active"</script> |
| <script async src="https://www.googletagmanager.com/gtag/js?id=UA-141228404-1"></script> |
| <script>var _hmt=_hmt||[];function gtag(){dataLayer.push(arguments)}!function(){var e=document.createElement("script"),t=(e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395",document.getElementsByTagName("script")[0]);t.parentNode.insertBefore(e,t)}(),window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-141228404-1")</script> |
| </body> |
| </html> |
