├── .asf.yaml ├── .eslintrc.js ├── .github └── workflows │ └── deploy.yml ├── .gitignore ├── .gitmodules ├── .prettierrc ├── LICENSE ├── README.md ├── app.html ├── assets └── README.md ├── build ├── generate-contributors.js └── generate.js ├── components ├── README.md ├── helper │ ├── contributors.ts │ ├── loadScripts.ts │ ├── post.ts │ └── sandbox.ts ├── markdown │ ├── Alert.vue │ ├── CodeBlock.vue │ ├── CodeBlockCopyClipboard.vue │ ├── Example.vue │ ├── Live.vue │ ├── OptionLink.vue │ └── global.ts └── partials │ ├── Contributors.vue │ ├── Navbar.vue │ ├── Navbar │ ├── en.vue │ └── zh.vue │ ├── PostContent.ts │ ├── Sidebar.vue │ └── SidebarNavItem.vue ├── configs ├── config.asf.js ├── config.dev.js ├── config.gh.js ├── config.js ├── config.local.js └── config.localsite.js ├── contents ├── .prettierrc ├── en │ ├── basics │ │ ├── download.md │ │ ├── help.md │ │ ├── import.md │ │ ├── inspiration.md │ │ └── release-note │ │ │ ├── 5-2-0.md │ │ │ ├── 5-3-0.md │ │ │ ├── 5-4-0.md │ │ │ ├── 5-5-0.md │ │ │ ├── 5-6-0.md │ │ │ ├── v5-feature.md │ │ │ └── v5-upgrade-guide.md │ ├── best-practices │ │ ├── aria.md │ │ ├── canvas-vs-svg.md │ │ ├── design │ │ │ └── color-enhance.md │ │ ├── mobile.md │ │ └── specification │ │ │ ├── bar │ │ │ ├── basic-bar.md │ │ │ ├── bi-directional-bar.md │ │ │ ├── grouped-bar.md │ │ │ └── stacked-bar.md │ │ │ ├── funnel.md │ │ │ ├── gauge.md │ │ │ ├── line │ │ │ ├── area.md │ │ │ ├── basic-line.md │ │ │ └── stacked-area.md │ │ │ ├── pie │ │ │ └── basic-pie.md │ │ │ ├── radar.md │ │ │ └── scatter │ │ │ ├── bubble.md │ │ │ └── scatter.md │ ├── concepts │ │ ├── axis.md │ │ ├── chart-size.md │ │ ├── coordinate.md │ │ ├── data-transform.md │ │ ├── dataset.md │ │ ├── event.md │ │ ├── legend.md │ │ ├── options.md │ │ ├── series.md │ │ ├── style.md │ │ ├── tooltip.md │ │ └── visual-map.md │ ├── get-started.md │ ├── how-to │ │ ├── animation │ │ │ └── transition.md │ │ ├── chart-types │ │ │ ├── bar │ │ │ │ ├── bar-race.md │ │ │ │ ├── basic-bar.md │ │ │ │ ├── polar-bar.md │ │ │ │ ├── stacked-bar.md │ │ │ │ └── waterfall.md │ │ │ ├── line │ │ │ │ ├── area-line.md │ │ │ │ ├── basic-line.md │ │ │ │ ├── smooth-line.md │ │ │ │ ├── stacked-line.md │ │ │ │ └── step-line.md │ │ │ ├── pie │ │ │ │ ├── basic-pie.md │ │ │ │ ├── doughnut.md │ │ │ │ └── rose.md │ │ │ └── scatter │ │ │ │ └── basic-scatter.md │ │ ├── cross-platform │ │ │ └── server.md │ │ ├── data │ │ │ ├── drilldown.md │ │ │ └── dynamic-data.md │ │ ├── interaction │ │ │ ├── coarse-pointer.md │ │ │ └── drag.md │ │ └── label │ │ │ └── rich-text.md │ ├── meta │ │ └── edit-guide.md │ └── posts.yml └── zh │ ├── basics │ ├── download.md │ ├── help.md │ ├── import.md │ ├── inspiration.md │ ├── release-note │ │ ├── 5-2-0.md │ │ ├── 5-3-0.md │ │ ├── 5-4-0.md │ │ ├── 5-5-0.md │ │ ├── 5-6-0.md │ │ ├── v5-feature.md │ │ └── v5-upgrade-guide.md │ └── resource.md │ ├── best-practices │ ├── aria.md │ ├── canvas-vs-svg.md │ ├── design │ │ └── color-enhance.md │ ├── mobile.md │ └── specification │ │ ├── bar │ │ ├── basic-bar.md │ │ ├── bi-directional-bar.md │ │ ├── grouped-bar.md │ │ └── stacked-bar.md │ │ ├── funnel.md │ │ ├── gauge.md │ │ ├── line │ │ ├── area.md │ │ ├── basic-line.md │ │ └── stacked-area.md │ │ ├── pie │ │ └── basic-pie.md │ │ ├── radar.md │ │ └── scatter │ │ ├── bubble.md │ │ └── scatter.md │ ├── concepts │ ├── axis.md │ ├── chart-size.md │ ├── coordinate.md │ ├── data-transform.md │ ├── dataset.md │ ├── event.md │ ├── legend.md │ ├── options.md │ ├── series.md │ ├── style.md │ ├── tooltip.md │ └── visual-map.md │ ├── get-started.md │ ├── how-to │ ├── animation │ │ ├── transition.md │ │ └── universal-transition.md │ ├── chart-types │ │ ├── bar │ │ │ ├── bar-race.md │ │ │ ├── basic-bar.md │ │ │ ├── polar-bar.md │ │ │ ├── stacked-bar.md │ │ │ └── waterfall.md │ │ ├── line │ │ │ ├── area-line.md │ │ │ ├── basic-line.md │ │ │ ├── smooth-line.md │ │ │ ├── stacked-line.md │ │ │ └── step-line.md │ │ ├── pie │ │ │ ├── basic-pie.md │ │ │ ├── doughnut.md │ │ │ └── rose.md │ │ └── scatter │ │ │ └── basic-scatter.md │ ├── connect.md │ ├── cross-platform │ │ ├── baidu-app.md │ │ ├── server.md │ │ └── wechat-app.md │ ├── data │ │ ├── drilldown.md │ │ └── dynamic-data.md │ ├── interaction │ │ ├── coarse-pointer.md │ │ └── drag.md │ ├── label │ │ └── rich-text.md │ └── mobile.md │ ├── meta │ ├── edit-guide.md │ └── writing.md │ └── posts.yml ├── layouts └── default.vue ├── nuxt.config.js ├── package-lock.json ├── package.json ├── pages ├── _.vue └── index.vue ├── static ├── README.md └── images │ ├── 5-2-0 │ ├── group-transition-2.gif │ ├── group-transition.gif │ ├── polar-bar-label.jpg │ ├── universal-transition-2.gif │ ├── universal-transition-3.gif │ └── universal-transition.gif │ ├── 5-3-0 │ ├── map-projection.gif │ ├── pie-label-after.png │ ├── pie-label-after2.png │ ├── pie-label-before.png │ ├── pie-label-before2.png │ ├── svg-after.gif │ └── svg-before.gif │ ├── 5-4-0 │ ├── pie-amap.png │ ├── pie-bmap.png │ ├── pie-calendar.png │ ├── pie-geo.png │ └── pie-grid.png │ ├── 5-5-0 │ └── ssr-example.png │ ├── 5-6-0 │ ├── axis-tooltip.png │ └── sunburst-emphasis-relative.png │ ├── demo.png │ ├── design │ ├── axis │ │ ├── charts_axis_img01.jpg │ │ ├── charts_axis_img02.jpg │ │ ├── charts_axis_img02.png │ │ ├── charts_axis_img04.png │ │ ├── charts_axis_img05.png │ │ ├── charts_axis_img07.png │ │ ├── charts_axis_img10.png │ │ └── charts_axis_img12.png │ ├── bar │ │ ├── bar01.jpg │ │ ├── bar02.jpg │ │ ├── bar03.jpg │ │ └── bar04.jpg │ ├── bi-directional-bar │ │ ├── bi-directional-bar01.jpg │ │ └── bi-directional-bar02.jpg │ ├── color │ │ ├── color01.png │ │ ├── color02.png │ │ ├── color03.png │ │ └── color04.png │ ├── legend │ │ ├── charts_sign_img01.png │ │ ├── charts_sign_img02.png │ │ ├── charts_sign_img03.png │ │ └── charts_sign_img04.png │ ├── line │ │ └── line01.jpg │ ├── pie │ │ ├── pie01.jpg │ │ ├── pie02.jpg │ │ ├── pie03.jpg │ │ └── pie04.jpg │ └── scatter │ │ └── scatter5.jpg │ ├── feature-v5 │ ├── dashboard-pointer.png │ ├── dataZoom.png │ ├── dirty-rect.gif │ ├── dirty-rect.png │ ├── echarts-5-en.png │ ├── echarts-5.png │ ├── gauge-pointer.png │ ├── new-theme-dark.png │ ├── new-theme-light.png │ ├── new-tooltip-2 copy.png │ ├── new-tooltip-2.png │ ├── new-tooltip.png │ ├── new-tooltip2.png │ ├── pie-label copy.png │ ├── pie-label-2.png │ ├── pie-label.png │ ├── theme-color.png │ ├── time-axis-2.png │ ├── time-axis.png │ ├── time-axis2.png │ ├── timeline.png │ └── yAxis-default-style-change.webp │ └── how-to │ ├── coarse-pointer-en.gif │ └── coarse-pointer-zh.gif ├── store ├── README.md └── index.js ├── tailwind.config.js ├── tsconfig.json └── types ├── nuxt.d.ts └── vue.shim.d.ts /.asf.yaml: -------------------------------------------------------------------------------- 1 | github: 2 | description: Apache ECharts Handbook 3 | homepage: https://echarts.apache.org/handbook 4 | ghp_branch: gh-pages 5 | labels: 6 | - echarts 7 | - apache 8 | - handbook 9 | 10 | notifications: 11 | commits: commits@echarts.apache.org 12 | pullrequests: commits@echarts.apache.org 13 | issues: commits@echarts.apache.org 14 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true 6 | }, 7 | extends: [ 8 | '@nuxtjs/eslint-config-typescript', 9 | 'plugin:nuxt/recommended', 10 | 'plugin:prettier/recommended', 11 | 'prettier', 12 | 'prettier/vue' 13 | ], 14 | plugins: ['prettier'], 15 | // add your custom rules here 16 | rules: { 17 | 'space-before-function-paren': 0 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Build and Deploy 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | 8 | jobs: 9 | build-and-deploy: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - name: Checkout 🛎️ 13 | uses: actions/checkout@v4 14 | #with: 15 | # for generating contributors from all commit histories 16 | # Not using git log currently 17 | # fetch-depth: 0 18 | 19 | - name: Setup Node.js 20 | uses: actions/setup-node@v4 21 | with: 22 | node-version: 18 23 | registry-url: https://registry.npmjs.org/ 24 | 25 | - name: Install and Build 🔧 26 | run: | 27 | npm install 28 | npm run build:gh 29 | 30 | # - name: Prepare deploy action 31 | # # Needs install webpack@5 to avoid using the webpack@4 in the workspace. 32 | # run: | 33 | # npm install 34 | # npm install webpack@5 35 | # npm run build 36 | # working-directory: .github/actions/github-pages-deploy-action 37 | 38 | - name: Deploy 🚀 39 | uses: ./node_modules/@jamesives/github-pages-deploy-action 40 | with: 41 | branch: gh-pages # The branch the action should deploy to. 42 | folder: dist 43 | target-folder: docs 44 | single-commit: true 45 | clean: true 46 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | .vscode 10 | 11 | # Runtime data 12 | pids 13 | *.pid 14 | *.seed 15 | *.pid.lock 16 | 17 | # Directory for instrumented libs generated by jscoverage/JSCover 18 | lib-cov 19 | 20 | # Coverage directory used by tools like istanbul 21 | coverage 22 | 23 | # nyc test coverage 24 | .nyc_output 25 | 26 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 27 | .grunt 28 | 29 | # Bower dependency directory (https://bower.io/) 30 | bower_components 31 | 32 | # node-waf configuration 33 | .lock-wscript 34 | 35 | # Compiled binary addons (https://nodejs.org/api/addons.html) 36 | build/Release 37 | 38 | # Dependency directories 39 | node_modules/ 40 | jspm_packages/ 41 | 42 | # TypeScript v1 declaration files 43 | typings/ 44 | 45 | # Optional npm cache directory 46 | .npm 47 | 48 | # Optional eslint cache 49 | .eslintcache 50 | 51 | # Optional REPL history 52 | .node_repl_history 53 | 54 | # Output of 'npm pack' 55 | *.tgz 56 | 57 | # Yarn Integrity file 58 | .yarn-integrity 59 | 60 | # dotenv environment variables file 61 | .env 62 | 63 | # parcel-bundler cache (https://parceljs.org/) 64 | .cache 65 | 66 | # next.js build output 67 | .next 68 | 69 | # nuxt.js build output 70 | .nuxt 71 | 72 | # Nuxt generate 73 | dist 74 | 75 | # vuepress build output 76 | .vuepress/dist 77 | 78 | # Serverless directories 79 | .serverless 80 | 81 | # IDE / Editor 82 | .idea 83 | 84 | # Service worker 85 | sw.* 86 | 87 | # macOS 88 | .DS_Store 89 | 90 | # Vim swap files 91 | *.swp 92 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/.gitmodules -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "semi": false, 4 | "singleQuote": true 5 | } 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # About 2 | 3 | This project is part of the source of [The Apache ECharts Official Website](https://echarts.apache.org/). See [echarts-website](https://github.com/apache/echarts-website) for more details of the building process. 4 | 5 | ## Preview on GitHub Pages 6 | 7 | https://apache.github.io/echarts-handbook 8 | 9 | ## Init 10 | 11 | ```bash 12 | npm install 13 | ``` 14 | 15 | ## Dev 16 | 17 | ```bash 18 | npm run dev 19 | ``` 20 | 21 | Open in browser: http://localhost:3000/echarts-handbook/dist/ 22 | 23 | ## Deploy 24 | 25 | ### Deploy to local dist folder 26 | 27 | ```bash 28 | npm run build:local 29 | ``` 30 | 31 | ### Deploy to local echarts website 32 | 33 | ```bash 34 | npm run build:localsite 35 | ``` 36 | 37 | ### Deploy to asf 38 | 39 | ```bash 40 | npm run build:asf 41 | ``` 42 | 43 | ## Writing 44 | 45 | https://apache.github.io/echarts-handbook/en/meta/edit-guide/ 46 | -------------------------------------------------------------------------------- /app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {{ HEAD }} 8 | 9 | 10 | {{ APP }} 11 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /build/generate.js: -------------------------------------------------------------------------------- 1 | const fetch = require('node-fetch') 2 | const path = require('path') 3 | const fs = require('fs') 4 | 5 | const websitePath = path.resolve(__dirname, '../../echarts-website') 6 | 7 | async function updateNav() { 8 | for (let locale of ['zh', 'en']) { 9 | const localPath = `${websitePath}/${locale}/nav.html` 10 | const targetPath = path.join( 11 | __dirname, 12 | `../components/partials/Navbar/${locale}.vue` 13 | ) 14 | console.log('Fetching...', localPath) 15 | let navContent = '' 16 | try { 17 | navContent = fs.readFileSync(localPath, 'utf-8') 18 | } catch (e) { 19 | console.error('failed to read local nav file', e) 20 | console.log( 21 | 'Fetching...', 22 | `https://echarts.apache.org/${locale}/nav.html` 23 | ) 24 | navContent = (await fetch( 25 | `https://echarts.apache.org/${locale}/nav.html` 26 | ).then(response => response.text())) 27 | } 28 | 29 | fs.writeFileSync( 30 | targetPath, 31 | `` 34 | ) 35 | } 36 | } 37 | 38 | updateNav() 39 | -------------------------------------------------------------------------------- /components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /components/helper/loadScripts.ts: -------------------------------------------------------------------------------- 1 | const promisesCache = {} 2 | interface ScriptObj { 3 | url: string 4 | type: 'css' | 'js' 5 | } 6 | export function loadScriptsAsync(scripts: (string | ScriptObj)[]) { 7 | return Promise.all( 8 | scripts 9 | .map(scriptUrl => { 10 | if (typeof scriptUrl === 'string') { 11 | return { 12 | url: scriptUrl, 13 | // TODO Not supported type 14 | type: scriptUrl.match(/\.css$/) ? 'css' : 'js' 15 | } 16 | } 17 | return scriptUrl 18 | }) 19 | .map(function(scriptUrl) { 20 | if (promisesCache[scriptUrl.url]) { 21 | return promisesCache[scriptUrl.url] 22 | } 23 | 24 | const promise = new Promise((resolve, reject) => { 25 | if (scriptUrl.type === 'js') { 26 | const script = document.createElement('script') 27 | script.src = scriptUrl.url 28 | script.async = false 29 | script.onload = function() { 30 | resolve(null) 31 | } 32 | script.onerror = function() { 33 | reject() 34 | } 35 | document.body.appendChild(script) 36 | } else if (scriptUrl.type === 'css') { 37 | const link = document.createElement('link') 38 | link.rel = 'stylesheet' 39 | link.href = scriptUrl.url 40 | link.onload = function() { 41 | resolve(null) 42 | } 43 | link.onerror = function() { 44 | reject() 45 | } 46 | document.body.appendChild(link) 47 | } 48 | }) 49 | promisesCache[scriptUrl.url] = promise 50 | return promise 51 | }) 52 | ) 53 | } 54 | -------------------------------------------------------------------------------- /components/helper/post.ts: -------------------------------------------------------------------------------- 1 | import config from '~/configs/config' 2 | 3 | export function getSourcePath(mdPath: string, hash?: string) { 4 | if (!mdPath.endsWith('.md')) { 5 | mdPath = mdPath + '.md' 6 | } 7 | if (hash) { 8 | mdPath += `#${decodeURIComponent(hash)}` 9 | } 10 | return `https://github.com/${config.gitRepo}/tree/master/contents/${mdPath}` 11 | } 12 | -------------------------------------------------------------------------------- /components/markdown/Alert.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 23 | 24 | 82 | -------------------------------------------------------------------------------- /components/markdown/CodeBlockCopyClipboard.vue: -------------------------------------------------------------------------------- 1 | 43 | 44 | 84 | 85 | 117 | -------------------------------------------------------------------------------- /components/markdown/Example.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /components/markdown/OptionLink.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /components/markdown/global.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueCompositionAPI from '@vue/composition-api' 3 | import 'intersection-observer' 4 | import { ObserveVisibility } from 'vue-observe-visibility' 5 | 6 | import Example from './Example.vue' 7 | import Alert from './Alert.vue' 8 | import Live from './Live.vue' 9 | import CodeBlock from './CodeBlock.vue' 10 | import OptionLink from './OptionLink.vue' 11 | 12 | // Use vue composition api in the components 13 | Vue.use(VueCompositionAPI) 14 | Vue.component('md-example', Example) 15 | Vue.component('md-alert', Alert) 16 | Vue.component('md-live', Live) 17 | Vue.component('md-code-block', CodeBlock) 18 | Vue.component('md-option', OptionLink) 19 | 20 | Vue.directive('observe-visibility', ObserveVisibility) 21 | -------------------------------------------------------------------------------- /components/partials/Contributors.vue: -------------------------------------------------------------------------------- 1 | 51 | 52 | 75 | 76 | 124 | -------------------------------------------------------------------------------- /components/partials/Navbar.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 29 | 30 | 36 | -------------------------------------------------------------------------------- /components/partials/PostContent.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | functional: true, 3 | props: { 4 | content: String 5 | }, 6 | render(h, context) { 7 | return h({ 8 | template: '
' + context.props.content + '
' 9 | }) 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /components/partials/SidebarNavItem.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 85 | 86 | 106 | -------------------------------------------------------------------------------- /configs/config.asf.js: -------------------------------------------------------------------------------- 1 | export default { 2 | routerBase: '/handbook', 3 | rootPath: 'https://echarts.apache.org/handbook/', 4 | exampleViewPath: 'https://echarts.apache.org/examples/${lang}/view.html?c=', 5 | exampleEditorPath: 6 | 'https://echarts.apache.org/examples/${lang}/editor.html?c=', 7 | mainSitePath: 'https://echarts.apache.org/', 8 | optionPath: 'https://echarts.apache.org/option.html#', 9 | gitRepo: 'apache/echarts-handbook' 10 | } 11 | -------------------------------------------------------------------------------- /configs/config.dev.js: -------------------------------------------------------------------------------- 1 | export default { 2 | routerBase: '/echarts-handbook/dist', 3 | rootPath: 'http://localhost:3000/echarts-handbook/dist/', 4 | exampleViewPath: 5 | 'http://localhost/echarts-examples/public/${lang}/view.html?c=', 6 | exampleEditorPath: 7 | 'http://localhost/echarts-examples/public/${lang}/editor.html?c=', 8 | mainSitePath: 'http://localhost/echarts-website/', 9 | optionPath: 'http://localhost/echarts-website/option.html#', 10 | gitRepo: 'apache/echarts-handbook' 11 | } 12 | -------------------------------------------------------------------------------- /configs/config.gh.js: -------------------------------------------------------------------------------- 1 | export default { 2 | routerBase: '/echarts-handbook', 3 | rootPath: 'https://apache.github.io/echarts-handbook/', 4 | exampleViewPath: 'https://echarts.apache.org/examples/${lang}/view.html?c=', 5 | exampleEditorPath: 6 | 'https://echarts.apache.org/examples/${lang}/editor.html?c=', 7 | mainSitePath: 'https://echarts.apache.org/', 8 | optionPath: 'https://echarts.apache.org/option.html#', 9 | gitRepo: 'apache/echarts-handbook' 10 | } 11 | -------------------------------------------------------------------------------- /configs/config.js: -------------------------------------------------------------------------------- 1 | import configDev from './config.dev' 2 | import configGh from './config.gh' 3 | import configAsf from './config.asf' 4 | import configLocal from './config.local' 5 | import configLocalSite from './config.localsite' 6 | 7 | const deployConfigs = { 8 | gh: configGh, 9 | asf: configAsf, 10 | local: configLocal, 11 | localsite: configLocalSite 12 | } 13 | 14 | function getDeployConfig() { 15 | const deployTarget = process.env.NUXT_ENV_DEPLOY 16 | 17 | if (!deployTarget) { 18 | throw `process.env.NUXT_ENV_DEPLOY not exits` 19 | } 20 | if (!deployConfigs[deployTarget]) { 21 | throw `Deploy config ${deployTarget} not exits` 22 | } 23 | return deployConfigs[deployTarget] 24 | } 25 | 26 | const isProduction = process.env.NODE_ENV === 'production' 27 | const config = isProduction ? getDeployConfig() : configDev 28 | 29 | export default config 30 | -------------------------------------------------------------------------------- /configs/config.local.js: -------------------------------------------------------------------------------- 1 | export default { 2 | routerBase: '/echarts-handbook/dist', 3 | rootPath: 'http://localhost/echarts-handbook/dist/', 4 | exampleViewPath: 5 | 'http://localhost/echarts-website/examples/${lang}/view.html?c=', 6 | exampleEditorPath: 7 | 'http://localhost/echarts-website/examples/${lang}/editor.html?c=', 8 | mainSitePath: 'http://localhost/echarts-website/', 9 | optionPath: 'http://localhost/echarts-website/option.html#', 10 | gitRepo: 'apache/echarts-handbook' 11 | } 12 | -------------------------------------------------------------------------------- /configs/config.localsite.js: -------------------------------------------------------------------------------- 1 | export default { 2 | routerBase: '/echarts-website/handbook', 3 | rootPath: 'http://localhost/echarts-website/handbook', 4 | exampleViewPath: 5 | 'http://localhost/echarts-website/examples/${lang}/view.html?c=', 6 | exampleEditorPath: 7 | 'http://localhost/echarts-website/examples/${lang}/editor.html?c=', 8 | mainSitePath: 'http://localhost/echarts-website/', 9 | optionPath: 'http://localhost/echarts-website/option.html#', 10 | gitRepo: 'apache/echarts-handbook' 11 | } 12 | -------------------------------------------------------------------------------- /contents/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "semi": true, 4 | "singleQuote": true 5 | } 6 | -------------------------------------------------------------------------------- /contents/en/basics/download.md: -------------------------------------------------------------------------------- 1 | # Get Apache ECharts 2 | 3 | Apache ECharts offers a variety of installation options, so you can choose any of the following options depending on your project. 4 | 5 | - Install From npm 6 | - Use From CDN 7 | - Download From GitHub 8 | - Online Customization 9 | 10 | We'll go over each of these installation methods and the directory structure after download. 11 | 12 | ## Installation 13 | 14 | ### Install From npm 15 | 16 | ```sh 17 | npm install echarts 18 | ``` 19 | 20 | See [Import ECharts](${lang}/basics/import) for details on usage. 21 | 22 | ### Use From CDN 23 | 24 | ECharts is available on the following free CDNs: 25 | 26 | - [jsDelivr](https://www.jsdelivr.com/package/npm/echarts) 27 | - [unpkg](https://unpkg.com/browse/echarts/) 28 | - [cdnjs](https://cdnjs.com/libraries/echarts) 29 | 30 | ### Download From GitHub 31 | 32 | You can find links to each version on the [releases](https://github.com/apache/echarts/releases) page of the [apache/echarts project](https://github.com/apache/echarts). Click on the Source code under Assets at the bottom of the desired release version. After downloading, unzip the file and locate `echarts.js` file in the `dist` folder to include the full ECharts functionality. 33 | 34 | ### Online Customization 35 | 36 | If you want to introduce only some modules to reduce package size, you can use the [ECharts online customization](${mainSitePath}builder.html) function to create a customized download of ECharts. 37 | -------------------------------------------------------------------------------- /contents/en/basics/help.md: -------------------------------------------------------------------------------- 1 | # Get Help 2 | 3 | ## Technical Problems 4 | 5 | ### Make sure that existing documentation do not solve your problem 6 | 7 | ECharts has a very large number of users, so it's more than likely that someone else has encountered and solved the problem you've had. By reading the documentation and using the search engine, you can solve your problem quickly by yourself without help from the community. 8 | 9 | Therefore, before doing anything else, make sure that current documentation and other resources can't solve your problem. Resources that can be helpful for you include, 10 | 11 | - [API](${mainSitePath}api.html) 12 | - [Option Manual](${mainSitePath}option.html) - you can try to use the search function 13 | - Articles in this handbook 14 | - [FAQ](${mainSitePath}faq.html) 15 | - Searching in [GitHub issue](https://github.com/apache/echarts/issues) 16 | - Using the search engine 17 | 18 | ### Create the Minimal Reproducible Demo 19 | 20 | Create an example on [Official Editor](${mainSitePath}examples/editor.html), [CodePen](https://codepen.io/Ovilia/pen/dyYWXWM), [CodeSandbox](https://codesandbox.io/s/echarts-basic-example-template-mpfz1s) or [JSFiddle](https://jsfiddle.net/plainheart/e46ozpqj/7/), which will make it easier for others to reproduce your problem. 21 | 22 | The example should reproduce your problem in the simplest way. Removing unnecessary code and data can enable those who want to help you to locate and then solve the problem more quickly. Please refer to [How to Create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) for more details. 23 | 24 | ### Determining if It's a Bug 25 | 26 | #### Report a Bug or Request a New Feature 27 | 28 | If some behavior is different from the documentation or isn't what you expected, it's probably a bug. If it's a bug, or you have a feature request, please use the [issue template](https://github.com/apache/echarts/issues/new/choose) to create a new issue and describe it in detail as per the prompts. 29 | 30 | #### How-To Questions 31 | 32 | If it's not a bug, but you don't know how to achieve something, try the stackoverflow.com 33 | 34 | If you don't get an answer, you can also send an email to [dev@echarts.apache.org](mailto:dev@echarts.apache.org). In order for more people to understand your question and to get help in future searches, it is highly recommended to write the email in English. 35 | 36 | ## Non-technical questions 37 | 38 | For other non-technical questions, you can send an email in English to [dev@echarts.apache.org](mailto:dev@echarts.apache.org). 39 | -------------------------------------------------------------------------------- /contents/en/basics/inspiration.md: -------------------------------------------------------------------------------- 1 | # Get Inspired 2 | 3 | The following list provides some ideas when you have a question "I don't know how to design a chart" or "I don't know how to use Apache ECharts to achieve a certain effect". 4 | 5 | - [Apache ECharts Official Examples](${mainSitePath}/examples) 6 | - "How To Guides - Common Charts" in this handbook 7 | -------------------------------------------------------------------------------- /contents/en/basics/release-note/5-4-0.md: -------------------------------------------------------------------------------- 1 | # Apache ECharts 5.4.0 Features 2 | 3 | ## Intelligent Pointer Snapping 4 | 5 | Some interactive elements may be relatively small in charts, so sometimes it is difficult for users to click and do other operations accurately, especially on the mobile. Therefore, in Apache ECharts 5.4.0, we introduced the concept of "intelligent pointer snapping". 6 | 7 | See [intelligent pointer snapping](${lang}/how-to/interaction/coarse-pointer) for details. 8 | 9 | ## Using Pie charts in more coordinate systems 10 | 11 | A very powerful feature of Apache ECharts is the combination of various chart types, coordinate systems, and components. In this version, we have added the coordinate systems option for pie charts. 12 | 13 | Thus, pie charts can appear in the Cartesian coordinate systems, 14 | 15 | ![](images/5-4-0/pie-grid.png) 16 | 17 | calendar coordinate systems, 18 | 19 | ![](images/5-4-0/pie-calendar.png) 20 | 21 | geographical coordinate systems, 22 | 23 | ![](images/5-4-0/pie-geo.png) 24 | 25 | and even with the Baidu Map and Gaode Map extension. 26 | 27 | ![](images/5-4-0/pie-bmap.png) 28 | 29 | ![](images/5-4-0/pie-amap.png) 30 | 31 | This greatly extends the flexibility of pie charts, allowing developers to create more combinations of chart effects using Apache ECharts. 32 | 33 | ## Ukrainian Translation 34 | 35 | In this release, we added the support of the Ukrainian language. **Now Apache ECharts supports 17 languages!** 36 | 37 | > If you need to use a language other than English or Chinese, you need to call `echarts.registerLocale` to initialize the chart before initializing it, and then pass `opts.locale` to modify the chart language during `init`. 38 | 39 | ## Gauge Label Rotation 40 | 41 | In this version, we support text rotation of the Gauge series. 42 | 43 | 44 | 45 | `axisLabel.rotate` can be set to `'tangential' | 'radial' | number`. If it is of type `number`, it indicates the rotation angle of the label from -90 degrees to 90 degrees, with positive values being counterclockwise. In addition to this, it can also be the strings `'radial'` for radial rotation and `'tangential'` for tangential rotation. 46 | 47 | ## Full Changelog 48 | 49 | View the [Changelog](${mainSitePath}/changelog.html#v5-4-0) 50 | -------------------------------------------------------------------------------- /contents/en/basics/release-note/5-6-0.md: -------------------------------------------------------------------------------- 1 | # Apache ECharts 5.6.0 Features 2 | 3 | ## Define Region Styles in Original GeoJSON Data 4 | 5 | ECharts maps use GeoJSON format to define data. In theory, following the principle of "separation of data and style", GeoJSON should only define data while styles should be defined in ECharts. However, in some cases, styles themselves are a form of data expression (for example: using dashed lines to represent disputed borders - here the "dashed line" is a style but actually expresses a data concept, so defining styles in GeoJSON is reasonable). 6 | 7 | In ECharts 5.6.0, we support defining region styles in the original GeoJSON data by specifying `features[].properties.echartsStyle`. This is consistent with the [data](${optionPath}series-map.data) option, which supports configuring `itemStyle`, `label`, `tooltip` etc. Example: 8 | 9 | ```ts 10 | geoJSON.features[0].properties.echartsStyle = { 11 | itemStyle: { 12 | areaColor: 'green' 13 | } 14 | } 15 | 16 | geoJSON.features[1].properties.echartsStyle = { 17 | selected: true, 18 | label: { 19 | formatter: 'Default Selected:\n{b}' 20 | } 21 | } 22 | 23 | geoJSON.features[2].properties.echartsStyle = { 24 | itemStyle: { 25 | borderType: 'dotted', 26 | borderColor: 'blue' 27 | } 28 | } 29 | 30 | geoJSON.features[11].properties.echartsStyle = { 31 | itemStyle: { 32 | // This region will be overridden as `cyan` by the data item option 33 | areaColor: 'black' 34 | }, 35 | tooltip: { 36 | formatter: function (params) { 37 | return 'This is a custom tooltip from GeoJSON: ' + params.name; 38 | } 39 | } 40 | } 41 | ``` 42 | 43 | ## Axis Labels Support Tooltips 44 | 45 | In some cases, axis labels are too long or we want to display more information on axis labels. In ECharts 5.6.0, we support adding tooltips to axis labels. The configuration is consistent with the `tooltip` option, please refer to [axis.tooltip documentation](${optionPath}xAxis.tooltip) for details. 46 | 47 | ![](images/5-6-0/axis-tooltip.png) 48 | 49 | ## Sunburst Chart Supports Focusing All Descendants and Ancestors 50 | 51 | In previous versions of sunburst charts, [emphasis.focus](${optionPath}series-sunburst.emphasis.focus) supported the following values: 52 | 53 | - `'none'` Do not fade out other data, it's by default. 54 | - `'self'` Only focus (not fade out) the element of the currently highlighted data. 55 | - `'series'` Focus on all elements of the series which the currently highlighted data belongs to. 56 | - `'ancestor'` Focus on all ancestor nodes. 57 | 'descendant' Focus on all descendants nodes. 58 | 59 | In ECharts 5.6.0, we added `'relative'`, which focuses on all descendants and ancestor nodes. 60 | 61 | ![](images/5-6-0/sunburst-emphasis-relative.png) 62 | 63 | ## Added Support for Two New Languages 64 | 65 | In this version, support for Swedish and Persian languages has been added. With this, ECharts now supports 22 languages. 66 | 67 | ## Line Chart Performance Optimization 68 | 69 | In this version, we optimized the rendering performance of line charts, solving the problem of memory growth with time. 70 | 71 | ## Complete Changelog 72 | 73 | View the [changelog](${mainSitePath}changelog.html#v5-6-0) 74 | 75 | The next major version, Apache ECharts 6.0.0, is currently being actively developed and is expected to be released in the first quarter of 2025. Stay tuned for more updates. 76 | -------------------------------------------------------------------------------- /contents/en/best-practices/canvas-vs-svg.md: -------------------------------------------------------------------------------- 1 | # Render with SVG or Canvas 2 | 3 | Most browser-side chart libraries use SVG or Canvas as the underlying renderer. Generally, both technologies are interchangeable and have a similar effect. However, the difference may be notable in some specific scenarios and cases. As a result, it's always a hard choice to decide which technology to render charts. 4 | 5 | Canvas has been used as the renderer of ECharts from the beginning. Since [v4.0](https://echarts.apache.org/en/changelog.html#v4-0-0), ECharts has provided the SVG renderer as an additional option. You can specify the [renderer parameter](${mainSitePath}api.html#echarts.init) as `'canvas'` or `'svg'` when initializing the chart. 6 | 7 | > SVG and Canvas have a significant difference in use. The uniform support for both technologies in ECharts is attributed to the abstraction and implementation of the underlying library [ZRender](https://github.com/ecomfe/zrender). 8 | 9 | ## How to Choose a Renderer 10 | 11 | Generally, Canvas is more suitable for charts with a large number of elements (heat map, large-scale line or scatter plot in geo or parallel coordinates, etc.), and with visual [effect](${mainSitePath}examples/editor.html?c=lines-bmap-effect). However, SVG has an important advantage: It has less memory usage (which is important for mobile devices) and won't be blurry when zooming in. 12 | 13 | The choice of renderer can be based on a combination of hardware and software environment, data volume and functional requirements. 14 | 15 | - In scenarios where the hardware and software environment is good and the amount of data is not too large, both renderers will work and there is not much need to agonize over them. 16 | - In scenarios where the environment is poor and performance issues arise that require optimization, experimentation can be used to determine which renderer to use. For example, there are these experiences. 17 | - In situations where many instances of ECharts have to be created and the browser is prone to crashing (probably because the number of Canvas is causing the memory footprint to exceed the phone's capacity), the SVG renderer can be used to make improvements. Roughly speaking, the SVG renderer may work better if the chart is running on a low-end Android, or if we are using specific charts such as the [LiquidFill chart](https://ecomfe.github.io/echarts-liquidfill/example/). 18 | - For larger amounts of data (>1k is an experience value), canvas renderer is always recommended. 19 | 20 | We strongly welcome [feedback](https://github.com/apache/echarts/issues/new) from developers on their experiences and scenarios to help us make better optimizations. 21 | 22 | Note: Currently, some special effects still relies on Canvas: e.g. [trail effect](${optionPath}series-lines.effect), [heatmap with blending effect](${mainSitePath}examples/editor.html?c=heatmap-bmap), etc. 23 | 24 | Since [v5.3.0](${lang}/basics/release-note/5-3-0/#new-svg-renderer), the SVG renderer got refactored using the Virtual DOM, the performance got improved by 2-10 times and it can even be dozens of times in some specific scenarios! Refer to [#836](https://github.com/ecomfe/zrender/pull/836) for more details. 25 | 26 | ## How to Use the Renderer 27 | 28 | If `echarts` is fully imported in the following way, it already automatically imported and registered the SVG renderer and the Canvas renderer. 29 | 30 | ```js 31 | import * as echarts from 'echarts'; 32 | ``` 33 | 34 | If you are using [tree-shakable import](${lang}/basics/import), you will need to import the required renderers manually. 35 | 36 | ```js 37 | import * as echarts from 'echarts/core'; 38 | // You can use only the renderers you need 39 | import { SVGRenderer, CanvasRenderer } from 'echarts/renderers'; 40 | 41 | echarts.use([SVGRenderer, CanvasRenderer]); 42 | ``` 43 | 44 | Then you can set the [renderer parameter](${mainSitePath}api.html#echarts.init) when initializing the chart. 45 | 46 | ```js 47 | // Use the Canvas renderer (default) 48 | var chart = echarts.init(containerDom, null, { renderer: 'canvas' }); 49 | // Equivalent to 50 | var chart = echarts.init(containerDom); 51 | 52 | // use the SVG renderer 53 | var chart = echarts.init(containerDom, null, { renderer: 'svg' }); 54 | ``` 55 | -------------------------------------------------------------------------------- /contents/en/best-practices/mobile.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/contents/en/best-practices/mobile.md -------------------------------------------------------------------------------- /contents/en/best-practices/specification/bar/basic-bar.md: -------------------------------------------------------------------------------- 1 | # Basic Bar Chart 2 | 3 | Bar Chart is a chart that presents the comparisons among discrete data. The length of the bars is proportional related to the categorical data. 4 | 5 | 8 | 9 | While the label of the series is long, or there are more than 10 categories in one chart, a horizontal column chart can not show all labels, or labels can only be shown tilted. It affects the appliance. Therefore, we use a vertical bar chart to get a better display effect. 10 | 11 | 14 | 15 | ## Suggestions for Using Bar Chart 16 | 17 | 1. Avoid using too many colors. One bar chart represents one set of metrics in general so that we suggest to use the same color or at least different shades of the same color. You can use a contrasting color to highlight meaningful data points. 18 | 19 | 22 | 23 | 2. The gap between bars should be appropriate. When they are too close, the attention of the user may be focused on the gap between bars. A reasonable width should be not less than twice the gap between the bars. 24 | 25 | 3. Data on Y-axis should be started from 0, to reflect the value appropriately. If the y-axis is incomplete, it will mislead the user to make wrong judgments. For instance, the chart on the left side shows that the income in 2017 is 4 times higher than in 2014. But the chart on the right side shows the truth that the income in 2017 only increased by 25% compared with 2014. 26 | 27 | 29 | 30 | 31 | 4. When sorting multiple data, if it is not related to some specific value like date, it is better to comply with a certain logic and guide the user to check the data in an intuitive way. In short, logical sorting can lead the user to read data better to a certain extent. 32 | 33 | 36 | 37 | We don't recommend using a 3D bar chart because the data transmission is not accurate. Users even have to guess which is the top of the bar. 38 | 39 | 41 | 42 | -------------------------------------------------------------------------------- /contents/en/best-practices/specification/bar/bi-directional-bar.md: -------------------------------------------------------------------------------- 1 | Bi-directional bar charts are mostly used to show values that included in two opposite meaning categories. One axis shows the name of categories being compared, while the other axis represents the scale value. As an example, Using a bi-directional bar chart to analyze the personal income (positive number) and outcome (negative number) in a week, you can easily find the value and fluctuation of income and outcome in a single series. 2 | 3 | 6 | 7 | The bi-directional bar can be classified into the vertical chart (above) and horizontal chart(below, also called positive negative bar chart). For example, you can use a positive negative bar chart if there are positive and negative comments in a customer satisfaction survey data analysis. All data align in the middle, the positive comments attribute on the right side while the negative comments on the left side. 8 | 9 | 12 | 13 | ## Suggestion for Using Bi-directional Bar Chart 14 | 15 | 1. The data on both sides in the bi-directional bar chart are comparative. 16 | 17 | 2. Don't define negative data on the right side of the bi-directional bar chart, to prevent misunderstanding caused by the violation of common sense. 18 | 19 | 21 | 22 | 23 | 3. A bi-directional bar chart always used to display data with the opposite meaning, so that you need to avoid misunderstanding caused by the use of data that does not have a positive or negative meaning. As the chart below, there is no antagonism between the data of male and female, so that it is a better choice to use a basic bar chart rather than a bi-directional bar chart. 24 | 25 | 27 | 28 | -------------------------------------------------------------------------------- /contents/en/best-practices/specification/bar/grouped-bar.md: -------------------------------------------------------------------------------- 1 | # Grouped Bar Chart 2 | 3 | A grouped bar chart is also called the gathered bar chart. When more than two data series placed one by one on the same axis, the chart will be grouped bar chart. It is equivalent to a basic bar chart combined with two or more charts. 4 | 5 | 8 | 9 | A grouped bar chart usually used to compare several groups of data that included the same kind of variables. Same as the bar chart, the length of the bars is proportional related to the categorical data. Every series have an individual color or different saturation of the same color system so that the user can distinguish and compare each set of data. 10 | 11 | 14 | 15 | 16 | ## Suggestion for Using Grouped Bar Chart 17 | 18 | 1. The difficulty of chart reading will be tremendous if there are many series in one group. Therefore, we suggest you use a stacked bar chart rather than a grouped bar chart in this situation. 19 | 20 | 2. The gap between the two groups should be bigger than the gap inside the group, to avoid visually incorrect classification. -------------------------------------------------------------------------------- /contents/en/best-practices/specification/bar/stacked-bar.md: -------------------------------------------------------------------------------- 1 | # Stacked Bar Chart 2 | 3 | The stacked bar chart is an extension of the bar chart. The difference is that the data in the bar chart is placed parallel while stacked together in the stacked bar chart. You can use a stacked bar chart to reflect the total amount of each category, as well as the proportional relationship of each data compared with the category. Therefore, it is very suitable for dealing with the relationship between part and whole. 4 | 5 | Compared with the pie chart, a stacked bar chart can display several groups of "part and whole" relationship. For instance, you can use a pie or bar chart to display the statistics of the number of people in each project in a physical education course. You can use a stacked bar chart when you want to distinguish boys and girls in each project. As shown in the chart, it included the info of the "part and whole" relationship of each group. 6 | 7 | 10 | 11 | ## Suggestion for Using Stacked Bar Chart 12 | 13 | 1. Follow the basic rule of bar charts. Please avoid using too many colors so that the chart can be easily understood. Don't deliberately display partly data to mislead the user. 14 | 15 | 2. A Stacked bar chart is not suitable for comparing data inside the group. 16 | 17 | 3. While there are 2 or 3 categories, a stacked bar chart will show the best effect. It is not recommended to include more than 6 categories. Too many data series will also make it very difficult to read and understand. 18 | 19 | 4. Try to avoid using a stacked bar chart with categories that included negative values. It will affect understanding or the proportion between part and whole. 20 | 21 | 5. Most of the stacked bar charts are vertically generated. However, if you have very long labels, try to use the horizontal stack method. 22 | -------------------------------------------------------------------------------- /contents/en/best-practices/specification/funnel.md: -------------------------------------------------------------------------------- 1 | # Funnel Chart 2 | 3 | Funnel chart (inverted triangle chart) present data into several stages, every stage is part of the whole. The overall percentage of all stages is 100%. Similar to the bar chart, the funnel chart shows no specific data but the proportion related to the whole. Therefore, a funnel chart doesn't have an axis. 4 | 5 | The funnel chart usually used to provide the simplified data which is used to analyze the change or difference in every link of the process. It is also useful to find out the problem and bottleneck during the business. 6 | 7 | 10 | 11 | 12 | ## Suggestion for Using Funnel Chart 13 | 14 | 1. Represented by an e-commerce website, the funnel chart can easily show the entire process from the website to placing order. It not only shows the final conversion rate but also the conversion rate of each step, which leads to the problem directly. You can improve the design for some specific steps. 15 | 16 | As shown below, the first three steps("show", "click", "visit") have only a little drain. The significant decrease happened from "visit" to "consult". As the result, the manager can mainly analyze what caused the reduction of consulting. For instance, it might because that the entrance for consult might not obvious enough. 17 | 18 | 21 | 22 | 2. Using two stacked funnel chart to compare between the prediction and outcome makes the deviation analyze easier. 23 | 24 | 27 | 28 | 3. Try to use two funnels in one chart to discuss the transforming circumstances. As the following chart shows, project B has a higher churn rate comparing with project A. 29 | 30 | 33 | 34 | 4. The funnel chart is more useful for displaying a logic flow which is different from the pie chart. If the data have no logical relevance, you should choose the pie chart. 35 | 36 | 5. Depending on the type of data, use gradually changed colors or contract colors. Arrange them from dark to light according to the size of the funnel chart. Please don't add too many layers or colors to increase reading difficulty. 37 | -------------------------------------------------------------------------------- /contents/en/best-practices/specification/gauge.md: -------------------------------------------------------------------------------- 1 | # Gauger Chart 2 | 3 | The Gauger Chart was also called a dial graph or speedometer graph. It is a form of a quasi-materialized display. It displays the data similar to the reading on a speedometer. The color of the gauger chart can be used to separate different categories of data. The gauger chart uses scale to mark data, pointers to indicating dimension, the angel of pointer to represent the value. 4 | 5 | 8 | 9 | ## Suggestion for Using Gauger Chart 10 | 11 | 1. The gauger chart is suitable for displaying single progress or measurement standard under quantitative conditions while it is not suitable for carpeting different variables or trends. 12 | 13 | 2. You can provide info in different dimensions. However, do not include more than 3 pointers in one dashboard. It is recommended to use multiple dashboards if there are indeed multiple data to be displayed. 14 | 15 | 18 | -------------------------------------------------------------------------------- /contents/en/best-practices/specification/line/area.md: -------------------------------------------------------------------------------- 1 | # Area Line Chart 2 | The area line chart is similar to the basic line chart. They both described the trend of data over time. The difference is that the fill color and texture of the area line chart created a surface that represents the data volume. For a line chart, the filling area can draw attention for users to the trend of the total value. Therefore, the area line chart is mostly used to convey the size of the trend but not single values. 3 | 4 | 6 | 7 | 8 | ## Suggestion for Using Area Line Chart 9 | 10 | 1. The area line chart uses the filling is to represent the data. While there are several layers in one chart, try to make sure that the data are not overlapping. If the overlapping is not avoidable, you define the color and opacity to an appropriate value to make the chart readable. 11 | 12 | 14 | 15 | 2. The area line chart is strong to display two or three categories of data. We suggest not to show more than 4 groups, or there will be too many data series to identify the data like the following chart. So, we need to avoid an area line chart that has more than three series in one chart. 16 | 17 | 19 | 20 | 3. You should not use the area line chart while there are no boundaries between data values. As shown below, it is familiar that there are 3 different colors at first glance. 21 | 22 | 24 | -------------------------------------------------------------------------------- /contents/en/best-practices/specification/line/basic-line.md: -------------------------------------------------------------------------------- 1 | # Basic Line Chart. 2 | 3 | The line chart is basically used to show the phase trend over time. The line chart is pretty useful to display a continuous 2D dataset like the fluctuation in the number of website visitors or sales prices. 4 | 5 | 8 | 9 | Except for displaying the trend of developing things, the line chart can be used to compare several different datasets. As shown below, we use a line chart to compare the sales of three different commodities and analyze which one is the best. 10 | 11 | 14 | 15 | A line chart is drawn by connecting data points with lines. For the beauty of special effects, you can also connect points with curves as shown in the chart above. This chart is also called a curve chart or spline chart. The usage of the spline chart is the same as the line chart. The only difference is that the connection between data points is a curve but not a straight line. 16 | 17 | ## Suggestion for Using Line Chart 18 | 19 | 1. To make sure the data readability, use solid lines in charts if you can separate the data line and axis. 20 | 21 | 2. Do not draw more than 4 lines in a chart. As shown below, lines are entangled together without obvious contrast that makes the whole chart confusing and difficult to read. 22 | 23 | 26 | 27 | 3. Don't use decorates to separate charts. The legend is helpful, but sometimes distracting users: 28 | 29 | 32 | 33 | 4. When displaying the data of the line chart, avoid deliberately distorting the trend. The meaningful volatility analysis chart should make the height of the item be two-thirds of the height of the y-axis. 34 | 35 | 37 | -------------------------------------------------------------------------------- /contents/en/best-practices/specification/line/stacked-area.md: -------------------------------------------------------------------------------- 1 | # Stacked Area Chart 2 | The stacked area chart is a special kind of area chart. It is used to compare several data series in the same interval. The main difference between the area chart and stacked area chart is that the base of every series is over the previous one. Therefore, every time a line is measured, the area between the lines will be filled with color. 3 | 4 | If there are several series and you want to analyze the part-to-whole relationship for every single one, which reflects the contribution of partial quantity to the total, you can use the stacked area chart. For instance, the contribution of one seller to the total sales. 5 | 6 | 9 | 10 | Here are two different kinds of stacked area chart: 11 | 12 | + Traditional stacked chart: Use the original value to stack, show the change in the whole process. 13 | + Percentage stacked chart: The percentage stacked chart shows how did the relationship between series changed with time. The cumulative total is not the focus as this kind of chart. The important is to show the series distribution as the whole. 14 | 15 | 18 | 19 | ## Suggestion for Using Stacked Area Chart 20 | 21 | 1. The area chart can't display data in many series that are closed to each others. It will make the chart hard to read: 22 | 23 | 26 | 27 | With the same series, stacked bar chart works better: 28 | 29 | 32 | 33 |
34 |
35 | 38 |
39 |
40 | 41 | 2. Although the stacked bar chart is good dealing with several series, try not to include more than 7 in one chart. 42 | 43 | 3. Because the stacked bar chart provides the relation between part and whole, you should not include negative value in series. 44 | 45 | 4. We suggest putting larger values on the top side of the chart, you will get a better display effect. 46 | -------------------------------------------------------------------------------- /contents/en/best-practices/specification/pie/basic-pie.md: -------------------------------------------------------------------------------- 1 | # Pie Chart 2 | 3 | The pie chart is mainly used to display the proportion of different categories compared with the total. The arc length of each sector in the figure means the proportion of the category. The sum of all categories is 100%. 4 | 5 | 8 | 9 | Even the pie chart can display the distribution radio of the data, and widely used in every field, there is still controversy around the pie chart and its deformation chart. Therefore, you should use the pie chart with caution and avoid misunderstanding. 10 | 11 | ## Suggestion for Using Pie Chart 12 | 13 | 1. The pie chart is preferred to show the proportion of data in the same dimension. It requests the data to be positive. Please also make sure the total of sectors is 100%. 14 | 15 | 2. It is hard to compare the data in the pie chart with too many pieces. We suggest to controlling the number of categories under five. While there are too many categories, we might merge some unimportant data together, and name as "other". If all categories cannot be omitted, you should try a bar chart or stacked bar chart as an alternative. 16 | 17 | 19 | 20 | 21 | 3. The pie chart is not appropriate for the comparison of precise data. The following graph (left below) shows that every sector has almost the same proportion. In this case, you should try a bar chart or rose chart (right below) to achieve a better effect. 22 | 23 | 25 | 26 | 27 | 4. Visual habits of most people are observing from top to bottom in clockwise. Therefore we recommend you put the largest sector in the first place in the clockwise direction to stress the importance. 28 | 29 | There are two advices for the rest of the data. Arrange sectors from big to small in clockwise or anti-clockwise follows the largest one: 30 | 31 | 33 | 34 | 35 | Order the sectors according to the size not only consistent with the visual habits but also easier for data's identify and comparison. Base on this principle, you can put the part that needs to emphasize (don't need to be the largest part) at the prominent position. 36 | 37 | 5. You can add some decorations like color, motion, style, position to stress some data in a chart. Please be moderate or it will distract the user. 38 | 39 | 42 | 43 | 6. 3D pie chart distorted the ratio between each sector, which will cause mistakes and confusion in understanding. Therefore,a 3D pie chart is not recommended. 44 | 45 | 47 | 48 | -------------------------------------------------------------------------------- /contents/en/best-practices/specification/radar.md: -------------------------------------------------------------------------------- 1 | # Radar Chart 2 | 3 | Radar Chart is suitable for display the data with more than three dimensions. The radar chart has more than two axes starting from the same point. The relative position and angle of the axis are usually meaningless. 4 | 5 | Every variable in the radar chart match one axis that starting from the center. Axes have the same scale index and included angle. Connect the scale between axis, and connect the item in each axis together to become a polygon. 6 | 7 | 10 | 11 | The radar chart is useful for indicating similar values and checking outliers in variables. The radar chart can also be used to reflect what variables have a higher or lower score in the dataset, which makes it a better way to display the performance (see below). Similarly, the radar chart is often used in displaying data such as rankings, evaluations and reviews. 12 | 13 | 16 | 17 | As shown below, the chart shows the comparison of the budgets and expenses in a kindergarten fund flow. The six areas involved are food, toys, picture books, medical care and clothing. Every axis has a range of 0 to 500. The toy is the only part that was overspent while the clothing is far below the budget. It becomes clear at a glance while using a radar chart to show which part is overspend or underspend. 18 | 19 | 22 | 23 | ## Suggestion for Using Radar Chart 24 | 25 | 1. The number of polygons in the radar chart should be limited. If there are more than 5 categories to be evaluated, both the outline and color block will be too confusing to read. 26 | 27 | 2. Including too many axes can also make the radar chart difficult to read. Therefore, try to keep the radar chart concisely and limit the number of variables. 28 | 29 | 3. Because the radial distance is hard to judge, it is still difficult to read the specific value although there are grid lines. We recommend you use a line graph if you need to compare specific values. 30 | -------------------------------------------------------------------------------- /contents/en/best-practices/specification/scatter/bubble.md: -------------------------------------------------------------------------------- 1 | # Bubble Chart 2 | 3 | The bubble chart shows the relevance between variables. Same as the scatter chart, data in bubble chart are set with points, it shows the relationship of data between two variables. The different part is that the scatter chart has several variables. It included the size of the bubble. A bigger bubble means a larger value. Users can analyze the law of data by the location and size of bubbles. 4 | 5 | 8 | 9 | ## Suggestion for Using Bubble Chart 10 | 11 | 1. It is a good choice to choose a bubble chart while there are three series, features and related values. As shown below, the bubbles' position shows the date and specific time when the code was submitted, the size explained the amount of code submitted. 12 | 13 | 16 | 17 | 2. You can also change the color of the bubbles. The chart below uses different colors to classify the air quality of three areas. Red is Beijing, yellow is Shanghai, and blue is Guangzhou. Users can visually compare and analyze the tire quality of the three places. 18 | 19 | 22 | 23 | 3. A bubble chart commonly used to combine with the map. X-axis and y-axis represent the longitude and latitude. The size of bubbles can be the magnitude of the value at that position. 24 | 25 | 28 | -------------------------------------------------------------------------------- /contents/en/best-practices/specification/scatter/scatter.md: -------------------------------------------------------------------------------- 1 | # Scatter Chart 2 | 3 | The scatter chart shows the relation between the two variables. Data is embodied as a collection of points, which is appropriate to compare a large number of data without considering the time. The scatter chart can identify the relevant and relation of two variables thus find some trend. The scatter chart is also workable to find outliers or to understand data distribution. The chart above shows the distribution of the height and weight of students in a class. 4 | 5 | 8 | 9 | The scatter chart can reflect the correlation(relation between variables) of a different type. It can be positively correlated, negatively correlated and uncorrelated. 10 | 11 | - Positively Correlated: When one value increases, the other value increases. 12 | 13 | - Negatively Correlated: When one value increases, the other value decreases. 14 | 15 | - Uncorrelated: Two values have no obvious relation and have no influence on each other. 16 | 17 | 19 | 20 | 21 | To be mentioned, the scatter chart can effectively illustrate the correlation between the two variables. However, it cannot strongly prove there exist causality. For example, AD serving and Visits are positively correlated, but we cannot prove that more AD serving must lead to more Visits. However, we have enough reason to increase the AD serving and observe the outcome after we find out the positive correlation between them. 22 | 23 | ## Suggestion for Using Scatter Chart 24 | 25 | 1. If no correlation was shown in the scatter chart, then the scatter chart is not the best choice. 26 | 27 | 2. If the package included a different series, you can use different colors for each series. As an example, add the legend to mark male as blue, female as red. You can not only distinguish the height and weight of different genders but also add an auxiliary line for the average of each series to improve the understanding of the distribution. In this case, females have more amount higher than the average value than lower. 28 | 29 | 32 | 33 | The trend line is useful when observing the relationship between two variables. The shape of the trend line can explain the relation type of two variables as well as make a prediction. It is better to include only two trend lines to avoid interference with the reading. 34 | 35 | 3. The scatter points can present a good appearance only with adequate and relevant data. It is meaningless to draw a chart with very little and unrelated values. 36 | -------------------------------------------------------------------------------- /contents/en/concepts/coordinate.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/contents/en/concepts/coordinate.md -------------------------------------------------------------------------------- /contents/en/concepts/legend.md: -------------------------------------------------------------------------------- 1 | # Legend 2 | 3 | Legends are used to annotate the content in the chart using different colors, shapes and texts to indicate different categories. By clicking the legends, the user can show or hide the corresponding categories. Legend is one of the key to understand the chart. 4 | 5 | ## Layout 6 | 7 | Legend is always placed at the upper right corner of the chart. All legends in the same page need to be consistent, align horizontally or vertically by considering the layout of the overall chart space. When the chart has little vertical space or the content area is crowded, it is also a good choice to put the legend on the bottom of the chart. Here are some layouts of legend: 8 | 9 | ```js live 10 | option = { 11 | legend: { 12 | // Try 'horizontal' 13 | orient: 'vertical', 14 | right: 10, 15 | top: 'center' 16 | }, 17 | dataset: { 18 | source: [ 19 | ['product', '2015', '2016', '2017'], 20 | ['Matcha Latte', 43.3, 85.8, 93.7], 21 | ['Milk Tea', 83.1, 73.4, 55.1], 22 | ['Cheese Cocoa', 86.4, 65.2, 82.5], 23 | ['Walnut Brownie', 72.4, 53.9, 39.1] 24 | ] 25 | }, 26 | xAxis: { type: 'category' }, 27 | yAxis: {}, 28 | series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }] 29 | }; 30 | ``` 31 | 32 | Use scrollable control if there are many legends. 33 | 34 | ```js 35 | option = { 36 | legend: { 37 | type: 'scroll', 38 | orient: 'vertical', 39 | right: 10, 40 | top: 20, 41 | bottom: 20, 42 | data: ['Legend A', 'Legend B', 'Legend C' /* ... */, , 'Legend x'] 43 | // ... 44 | } 45 | // ... 46 | }; 47 | ``` 48 | 49 | ## Style 50 | 51 | For dark color background, use a light color for the background layer and text while changing the background to translucent. 52 | 53 | ```js 54 | option = { 55 | legend: { 56 | data: ['Legend A', 'Legend B', 'Legend C'], 57 | backgroundColor: '#ccc', 58 | textStyle: { 59 | color: '#ccc' 60 | // ... 61 | } 62 | // ... 63 | } 64 | // ... 65 | }; 66 | ``` 67 | 68 | The color of legend has many ways to design. For different charts, the legend style can be different. 69 | 70 | 71 | 72 | ```js 73 | option = { 74 | legend: { 75 | data: ['Legend A', 'Legend B', 'Legend C'], 76 | icon: 'rect' 77 | // ... 78 | } 79 | // ... 80 | }; 81 | ``` 82 | 83 | ## Interactive 84 | 85 | Depend on the environmental demand, the legend can support interactive operation. Click the legend to show or hide corresponding categories: 86 | 87 | ```js 88 | option = { 89 | legend: { 90 | data: ['Legend A', 'Legend B', 'Legend C'], 91 | selected: { 92 | 'Legend A': true, 93 | 'Legend B': true, 94 | 'Legend C': false 95 | } 96 | // ... 97 | } 98 | // ... 99 | }; 100 | ``` 101 | 102 | ## Tips 103 | 104 | The legend should be used according to the situation. Some dual-axis charts include multiple chart types. Different kinds of legend stypes should be distinguished. 105 | 106 | ```js 107 | option = { 108 | legend: { 109 | data: [ 110 | { 111 | name: 'Legend A', 112 | icon: 'rect' 113 | }, 114 | { 115 | name: 'Legend B', 116 | icon: 'circle' 117 | }, 118 | { 119 | name: 'Legend C', 120 | icon: 'pin' 121 | } 122 | ] 123 | // ... 124 | }, 125 | series: [ 126 | { 127 | name: 'Legend A' 128 | // ... 129 | }, 130 | { 131 | name: 'Legend B' 132 | // ... 133 | }, 134 | { 135 | name: 'Legend C' 136 | // ... 137 | } 138 | ] 139 | // ... 140 | }; 141 | ``` 142 | 143 | While there is only one kind of data in the chart, use the chart title rather than the legend to explain it. 144 | -------------------------------------------------------------------------------- /contents/en/concepts/options.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/contents/en/concepts/options.md -------------------------------------------------------------------------------- /contents/en/concepts/series.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/contents/en/concepts/series.md -------------------------------------------------------------------------------- /contents/en/concepts/tooltip.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/contents/en/concepts/tooltip.md -------------------------------------------------------------------------------- /contents/en/get-started.md: -------------------------------------------------------------------------------- 1 | # Get Started 2 | 3 | ## Getting Apache ECharts 4 | 5 | Apache ECharts supports several download methods, which are further explained in the next tutorial [Installation](${lang}/basics/download). Here, we take the example of getting it from the [jsDelivr](https://www.jsdelivr.com/package/npm/echarts) CDN and explain how to install it quickly. 6 | 7 | At [https://www.jsdelivr.com/package/npm/echarts](https://www.jsdelivr.com/package/npm/echarts) select `dist/echarts.js`, click and save it as `echarts.js` file. 8 | 9 | > More information about these files can be found in the next tutorial [Installation](${lang}/basics/download). 10 | 11 | ## Including ECharts 12 | 13 | Create a new `index.html` file in the directory where you just saved `echarts.js`, with the following content: 14 | 15 | ```html 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | ``` 25 | 26 | When you open this `index.html`, you will see an empty page. But don't worry. Open the console and make sure that no error message is reported, then you can proceed to the next step. 27 | 28 | ## Plotting a Simple Chart 29 | 30 | Before drawing we need to prepare a DOM container for ECharts with a defined height and width. Add the following code after the `` tag introduced earlier. 31 | 32 | ```html 33 | 34 | 35 |
36 | 37 | ``` 38 | 39 | Then you can initialize an echarts instance with the [echarts.init](${mainSitePath}api.html#echarts.init) method and set the echarts instance with [setOption](${mainSitePath}api.html#echartsInstance.setOption) method to generate a simple bar chart. Here is the complete code. 40 | 41 | ```html 42 | 43 | 44 | 45 | 46 | ECharts 47 | 48 | 49 | 50 | 51 | 52 |
53 | 82 | 83 | 84 | ``` 85 | 86 | And this is your first chart with Apache ECharts! 87 | 88 | 89 | -------------------------------------------------------------------------------- /contents/en/how-to/chart-types/bar/bar-race.md: -------------------------------------------------------------------------------- 1 | # Dynamic Sorting Bar Chart 2 | 3 | ## Related Options 4 | 5 | Bar race is a chart that shows changes in the ranking of data over time and it is supported by default since ECharts 5. 6 | 7 | > Bar race charts usually use horizontal bars. If you want to use vertical bars, just take the X axis and Y axis in this tutorial to the opposite. 8 | 9 | 1. Set `realtimeSort` of the bar series to be `true` to enable bar race 10 | 2. Set `yAxis.inverse` to be `true` to display longer bars at top 11 | 3. `yAxis.animationDuration` is suggested to be set to be `300` for bar reordering animation for the first time 12 | 4. `yAxis.animationDurationUpdate` is suggested to be set to be `300` for bar reordering animation for later times 13 | 5. Set `yAxis.max` to be _n - 1_ where _n_ is the number of bars to be displayed; otherwise, all bars are displayed 14 | 6. `xAxis.max` is suggested to be set to be `'dataMax'` so that the maximum of data is used as X maximum. 15 | 7. If realtime label changing is required, set `series.label.valueAnimation` to be `true` 16 | 8. Set `animationDuration` to be `0` so that the first animation doesn't start from 0; if you wish otherwise, set it to be the same value as `animationDurationUpdate` 17 | 9. `animationDurationUpdate` is suggested to be set to be `3000` for animation update duration, which should be the same as the frequency of calling `setOption` 18 | 10. Call `setOption` to update data to be of next time with `setInterval` at the frequency of `animationDurationUpdate` 19 | 20 | ## Demo 21 | 22 | A complete demo: 23 | 24 | ```js live 25 | var data = []; 26 | for (let i = 0; i < 5; ++i) { 27 | data.push(Math.round(Math.random() * 200)); 28 | } 29 | 30 | option = { 31 | xAxis: { 32 | max: 'dataMax' 33 | }, 34 | yAxis: { 35 | type: 'category', 36 | data: ['A', 'B', 'C', 'D', 'E'], 37 | inverse: true, 38 | animationDuration: 300, 39 | animationDurationUpdate: 300, 40 | max: 2 // only the largest 3 bars will be displayed 41 | }, 42 | series: [ 43 | { 44 | realtimeSort: true, 45 | name: 'X', 46 | type: 'bar', 47 | data: data, 48 | label: { 49 | show: true, 50 | position: 'right', 51 | valueAnimation: true 52 | } 53 | } 54 | ], 55 | legend: { 56 | show: true 57 | }, 58 | animationDuration: 0, 59 | animationDurationUpdate: 3000, 60 | animationEasing: 'linear', 61 | animationEasingUpdate: 'linear' 62 | }; 63 | 64 | function run() { 65 | var data = option.series[0].data; 66 | for (var i = 0; i < data.length; ++i) { 67 | if (Math.random() > 0.9) { 68 | data[i] += Math.round(Math.random() * 2000); 69 | } else { 70 | data[i] += Math.round(Math.random() * 200); 71 | } 72 | } 73 | myChart.setOption(option); 74 | } 75 | 76 | setTimeout(function() { 77 | run(); 78 | }, 0); 79 | setInterval(function() { 80 | run(); 81 | }, 3000); 82 | ``` 83 | -------------------------------------------------------------------------------- /contents/en/how-to/chart-types/bar/polar-bar.md: -------------------------------------------------------------------------------- 1 | # Bar Chart in Polar Coordinate System 2 | 3 | -------------------------------------------------------------------------------- /contents/en/how-to/chart-types/bar/stacked-bar.md: -------------------------------------------------------------------------------- 1 | # Stacked Bar Chart 2 | 3 | Sometimes, we hope to not only figure series separately but also the trend of the sum. It's a good choice to implement it by using the stacked bar chart. As the name suggests, in the stacked bar chart, data in the same category will be stacked up in one column. The overall height of the bar explained the change of total. 4 | 5 | There is a simple way to implement a stacked bar chart by ECharts. You need to set the same string type value for a group of series in `stack`. The series with the same `stack` value will be in the same category. 6 | 7 | ```js live 8 | option = { 9 | xAxis: { 10 | data: ['A', 'B', 'C', 'D', 'E'] 11 | }, 12 | yAxis: {}, 13 | series: [ 14 | { 15 | data: [10, 22, 28, 43, 49], 16 | type: 'bar', 17 | stack: 'x' 18 | }, 19 | { 20 | data: [5, 4, 3, 5, 10], 21 | type: 'bar', 22 | stack: 'x' 23 | } 24 | ] 25 | }; 26 | ``` 27 | 28 | In this case, the position of the second series is based on the position of the first series, the height increased is corresponding to the first series' height. Therefore, from the position of the second series, you can find the changing trend of the sum of the two. 29 | 30 | > The value of `stack` explained what series will be stacked up together. Theoretically, the specific value of 'stack' is meaningless. However, we prefer some suggestive strings for the convenience of reading. 31 | > 32 | > For instance, here is a chart with 4 series that counted the amount of male and female. "adult male" and "boy" need to be stacked while "adult female" and "girl" need to be stacked. In this case, the suggestive value of `stack` is `'male'` and `'female'`. Although meaningless strings like `'a'` and `'b'` can achieve the same effect but the code will have worse readability. 33 | -------------------------------------------------------------------------------- /contents/en/how-to/chart-types/bar/waterfall.md: -------------------------------------------------------------------------------- 1 | # Waterfall 2 | 3 | There is no waterfall series in Apache ECharts, but we can simulate the effect using a stacked bar chart. 4 | 5 | Assuming that the values in the data array represent an increase or decrease from the previous value. 6 | 7 | ```js 8 | var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203]; 9 | ``` 10 | 11 | That is, the first data is `900` and the second data `345` represents the addition of `345` to `900`, etc. When presenting this data as a stepped waterfall chart, we can use three series: the first is a non-interactive transparent series to implement the suspension bar effect, the second series is used to represent positive numbers, and the third series is used to represent negative numbers. 12 | 13 | ```js live 14 | var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203]; 15 | var help = []; 16 | var positive = []; 17 | var negative = []; 18 | for (var i = 0, sum = 0; i < data.length; ++i) { 19 | if (data[i] >= 0) { 20 | positive.push(data[i]); 21 | negative.push('-'); 22 | } else { 23 | positive.push('-'); 24 | negative.push(-data[i]); 25 | } 26 | 27 | if (i === 0) { 28 | help.push(0); 29 | } else { 30 | sum += data[i - 1]; 31 | if (data[i] < 0) { 32 | help.push(sum + data[i]); 33 | } else { 34 | help.push(sum); 35 | } 36 | } 37 | } 38 | 39 | option = { 40 | title: { 41 | text: 'Waterfall' 42 | }, 43 | grid: { 44 | left: '3%', 45 | right: '4%', 46 | bottom: '3%', 47 | containLabel: true 48 | }, 49 | xAxis: { 50 | type: 'category', 51 | splitLine: { show: false }, 52 | data: (function() { 53 | var list = []; 54 | for (var i = 1; i <= 11; i++) { 55 | list.push('Oct/' + i); 56 | } 57 | return list; 58 | })() 59 | }, 60 | yAxis: { 61 | type: 'value' 62 | }, 63 | series: [ 64 | { 65 | type: 'bar', 66 | stack: 'all', 67 | itemStyle: { 68 | normal: { 69 | barBorderColor: 'rgba(0,0,0,0)', 70 | color: 'rgba(0,0,0,0)' 71 | }, 72 | emphasis: { 73 | barBorderColor: 'rgba(0,0,0,0)', 74 | color: 'rgba(0,0,0,0)' 75 | } 76 | }, 77 | data: help 78 | }, 79 | { 80 | name: 'positive', 81 | type: 'bar', 82 | stack: 'all', 83 | data: positive 84 | }, 85 | { 86 | name: 'negative', 87 | type: 'bar', 88 | stack: 'all', 89 | data: negative, 90 | itemStyle: { 91 | color: '#f33' 92 | } 93 | } 94 | ] 95 | }; 96 | ``` 97 | -------------------------------------------------------------------------------- /contents/en/how-to/chart-types/line/area-line.md: -------------------------------------------------------------------------------- 1 | # Area Chart 2 | 3 | The area chart fills the space between the line and axis with the background color, to express the data by the size of the area. Compared with the normal line chart, the area chart has more intuitive visual effects. It is especially suitable for the scenario with a few series. 4 | 5 | ```js live 6 | option = { 7 | xAxis: { 8 | data: ['A', 'B', 'C', 'D', 'E'] 9 | }, 10 | yAxis: {}, 11 | series: [ 12 | { 13 | data: [10, 22, 28, 23, 19], 14 | type: 'line', 15 | areaStyle: {} 16 | }, 17 | { 18 | data: [25, 14, 23, 35, 10], 19 | type: 'line', 20 | areaStyle: { 21 | color: '#ff0', 22 | opacity: 0.5 23 | } 24 | } 25 | ] 26 | }; 27 | ``` 28 | 29 | If you want to change the area style of the line chart, try to use [`areaStyle`](${optionPath}series-line.areaStyle). Set `'areaStyle'` to `{}` to use the default type: use the color of series to fill the area in translucent. If you want to change the style, try to override the configuration items in `'areaStyle'`. For example, the color of the second series was changed to yellow with 50% opacity. 30 | -------------------------------------------------------------------------------- /contents/en/how-to/chart-types/line/smooth-line.md: -------------------------------------------------------------------------------- 1 | # Smooth Line Chart 2 | 3 | The smooth line chart is also a variant of the basic line graph. It is a better choice for you to perform a comfort visual experience. While using the ECharts, you only need to change the `smooth` to `true` to achieve this effect. 4 | 5 | ```js live 6 | option = { 7 | xAxis: { 8 | data: ['A', 'B', 'C', 'D', 'E'] 9 | }, 10 | yAxis: {}, 11 | series: [ 12 | { 13 | data: [10, 22, 28, 23, 19], 14 | type: 'line', 15 | smooth: true 16 | } 17 | ] 18 | }; 19 | ``` 20 | -------------------------------------------------------------------------------- /contents/en/how-to/chart-types/line/stacked-line.md: -------------------------------------------------------------------------------- 1 | # Stacked Line Chart 2 | 3 | Similar to the [Stacked Bar Chart](${lang}/how-to/chart-types/bar/stacked-bar), Stacked Line Chart use the `'stack'` in `series` to decide which series should be stacked together. 4 | 5 | ```js live 6 | option = { 7 | xAxis: { 8 | data: ['A', 'B', 'C', 'D', 'E'] 9 | }, 10 | yAxis: {}, 11 | series: [ 12 | { 13 | data: [10, 22, 28, 43, 49], 14 | type: 'line', 15 | stack: 'x' 16 | }, 17 | { 18 | data: [5, 4, 3, 5, 10], 19 | type: 'line', 20 | stack: 'x' 21 | } 22 | ] 23 | }; 24 | ``` 25 | 26 | However, without clarification, it is hard for us to judge whether it is a stacked line chart or normal line chart. Therefore, filling color for the area under the line is recommended to indicate for a stacked line chart. 27 | 28 | ```js live 29 | option = { 30 | xAxis: { 31 | data: ['A', 'B', 'C', 'D', 'E'] 32 | }, 33 | yAxis: {}, 34 | series: [ 35 | { 36 | data: [10, 22, 28, 43, 49], 37 | type: 'line', 38 | stack: 'x', 39 | areaStyle: {} 40 | }, 41 | { 42 | data: [5, 4, 3, 5, 10], 43 | type: 'line', 44 | stack: 'x', 45 | areaStyle: {} 46 | } 47 | ] 48 | }; 49 | ``` 50 | -------------------------------------------------------------------------------- /contents/en/how-to/chart-types/line/step-line.md: -------------------------------------------------------------------------------- 1 | # Step Line Chart 2 | 3 | The normal line chart connects two points by straight line directly, while the step line chart, also known as square wave chart, uses only horizontal and vertical lines to connect the nearby items together. Compared with the normal line chart, the step line chart significantly shows the sudden changes of analyzed data. 4 | 5 | In ECharts, `step` is used to characterize the connection type of the step line chart. It has three available values: `'start'`, `'end'`, and `'middle'`. For item A and B, these values corresponded that the corner occurred at A, B, and mid-point between A and B. 6 | 7 | ```js live 8 | option = { 9 | legend: {}, 10 | xAxis: { 11 | type: 'category', 12 | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] 13 | }, 14 | yAxis: { 15 | type: 'value' 16 | }, 17 | series: [ 18 | { 19 | name: 'Step Start', 20 | type: 'line', 21 | step: 'start', 22 | data: [120, 132, 101, 134, 90, 230, 210] 23 | }, 24 | { 25 | name: 'Step Middle', 26 | type: 'line', 27 | step: 'middle', 28 | data: [220, 282, 201, 234, 290, 430, 410] 29 | }, 30 | { 31 | name: 'Step End', 32 | type: 'line', 33 | step: 'end', 34 | data: [450, 432, 401, 454, 590, 530, 510] 35 | } 36 | ] 37 | }; 38 | ``` 39 | 40 | > Please focus on the difference of line between three separate types. 41 | -------------------------------------------------------------------------------- /contents/en/how-to/chart-types/pie/basic-pie.md: -------------------------------------------------------------------------------- 1 | # Basic Pie Chart 2 | 3 | Pie charts are mainly used to show the proportion of several categories compared with the total. The radians represent the proportion of each category. 4 | 5 | ## Simple Example 6 | 7 | The config of the pie chart is not completely the same as the line chart and bar chart. There is no need to configure the axis. The name and value of data need to be defined in the series. Let's begin with a basic pie chart: 8 | 9 | ```js live 10 | option = { 11 | series: [ 12 | { 13 | type: 'pie', 14 | data: [ 15 | { 16 | value: 335, 17 | name: 'Direct Visit' 18 | }, 19 | { 20 | value: 234, 21 | name: 'Union Ad' 22 | }, 23 | { 24 | value: 1548, 25 | name: 'Search Engine' 26 | } 27 | ] 28 | } 29 | ] 30 | }; 31 | ``` 32 | 33 | To be mentioned, the `value` here does not need to be percentage data. ECharts will proportionately distribute their corresponding radians in the pie chart depending on all the data. 34 | 35 | ## Customized Pie Chart 36 | 37 | ### Radius of Pie Chart 38 | 39 | The radius of pie chart can be defined by [`series.radius`](${optionPath}series-pie.radius). Both percent string(`'60%'`) and absolute pixel string(`'200'`) are available. While it is a percent string, it is proportional related to the shorter container(`'div'`) edge. 40 | 41 | ```js live 42 | option = { 43 | series: [ 44 | { 45 | type: 'pie', 46 | data: [ 47 | { 48 | value: 335, 49 | name: 'Direct Visit' 50 | }, 51 | { 52 | value: 234, 53 | name: 'Union Ad' 54 | }, 55 | { 56 | value: 1548, 57 | name: 'Search Engine' 58 | } 59 | ], 60 | radius: '50%' 61 | } 62 | ] 63 | }; 64 | ``` 65 | 66 | ## Hide Chart While Data Sum is 0 67 | 68 | By default, if the data sum is 0, the series will divide the shape equally. For instance, if you don't want to show any shape while all 4 series have value equals 0, you could define [`series.stillShowZeroSum`](${optionPath}series-pie.stillShowZeroSum) to `false`. 69 | 70 | ```js live 71 | option = { 72 | series: [ 73 | { 74 | type: 'pie', 75 | stillShowZeroSum: false, 76 | data: [ 77 | { 78 | value: 0, 79 | name: 'Direct Visit' 80 | }, 81 | { 82 | value: 0, 83 | name: 'Union Ad' 84 | }, 85 | { 86 | value: 0, 87 | name: 'Search Engine' 88 | } 89 | ] 90 | } 91 | ] 92 | }; 93 | ``` 94 | 95 | If you are willing to hide the label as well, define the [`series.label.show`](${optionPath}series-pie.label.show) to `false` as well. 96 | 97 | ```js live 98 | option = { 99 | series: [{ 100 | type: 'pie', 101 | stillShowZeroSum: false, 102 | label: { 103 | show: false 104 | } 105 | data: [{ 106 | value: 0, 107 | name: 'Direct Visit' 108 | }, { 109 | value: 0, 110 | name: 'Union Ad' 111 | }, { 112 | value: 0, 113 | name: 'Search Engine' 114 | }] 115 | }] 116 | }; 117 | ``` 118 | -------------------------------------------------------------------------------- /contents/en/how-to/chart-types/pie/doughnut.md: -------------------------------------------------------------------------------- 1 | # Doughnut Chart 2 | 3 | Doughnut charts are also used to show the proportion of values compared with the total. Different from the pie chart, the blank in the middle of the chart can be used to provide some extra info. It makes a doughnut chart commonly used chart type. 4 | 5 | ## Basic Doughnut Chart 6 | 7 | In ECharts, the radius of the pie chart could also be an array with 2 elements. Every element in the array could be string or value. The first element represents the inner radius while the second one is the outer radius. 8 | 9 | The pie chart, from this perspective, is a subset of the doughnut chart that has inner radius equals to 0. 10 | 11 | ```js live 12 | option = { 13 | title: { 14 | text: 'A Case of Doughnut Chart', 15 | left: 'center', 16 | top: 'center' 17 | }, 18 | series: [ 19 | { 20 | type: 'pie', 21 | data: [ 22 | { 23 | value: 335, 24 | name: 'A' 25 | }, 26 | { 27 | value: 234, 28 | name: 'B' 29 | }, 30 | { 31 | value: 1548, 32 | name: 'C' 33 | } 34 | ], 35 | radius: ['40%', '70%'] 36 | } 37 | ] 38 | }; 39 | ``` 40 | 41 | If we set one radius to string of a percentage value, while the other to a value, the inner radius will be smaller than the outer radius in some resolution. ECharts will choose the smaller element for the inner radius automatically. However, it will still cause not an unexpected outcome. 42 | 43 | ## Show Text In Middle Of Doughnut From Highlighted Sector 44 | 45 | The previous case gives you a way to show fixed text in the middle of doughnut chart. The next case will show you how to display the corresponding text of the sector highlighted by the mouse. The general idea is to fix `label` in the middle of the chart while hiding `label` in default. 46 | 47 | ```js live 48 | option = { 49 | legend: { 50 | orient: 'vertical', 51 | x: 'left', 52 | data: ['A', 'B', 'C', 'D', 'E'] 53 | }, 54 | series: [ 55 | { 56 | type: 'pie', 57 | radius: ['50%', '70%'], 58 | avoidLabelOverlap: false, 59 | label: { 60 | show: false, 61 | position: 'center' 62 | }, 63 | labelLine: { 64 | show: false 65 | }, 66 | emphasis: { 67 | label: { 68 | show: true, 69 | fontSize: '30', 70 | fontWeight: 'bold' 71 | } 72 | }, 73 | data: [ 74 | { value: 335, name: 'A' }, 75 | { value: 310, name: 'B' }, 76 | { value: 234, name: 'C' }, 77 | { value: 135, name: 'D' }, 78 | { value: 1548, name: 'E' } 79 | ] 80 | } 81 | ] 82 | }; 83 | ``` 84 | 85 | In this case, `avoidLabelOverlap` is used to control whether ECharts adjust the position of label to avoid overlaps. Default value of `avoidLabelOverlap` is `true`. We want the label to be fixed in the middle so that we need to define it as `false`. 86 | 87 | Therefore, the middle of doughnut chart will show the `name` of the highlighted sector. 88 | -------------------------------------------------------------------------------- /contents/en/how-to/chart-types/pie/rose.md: -------------------------------------------------------------------------------- 1 | # Rose Chart（Nightingale Chart） 2 | 3 | Rose Chart, which was also called the nightingale chart, usually indicates categories by sector of the same radius but different radius. 4 | 5 | ECharts can implement Rose Chart by defining [`series.roseType`](${optionPath}series-pie.roseType) of pie chart to `'area'`. All other configs are the same as a basic pie chart. 6 | 7 | ```js live 8 | option = { 9 | series: [ 10 | { 11 | type: 'pie', 12 | data: [ 13 | { 14 | value: 100, 15 | name: 'A' 16 | }, 17 | { 18 | value: 200, 19 | name: 'B' 20 | }, 21 | { 22 | value: 300, 23 | name: 'C' 24 | }, 25 | { 26 | value: 400, 27 | name: 'D' 28 | }, 29 | { 30 | value: 500, 31 | name: 'E' 32 | } 33 | ], 34 | roseType: 'area' 35 | } 36 | ] 37 | }; 38 | ``` 39 | -------------------------------------------------------------------------------- /contents/en/how-to/data/drilldown.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/contents/en/how-to/data/drilldown.md -------------------------------------------------------------------------------- /contents/en/how-to/data/dynamic-data.md: -------------------------------------------------------------------------------- 1 | # Asynchronous Data Loading and Dynamic Update 2 | 3 | ## Asynchronous Loading 4 | 5 | Data in [Getting Started Example](${lang}/get-started) is directly updated by using `setOption`. But in many cases, the data needs to be filled by asynchronous loading frequently. `ECharts` can implement asynchronous loading in a simple way. You can get data asynchronously through a function such as jQuery and use `setOption` to fill in data and configs after the chart initialized. 6 | 7 | ```js 8 | var myChart = echarts.init(document.getElementById('main')); 9 | 10 | $.get('data.json').done(function(data) { 11 | // Structure of data: 12 | // { 13 | // categories: ["Shirt","Wool sweater","Chiffon shirt","Pants","High-heeled shoes","socks"], 14 | // values: [5, 20, 36, 10, 10, 20] 15 | // } 16 | myChart.setOption({ 17 | title: { 18 | text: 'Asynchronous Loading Example' 19 | }, 20 | tooltip: {}, 21 | legend: {}, 22 | xAxis: { 23 | data: data.categories 24 | }, 25 | yAxis: {}, 26 | series: [ 27 | { 28 | name: 'Sales', 29 | type: 'bar', 30 | data: data.values 31 | } 32 | ] 33 | }); 34 | }); 35 | ``` 36 | 37 | Or display empty axes with all styles defined before fill in the data: 38 | 39 | ```js 40 | var myChart = echarts.init(document.getElementById('main')); 41 | // Show title, legends and empty axes 42 | myChart.setOption({ 43 | title: { 44 | text: 'Asynchronous Loading Example' 45 | }, 46 | tooltip: {}, 47 | legend: { 48 | data: ['Sales'] 49 | }, 50 | xAxis: { 51 | data: [] 52 | }, 53 | yAxis: {}, 54 | series: [ 55 | { 56 | name: 'Sales', 57 | type: 'bar', 58 | data: [] 59 | } 60 | ] 61 | }); 62 | 63 | // Asynchronous Data Loading 64 | $.get('data.json').done(function(data) { 65 | // Fill in the data 66 | myChart.setOption({ 67 | xAxis: { 68 | data: data.categories 69 | }, 70 | series: [ 71 | { 72 | // Find series by name 73 | name: 'Sales', 74 | data: data.data 75 | } 76 | ] 77 | }); 78 | }); 79 | ``` 80 | 81 | For example: 82 | 83 | 84 | 85 | You need to use `name` to "navigate" ECharts when updating data. In the previous example, the chart can update normally depending on the order of series, but we recommend you to add the `name` data while updating data. 86 | 87 | ## loading Animation 88 | 89 | When it takes a long time to load the data, the user is facing the empty chart with only axes will wonder if there is a bug. 90 | 91 | ECharts have a simple loading animation by default. You can call [showLoading](${mainSitePath}/api.html#echartsInstance.showLoading) to display. When the data loading was completed, call [hideLoading](${mainSitePath}/api.html#echartsInstance.hideLoading) to hide the animation. 92 | 93 | ```js 94 | myChart.showLoading(); 95 | $.get('data.json').done(function (data) { 96 | myChart.hideLoading(); 97 | myChart.setOption(...); 98 | }); 99 | ``` 100 | 101 | Here is the effect: 102 | 103 | 104 | 105 | ## Dynamic Update 106 | 107 | ECharts was driven by data, change in data will drive changes in the presentation of the chart. Therefore, It's surprisingly simple to implement a dynamic update. 108 | 109 | All data's updates were implemented by [setOption](${mainSitePath}/api.html#echartsInstance.setOption). You only need to fetch the data periodically. ECharts will find the difference between two groups of data to use the proper way to choose the animation. 110 | 111 | Check the following example. 112 | 113 | 114 | -------------------------------------------------------------------------------- /contents/en/how-to/interaction/coarse-pointer.md: -------------------------------------------------------------------------------- 1 | # Intelligent Pointer Snapping 2 | 3 | Some interactive elements may be relatively small in charts, so sometimes it is difficult for users to click and do other operations accurately, especially on the mobile. Therefore, in Apache EChartsTM 5.4.0, we introduced the concept of "intelligent pointer snapping". 4 | 5 | Starting from this version, by default, ECharts enables pointer snapping for mobile charts and disables it for non-mobile charts. 6 | 7 | > If it needs to be enabled for all platforms, it can be achieved by setting `opt.useCoarsePointer` to `true` in [init](${mainSitePath}api.html#echarts.init); set to `false` is turned off for all platforms. 8 | 9 | ## Snapping Algorithm 10 | 11 | When a mouse or touch event occurs, ECharts will determine whether it is intersecting with an interactive element based on the position of the mouse or touch. If it is, the element is the object to be interacted with, which is the same logic before this optimization. If not, find an element that is closest to the mouse or touch position within a certain range. 12 | 13 | > The default range is 44px (see [W3C standard](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html)), developers can set this value through `opt.pointerSize` when [init](${mainSitePath}api.html#echarts.init). 14 | 15 | More specifically, ECharts will loop through different angles and different radii (within `opt.pointerSize`) around the mouse or touch position until it finds an element that intersects it. If found, the element is considered to be the interactive object. 16 | 17 | 19 | 20 | 21 | That is, if an element is within the `opt.pointerSize` radius of the mouse or touch position, the closest intersected element is considered the interactive object. 22 | 23 | ## Performance 24 | 25 | As for the implementation, we first judge the intersection between the mouse or touch position and the AABB bounding box of all interactive elements, so as to quickly eliminate most of the elements that is not intersecting. Then, we perform an accurate path intersection judgment on the remaining elements. Therefore, from the perspective of user experience, there is hardly any perceivable performance loss. 26 | 27 | For chart series with large-scale data (that is, bar charts, scatter charts, etc. with `large: true` enabled), the snapping will not be enabled. 28 | -------------------------------------------------------------------------------- /contents/zh/basics/download.md: -------------------------------------------------------------------------------- 1 | # 获取 Apache ECharts 2 | 3 | Apache ECharts 提供了多种安装方式，你可以根据项目的实际情况选择以下任意一种方式安装。 4 | 5 | - 从 GitHub 获取 6 | - 从 npm 获取 7 | - 从 CDN 获取 8 | - 在线定制 9 | 10 | 接下来我们将分别介绍这些安装方式，以及下载后的目录结构。 11 | 12 | ## 安装方式 13 | 14 | ### 从 npm 获取 15 | 16 | ```sh 17 | npm install echarts 18 | ``` 19 | 20 | 详见[在项目中引入 Apache ECharts](${lang}/basics/import)。 21 | 22 | ### 从 CDN 获取 23 | 24 | 可以从以下免费 CDN 中获取和引用 ECharts。 25 | 26 | - [jsDelivr](https://www.jsdelivr.com/package/npm/echarts) 27 | - [unpkg](https://unpkg.com/browse/echarts/) 28 | - [cdnjs](https://cdnjs.com/libraries/echarts) 29 | 30 | ### 从 GitHub 获取 31 | 32 | [apache/echarts](https://github.com/apache/echarts) 项目的 [release](https://github.com/apache/echarts/releases) 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code，解压后 `dist` 目录下的 `echarts.js` 即为包含完整 ECharts 功能的文件。 33 | 34 | ### 在线定制 35 | 36 | 如果只想引入部分模块以减少包体积，可以使用 [ECharts 在线定制](${mainSitePath}builder.html)功能。 37 | -------------------------------------------------------------------------------- /contents/zh/basics/help.md: -------------------------------------------------------------------------------- 1 | # 寻求帮助 2 | 3 | ## 技术问题 4 | 5 | ### 确保现有文档等资料无法解决你的问题 6 | 7 | ECharts 有非常大量的用户，所以你遇到过的问题很可能别人在此之前也遇到并解决了。通过查看文档以及使用搜索引擎搜索关键字，可以帮助你自助地在第一时间解决问题，而不需要依赖社区的帮助。 8 | 9 | 因此，在做其他操作前，请确保现有文档等资料无法解决你的问题。可以尝试查看或搜索的资料包括： 10 | 11 | - [API](${mainSitePath}api.html) 12 | - [配置项手册](${mainSitePath}option.html)：可以尝试使用搜索功能 13 | - 本手册的文章 14 | - [常见问题](${mainSitePath}faq.html) 15 | - 在 [GitHub issue](https://github.com/apache/echarts/issues) 中搜索关键字 16 | - 使用搜索引擎搜索关键字 17 | 18 | ### 创建一个最简单可复现的例子 19 | 20 | 使用[官方编辑器](${mainSitePath}examples/editor.html)、[CodePen](https://codepen.io/Ovilia/pen/dyYWXWM)、[CodeSandbox](https://codesandbox.io/s/echarts-basic-example-template-mpfz1s) 或 [JSFiddle](https://jsfiddle.net/plainheart/e46ozpqj/7/) 创建一个例子，这将使得他人更方便地复现你的问题。 21 | 22 | 例子应尽可能以最简单的方式复现你的问题，去除不必要的配置项和数据，可以让帮助你的人更快速地定位问题，从而让你的问题更快得到解决。更详细的介绍请参见 [如何创建一个最小的可复现代码示例](https://stackoverflow.com/help/minimal-reproducible-example)。 23 | 24 | ### 判断是否是 bug 25 | 26 | #### 报告 bug 或请求新功能 27 | 28 | 如果不符合文档描述或你的预期效果，这很有可能是 bug。如果是 bug，或者你有一个想请求实现的功能，请使用 [issue 模板](https://github.com/apache/echarts/issues/new/choose) 新建一个 issue 并按照提示详细描述。 29 | 30 | #### 咨询类问题 31 | 32 | 如果不是 bug，而是不知道如何实现某种效果，可以尝试在 stackoverflow.com、开源中国 或 SegmentFault 思否 等问答平台上提问。 33 | 34 | 如果没能得到答复，也可以发送邮件至邮件组 [dev@echarts.apache.org](mailto:dev@echarts.apache.org)。为了让更多人理解你的问题，并且在将来搜索的时候得到帮助，强烈建议使用英文发送邮件。 35 | 36 | ## 非技术类问题 37 | 38 | 其他问题可以发送英文邮件至邮件组 [dev@echarts.apache.org](mailto:dev@echarts.apache.org)。 39 | -------------------------------------------------------------------------------- /contents/zh/basics/import.md: -------------------------------------------------------------------------------- 1 | # 在项目中引入 Apache ECharts 2 | 3 | 假如你的开发环境使用了 `npm` 或者 `yarn` 等包管理工具，并且使用 `webpack` 等打包工具进行构建，本文将会介绍如何引入 Apache EChartsTM 并通过 tree-shaking 特性只打包需要的模块以减少包体积。 4 | 5 | ## NPM 安装 ECharts 6 | 7 | 你可以使用如下命令通过 npm 安装 ECharts 8 | 9 | ```shell 10 | npm install echarts --save 11 | ``` 12 | 13 | ## 引入 ECharts 14 | 15 | ```js 16 | import * as echarts from 'echarts'; 17 | 18 | // 基于准备好的dom，初始化echarts实例 19 | var myChart = echarts.init(document.getElementById('main')); 20 | // 绘制图表 21 | myChart.setOption({ 22 | title: { 23 | text: 'ECharts 入门示例' 24 | }, 25 | tooltip: {}, 26 | xAxis: { 27 | data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] 28 | }, 29 | yAxis: {}, 30 | series: [ 31 | { 32 | name: '销量', 33 | type: 'bar', 34 | data: [5, 20, 36, 10, 10, 20] 35 | } 36 | ] 37 | }); 38 | ``` 39 | 40 | ## 按需引入 ECharts 图表和组件 41 | 42 | 上面的代码会引入 ECharts 中所有的图表和组件，如果你不想引入所有组件，也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。 43 | 44 | ```js 45 | // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。 46 | import * as echarts from 'echarts/core'; 47 | // 引入柱状图图表，图表后缀都为 Chart 48 | import { BarChart } from 'echarts/charts'; 49 | // 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component 50 | import { 51 | TitleComponent, 52 | TooltipComponent, 53 | GridComponent, 54 | DatasetComponent, 55 | TransformComponent 56 | } from 'echarts/components'; 57 | // 标签自动布局、全局过渡动画等特性 58 | import { LabelLayout, UniversalTransition } from 'echarts/features'; 59 | // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步 60 | import { CanvasRenderer } from 'echarts/renderers'; 61 | 62 | // 注册必须的组件 63 | echarts.use([ 64 | TitleComponent, 65 | TooltipComponent, 66 | GridComponent, 67 | DatasetComponent, 68 | TransformComponent, 69 | BarChart, 70 | LabelLayout, 71 | UniversalTransition, 72 | CanvasRenderer 73 | ]); 74 | 75 | // 接下来的使用就跟之前一样，初始化图表，设置配置项 76 | var myChart = echarts.init(document.getElementById('main')); 77 | myChart.setOption({ 78 | // ... 79 | }); 80 | ``` 81 | 82 | > 需要注意的是为了保证打包的体积是最小的，ECharts 按需引入的时候不再提供任何渲染器，所以需要选择引入 `CanvasRenderer` 或者 `SVGRenderer` 作为渲染器。这样的好处是假如你只需要使用 svg 渲染模式，打包的结果中就不会再包含无需使用的 `CanvasRenderer` 模块。 83 | 84 | 我们在示例编辑页的“完整代码”标签提供了非常方便的生成按需引入代码的功能。这个功能会根据当前的配置项动态生成最小的按需引入的代码。你可以直接在你的项目中使用。 85 | 86 | > v5.5.0 版本开始使用 ESM 作为默认的模块规范，查看可能的 [Breaking Changes](https://github.com/apache/echarts/pull/19513#issuecomment-1916237700) 以及 [Pull Request](https://github.com/apache/echarts/pull/19513)。 87 | 88 | ## 在 TypeScript 中按需引入 89 | 90 | 对于使用了 TypeScript 来开发 ECharts 的开发者，我们提供了类型接口来组合出最小的 `EChartsOption` 类型。这个更严格的类型可以有效帮助你检查出是否少加载了组件或者图表。 91 | 92 | ```ts 93 | import * as echarts from 'echarts/core'; 94 | import { 95 | BarChart, 96 | LineChart 97 | } from 'echarts/charts'; 98 | import { 99 | TitleComponent, 100 | TooltipComponent, 101 | GridComponent, 102 | // 数据集组件 103 | DatasetComponent, 104 | // 内置数据转换器组件 (filter, sort) 105 | TransformComponent 106 | } from 'echarts/components'; 107 | import { LabelLayout, UniversalTransition } from 'echarts/features'; 108 | import { CanvasRenderer } from 'echarts/renderers'; 109 | import type { 110 | // 系列类型的定义后缀都为 SeriesOption 111 | BarSeriesOption, 112 | LineSeriesOption 113 | } from 'echarts/charts'; 114 | import type { 115 | // 组件类型的定义后缀都为 ComponentOption 116 | TitleComponentOption, 117 | TooltipComponentOption, 118 | GridComponentOption, 119 | DatasetComponentOption 120 | } from 'echarts/components'; 121 | import type { 122 | ComposeOption, 123 | } from 'echarts/core'; 124 | 125 | // 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型 126 | type ECOption = ComposeOption< 127 | | BarSeriesOption 128 | | LineSeriesOption 129 | | TitleComponentOption 130 | | TooltipComponentOption 131 | | GridComponentOption 132 | | DatasetComponentOption 133 | >; 134 | 135 | // 注册必须的组件 136 | echarts.use([ 137 | TitleComponent, 138 | TooltipComponent, 139 | GridComponent, 140 | DatasetComponent, 141 | TransformComponent, 142 | BarChart, 143 | LineChart, 144 | LabelLayout, 145 | UniversalTransition, 146 | CanvasRenderer 147 | ]); 148 | 149 | const option: ECOption = { 150 | // ... 151 | }; 152 | ``` 153 | -------------------------------------------------------------------------------- /contents/zh/basics/inspiration.md: -------------------------------------------------------------------------------- 1 | # 获取灵感 2 | 3 | 当你有“不知道图表应该设计成什么样”或者“不知道如何使用 ECharts 实现某种效果”的疑问的时候，以下列表可以提供一些思路。 4 | 5 | - [ECharts 官方实例](${mainSitePath}/examples) 6 | - 本手册的“应用篇 - 常用图表类型” 7 | - [makeapie.com](https://www.makeapie.com/) 社区用户的作品集 8 | -------------------------------------------------------------------------------- /contents/zh/basics/release-note/5-4-0.md: -------------------------------------------------------------------------------- 1 | # Apache ECharts 5.4.0 特性介绍 2 | 3 | ## 智能指针吸附 4 | 5 | 在图表中，部分可交互元素可能比较小，有时候用户不易准确地进行点击等操作，移动端尤其如此。因此，在 Apache ECharts 5.4.0 中，我们引入了“智能指针吸附”的概念。 6 | 7 | 具体请参见[智能指针吸附](${lang}/how-to/interaction/coarse-pointer)。 8 | 9 | ## 在更多坐标系中使用饼图 10 | 11 | Apache ECharts 一个很强大的功能就是各种图表类型、坐标系、组件的组合。在这个版本中，我们为饼图增加了坐标系的配置项。 12 | 13 | 于是，饼图可以出现在直角坐标系： 14 | 15 | ![](images/5-4-0/pie-grid.png) 16 | 17 | 日历坐标系： 18 | 19 | ![](images/5-4-0/pie-calendar.png) 20 | 21 | 地理坐标系： 22 | 23 | ![](images/5-4-0/pie-geo.png) 24 | 25 | 等等各种坐标系中，甚至可以和百度地图扩展联动，在地图上显示饼图： 26 | 27 | ![](images/5-4-0/pie-bmap.png) 28 | 29 | ![](images/5-4-0/pie-amap.png) 30 | 31 | 这大大扩展了饼图的灵活性，让开发者可以使用 Apache ECharts 创作出更多图表的组合效果。 32 | 33 | ## 新增乌克兰语翻译 34 | 35 | 在这个版本中，我们支持了乌克兰语。**目前 Apache ECharts 已支持 17 种语言！** 36 | 37 | > 如果需要使用除中英文以外的语言，需要在初始化图表前，先调用 `echarts.registerLocale` 初始化，然后在 `init` 时候传入 `opts.locale` 修改图表语言。 38 | 39 | ## 仪表盘文字旋转 40 | 41 | 在这个版本中，我们支持了仪表盘的文字旋转。 42 | 43 | 44 | 45 | `axisLabel.rotate` 可以设为 `'tangential' | 'radial' | number`。如果是 `number` 类型，则表示标签的旋转角，从 -90 度到 90 度，正值是逆时针。除此之外，还可以是字符串 `'radial'` 表示径向旋转、`'tangential'` 表示切向旋转。 46 | 47 | ## 完整更新记录 48 | 49 | 查看[版本更新](${mainSitePath}/changelog.html#v5-4-0) 50 | -------------------------------------------------------------------------------- /contents/zh/basics/release-note/5-6-0.md: -------------------------------------------------------------------------------- 1 | # Apache ECharts 5.6.0 特性介绍 2 | 3 | ## 在原始 GeoJSON 数据中定义区域样式 4 | 5 | ECharts 地图使用 GeoJson 格式定义数据。理论上出于“数据、样式分离的原则”，GeoJson 只负责定义数据，样式应该在 ECharts 中定义。但有些情况下，样式本身也是数据的一种表达（例如：对于争议国界使用虚线表示，这时候“虚线”是一种样式，但是它实际上表达的是数据的概念，所以在 GeoJson 中定义样式是合理的）。 6 | 7 | 在 ECharts 5.6.0 中，我们支持在原始 GeoJson 数据中定义区域样式，通过指定 `features[].properties.echartsStyle` 来定义样式，和 [data](${optionPath}series-map.data) 一样，支持配置 `itemStyle`、`label`、`tooltip` 等属性。示例： 8 | 9 | ```ts 10 | geoJSON.features[0].properties.echartsStyle = { 11 | itemStyle: { 12 | areaColor: 'green' 13 | } 14 | } 15 | 16 | geoJSON.features[1].properties.echartsStyle = { 17 | selected: true, 18 | label: { 19 | formatter: 'Default Selected:\n{b}' 20 | } 21 | } 22 | 23 | geoJSON.features[2].properties.echartsStyle = { 24 | itemStyle: { 25 | borderType: 'dotted', 26 | borderColor: 'blue' 27 | } 28 | } 29 | 30 | geoJSON.features[11].properties.echartsStyle = { 31 | itemStyle: { 32 | // This region will be overridden as `cyan` by the data item option 33 | areaColor: 'black' 34 | }, 35 | tooltip: { 36 | formatter: function (params) { 37 | return 'This is a custom tooltip from GeoJSON: ' + params.name; 38 | } 39 | } 40 | } 41 | ``` 42 | 43 | ## 坐标轴标签支持提示框 44 | 45 | 在有些情况下，坐标轴标签过长，或我们希望在坐标轴标签上显示更多信息，在 ECharts 5.6.0 中，我们支持在坐标轴标签上添加提示框。使用方法和 `tooltip` 的配置项一致，具体可以参考 [axis.tooltip 文档](${optionPath}xAxis.tooltip)。 46 | 47 | ![](images/5-6-0/axis-tooltip.png) 48 | 49 | ## 旭日图支持聚焦所有子孙和祖先节点 50 | 51 | 在之前版本的旭日图中，[emphasis.focus](${optionPath}series-sunburst.emphasis.focus) 支持以下几种值： 52 | 53 | - `'none'` 不淡出其它图形，默认使用该配置。 54 | - `'self'` 只聚焦（不淡出）当前高亮的数据的图形。 55 | - `'series'` 聚焦当前高亮的数据所在的系列的所有图形。 56 | - `'adjacency'` 聚焦关系图中的邻接点和边的图形。 57 | 58 | 在 ECharts 5.6.0 中，我们新增了 `'relative'` ，表示聚焦所有子孙和祖先节点。 59 | 60 | ![](images/5-6-0/sunburst-emphasis-relative.png) 61 | 62 | ## 新增两种语言支持 63 | 64 | 在这个版本中，新增了瑞典语和波斯语的支持。至此，ECharts 已经支持 22 种语言。 65 | 66 | ## 折线图性能优化 67 | 68 | 在这个版本中，我们优化了折线图的渲染性能，解决了折线图内存随时间增长的问题。 69 | 70 | ## 完整更新记录 71 | 72 | 查看[版本更新](${mainSitePath}changelog.html#v5-6-0) 73 | 74 | 下一个大版本 Apache ECharts 6.0.0 正在火热开发中，预计于 2025 年一季度末发布，敬请期待。 75 | -------------------------------------------------------------------------------- /contents/zh/basics/resource.md: -------------------------------------------------------------------------------- 1 | # 资源列表 2 | 3 | ## 官方 4 | 5 | - [API](${mainSitePath}api.html) 6 | - [配置项手册](${mainSitePath}option.html) 7 | - [官方实例](${mainSitePath}examples/zh/index.html) 8 | - [术语速查手册](${mainSitePath}cheat-sheet.html) 9 | 10 | ## 社区 11 | 12 | - [MakeAPie](https://www.makeapie.com)：社区用户的作品集 13 | - [awesome-echarts](https://github.com/ecomfe/awesome-echarts)：各种 ECharts 相关的资源，包括 AngularJS、Vue 等框架的支持，Java、Python、R 等语言的 ECharts 版本，ECharts VSCode 插件等工具 14 | -------------------------------------------------------------------------------- /contents/zh/best-practices/aria.md: -------------------------------------------------------------------------------- 1 | # 无障碍访问 2 | 3 | W3C 制定了无障碍富互联网应用规范集（[WAI-ARIA](https://www.w3.org/WAI/intro/aria)，the Accessible Rich Internet Applications Suite），致力于使得网页内容和网页应用能够被更多残障人士访问。 4 | 5 | Apache ECharts 4 遵从这一规范，支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问。Apache ECharts 5 新增了贴花功能，让图表数据除了可以用颜色区分之外，还能用贴花图案区分，提供了更好的无障碍访问体验。 6 | 7 | 无障碍访问功能默认关闭，需要通过将 [aria.show](${optionPath}aria.show) 设置为 `true` 开启。 8 | 9 | ## 图表描述 10 | 11 | 开启 [aria.show](${optionPath}aria.show) 后，会根据图表、数据、标题等情况，自动智能生成关于图表的描述，用户也可以通过配置项修改描述。 12 | 13 | 对于配置项： 14 | 15 | ```js 16 | option = { 17 | aria: { 18 | show: true 19 | }, 20 | title: { 21 | text: '某站点用户访问来源', 22 | x: 'center' 23 | }, 24 | series: [ 25 | { 26 | name: '访问来源', 27 | type: 'pie', 28 | data: [ 29 | { value: 335, name: '直接访问' }, 30 | { value: 310, name: '邮件营销' }, 31 | { value: 234, name: '联盟广告' }, 32 | { value: 135, name: '视频广告' }, 33 | { value: 1548, name: '搜索引擎' } 34 | ] 35 | } 36 | ] 37 | }; 38 | ``` 39 | 40 | 41 | 42 | 生成的图表 DOM 上，会有一个 `aria-label` 属性，在朗读设备的帮助下，盲人能够了解图表的内容。其值为： 43 | 44 | ``` 45 | 这是一个关于“某站点用户访问来源”的图表。图表类型是饼图，表示访问来源。其数据是——直接访问的数据是335，邮件营销的数据是310，联盟广告的数据是234，视频广告的数据是135，搜索引擎的数据是1548。 46 | ``` 47 | 48 | 默认语言会根据语言包（默认中文）选择，也可以使用配置项自定义模板。 49 | 50 | ### 整体修改描述 51 | 52 | 对于有些图表，默认生成的数据点的描述并不足以表现整体的信息。比如下图的散点图，默认生成的描述可以包含数据点的坐标值，但是知道几百几千个点的坐标并不能帮助我们有效地理解图表表达的信息。 53 | 54 | 这时候，用户可以通过 [aria.description](${optionPath}aria.description) 配置项指定图表的整体描述。 55 | 56 | ### 定制模板描述 57 | 58 | 除了整体性修改描述之外，我们还提供了生成描述的模板，可以方便地进行细粒度的修改。 59 | 60 | 生成描述的基本流程为，如果 [aria.show](${optionPath}aria.show) 设置为 `true`，则生成无障碍访问描述，否则不生成。如果定义了 [aria.description](${optionPath}aria.description)，则将其作为图表的完整描述，否则根据模板拼接生成描述。我们提供了默认的生成描述的算法，仅当生成的描述不太合适时，才需要修改这些模板，甚至使用 `aria.description` 完全覆盖。 61 | 62 | 使用模板拼接时，先根据是否存在标题 [title.text](${optionPath}title.text) 决定使用 [aria.general.withTitle](${optionPath}aria.general.withTitle) 还是 [aria.general.withoutTitle](${optionPath}aria.general.withoutTitle) 作为整体性描述。其中，`aria.general.withTitle` 配置项包括模板变量 `'{title}'`，将会被替换成图表标题。也就是说，如果 `aria.general.withTitle` 被设置为 `'图表的标题是：{title}。'`，则如果包含标题 `'价格分布图'`，这部分的描述为 `'图表的标题是：价格分布图。'`。 63 | 64 | 拼接完标题之后，会依次拼接系列的描述（[aria.series](${optionPath}aria.series)），和每个系列的数据的描述（[aria.data](${optionPath}aria.data)）。同样，每个模板都有可能包括模板变量，用以替换实际的值。 65 | 66 | 完整的描述生成流程请参见 [ARIA 文档](${optionPath}aria.label)。 67 | 68 | ## 贴花图案 69 | 70 | 除此之外，Apache ECharts 5 新增支持贴花纹理，作为颜色的辅助表达，进一步用以区分数据。在 `aria.enabled` 为 `true` 的前提下，将 `aria.decal.show` 设为 `true` 即可采用默认的贴花样式。 71 | 72 | 73 | 74 | 如果需要自定义贴花图案，可以使用 [aria.decal.decals](${optionPath}aria.decal.decals) 配置出灵活多变的图案。 75 | 76 | 更具体的信息请参见 [ARIA 文档](${optionPath}aria.decal)。 77 | -------------------------------------------------------------------------------- /contents/zh/best-practices/canvas-vs-svg.md: -------------------------------------------------------------------------------- 1 | # 使用 Canvas 或者 SVG 渲染 2 | 3 | 浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说，这两种技术往往是可替换的，效果相近。但是在一些场景中，他们的表现和能力又有一定差异。于是，对它们的选择取舍，就成为了一个一直存在的不易有标准答案的话题。 4 | 5 | ECharts 从初始一直使用 Canvas 绘制图表。而 [ECharts v4.0](https://echarts.apache.org/zh/changelog.html#v4-0-0) 发布了 SVG 渲染器，从而提供了一种新的选择。在初始化图表实例时，只需设置 [renderer 参数](${mainSitePath}api.html#echarts.init) 为 `'canvas'` 或 `'svg'` 即可指定渲染器，比较方便。 6 | 7 | > SVG 和 Canvas 这两种使用方式差异很大的技术，能够做到同时被透明支持，主要归功于 ECharts 底层库 [ZRender](https://github.com/ecomfe/zrender) 的抽象和实现，形成可互换的 SVG 渲染器和 Canvas 渲染器。 8 | 9 | ## 选择哪种渲染器 10 | 11 | 一般来说，Canvas 更适合绘制图形元素数量较多（这一般是由数据量大导致）的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也利于实现某些视觉 [特效](${mainSitePath}examples/editor.html?c=lines-bmap-effect)。但是，在不少场景中，SVG 具有重要的优势：它的内存占用更低（这对移动端尤其重要）、并且用户使用浏览器内置的缩放功能时不会模糊。 12 | 13 | 选择哪种渲染器，我们可以根据软硬件环境、数据量、功能需求综合考虑。 14 | 15 | - 在软硬件环境较好，数据量不大的场景下，两种渲染器都可以适用，并不需要太多纠结。 16 | - 在环境较差，出现性能问题需要优化的场景下，可以通过试验来确定使用哪种渲染器。比如有这些经验： 17 | - 在需要创建很多 ECharts 实例且浏览器易崩溃的情况下（可能是因为 Canvas 数量多导致内存占用超出手机承受能力），可以使用 SVG 渲染器来进行改善。大略的说，如果图表运行在低端安卓机，或者我们在使用一些特定图表如 [水球图](https://ecomfe.github.io/echarts-liquidfill/example/) 等，SVG 渲染器可能效果更好。 18 | - 数据量较大（经验判断 > 1k）、较多交互时，建议选择 Canvas 渲染器。 19 | 20 | 我们强烈欢迎开发者们[反馈](https://github.com/apache/echarts/issues/new/choose)给我们使用的体验和场景，帮助我们更好的做优化。 21 | 22 | 注：当前某些特殊的渲染依然需要依赖 Canvas：如[炫光尾迹特效](${optionPath}series-lines.effect)、[带有混合效果的热力图](${mainSitePath}examples/editor.html?c=heatmap-bmap)等。 23 | 24 | 我们在 [v5.3.0](${lang}/basics/release-note/5-3-0/#全新的-svg-渲染器) 中使用虚拟 DOM 技术对 SVG 渲染器进行了重构，从而使其渲染性能提升了 2~10 倍，在某些特殊场景中甚至能有数十倍的提升！参见 [#836](https://github.com/ecomfe/zrender/pull/836)。 25 | 26 | ## 如何使用渲染器 27 | 28 | 如果是用如下的方式完整引入`echarts`，代码中已经包含了 SVG 渲染器和 Canvas 渲染器 29 | 30 | ```js 31 | import * as echarts from 'echarts'; 32 | ``` 33 | 34 | 如果你是按照 [在项目中引入 Apache ECharts](${lang}/basics/import) 一文中的介绍使用按需引入，则需要手动引入需要的渲染器 35 | 36 | ```js 37 | import * as echarts from 'echarts/core'; 38 | // 可以根据需要选用只用到的渲染器 39 | import { SVGRenderer, CanvasRenderer } from 'echarts/renderers'; 40 | 41 | echarts.use([SVGRenderer, CanvasRenderer]); 42 | ``` 43 | 44 | 然后，我们就可以在代码中，初始化图表实例时，[传入参数](${mainSitePath}api.html#echarts.init) 选择渲染器类型： 45 | 46 | ```js 47 | // 使用 Canvas 渲染器（默认） 48 | var chart = echarts.init(containerDom, null, { renderer: 'canvas' }); 49 | // 等价于： 50 | var chart = echarts.init(containerDom); 51 | 52 | // 使用 SVG 渲染器 53 | var chart = echarts.init(containerDom, null, { renderer: 'svg' }); 54 | ``` 55 | -------------------------------------------------------------------------------- /contents/zh/best-practices/design/color-enhance.md: -------------------------------------------------------------------------------- 1 | # 用颜色增强可视化效果 2 | 3 | 在数据可视化所有的视觉通道中，色彩作为视觉的第一感知因素，对数据进行的视觉编码和传达是很有效的。如果使用得当，颜色可以非常有效地增强可视化效果。接下来，我们来看看具体有哪些使用颜色来增强可视化效果的的技巧和方法。 4 | 5 | ## 颜色的情感共鸣 6 | 7 | 颜色感知是一个复杂的物理和心理相互作用的结果。为了证明了人们感知到的色彩有冷与暖之分，日本色彩学家大智浩曾做过一个实验，将一个工作场地涂灰青色，另一个工作场地涂红橙色，两个工作场地的客观温度劳动强度相同，在灰青色工作场地工作的员工相对更容易感觉到冷。人们进一步研究发现，除了冷与暖的不同感受，色彩还有轻与重、远与近、活泼与忧郁等区分。所以，色彩之所以强大之处在于不同的色彩会使人的心理与生理产生不同的感受，从而引起情感反应和影响人们的情绪。 8 | 9 | 在可视化的颜色选择上，如果我们选用的颜色与我们数据本身的特点以及想要传达的情绪吻合的话，就可以伴随着颜色的视觉传达而引起情感上的共鸣。 10 | 11 | 例如某个甜品店各类甜品的销售占比，数据如下： 12 | 13 | 14 | 15 | 针对这份数据，下面两个相同样式的图表，我们采用了两种不同配色方案，对比来看很明显，右图的配色更适合用来展示甜品数据。 16 | 17 | 18 | 19 | 因为相较于蓝色、紫色而言，橙色、黄色、粉色、绿色都是有利于提升食欲的颜色，而且更容易使人们产生温暖、幸福的情感，而这种情感与吃甜品时人们产生的感觉是一致的。另一方面，甜品本身的面向用户大多数是儿童和女性，针对这部分用户，比较明快、可爱的图表颜色也是更好的选择。而左侧的图表的配色更适合用于展示某种商务、男性群体的数据，因为左图的配色更容易使人产生理性和冷静的情感。 20 | 21 | ## 颜色的语义共鸣 22 | 23 | 不同的颜色可以帮助我们识别和区分不同的类别。我们已经习惯将颜色和各种事物或概念绑定在一起。当提到某些事物时我们经常会迅速的在心中匹配其对应的颜色，例如提到“云朵”会想到白色，“爱情”会想到粉红色。这些自然的、与语义一致的颜色被称为"语义共鸣色"。 24 | 25 | 研究表明，对于有固定颜色的词，匹配其具有语义共鸣的颜色，能有效的加速认知过程，反之则会阻碍认知，这种有趣的现象称为"斯特鲁普效应"。我们可以做个的对比试验，分别在上图两行文字中找到“黄”字。这个过程中，第一行的“黄”可以被快速定位到，因为对应使用了黄色。而在第二行寻找的时候，可能有人最早定位到的会是“紫”字，因为此处“紫”字使用了黄色，这就阻碍了我们寻找的速度和准确性。 26 | 27 | 28 | 29 | 有效地利用语义共鸣色，即采用与数据本身意义一致的颜色，也可以提高可视化的认知效率。例如可以使用蓝色的来显示"海洋"的数据、使用黄色来显示“沙漠”的数据。 30 | 31 | 视觉效果应该尽可能容易地解释，因此请尝试找到与观众的先入为主和文化联想相匹配的配色方案。如下示例中展示了猕猴桃、香蕉、橙子、草莓四种水果的销售数据，分别选择了与水果本身一致的颜色绿色、黄色、橙色、红色。这样，我们在辨别和记忆每个柱状所对应的水果时就轻而易举了。 32 | 33 | ```js live 34 | option = { 35 | color: ['#6E9D4E', '#EDDB4F', '#F7923A', '#F14747'], 36 | title: { 37 | text: '7月水果销量', 38 | x: '2%', 39 | y: '1%', 40 | textStyle: { 41 | color: '#fff', 42 | fontSize: '26' 43 | } 44 | }, 45 | tooltip: { 46 | trigger: 'axis' 47 | }, 48 | legend: { 49 | data: ['猕猴桃', '香蕉', '橙子', '草莓'], 50 | align: 'right' 51 | }, 52 | grid: { 53 | left: '3%', 54 | right: '3%', 55 | top: '15%', 56 | bottom: '3%', 57 | containLabel: true 58 | }, 59 | xAxis: [ 60 | { 61 | type: 'category', 62 | data: ['第一周', '第二周', '第三周', '第四周'] 63 | } 64 | ], 65 | yAxis: [ 66 | { 67 | type: 'value', 68 | axisLabel: { 69 | formatter: '{value}' 70 | } 71 | } 72 | ], 73 | series: [ 74 | { 75 | name: '猕猴桃', 76 | type: 'bar', 77 | data: [60, 110, 180, 100] 78 | }, 79 | { 80 | name: '香蕉', 81 | type: 'bar', 82 | data: [90, 130, 170, 130] 83 | }, 84 | { 85 | name: '橙子', 86 | type: 'bar', 87 | data: [120, 160, 140, 160] 88 | }, 89 | { 90 | name: '草莓', 91 | type: 'bar', 92 | data: [110, 190, 90, 100] 93 | } 94 | ] 95 | }; 96 | ``` 97 | 98 | ## 图表颜色要吻合常识 99 | 100 | 在数据可视化的过程中，颜色的使用与图表的数据、展示环境、受众人群、社会背景等因素直接相关，我们不可以把颜色作为独立的因素去设计。在开始选择可视化作品的颜色时，请先克制住自由创作的热情，查看一下这是否是一份特殊的数据，再去选择对的颜色。例如一个股票数据的图表中，红色和绿色都有独特的含义。所以可视化图表颜色的选择吻合认知的常识，可以帮助我们更好地理解和区分数据。 101 | 102 | 105 | 106 | 再例如查看天气温度。蓝色和红色易于理解，无需任何解释，并且易于区分。 107 | 108 | 111 | 112 | ## 用颜色来区分数据 113 | 114 | 我们通常会使用折线图来分析趋势，但是有的时候有需要明确的知道某个数据是否在某个区间范围内，因此我们可以主动地去配置定义区域。例如我们设定 25%-75% 这个范围内为我们计划完成的销售额，那我们可以在这个定义区域的范围内，给每个区域设置成一个底色，这样就可以高效的识别出每个数据处于哪个区间范围内，未达到、达到、超额完成的值。 115 | 116 | 所以，颜色可以被用来作为提高图表的可阅读性和有效工具。 117 | 118 | 119 | -------------------------------------------------------------------------------- /contents/zh/best-practices/mobile.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/contents/zh/best-practices/mobile.md -------------------------------------------------------------------------------- /contents/zh/best-practices/specification/bar/basic-bar.md: -------------------------------------------------------------------------------- 1 | # 基础柱状图 2 | 3 | 柱状图是最常见的图表类型，通过使用水平或垂直方向  柱子的高度来显示不同类别的数值，其中柱状图的一个轴显示比较的类别，而另一个轴代表对应的数值。 4 | 5 | 8 | 9 | 纵向柱状图的柱是垂直方向的，横向柱状图的柱是水平方向的，又称条形图。条形图与横向柱状图表达数据的形式是一样的，不过，当图表的数据标签很长或者有超过 10 个项目进行比较时，横向柱状图会无法完全显示完标签，或者只能倾斜展示，影响美观。因此当数据标签过长时，选择用条形图可以获得更好的展示效果。 10 | 11 | 14 | 15 | ## 柱状图的使用建议 16 | 17 | 1、避免使用太多颜色，一般情况一个柱状图（条形图）表示一组相同的度量，所以建议使用相同的颜色或同一颜色的不同色调。如果需要强调某个数据时，可以使用对比色或者变化色调来突出显示有意义的数据点。 18 | 19 | 22 | 23 | 2、柱状图柱子间的宽度和间隙要适当。当柱子太窄时，用户的视觉可能会集中在两个柱中间的负空间，而这里是不承载任何数据的。合理的宽度和间隙应该是  单个柱子的宽度不小于柱间间隙的两倍。 24 | 25 | 3、Y 轴数据应该从 0 基线开始，以恰当地反映数值。如果展示的是被截断的数据，那很可能会误导观众做出错误的判断。例如左侧图表显示出的数据结果是 2017 年收入是 2014 年收入的五倍，而实际上如右侧图表完整显示的数据表明 2017 年收入相对于 2014 年其实只提升了 25%。 26 | 27 | 29 | 30 | 31 | 4、对多个数据系列排序时，如果不涉及到日期等特定数据，最好能符合一定的逻辑用直观的方式引导用户更好地查看数据。可以通过升序或降序排布，例如按照数量从多到少来对数据进行排序，也可以按照字母顺序等来排布。总之，按照逻辑排序可以一定程度上引导人们更好地阅读数据。 32 | 33 | 36 | 37 | 5、一般情况下不建议使用三维柱状图，与三维饼图一样，对于数据传达不太精准，甚至还不得不猜测哪个才是数据的顶端。 38 | 39 | 41 | 42 | -------------------------------------------------------------------------------- /contents/zh/best-practices/specification/bar/bi-directional-bar.md: -------------------------------------------------------------------------------- 1 | # 双向柱状图 2 | 3 | 双向柱状图多用于展示包含相反含义的数据的对比。其中图表的一个轴显示正在比较的类别，而另一轴代表对应的刻度值。 4 | 5 | 双向柱状图一般用于正负两份相反数据的对比。例如一周内个人收入和支出的统计，其中收入为正数，支出为负数。使用双向柱状图可以很明确的对收入和支出做出对比，并能从单个系列中分析收入和支出的数值及波动。 6 | 7 | 10 | 11 | 双向柱状图可分为垂直方向的双向柱状图（如上图）和水平方向的双向柱状图（又叫正负条形图，如下图），例如一个客户满意度的调查数据分析中，有正面评价和负面评价，这很适合用正负条形图，所有数据在中间对齐，正面的评价数据分布在右侧，负面的评价数据分布在左侧。 12 | 13 | 16 | 17 | ## 双向柱状  图的使用建议 18 | 19 | 1、双向柱状图正向和负向的数据具有对比性，因此一般选用差值较大的具有对比性的颜色。 20 | 21 | 2、永远不要在 0 基线的右边画负值的水平条行图或在 0 基线的上边画负值的柱子，以免和常识违背造成误解。 22 | 23 | 25 | 26 | 27 | 3、双向柱状图多用于展示含相反含义的数据，因此要避免不具有正负含义的数据使用而造成的误解。 如下图人口统计图表中使用双向柱状图，一侧绘制男性的数据，另一侧绘制女性的数据，只是单纯的两类不同数据的对比，并不存在负数。那么，此时将两个数据序列绘制成一个分组柱状图是更合适的。 28 | 29 | 31 | 32 | -------------------------------------------------------------------------------- /contents/zh/best-practices/specification/bar/grouped-bar.md: -------------------------------------------------------------------------------- 1 | # 分组柱状图 2 | 3 | 分组柱状图也被称为聚集柱状图。当两个或多个数据序列并排显示并在同一轴上的类别下分组时，将使用分组柱状图。相当于包含带有两个或更多图表的简单的条形图。 4 | 5 | 8 | 9 | 分组柱状图通常是用于将包含相同变量或类别的几个分组进行比较。像柱状图一样，每个柱的长度用于显示类别的数值，每个数据系列被分配一个单独的颜色或相同色系的不同饱和度，以区分它们，每组数据之间相互间隔并进行对比。 10 | 11 | 14 | 15 | ## 分组柱状  图的使用建议 16 | 17 | 1、如果每个分组中的系列过多，数据的阅读难度就会越增加。因此，不建议每个分组中包含过多的系列。在系列较多时，可考虑使用堆叠柱状图。 18 | 19 | 2、建议每两个分组之间的间距大于组内不同系列之间的间距，以免造成视觉上错误的归类和区分。 20 | -------------------------------------------------------------------------------- /contents/zh/best-practices/specification/bar/stacked-bar.md: -------------------------------------------------------------------------------- 1 | # 堆叠柱状图 2 | 3 | 堆叠柱状图是柱状图的扩展。但区别在于，柱状图的数据值为并行排列，堆叠柱图则是一个个叠加起来的。它可以展示每一个分类的总量，以及该分类包含的每个小分类的大小及占比。因此，非常适合处理部分与整体的关系。 4 | 5 | 与饼图显示单个部分到整体的关系不同的是，堆叠柱状图可以显示多个部分到整体的关系。例如一个班级体育课选课的各项目人数统计，你可以用柱状图或饼图来展示。但是，当需要进一步区分男生和女生参与到不同项目中的人数分别是多少时，就需要把每个项目中包含的男生数和女生数都展示出来。如图选用堆叠柱状图，不仅能显示每个项目的总人数，还能展示出每个项目中的一部分与整体的关系。 6 | 7 | 10 | 11 | ## 堆叠柱状  图的使用建议 12 | 13 | 1、遵循基本的柱状图使用原则。为了使图表易于理解，请避免使用太多颜色，不要刻意展示被截断的数据误导读者。 14 | 15 | 2、堆叠柱状图不适合用于对比不同分组内同个分类之间的数据大小。 16 | 17 | 3、堆叠柱状图最好的展示效果是每个组只包含两到三个类别，最多不要超过 6 个，因为太多的数据系列会使数据的阅读和分辨变得非常困难。 18 | 19 | 4、由于要分析部分数据在整体中的占比，因此要避免用堆叠柱状图展示包含负数的数据。 20 | 21 | 5、大多数的堆叠柱状图都是垂直绘制的，但是如果你的数据标签特别长时，考虑更好地展示效果，可以选择使用水平堆叠的方式。 22 | -------------------------------------------------------------------------------- /contents/zh/best-practices/specification/funnel.md: -------------------------------------------------------------------------------- 1 | # 漏斗图 2 | 3 | 漏斗图又叫倒三角图，漏斗图将数据呈现为几个阶段，每个阶段的数据都是整体的一部分，从一个阶段到另一个阶段数据自上而下逐渐下降，所有阶段的占比总计 100％。与饼图一样，漏斗图呈现的也不是具体的数据，而是该数据相对于总数的占比、漏斗图不需要使用任何数据轴。 4 | 5 | 漏斗图多用于显示简化的数据，可以用来单向分析业务各环节丢失或增加变化，也可用来直接表示某个环节与上一环节的差异。漏斗图对于确定组织的销售过程中可能存在的问题和瓶颈也很有用。 6 | 7 | 10 | 11 | ## 漏斗图的使用建议 12 | 13 | 1、以电商网站数据为代表，漏斗图能直观地展现从最初展现网站到最终下订单购买这整个流程中的转化状况。它不仅能展示用户从看到网站到实现购买的最终转化率，还可以展示每个步骤的转化率，能够直观地展示和说明问题所在，进而能针对性地通过各阶段的转化分析去改善设计。 14 | 15 | 如下图，「展现」「点击」「访问」三个环节基本并没有太大的流失，但是从「访问」到「咨询」环节数据明显减少，所以就可以重点分析为什么咨询量明显减少，例如是不是咨询的入口不够明显造成的。 16 | 17 | 20 | 21 | 2、可以对两个基于统一事情前后的两份数据使用叠加两个漏斗图进行对比，例如下图通过预期值和实现值的对比，可以分析每一项实现情况和预期指标的偏差。 22 | 23 | 26 | 27 | 3、还可以用左右对比的漏斗图同时分析两个项目的转化情况。如下图可见项目 B 从「访问」到「咨询」环节的流失率明显大于项目 A。 28 | 29 | 32 | 33 | 4、漏斗图不是表示各个分类的占比情况，而是展示数据变化的一个逻辑流程，如果数据是无逻辑顺序的占比比较，建议使用饼图更合适。 34 | 35 | 5、可以根据数据选择使用对比色或同一种颜色的色调渐变，从最暗到最浅来依照漏斗的尺寸排列。切记，不要添加许多图层和颜色造成漏斗图难以阅读。 36 | -------------------------------------------------------------------------------- /contents/zh/best-practices/specification/gauge.md: -------------------------------------------------------------------------------- 1 | # 仪表盘 2 | 3 | 仪表盘也被称为拨号图表或速度表图。其显示类似于拨号/速度计上的读数的数据，是一种拟物化的展示形式。仪表盘的颜色可以用来划分指示值的类别，使用刻度标示数据，指针指示维度，指针角度表示数值。 4 | 5 | 8 | 9 | ## 仪表盘的使用建议 10 | 11 | 1、仪表盘非常适合在量化的情况下显示单一的价值和衡量标准，不适合用于比较不同变量或者趋势的分析。 12 | 13 | 2、仪表盘上可以同时展示不同纬度的数据，但是为了避免指针的重叠影响数据的查看，并且基于常识，仪表盘的指针数量建议最多不要超过 3 根。如果确实有多个数据需要展示，建议可使用多个仪表盘。 14 | 15 | 18 | -------------------------------------------------------------------------------- /contents/zh/best-practices/specification/line/area.md: -------------------------------------------------------------------------------- 1 | # 区域面积折线图 2 | 3 |  面积图又叫区域图，与折线图很相近，都可以用来展示随着连续时间的推移数据的变化趋势。区别在于，面积图在折线与类别数据的水平轴（X 轴）之间填充颜色或者纹理，形成一个面表示数据体积。相对于折线而言，被填充的区域可以更好的引起人们对总值趋势的注意，所以面积图主要用于传达趋势的大小，而不是确切的单个数据值。 4 | 5 | 7 | 8 | ## 面积图的使用建议 9 | 10 | 1、面积图要用填充区域来展示数据，当图表上有多个图层时，要尽量确保数据不要重叠。如果无法避免重叠，可以通过将颜色和透明度设置为适当的值，使重叠的数据图可以变得可读。 11 | 12 | 14 | 15 | 2、面积图适合用来展示二到三组数据，建议最多不要展示超过四组数据系列，否则就如下方错误示例，数据系列过多而导致无法辨识数据，因此要避免在需要比较多个类别和确切的数据值的情况下使用面积图。超过三个系列的非堆叠面积图表是很难阅读的。 16 | 17 | 19 | 20 | 3、当数据值相距很远时，区域是模糊不清的，此时  不太适合使用面积图展示。如下方错误示例虽然仔细分析能确定只展示了两个类别，乍一看，很可能会误以为图表上显示三种不同的颜色。 21 | 22 | 24 | -------------------------------------------------------------------------------- /contents/zh/best-practices/specification/line/basic-line.md: -------------------------------------------------------------------------------- 1 | # 基础折线图 2 | 3 | 折线图主要用来展示数据项随着时间推移的趋势或变化。折线图非常适合用于展示一个连续的二维数据，如某网站访问人数或商品销量价格的波动。 4 | 5 | 8 | 9 | 折线图除了展示某个事情发展的趋势，还可以用来比较多个不同的数据序列。如下图，可以通过对比同时间段的三种商品的销量，分析哪一种商品的销量最好。 10 | 11 | 14 | 15 | 折线图是将数据点之间用线连接起来绘制成的图表。为了追求美观或特殊的效果，还可以如上图将点与点之间用曲线连接，这种图又叫曲线图或样条图样条。样条图与折线图用法相同，区别是数据点之间的连线使用曲线绘制。 16 | 17 | ## 折线图的使用建议 18 | 19 | 1、使用实线绘制数据线，首先要保证能够的区分数据线和坐标轴线，并且要尽力要所有的数据清晰可识别。 20 | 21 | 2、建议不要绘制 4 条以上的折线，如下图错误的示例，线都折叠在一起并且又没有明显的对比，整张图表就会混乱并难以阅读。 22 | 23 | 26 | 27 | 3、不建议使用过多的装饰来区分图表，图例虽然可以帮助区分不同数据系列，但如下图使用过多种类的图例有时会让用户分心。 28 | 29 | 32 | 33 | 4、展示折线图的数据时，要避免刻意的歪曲趋势。如下图，左图过于扁平化掩盖了想传达的信息，右图过于夸大趋势。要根据展示数据波动的参考单位，做有意义的波动分析。正确的数据高度是线约占 Y 轴高度的 2/3。 34 | 35 | 36 | -------------------------------------------------------------------------------- /contents/zh/best-practices/specification/line/stacked-area.md: -------------------------------------------------------------------------------- 1 | # 堆叠面积图 2 | 3 | 堆积面积图是一种特殊的面积图，可以用来比较在一个区间内的多个变量。堆叠面积图和面积图的区别在于，堆叠面积图每个数据系列的起点都是基于前一个数据系列绘制的，也就是每度量一行就要填满行与行之间的区域。 4 | 5 | 如果有多个数据系列，并想分析每个类别的部分到整体的关系，并展现部分量对于总量的贡献时，使用堆积面积图是非常合适的选择。例如下图显示某个销售员对总销售额的贡献。 6 | 7 | 10 | 11 | 有两种不同的堆积面积图类型： 12 | 13 | - 传统的堆积面积图：直接使用原始值堆叠，显示整个过程如何变化。 14 | - 百分比堆积面积图：百分比堆积显示不同部分之间的关 ​​ 系如何随时间而变化。其中累积的总数不重要，重要的是显示出类别分布在整体中的作用。 15 | 16 | 19 | 20 | ## 堆叠面积图的使用建议 21 | 22 | 1、图表有重叠的数据时，类别数量越多，重叠越多，因此可见度越低。如果使用面积图（如下示例）时会因为系列的重叠而无法阅读。 23 | 24 | 27 | 28 | 那同样的数据，换成使用堆叠面积图展示，则相对更容易阅读。 29 | 30 | 33 | 34 |
35 |
36 | 39 |
40 |
41 | 42 | 2、虽然多数据系列时堆叠面积图比面积图有更好的展示效果，但依然不建议堆叠面积图中包含过多数据系列，最好不要多于 7 个，以免数据难以辨识。 43 | 44 | 3、堆积面积图要展示部分和整体之间的关系，所以不能用于包含负值的数据的展示。 45 | 46 | 4、建议堆叠面积图中把变化量较大的数据放在上方，变化量较小的数据放在下方会获得更加的展示效果。 47 | -------------------------------------------------------------------------------- /contents/zh/best-practices/specification/pie/basic-pie.md: -------------------------------------------------------------------------------- 1 | # 饼图 2 | 3 | 饼图主要用于展现不同类别数值相对于总数的占比情况。图中每个分块（扇区）的弧长表示该类别的占比大小，所有分块数据总和为 100%。 4 | 5 | 8 | 9 | 虽然饼图能快速有效地展示数据的比例分布，并被广泛用于各个领域，但是饼图及其变形图表一直是比较受争议的图表。因此，我们在使用饼图及其变形图表时一定要谨慎并避免走进误区。 10 | 11 | ## 饼图的使用建议 12 | 13 | 1、饼图适合用来展示单一维度数据的占比，要求其数值中没有零或负值，并确保各分块占比总和为 100%。 14 | 15 | 2、我们很难比较一个分块过多的饼图的数据，建议尽量将饼图分块数量控制在五个以内。当数据类别较多时，可以把较小或不重要的数据合并成第五个分块，并命名为"其它"。如果各类别都必须全部展示，此时选择柱状图或堆积柱状图或许更合适。 16 | 17 | 18 | 19 | 3、饼图不适合被用于精确数据的比较，因此当各类别数据占比较接近时（如下左图），我们很难对比出每个类别占比的大小。此时建议选用柱状图或南丁格尔玫瑰图（如下右图）来获取更好的展示效果。 20 | 21 | 22 | 23 | 4、大多数人视觉习惯是按照顺时针和自上而下的顺序去观察。因此在绘制饼图时，建议从 12 点钟开始沿顺时针右边第一个分块绘制饼图最大的数据分块，有效的强调其重要性。 24 | 25 | 其余的数据分块有两种建议，一种是按照数据大小依次顺时针排列，另一种是在 12 点钟的左边绘制第二大的分块，其余的分块按照逆时针排列，最小的分块放在底部。如下图所示。 26 | 27 | 28 | 29 | 按照数据大小区别顺序，不仅符合用户的视觉习惯，也更易于数据的识别和比较。当然基于这个原理，我们也可以把需要强调的最重要的部分（不一定是最大的部分）放在最突出重要的位置。 30 | 31 | 5、可以添加一些装饰来强调饼图中的某一个数据。颜色、动效、样式、位置等元素都可以被用来突出显示一个扇区。请注意适度，有时太多的装饰会让用户理解数据时分心。 32 | 33 | 36 | 37 | 6、三维的饼图歪曲了各分块相对于整体的比例关系，会造成错误及理解上的困扰。因此不建议使用 3D 饼图。 38 | 39 | 40 | -------------------------------------------------------------------------------- /contents/zh/best-practices/specification/radar.md: -------------------------------------------------------------------------------- 1 | # 雷达图 2 | 3 | 雷达图（Radar Chart）又被叫做蜘蛛网图，适用于显示三个或更多的维度的变量。雷达图是以在同一点开始的轴上显示的三个或更多个变量的二维图表的形式来显示多元数据的方法，其中轴的相对位置和角度通常是无意义的。 4 | 5 | 6 | 雷达图的每个变量都有一个从中心向外发射的轴线，所有的轴之间的夹角相等，同时每个轴有相同的刻度，将轴到轴的刻度用网格线链接作为辅助元素，连接每个变量在其各自的轴线的数据点成一条多边形。 7 | 8 | 11 | 12 | 雷达图对于查看哪些变量具有相似的值、变量之间是否有异常值都很有用。雷达图表也可用于查看哪些变量在数据集内得分较高或较低，因此非常适合显示性能（见下图）。同样，雷达图也常用于排名、评估、评论等数据的展示。 13 | 14 | 17 | 18 | 如下图，某幼儿园上周资金流统计的示例中比较了预算和开销。参与比较的六个方面是食品、玩具、绘本、医疗、门票、服饰。每个变量都是通过 0 到 500 之间的金额来比较的。只有玩具一项的支出超出了预算，而服饰花费远低于预算，使用雷达图，哪些方面超出或不足变得一目了然了。 19 | 20 | 23 | 24 | 25 | ## 雷达图的使用建议 26 | 27 | 1、一个雷达图包含的多边形数量是有限的，如果有五个以上要评估的事物，无论是轮廓还是填充区域，都会产生覆盖和混乱，使得数据难以阅读。 28 | 29 | 2、变量太多会产生太多的轴，也会使图表变得混乱，因此，要保持雷达图的简单并限制其变量数量。 30 | 31 | 3、由于径向距离很难判断，所以虽然有网格线的参考，但是还是很难直观的比较图表内变量具体的值，如果需要的比较具体值话，建议使用线图。 32 | 33 | -------------------------------------------------------------------------------- /contents/zh/best-practices/specification/scatter/bubble.md: -------------------------------------------------------------------------------- 1 | # 气泡图 2 | 3 | 气泡图是显示变量之间相关性的一种图表。与散点图类似。在直角坐标系中显示数据的两个变量（ X 和 Y 轴）之间的关系，数据显示为点的集合。与散点图不同的是，气泡图是一个多变量图，它增加了第三个数值即气泡大小的变量，在气泡图中，较大的气泡表示较大的值。可以通过气泡的位置分布和大小比例，来分析数据的规律。 4 | 5 | 8 | 9 | ## 气泡图的使用建议 10 | 11 | 1、当数据具有 3 个序列、特征及相关值，使用气泡图是一个不错的选择。如下图气泡的位置显示了代码提交的日期、具体的时间点，气泡的大小说明了提交的代码量。 12 | 13 | 16 | 17 | 2、我们还可以给气泡加入颜色编码。例如下图用不同的颜色将三个地区的空气数据分类标注，红色代表北京，黄色代表上海、蓝色代表广州，可以直观地对比分析三地的空气质量情况。 18 | 19 | 22 | 23 | 3、气泡图还经常用于和地图结合，其中 x 轴和 y 轴是经度和纬度的数据定位，气泡的大小可以表明该位置数量的多少。 24 | 25 | 28 | -------------------------------------------------------------------------------- /contents/zh/best-practices/specification/scatter/scatter.md: -------------------------------------------------------------------------------- 1 | # 散点图 2 | 3 | 散点图在直角坐标系显示数据的两个变量（X 和 Y 轴）之间的关系，数据显示为点的集合，适合用于在不考虑时间的情况下比较大量的数据点。散点图通常用来识别两个变量之间的相关性或用来观察他们的关系，从而发现某种趋势，对于查找异常值或理解数据分布也很有效。如下图某个班级学生身高和体重的分布状况。 4 | 5 | 8 | 9 | 散点图会显示不同类型的相关性，相关性即变量之间的关系。通常有正相关、负相关、不相关三种相关性。 10 | 11 | - 正相关：数据点从低 x、y 值的点到高 x、y 值，一个变量增加，另一个变量增加。 12 | 13 | - 负相关：数据点从高 x、y 值的点到低 x、y 值，一个变量增加，另一个变量减少。 14 | 15 | - 不相关：数据没有明显的方向性，一个变量变化对另一个没有影响。 16 | 17 | 19 | 20 | 21 | 需要注意的是，散点图能够有效的说明两个变量之间的相关性，但是并不能有力地证明  其中存在因果关系。例如广告投放量和点击率是正相关的，但是不能说点击率高一定是因为广告投放量多造成的。但是，如果有明显的正相关性，就有足够的理由去增加投放量，然后再去观察数据。 22 | 23 | ## 散点图的使用建议 24 | 25 | 1、如果一个散点图没有显示变量之间的任何关系，那么或许该图表类型不是此数据的最佳选择。 26 | 27 | 2、如果数据包含不同系列，可以给不同系列使用不同的颜色，例如蓝色代表男性，红色代表女性，并增加图例标注出蓝色代表的含义。可以区分了解男女不同性别身高和体重的分布状况。还可以分别添加每个系列平均值的辅助线，可以更好的理解数据的分布情况，如图中女生体重高于平均值的比低于平均值的少。 28 | 29 | 32 | 33 | 在观察两个变量之间的关系时，趋势线是非常有用的，趋势线的形状走向解释了两个变量之间的关系类型，还可以用来预测未来的值。但需要注意的是趋势线最可只能使用两条，以免干扰正常的数据的阅读。 34 | 35 | 3、散点图只有有足够多的数据点，并且数据之间有相关性时才能呈现很好的结果。如果一份数据只有极少的信息或者数据间没有相关性，那么绘制一个很空的散点图和不相关的散点图都是没有意义的。 36 | -------------------------------------------------------------------------------- /contents/zh/concepts/chart-size.md: -------------------------------------------------------------------------------- 1 | # 图表容器及大小 2 | 3 | 在[快速上手](${lang}/get-started)中，我们介绍了初始化 ECharts 的接口 [`echarts.init`](${mainSitePath}/api.html#echarts.init)。[API 文档](${mainSitePath}/api.html#echarts.init)中详细介绍了参数的具体含义，建议理解后再阅读本文。 4 | 5 | 下面，我们就常见的几种使用场景，介绍如何初始化一个图表以及改变其大小。 6 | 7 | ## 初始化 8 | 9 | ### 在 HTML 中定义有宽度和高度的父容器（推荐） 10 | 11 | 通常来说，需要在 HTML 中先定义一个 `
` 节点，并且通过 CSS 使得该节点具有宽度和高度。初始化的时候，传入该节点，图表的大小默认即为该节点的大小，除非声明了 `opts.width` 或 `opts.height` 将其覆盖。 12 | 13 | ```html 14 |
15 | 18 | ``` 19 | 20 | 需要注意的是，使用这种方法在调用 `echarts.init` 时需保证容器已经有宽度和高度了。 21 | 22 | ### 指定图表的大小 23 | 24 | 如果图表容器不存在宽度和高度，或者，你希望图表宽度和高度不等于容器大小，也可以在初始化的时候指定大小。 25 | 26 | ```html 27 |
28 | 34 | ``` 35 | 36 | ## 响应容器大小的变化 37 | 38 | ### 监听图表容器的大小并改变图表大小 39 | 40 | 在有些场景下，我们希望当容器大小改变时，图表的大小也相应地改变。 41 | 42 | 比如，图表容器是一个高度为 400px、宽度为页面 100% 的节点，你希望在浏览器宽度改变的时候，始终保持图表宽度是页面的 100%。 43 | 44 | 这种情况下，可以监听页面的 `resize` 事件获取浏览器大小改变的事件，然后调用 [`echartsInstance.resize`](${mainSitePath}api.html#echartsInstance.resize) 改变图表的大小。 45 | 46 | ```html 47 | 57 |
58 | 64 | ``` 65 | 66 | > 小贴士：有时候我们可能会通过 JS 或 CSS 调整容器大小，由于页面大小并未发生改变，因此 `resize` 事件将不会被触发。如果有需要覆盖这种情况，可以借助浏览器的 [`ResizeObserver`](https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver) API 来实现更细粒度的监听。 67 | 68 | ### 为图表设置特定的大小 69 | 70 | 除了直接调用 `resize()` 不含参数的形式之外，还可以指定宽度和高度，实现图表大小不等于容器大小的效果。 71 | 72 | ```js 73 | myChart.resize({ 74 | width: 800, 75 | height: 400 76 | }); 77 | ``` 78 | 79 | > 小贴士：阅读 API 文档的时候要留意接口的定义方式，这一接口有时会被误认为是 myCharts.resize(800, 400) 的形式，但其实不存在这样的调用方式。 80 | 81 | ### 容器节点被销毁以及被重建时 82 | 83 | 假设页面中存在多个标签页，每个标签页都包含一些图表。当选中一个标签页的时候，其他标签页的内容在 DOM 中被移除了。这样，当用户再选中这些标签页的时候，就会发现图表“不见”了。 84 | 85 | 本质上，这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加，图表所在的节点也已经不存在了。 86 | 87 | 正确的做法是，在图表容器被销毁之后，调用 [`echartsInstance.dispose`](${mainSitePath}api.html#echartsInstance.dispose) 销毁实例，在图表容器重新被添加后再次调用 [echarts.init](${mainSitePath}/api.html#echarts.init) 初始化。 88 | 89 | > 小贴士：在容器节点被销毁时，总是应调用 [`echartsInstance.dispose`](${mainSitePath}api.html#echartsInstance.dispose) 以销毁实例释放资源，避免内存泄漏。 90 | -------------------------------------------------------------------------------- /contents/zh/concepts/coordinate.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/contents/zh/concepts/coordinate.md -------------------------------------------------------------------------------- /contents/zh/concepts/legend.md: -------------------------------------------------------------------------------- 1 | # 图例 2 | 3 | 图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列，通过点击对应数据列的标记，可以显示或隐藏该数据列。图例虽然不是图表中的主要信息、却是了解图表信息的钥匙。 4 | 5 | ## 布局 6 | 7 | 图例一般放在图表的右上角、也可以放在图表的底部、同一页面中的所有图例位置保持一致，可以横排对齐也可以纵排对齐。还要综合考虑整体的图表空间是适合哪种摆放方式。当图表纵向空间紧张或者内容区量过大的时候、建议摆放在图表的下方。下面是几种图例的摆放方式： 8 | 9 | ```js live 10 | option = { 11 | legend: { 12 | // Try 'horizontal' 13 | orient: 'vertical', 14 | right: 10, 15 | top: 'center' 16 | }, 17 | dataset: { 18 | source: [ 19 | ['product', '2015', '2016', '2017'], 20 | ['Matcha Latte', 43.3, 85.8, 93.7], 21 | ['Milk Tea', 83.1, 73.4, 55.1], 22 | ['Cheese Cocoa', 86.4, 65.2, 82.5], 23 | ['Walnut Brownie', 72.4, 53.9, 39.1] 24 | ] 25 | }, 26 | xAxis: { type: 'category' }, 27 | yAxis: {}, 28 | series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }] 29 | }; 30 | ``` 31 | 32 | 对于图例较多时，可以使用可滚动翻页的图例 33 | 34 | ```js 35 | option = { 36 | legend: { 37 | type: 'scroll', 38 | orient: 'vertical', 39 | right: 10, 40 | top: 20, 41 | bottom: 20, 42 | data: ['图例一', '图例二', '图例三' /* ... */, , '图例n'] 43 | // ... 44 | } 45 | // ... 46 | }; 47 | ``` 48 | 49 | ## 样式 50 | 51 | 在深色系背景下、为了方便阅读，建议给图例加上半透明的浅色背景层，文字颜色设置为浅色。 52 | 53 | ```js 54 | option = { 55 | legend: { 56 | data: ['图例一', '图例二', '图例三'], 57 | backgroundColor: '#ccc', 58 | textStyle: { 59 | color: '#ccc' 60 | // ... 61 | } 62 | // ... 63 | } 64 | // ... 65 | }; 66 | ``` 67 | 68 | 图例的颜色标签有很多种设计方式、针对不同的图表、图例样式也会有所不同。 69 | 70 | 71 | 72 | ```js 73 | option = { 74 | legend: { 75 | data: ['图例一', '图例二', '图例三'], 76 | icon: 'rect' 77 | // ... 78 | } 79 | // ... 80 | }; 81 | ``` 82 | 83 | ## 交互 84 | 85 | 根据场景需要，图例可支持交互操作，点击控制显示或隐藏对应的数据列； 86 | 87 | ```js 88 | option = { 89 | legend: { 90 | data: ['图例一', '图例二', '图例三'], 91 | selected: { 92 | 图例一: true, 93 | 图例二: true, 94 | 图例三: false 95 | } 96 | // ... 97 | } 98 | // ... 99 | }; 100 | ``` 101 | 102 | ## 图例注意事项 103 | 104 | 图例要注意视情况使用，有些双轴图包含了多种图表类型，不同类型的图例样式要有所区分。 105 | 106 | ```js 107 | option = { 108 | legend: { 109 | data: [ 110 | { 111 | name: '图例一', 112 | icon: 'rect' 113 | }, 114 | { 115 | name: '图例二', 116 | icon: 'circle' 117 | }, 118 | { 119 | name: '图例三', 120 | icon: 'pin' 121 | } 122 | ] 123 | // ... 124 | }, 125 | series: [ 126 | { 127 | name: '图例一' 128 | // ... 129 | }, 130 | { 131 | name: '图例二' 132 | // ... 133 | }, 134 | { 135 | name: '图例三' 136 | // ... 137 | } 138 | ] 139 | // ... 140 | }; 141 | ``` 142 | 143 | 当图表只有一种数据信息时，用图表标题说明数据信息即可。建议此时不要加上图例。 144 | -------------------------------------------------------------------------------- /contents/zh/concepts/options.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/contents/zh/concepts/options.md -------------------------------------------------------------------------------- /contents/zh/concepts/series.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/contents/zh/concepts/series.md -------------------------------------------------------------------------------- /contents/zh/concepts/tooltip.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/contents/zh/concepts/tooltip.md -------------------------------------------------------------------------------- /contents/zh/concepts/visual-map.md: -------------------------------------------------------------------------------- 1 | # 数据的视觉映射 2 | 3 | 数据可视化是数据到视觉元素的映射过程（这个过程也可称为视觉编码，视觉元素也可称为视觉通道）。 4 | 5 | ECharts 的每种图表本身就内置了这种映射过程，比如折线图把数据映射到“线”，柱状图把数据映射到“长度”。一些更复杂的图表，如关系图、事件河流图、树图也都会做出各自内置的映射。 6 | 7 | 此外，ECharts 还提供了 [visualMap 组件](${optionPath}visualMap) 来提供通用的视觉映射。`visualMap` 组件中可以使用的视觉元素有： 8 | 9 | - 图形类别（symbol）、图形大小（symbolSize） 10 | - 颜色（color）、透明度（opacity）、颜色透明度（colorAlpha）、 11 | - 颜色明暗度（colorLightness）、颜色饱和度（colorSaturation）、色调（colorHue） 12 | 13 | 下面对 `visualMap` 组件的使用方式进行简要的介绍。 14 | 15 | ## 数据和维度 16 | 17 | ECharts 中的数据，一般存放于 [`series.data`](${optionPath}series.data) 中。根据图表类型不同，数据的具体形式也可能有些许差异。比如可能是“线性表“、“树“、“图“等。但他们都有个共性：都是“数据项（dataItem）“的集合。每个数据项含有“数据值（value）“和其他信息（如果需要的话）。每个数据值，可以是单一的数值（一维）或者一个数组（多维）。 18 | 19 | 例如，[series.data](${optionPath}series.data) 最常见的形式，是“线性表“，即一个普通数组： 20 | 21 | ```js 22 | series: { 23 | data: [ 24 | { 25 | // 这里每一个项就是数据项（dataItem） 26 | value: 2323, // 这是数据项的数据值（value） 27 | itemStyle: {} 28 | }, 29 | 1212, // 也可以直接是 dataItem 的 value，这更常见。 30 | 2323, // 每个 value 都是“一维“的。 31 | 4343, 32 | 3434 33 | ]; 34 | } 35 | ``` 36 | 37 | ```js 38 | series: { 39 | data: [ 40 | { 41 | // 这里每一个项就是数据项（dataItem） 42 | value: [3434, 129, '圣马力诺'], // 这是数据项的数据值（value） 43 | itemStyle: {} 44 | }, 45 | [1212, 5454, '梵蒂冈'], // 也可以直接是 dataItem 的 value，这更常见。 46 | [2323, 3223, '瑙鲁'], // 每个 value 都是“三维“的，每列是一个维度。 47 | [4343, 23, '图瓦卢'] // 假如是“气泡图“，常见第一维度映射到x轴， 48 | // 第二维度映射到y轴， 49 | // 第三维度映射到气泡半径（symbolSize） 50 | ]; 51 | } 52 | ``` 53 | 54 | 在图表中，往往默认把 value 的前一两个维度进行映射，比如取第一个维度映射到 x 轴，取第二个维度映射到 y 轴。如果想要把更多的维度展现出来，可以借助 `visualMap`。最常见的情况，[散点图（scatter）](${optionPath}series-scatter) 使用半径展现了第三个维度。 55 | 56 | ## visualMap 组件 57 | 58 | visualMap 组件定义了把数据的*哪个维度*映射到*什么视觉元素上*。 59 | 60 | 现在提供如下两种类型的 visualMap 组件，通过 [visualMap.type](${optionPath}visualMap.type) 来区分。 61 | 62 | 其定义结构例如： 63 | 64 | ```js 65 | option = { 66 | visualMap: [ 67 | // 可以同时定义多个 visualMap 组件。 68 | { 69 | // 第一个 visualMap 组件 70 | type: 'continuous' // 定义为连续型 visualMap 71 | // ... 72 | }, 73 | { 74 | // 第二个 visualMap 组件 75 | type: 'piecewise' // 定义为分段型 visualMap 76 | // ... 77 | } 78 | ] 79 | // ... 80 | }; 81 | ``` 82 | 83 | ## 连续型与分段型视觉映射组件 84 | 85 | ECharts 的视觉映射组件分为连续型（[visualMapContinuous](${optionPath}visualMap-continuous)）与分段型（[visualMapPiecewise](${optionPath}visualMap-piecewise)）。 86 | 87 | 连续型的意思是，进行视觉映射的数据维度是连续的数值；而分段型则是数据被分成了多段或者是离散型的数据。 88 | 89 | ### 连续型视觉映射 90 | 91 | 连续型视觉映射通过指定最大值、最小值，就可以确定视觉映射的范围。 92 | 93 | ```js 94 | option = { 95 | visualMap: [ 96 | { 97 | type: 'continuous', 98 | min: 0, 99 | max: 5000, 100 | dimension: 3, // series.data 的第四个维度（即 value[3]）被映射 101 | seriesIndex: 4, // 对第四个系列进行映射。 102 | inRange: { 103 | // 选中范围中的视觉配置 104 | color: ['blue', '#121122', 'red'], // 定义了图形颜色映射的颜色列表， 105 | // 数据最小值映射到'blue'上， 106 | // 最大值映射到'red'上， 107 | // 其余自动线性计算。 108 | symbolSize: [30, 100] // 定义了图形尺寸的映射范围， 109 | // 数据最小值映射到30上， 110 | // 最大值映射到100上， 111 | // 其余自动线性计算。 112 | }, 113 | outOfRange: { 114 | // 选中范围外的视觉配置 115 | symbolSize: [30, 100] 116 | } 117 | } 118 | // ... 119 | ] 120 | }; 121 | ``` 122 | 123 | 其中，[visualMap.inRange](${optionPath}visualMap.inRange) 表示在数据映射范围内的数据采用的样式；而 [visualMap.outOfRange](${optionPath}visualMap.outOfRange) 则指定了超出映射范围外的数据的样式。 124 | 125 | [visualMap.dimension](~visualMap.dimension) 则指定了将数据的哪个维度做视觉映射。 126 | 127 | ### 分段型视觉映射 128 | 129 | 分段型视觉映射组件有三种模式： 130 | 131 | - 连续型数据平均分段：依据 [visualMap-piecewise.splitNumber](${optionPath}visualMap-piecewise.splitNumber) 来自动平均分割成若干块。 132 | - 连续型数据自定义分段：依据 [visualMap-piecewise.pieces](${optionPath}visualMap-piecewise.pieces) 来定义每块范围。 133 | - 离散数据（类别性数据）：类别定义在 [visualMap-piecewise.categories](${optionPath}visualMap-piecewise.categories) 中。 134 | 135 | 使用分段型视觉映射时，需要将 `type` 设为 `'piecewise'`，并且将上面的三个配置项选其一配置即可，其他配置项类似连续型视觉映射。 136 | -------------------------------------------------------------------------------- /contents/zh/get-started.md: -------------------------------------------------------------------------------- 1 | # 快速上手 2 | 3 | ## 获取 Apache ECharts 4 | 5 | Apache ECharts 支持多种下载方式，可以在下一篇教程[安装](${lang}/basics/download)中查看所有方式。这里，我们以从 [jsDelivr](https://www.jsdelivr.com/package/npm/echarts) CDN 上获取为例，介绍如何快速安装。 6 | 7 | 在 [https://www.jsdelivr.com/package/npm/echarts](https://www.jsdelivr.com/package/npm/echarts) 选择 `dist/echarts.js`，点击并保存为 `echarts.js` 文件。 8 | 9 | > 关于这些文件的介绍，可以在下一篇教程[安装](${lang}/basics/download)中了解更多信息。 10 | 11 | ## 引入 Apache ECharts 12 | 13 | 在刚才保存 `echarts.js` 的目录新建一个 `index.html` 文件，内容如下： 14 | 15 | ```html 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | ``` 25 | 26 | 打开这个 `index.html`，你会看到一片空白。但是不要担心，打开控制台确认没有报错信息，就可以进行下一步。 27 | 28 | ## 绘制一个简单的图表 29 | 30 | 在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 `` 之后，添加： 31 | 32 | ```html 33 | 34 | 35 |
36 | 37 | ``` 38 | 39 | 然后就可以通过 [echarts.init](${mainSitePath}/api.html#echarts.init) 方法初始化一个 echarts 实例并通过 [setOption](${mainSitePath}/api.html#echartsInstance.setOption) 方法生成一个简单的柱状图，下面是完整代码。 40 | 41 | ```html 42 | 43 | 44 | 45 | 46 | ECharts 47 | 48 | 49 | 50 | 51 | 52 |
53 | 82 | 83 | 84 | ``` 85 | 86 | 这样你的第一个图表就诞生了！ 87 | 88 | 89 | -------------------------------------------------------------------------------- /contents/zh/how-to/chart-types/bar/bar-race.md: -------------------------------------------------------------------------------- 1 | # 动态排序柱状图 2 | 3 | ## 基本设置 4 | 5 | 动态排序柱状图是一种展示随时间变化的数据排名变化的图表，从 ECharts 5 开始内置支持。 6 | 7 | > 动态排序柱状图通常是横向的柱条，如果想要采用纵向的柱条，只要把本教程中的 X 轴和 Y 轴相反设置即可。 8 | 9 | 1. 柱状图系列的 `realtimeSort` 设为 `true`，表示开启该系列的动态排序效果 10 | 2. `yAxis.inverse` 设为 `true`，表示 Y 轴从下往上是从小到大的排列 11 | 3. `yAxis.animationDuration` 建议设为 `300`，表示第一次柱条排序动画的时长 12 | 4. `yAxis.animationDurationUpdate` 建议设为 `300`，表示第一次后柱条排序动画的时长 13 | 5. 如果想只显示前 _n_ 名，将 `yAxis.max` 设为 _n - 1_，否则显示所有柱条 14 | 6. `xAxis.max` 建议设为 `'dataMax'` 表示用数据的最大值作为 X 轴最大值，视觉效果更好 15 | 7. 如果想要实时改变标签，需要将 `series.label.valueAnimation` 设为 `true` 16 | 8. `animationDuration` 设为 `0`，表示第一份数据不需要从 `0` 开始动画（如果希望从 `0` 开始则设为和 `animationDurationUpdate` 相同的值） 17 | 9. `animationDurationUpdate` 建议设为 `3000` 表示每次更新动画时长，这一数值应与调用 `setOption` 改变数据的频率相同 18 | 10. 以 `animationDurationUpdate` 的频率调用 `setInterval`，更新数据值，显示下一个时间点对应的柱条排序 19 | 20 | ## 示例 21 | 22 | 完整的例子如下： 23 | 24 | ```js live 25 | var data = []; 26 | for (let i = 0; i < 5; ++i) { 27 | data.push(Math.round(Math.random() * 200)); 28 | } 29 | 30 | option = { 31 | xAxis: { 32 | max: 'dataMax' 33 | }, 34 | yAxis: { 35 | type: 'category', 36 | data: ['A', 'B', 'C', 'D', 'E'], 37 | inverse: true, 38 | animationDuration: 300, 39 | animationDurationUpdate: 300, 40 | max: 2 // only the largest 3 bars will be displayed 41 | }, 42 | series: [ 43 | { 44 | realtimeSort: true, 45 | name: 'X', 46 | type: 'bar', 47 | data: data, 48 | label: { 49 | show: true, 50 | position: 'right', 51 | valueAnimation: true 52 | } 53 | } 54 | ], 55 | legend: { 56 | show: true 57 | }, 58 | animationDuration: 3000, 59 | animationDurationUpdate: 3000, 60 | animationEasing: 'linear', 61 | animationEasingUpdate: 'linear' 62 | }; 63 | 64 | function update() { 65 | var data = option.series[0].data; 66 | for (var i = 0; i < data.length; ++i) { 67 | if (Math.random() > 0.9) { 68 | data[i] += Math.round(Math.random() * 2000); 69 | } else { 70 | data[i] += Math.round(Math.random() * 200); 71 | } 72 | } 73 | myChart.setOption(option); 74 | } 75 | 76 | setInterval(function() { 77 | update(); 78 | }, 3000); 79 | ``` 80 | -------------------------------------------------------------------------------- /contents/zh/how-to/chart-types/bar/polar-bar.md: -------------------------------------------------------------------------------- 1 | # 极坐标系柱状图 2 | -------------------------------------------------------------------------------- /contents/zh/how-to/chart-types/bar/stacked-bar.md: -------------------------------------------------------------------------------- 1 | # 堆叠柱状图 2 | 3 | 有时候，我们不仅希望知道不同系列各自的数值，还希望知道它们之和的变化，这时候通常使用堆叠柱状图来表现。顾名思义，堆叠柱状图就是一个系列的数值“堆叠”在另一个系列上，因而从他们的高度总和就能表达总量的变化。 4 | 5 | 使用 EChart 实现堆叠柱状图的方法非常简单，只需要给一个系列的 `stack` 值设置一个字符串类型的值，这一个值表示该系列堆叠的类别。也就是说，拥有同样 `stack` 值的系列将堆叠在一组。 6 | 7 | ```js live 8 | option = { 9 | xAxis: { 10 | data: ['A', 'B', 'C', 'D', 'E'] 11 | }, 12 | yAxis: {}, 13 | series: [ 14 | { 15 | data: [10, 22, 28, 43, 49], 16 | type: 'bar', 17 | stack: 'x' 18 | }, 19 | { 20 | data: [5, 4, 3, 5, 10], 21 | type: 'bar', 22 | stack: 'x' 23 | } 24 | ] 25 | }; 26 | ``` 27 | 28 | 在这个例子中，第二个系列所在的位置是在第一个系列的位置的基础上，上升了第二个系列数值对应的高度。因此，从第二个系列的位置，就能看出这两者总和的变化趋势。 29 | 30 | > `stack` 的取值用来表明哪些系列将被堆叠在一起，理论上只要取值相同即可，具体的取值并没有什么区别。但在实际的应用中，我们建议使用一些有意义的字符串方便阅读。 31 | > 32 | > 比如，在一个统计男女人数的图中，有四个系列，“成年男性”和“男孩”系列需要进行堆叠，“成年女性”和“女孩”系列需要堆叠。这时，这两组的的 `stack` 值就建议分别设为 `'男'` 和 `'女'`。虽然使用 `'a'` 和 `'b'` 这样没有意义的字符串也能实现同样的效果，但是代码的可阅读性就差了。 33 | -------------------------------------------------------------------------------- /contents/zh/how-to/chart-types/bar/waterfall.md: -------------------------------------------------------------------------------- 1 | # 阶梯瀑布图 2 | 3 | Apache ECharts 中并没有单独的瀑布图类型，但是我们可以使用堆叠的柱状图模拟该效果。 4 | 5 | 假设数据数组中的值是表示对前一个值的增减： 6 | 7 | ```js 8 | var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203]; 9 | ``` 10 | 11 | 也就是第一个数据是 `900`，第二个数据 `345` 表示的是在 `900` 的基础上增加了 `345`……将这个数据展示为阶梯瀑布图时，我们可以使用三个系列：第一个是不可交互的透明系列，用来实现“悬空”的柱状图效果；第二个系列用来表示正数；第三个系列用来表示负数。 12 | 13 | ```js live 14 | var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203]; 15 | var help = []; 16 | var positive = []; 17 | var negative = []; 18 | for (var i = 0, sum = 0; i < data.length; ++i) { 19 | if (data[i] >= 0) { 20 | positive.push(data[i]); 21 | negative.push('-'); 22 | } else { 23 | positive.push('-'); 24 | negative.push(-data[i]); 25 | } 26 | 27 | if (i === 0) { 28 | help.push(0); 29 | } else { 30 | sum += data[i - 1]; 31 | if (data[i] < 0) { 32 | help.push(sum + data[i]); 33 | } else { 34 | help.push(sum); 35 | } 36 | } 37 | } 38 | 39 | option = { 40 | title: { 41 | text: 'Waterfall' 42 | }, 43 | grid: { 44 | left: '3%', 45 | right: '4%', 46 | bottom: '3%', 47 | containLabel: true 48 | }, 49 | xAxis: { 50 | type: 'category', 51 | splitLine: { show: false }, 52 | data: (function() { 53 | var list = []; 54 | for (var i = 1; i <= 11; i++) { 55 | list.push('Oct/' + i); 56 | } 57 | return list; 58 | })() 59 | }, 60 | yAxis: { 61 | type: 'value' 62 | }, 63 | series: [ 64 | { 65 | type: 'bar', 66 | stack: 'all', 67 | itemStyle: { 68 | normal: { 69 | barBorderColor: 'rgba(0,0,0,0)', 70 | color: 'rgba(0,0,0,0)' 71 | }, 72 | emphasis: { 73 | barBorderColor: 'rgba(0,0,0,0)', 74 | color: 'rgba(0,0,0,0)' 75 | } 76 | }, 77 | data: help 78 | }, 79 | { 80 | name: 'positive', 81 | type: 'bar', 82 | stack: 'all', 83 | data: positive 84 | }, 85 | { 86 | name: 'negative', 87 | type: 'bar', 88 | stack: 'all', 89 | data: negative, 90 | itemStyle: { 91 | color: '#f33' 92 | } 93 | } 94 | ] 95 | }; 96 | ``` 97 | -------------------------------------------------------------------------------- /contents/zh/how-to/chart-types/line/area-line.md: -------------------------------------------------------------------------------- 1 | # 区域面积图 2 | 3 | 区域面积图将折线到坐标轴的空间设置背景色，用区域面积表达数据。相比普通的折线图，区域面积图的视觉效果更加饱满丰富，在系列不多的场景下尤其适用。 4 | 5 | ```js live 6 | option = { 7 | xAxis: { 8 | data: ['A', 'B', 'C', 'D', 'E'] 9 | }, 10 | yAxis: {}, 11 | series: [ 12 | { 13 | data: [10, 22, 28, 23, 19], 14 | type: 'line', 15 | areaStyle: {} 16 | }, 17 | { 18 | data: [25, 14, 23, 35, 10], 19 | type: 'line', 20 | areaStyle: { 21 | color: '#ff0', 22 | opacity: 0.5 23 | } 24 | } 25 | ] 26 | }; 27 | ``` 28 | 29 | 通过 [`areaStyle`](${optionPath}series-line.areaStyle) 设置折线图的填充区域样式，将其设为为 `{}` 表示使用默认样式，即使用系列的颜色以半透明的方式填充区域。如果想指定特定的样式，可以通过设置 `areaStyle` 下的配置项覆盖，如第二个系列将填充区域的颜色设为不透明度为 0.5 的黄色。 30 | -------------------------------------------------------------------------------- /contents/zh/how-to/chart-types/line/basic-line.md: -------------------------------------------------------------------------------- 1 | # 基础折线图 2 | 3 | 折线图主要用来展示数据项随着时间推移的趋势或变化。 4 | 5 | ## 最简单的折线图 6 | 7 | 如果我们想建立一个横坐标是类目型（category）、纵坐标是数值型（value）的折线图，我们可以使用这样的方式： 8 | 9 | ```js live 10 | option = { 11 | xAxis: { 12 | type: 'category', 13 | data: ['A', 'B', 'C'] 14 | }, 15 | yAxis: { 16 | type: 'value' 17 | }, 18 | series: [ 19 | { 20 | data: [120, 200, 150], 21 | type: 'line' 22 | } 23 | ] 24 | }; 25 | ``` 26 | 27 | 在这个例子中，我们通过 `xAxis` 将横坐标设为类目型，并指定了对应的值；通过 `type` 将 `yAxis` 的类型设定为数值型。在 `series` 中，我们将系列类型设为 `line`，并且通过 `data` 指定了折线图三个点的取值。这样，就能得到一个最简单的折线图了。 28 | 29 | > 这里 `xAxis` 和 `yAxis` 的 `type` 属性都可以隐去不写。因为坐标轴的默认类型是数值型，而 `xAxis` 指定了类目型的 `data`，所以 `ECharts` 也能识别出这是类目型的坐标轴。为了让大家更容易理解，我们特意写了 `type`。在实际的应用中，如果是 `'value'` 类型，也可以省略不写。 30 | 31 | ## 笛卡尔坐标系中的折线图 32 | 33 | 如果我们希望折线图在横坐标和纵坐标上都是连续的，即在笛卡尔坐标系中，应该如何实现呢？答案也很简单，只要把 `series` 的 `data` 每个数据用一个包含两个元素的数组表示就行了。 34 | 35 | ```js live 36 | option = { 37 | xAxis: {}, 38 | yAxis: {}, 39 | series: [ 40 | { 41 | data: [ 42 | [20, 120], 43 | [50, 200], 44 | [40, 50] 45 | ], 46 | type: 'line' 47 | } 48 | ] 49 | }; 50 | ``` 51 | 52 | ## 折线图样式设置 53 | 54 | ### 折线的样式 55 | 56 | 折线图中折线的样式可以通过 `lineStyle` 设置。可以为其指定颜色、线宽、折线类型、阴影、不透明度等等，具体的可以参考配置项手册 [`series.lineStyle`](${optionPath}series-line.lineStyle) 了解。这里，我们以设置颜色（color）、线宽（width）和折线类型（type）为例说明。 57 | 58 | ```js live 59 | option = { 60 | xAxis: { 61 | data: ['A', 'B', 'C', 'D', 'E'] 62 | }, 63 | yAxis: {}, 64 | series: [ 65 | { 66 | data: [10, 22, 28, 23, 19], 67 | type: 'line', 68 | lineStyle: { 69 | normal: { 70 | color: 'green', 71 | width: 4, 72 | type: 'dashed' 73 | } 74 | } 75 | } 76 | ] 77 | }; 78 | ``` 79 | 80 | 这里设置折线宽度时，数据点描边的宽度是不会跟着改变的，而应该在数据点的配置项中另外设置。 81 | 82 | ### 数据点的样式 83 | 84 | 数据点的样式可以通过 [`series.itemStyle`](${optionPath}series-line.itemStyle) 指定填充颜色（color）、描边颜色（borderColor）、描边宽度（borderWidth）、描边类型（borderType）、阴影（shadowColor）、不透明度（opacity）等。与折线样式的设置十分相似，这里不再展开说明。 85 | 86 | ## 在数据点处显示数值 87 | 88 | 在系列中，这数据点的标签通过 [`series.label`](${optionPath}series-line.label) 属性指定。如果将 `label` 下的 `show` 指定为`true`，则表示该数值默认时就显示；如果为 `false`，而 [`series.emphasis.label.show`](${optionPath}series-line.emphasis.label.show) 为 `true`，则表示只有在鼠标移动到该数据时，才显示数值。 89 | 90 | ```js live 91 | option = { 92 | xAxis: { 93 | data: ['A', 'B', 'C', 'D', 'E'] 94 | }, 95 | yAxis: {}, 96 | series: [ 97 | { 98 | data: [10, 22, 28, 23, 19], 99 | type: 'line', 100 | label: { 101 | show: true, 102 | position: 'bottom', 103 | textStyle: { 104 | fontSize: 20 105 | } 106 | } 107 | } 108 | ] 109 | }; 110 | ``` 111 | 112 | ## 空数据 113 | 114 | 在一个系列中，可能一个横坐标对应的取值是“空”的，将其设为 0 有时并不能满足我们的期望--空数据不应被其左右的数据连接。 115 | 116 | 在 ECharts 中，我们使用字符串 `'-'` 表示空数据，这对其他系列的数据也是适用的。 117 | 118 | ```js live 119 | option = { 120 | xAxis: { 121 | data: ['A', 'B', 'C', 'D', 'E'] 122 | }, 123 | yAxis: {}, 124 | series: [ 125 | { 126 | data: [0, 22, '-', 23, 19], 127 | type: 'line' 128 | } 129 | ] 130 | }; 131 | ``` 132 | 133 | > 注意区别这个例子中，“空”数据与取值为 0 的数据。 134 | -------------------------------------------------------------------------------- /contents/zh/how-to/chart-types/line/smooth-line.md: -------------------------------------------------------------------------------- 1 | # 平滑曲线图 2 | 3 | 平滑曲线图也是折线图的一种变形，这种更柔和的样式也是一种不错的视觉选择。使用时，只需要将折线图系列的 `smooth` 属性设置为 `true` 即可。 4 | 5 | ```js live 6 | option = { 7 | xAxis: { 8 | data: ['A', 'B', 'C', 'D', 'E'] 9 | }, 10 | yAxis: {}, 11 | series: [ 12 | { 13 | data: [10, 22, 28, 23, 19], 14 | type: 'line', 15 | smooth: true 16 | } 17 | ] 18 | }; 19 | ``` 20 | -------------------------------------------------------------------------------- /contents/zh/how-to/chart-types/line/stacked-line.md: -------------------------------------------------------------------------------- 1 | # 堆叠折线图 2 | 3 | 与[堆叠柱状图](./zh/how-to/chart-types/bar/stacked-bar)类似，堆叠折线图也是用系列的 `stack` 设置哪些系列堆叠在一起。 4 | 5 | ```js live 6 | option = { 7 | xAxis: { 8 | data: ['A', 'B', 'C', 'D', 'E'] 9 | }, 10 | yAxis: {}, 11 | series: [ 12 | { 13 | data: [10, 22, 28, 43, 49], 14 | type: 'line', 15 | stack: 'x' 16 | }, 17 | { 18 | data: [5, 4, 3, 5, 10], 19 | type: 'line', 20 | stack: 'x' 21 | } 22 | ] 23 | }; 24 | ``` 25 | 26 | 但是不同的是，如果不加说明的话，我们很难判断出这是一个堆叠折线图，还是一个普通的折线图。所以，对于堆叠折线图而言，一般建议使用区域填充色以表明堆叠的情况。 27 | 28 | ```js live 29 | option = { 30 | xAxis: { 31 | data: ['A', 'B', 'C', 'D', 'E'] 32 | }, 33 | yAxis: {}, 34 | series: [ 35 | { 36 | data: [10, 22, 28, 43, 49], 37 | type: 'line', 38 | stack: 'x', 39 | areaStyle: {} 40 | }, 41 | { 42 | data: [5, 4, 3, 5, 10], 43 | type: 'line', 44 | stack: 'x', 45 | areaStyle: {} 46 | } 47 | ] 48 | }; 49 | ``` 50 | -------------------------------------------------------------------------------- /contents/zh/how-to/chart-types/line/step-line.md: -------------------------------------------------------------------------------- 1 | # 阶梯线图 2 | 3 | 阶梯线图又称方波图，它使用水平和垂直的线来连接两个数据点，而普通折线图则直接将两个点连接起来。阶梯线图能够很好地表达数据的突变。 4 | 5 | 在 ECharts 中，系列的 `step` 属性用来表征阶梯线图的连接类型，它共有三种取值：`'start'`、`'middle'` 和 `'end'`，分别表示在当前点，当前点与下个点的中间点，下个点拐弯。 6 | 7 | ```js live 8 | option = { 9 | xAxis: { 10 | type: 'category', 11 | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] 12 | }, 13 | yAxis: { 14 | type: 'value' 15 | }, 16 | series: [ 17 | { 18 | name: 'Step Start', 19 | type: 'line', 20 | step: 'start', 21 | data: [120, 132, 101, 134, 90, 230, 210] 22 | }, 23 | { 24 | name: 'Step Middle', 25 | type: 'line', 26 | step: 'middle', 27 | data: [220, 282, 201, 234, 290, 430, 410] 28 | }, 29 | { 30 | name: 'Step End', 31 | type: 'line', 32 | step: 'end', 33 | data: [450, 432, 401, 454, 590, 530, 510] 34 | } 35 | ] 36 | }; 37 | ``` 38 | 39 | > 请注意这个例子中不同的 `step` 取值对应的数据点和连线的区别。 40 | -------------------------------------------------------------------------------- /contents/zh/how-to/chart-types/pie/basic-pie.md: -------------------------------------------------------------------------------- 1 | # 基础饼图 2 | 3 | 饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。 4 | 5 | ## 最简单的饼图 6 | 7 | 饼图的配置和折线图、柱状图略有不同，不再需要配置坐标轴，而是把数据名称和值都写在系列中。以下是一个最简单的饼图的例子。 8 | 9 | ```js live 10 | option = { 11 | series: [ 12 | { 13 | type: 'pie', 14 | data: [ 15 | { 16 | value: 335, 17 | name: '直接访问' 18 | }, 19 | { 20 | value: 234, 21 | name: '联盟广告' 22 | }, 23 | { 24 | value: 1548, 25 | name: '搜索引擎' 26 | } 27 | ] 28 | } 29 | ] 30 | }; 31 | ``` 32 | 33 | 需要注意的是，这里是 `value` 不需要是百分比数据，ECharts 会根据所有数据的 `value` ，按比例分配它们在饼图中对应的弧度。 34 | 35 | ## 饼图样式设置 36 | 37 | ### 饼图的半径 38 | 39 | 饼图的半径可以通过 [`series.radius`](${optionPath}series-pie.radius) 设置，可以是诸如 `'60%'` 这样相对的百分比字符串，或是 `200` 这样的绝对像素数值。当它是百分比字符串时，它是相对于容器宽高中较小的一条边的。也就是说，如果宽度大于高度，则百分比是相对于高度的，反之则反；当它是数值型时，它表示绝对的像素大小。 40 | 41 | ```js live 42 | option = { 43 | series: [ 44 | { 45 | type: 'pie', 46 | data: [ 47 | { 48 | value: 335, 49 | name: '直接访问' 50 | }, 51 | { 52 | value: 234, 53 | name: '联盟广告' 54 | }, 55 | { 56 | value: 1548, 57 | name: '搜索引擎' 58 | } 59 | ], 60 | radius: '50%' 61 | } 62 | ] 63 | }; 64 | ``` 65 | 66 | ## 如果数据和为 0，不显示饼图 67 | 68 | 在默认情况下，如果数据值和为 0，会显示平均分割的扇形。比如，如果有 4 个数据项，并且每个数据项都是 0，则每个扇形都是 90°。如果我们希望在这种情况下不显示任何扇形，可以将 [`series.stillShowZeroSum`](${optionPath}series-pie.stillShowZeroSum) 设为 `false`。 69 | 70 | ```js live 71 | option = { 72 | series: [ 73 | { 74 | type: 'pie', 75 | stillShowZeroSum: false, 76 | data: [ 77 | { 78 | value: 0, 79 | name: '直接访问' 80 | }, 81 | { 82 | value: 0, 83 | name: '联盟广告' 84 | }, 85 | { 86 | value: 0, 87 | name: '搜索引擎' 88 | } 89 | ] 90 | } 91 | ] 92 | }; 93 | ``` 94 | 95 | 如果希望扇形对应的标签也不显示，可以将 [`series.label.show`](${optionPath}series-pie.label.show) 设为 `false`。 96 | 97 | ```js live 98 | option = { 99 | series: [ 100 | { 101 | type: 'pie', 102 | stillShowZeroSum: false, 103 | label: { 104 | show: false 105 | }, 106 | data: [ 107 | { 108 | value: 0, 109 | name: '直接访问' 110 | }, 111 | { 112 | value: 0, 113 | name: '联盟广告' 114 | }, 115 | { 116 | value: 0, 117 | name: '搜索引擎' 118 | } 119 | ] 120 | } 121 | ] 122 | }; 123 | ``` 124 | -------------------------------------------------------------------------------- /contents/zh/how-to/chart-types/pie/doughnut.md: -------------------------------------------------------------------------------- 1 | # 圆环图 2 | 3 | 圆环图同样可以用来表示数据占总体的比例，相比于饼图，它中间空余的部分可以用来显示一些额外的文字等信息，因而也是一种常用的图表类型。 4 | 5 | ## 基础圆环图 6 | 7 | 在 ECharts 中，饼图的半径除了上一小节提到的，可以是一个数值或者字符串之外，还可以是一个包含两个元素的数组，每个元素可以为数值或字符串。当它是一个数组时，它的前一项表示内半径，后一项表示外半径，这样就形成了一个圆环图。 8 | 9 | 从这个角度上来说，可以认为饼图是一个内半径为 0 的圆环图，也就是说，饼图是圆环图的特例。 10 | 11 | ```js live 12 | option = { 13 | title: { 14 | text: '圆环图的例子', 15 | left: 'center', 16 | top: 'center' 17 | }, 18 | series: [ 19 | { 20 | type: 'pie', 21 | data: [ 22 | { 23 | value: 335, 24 | name: 'A' 25 | }, 26 | { 27 | value: 234, 28 | name: 'B' 29 | }, 30 | { 31 | value: 1548, 32 | name: 'C' 33 | } 34 | ], 35 | radius: ['40%', '70%'] 36 | } 37 | ] 38 | }; 39 | ``` 40 | 41 | 如果半径是数组，其中的两项也可以一项是数值，另一项是百分比形式的字符串。但是这样可能导致在某些分辨率下，内半径小于外半径。ECharts 会自动使用小的一项作为内半径，但是仍应小心这样可能会导致的非预期效果。 42 | 43 | ## 在圆环图中间显示高亮扇形对应的文字 44 | 45 | 上面的例子展现了在圆环图中间显示固定文字的例子，下面我们要介绍，如何在圆环图中间显示鼠标高亮的扇形对应的文字。实现这一效果的思路是，利用系列的 `label`（默认用扇形颜色显示数据的 `name`），显示在圆环图中间。在默认情况下不显示系列的 `label`，在高亮时显示。具体的代码如下： 46 | 47 | ```js live 48 | option = { 49 | legend: { 50 | orient: 'vertical', 51 | x: 'left', 52 | data: ['A', 'B', 'C', 'D', 'E'] 53 | }, 54 | series: [ 55 | { 56 | type: 'pie', 57 | radius: ['50%', '70%'], 58 | avoidLabelOverlap: false, 59 | label: { 60 | show: false, 61 | position: 'center' 62 | }, 63 | labelLine: { 64 | show: false 65 | }, 66 | emphasis: { 67 | label: { 68 | show: true, 69 | fontSize: '30', 70 | fontWeight: 'bold' 71 | } 72 | }, 73 | data: [ 74 | { value: 335, name: 'A' }, 75 | { value: 310, name: 'B' }, 76 | { value: 234, name: 'C' }, 77 | { value: 135, name: 'D' }, 78 | { value: 1548, name: 'E' } 79 | ] 80 | } 81 | ] 82 | }; 83 | ``` 84 | 85 | 其中，`avoidLabelOverlap` 是用来控制是否由 ECharts 调整标签位置以实现防止标签重叠。它的默认值是 `true`，而在这里，我们不希望标签位置调整到不是中间的位置，因此我们需要将其设为 `false`。 86 | 87 | 这样，圆环图中间会显示高亮数据的 `name` 值。 88 | -------------------------------------------------------------------------------- /contents/zh/how-to/chart-types/pie/rose.md: -------------------------------------------------------------------------------- 1 | # 南丁格尔图（玫瑰图） 2 | 3 | 南丁格尔图又称玫瑰图，通常用弧度相同但半径不同的扇形表示各个类目。 4 | 5 | ECharts 可以通过将饼图的 [`series.roseType`](${optionPath}series-pie.roseType) 值设为 `'area'` 实现南丁格尔图，其他配置项和饼图是相同的。 6 | 7 | ```js live 8 | option = { 9 | series: [ 10 | { 11 | type: 'pie', 12 | data: [ 13 | { 14 | value: 100, 15 | name: 'A' 16 | }, 17 | { 18 | value: 200, 19 | name: 'B' 20 | }, 21 | { 22 | value: 300, 23 | name: 'C' 24 | }, 25 | { 26 | value: 400, 27 | name: 'D' 28 | }, 29 | { 30 | value: 500, 31 | name: 'E' 32 | } 33 | ], 34 | roseType: 'area' 35 | } 36 | ] 37 | }; 38 | ``` 39 | -------------------------------------------------------------------------------- /contents/zh/how-to/chart-types/scatter/basic-scatter.md: -------------------------------------------------------------------------------- 1 | # 基础散点图 2 | 3 | 散点图，也是一种常见的图表类型。散点图由许多“点”组成，有时，这些点用来表示数据在坐标系中的位置（比如在笛卡尔坐标系下，表示数据在 x 轴和 y 轴上的坐标；在地图坐标系下，表示数据在地图上的某个位置等）；有时，这些点的大小、颜色等属性也可以映射到数据值，用以表现高维数据。 4 | 5 | ## 最简单的散点图 6 | 7 | 下面是一个横坐标为类目轴、纵坐标为数值轴的最简单的散点图配置： 8 | 9 | ```js live 10 | option = { 11 | xAxis: { 12 | data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] 13 | }, 14 | yAxis: {}, 15 | series: [ 16 | { 17 | type: 'scatter', 18 | data: [220, 182, 191, 234, 290, 330, 310] 19 | } 20 | ] 21 | }; 22 | ``` 23 | 24 | ## 笛卡尔坐标系下的散点图 25 | 26 | 在上文的例子中，散点图的横坐标都是离散的类目轴，而纵坐标都是连续的数值轴。而对于散点图而言，另一种常见的场景是，两个坐标轴均为连续的数值轴，也就是笛卡尔坐标系。这时的系列形式略有不同，数据的横坐标和纵坐标一同写在 `data` 中，而非坐标轴中。 27 | 28 | ```js live 29 | option = { 30 | xAxis: {}, 31 | yAxis: {}, 32 | series: [ 33 | { 34 | type: 'scatter', 35 | data: [ 36 | [10, 5], 37 | [0, 8], 38 | [6, 10], 39 | [2, 12], 40 | [8, 9] 41 | ] 42 | } 43 | ] 44 | }; 45 | ``` 46 | 47 | ## 散点图样式设置 48 | 49 | ### 图形的形状 50 | 51 | 图形（symbol）指的是散点图中数据“点”的形状。有三类图形可选，一种是 ECharts 内置形状，第二种是图片，第三种是 SVG 的路径。 52 | 53 | ECharts 内置形状包括：圆形、矩形、圆角矩形、三角形、菱形、大头针形、箭头形，分别对应`'circle'`、`'rect'`、`'roundRect'`、`'triangle'`、`'diamond'`、`'pin'`、`'arrow'`。使用内置形状时，只要将 `symbol` 属性指定为形状名称对应的字符串即可。 54 | 55 | 如果想要将图形指定为任意的图片，以 `'image://'` 开头，后面跟图片的绝对或相对地址。形如：`'image://http://example.com/xxx.png'` 或 `'image://./xxx.png'`。 56 | 57 | 除此之外，还支持 SVG 的路径作为矢量图形，将 `symbol` 设置为以 `'path://'` 开头的 SVG 路径即可。使用矢量图形的好处是，图片不会因为缩放而产生锯齿或模糊，并且通常而言比图片形式的文件大小更小。路径的查看方法为，打开一个 `SVG` 文件，找到形如 `` 的路径，将 `d` 的值添加在 `'path://'` 后即可。 58 | 59 | 下面，我们展示一个将图形设置为矢量爱心形状的方式。 60 | 61 | 首先，我们需要一个爱心的 SVG 文件，可以使用矢量编辑软件绘制，或者从网上下载到相关资源。其内容如下： 62 | 63 | ```xml 64 | 65 | 66 | 67 | 68 | ``` 69 | 70 | 在 ECharts 的 `symbol` 配置项中，我们使用 `d` 的值作为路径。 71 | 72 | ```js live 73 | option = { 74 | xAxis: { 75 | data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] 76 | }, 77 | yAxis: {}, 78 | series: [ 79 | { 80 | type: 'scatter', 81 | data: [220, 182, 191, 234, 290, 330, 310], 82 | symbolSize: 20, 83 | symbol: 84 | 'path://M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014 C52.216,18.553,51.97,16.611,51.911,16.242z' 85 | } 86 | ] 87 | }; 88 | ``` 89 | 90 | 这样，就能得到爱心形状的图形作为点的形状了。 91 | 92 | ### 图形的大小 93 | 94 | 图形大小可以使用 [`series.symbolSize`](${optionPath}series-scatter.symbolSize) 控制。它既可以是一个表示图形大小的像素值，也可以是一个包含两个 number 元素的数组，分别表示图形的宽和高。 95 | 96 | 除此之外，它还可以是一个回调函数，其参数格式为： 97 | 98 | ```ts 99 | (value: Array | number, params: Object) => number | Array; 100 | ``` 101 | 102 | 第一个参数为数据值，第二个参数是数据项的其他参数。 103 | 104 | 在下面的例子中，我们将散点图点的大小设置为与其数据值成正比。 105 | 106 | ```js live 107 | option = { 108 | xAxis: { 109 | data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] 110 | }, 111 | yAxis: {}, 112 | series: [ 113 | { 114 | type: 'scatter', 115 | data: [220, 182, 191, 234, 290, 330, 310], 116 | symbolSize: function(value) { 117 | return value / 10; 118 | } 119 | } 120 | ] 121 | }; 122 | ``` 123 | -------------------------------------------------------------------------------- /contents/zh/how-to/connect.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/contents/zh/how-to/connect.md -------------------------------------------------------------------------------- /contents/zh/how-to/cross-platform/baidu-app.md: -------------------------------------------------------------------------------- 1 | # 在百度智能小程序中使用 ECharts 2 | 3 | [ECharts 图表](http://smartprogram.baidu.com/docs/develop/framework/echarts/) 以小程序动态库的形式提供了在百度智能小程序中使用 ECharts 的方式。 4 | 5 | [baidu-smart-app-echarts-demo](https://github.com/baidu-smart-app/baidu-smart-app-echarts-demo) 项目是使用该动态库的一个示例工程，可以作为参考，一般情况下不需要引入自己的项目。 6 | 7 | 如有使用上的问题，可以在 [baidu-smart-app-echarts-demo/issues](https://github.com/baidu-smart-app/baidu-smart-app-echarts-demo/issues) 中咨询。 8 | 9 | ## 使用方式 10 | 11 | 参见百度智能小程序文档 [ECharts 图表](http://smartprogram.baidu.com/docs/develop/framework/echarts/)。 12 | 13 | ## 注意事项 14 | 15 | 百度智能小程序上的 ECharts 以动态库的形式开放，因此开发者的使用方式与[在微信小程序中使用 ECharts](./zh/how-to/cross-platform/wechat-app) 不太相同。尤其需要注意的是，前者需要在指定动态库名称的时候确定 ECharts 的版本号，而不能自行更换或使用自定义构建。这一点是由底层框架的技术实现决定的。具体来说，在指定百度智能小程序动态库名称的时候，需要通过 `provider` 指定动态库名称，具体参见[文档](http://smartprogram.baidu.com/docs/develop/framework/echarts/)的「在项目中引用动态库」章节。 16 | 17 | 请务必查看[文档](http://smartprogram.baidu.com/docs/develop/framework/echarts/)的「兼容性说明」以了解各功能的实现方式。 18 | -------------------------------------------------------------------------------- /contents/zh/how-to/cross-platform/wechat-app.md: -------------------------------------------------------------------------------- 1 | # 在微信小程序中使用 ECharts 2 | 3 | [echarts-for-weixin](https://github.com/ecomfe/echarts-for-weixin) 项目提供了一个小程序组件，用这种方式可以方便地使用 ECharts。 4 | 5 | ## 使用方式 6 | 7 | 1. 下载该项目 8 | 2. 如有必要，将 `ec-canvas` 目录下的 `echarts.js` 替换为最新版的 ECharts。如果希望减小包体积大小，可以使用[自定义构建](${mainSitePath}/builder.html)生成并替换 `echarts.js` 9 | 3. `pages` 目录下是使用的示例文件，可以作为参考，或者删除不需要的页面。 10 | 11 | 更详细的说明请参见 [echarts-for-weixin](https://github.com/ecomfe/echarts-for-weixin) 项目。 12 | 13 | ## 注意事项 14 | 15 | 最新版的 ECharts 微信小程序支持微信 Canvas 2d，当用户的基础库版本 >= 2.9.0 且没有设置 `force-use-old-canvas="true"` 的情况下，使用新的 Canvas 2d（默认）。 16 | 17 | 使用新的 Canvas 2d 可以提升渲染性能，解决非同层渲染问题，强烈建议开启。 18 | 19 | 更详细的说明请参见 [Canvas 2d 版本要求](https://github.com/ecomfe/echarts-for-weixin#canvas-2d-%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82)。 20 | -------------------------------------------------------------------------------- /contents/zh/how-to/data/drilldown.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/contents/zh/how-to/data/drilldown.md -------------------------------------------------------------------------------- /contents/zh/how-to/data/dynamic-data.md: -------------------------------------------------------------------------------- 1 | # 异步数据的加载与动态更新 2 | 3 | ## 异步加载 4 | 5 | [入门示例](${lang}/get-started)中的数据是在初始化后`setOption`中直接填入的，但是很多时候可能数据需要异步加载后再填入。`ECharts` 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 `setOption` 填入数据和配置项就行。 6 | 7 | ```js 8 | var myChart = echarts.init(document.getElementById('main')); 9 | 10 | $.get('data.json').done(function(data) { 11 | // data 的结构: 12 | // { 13 | // categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"], 14 | // values: [5, 20, 36, 10, 10, 20] 15 | // } 16 | myChart.setOption({ 17 | title: { 18 | text: '异步数据加载示例' 19 | }, 20 | tooltip: {}, 21 | legend: {}, 22 | xAxis: { 23 | data: data.categories 24 | }, 25 | yAxis: {}, 26 | series: [ 27 | { 28 | name: '销量', 29 | type: 'bar', 30 | data: data.values 31 | } 32 | ] 33 | }); 34 | }); 35 | ``` 36 | 37 | 或者先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据。 38 | 39 | ```js 40 | var myChart = echarts.init(document.getElementById('main')); 41 | // 显示标题，图例和空的坐标轴 42 | myChart.setOption({ 43 | title: { 44 | text: '异步数据加载示例' 45 | }, 46 | tooltip: {}, 47 | legend: { 48 | data: ['销量'] 49 | }, 50 | xAxis: { 51 | data: [] 52 | }, 53 | yAxis: {}, 54 | series: [ 55 | { 56 | name: '销量', 57 | type: 'bar', 58 | data: [] 59 | } 60 | ] 61 | }); 62 | 63 | // 异步加载数据 64 | $.get('data.json').done(function(data) { 65 | // 填入数据 66 | myChart.setOption({ 67 | xAxis: { 68 | data: data.categories 69 | }, 70 | series: [ 71 | { 72 | // 根据名字对应到相应的系列 73 | name: '销量', 74 | data: data.data 75 | } 76 | ] 77 | }); 78 | }); 79 | ``` 80 | 81 | 如下： 82 | 83 | 84 | 85 | ECharts 中在更新数据的时候需要通过`name`属性对应到相应的系列，上面示例中如果`name`不存在也可以根据系列的顺序正常更新，但是更多时候推荐更新数据的时候加上系列的`name`数据。 86 | 87 | ## loading 动画 88 | 89 | 如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了，因此需要一个 loading 的动画来提示用户数据正在加载。 90 | 91 | ECharts 默认有提供了一个简单的加载动画。只需要调用 [showLoading](${mainSitePath}/api.html#echartsInstance.showLoading) 方法显示。数据加载完成后再调用 [hideLoading](${mainSitePath}/api.html#echartsInstance.hideLoading) 方法隐藏加载动画。 92 | 93 | ```js 94 | myChart.showLoading(); 95 | $.get('data.json').done(function (data) { 96 | myChart.hideLoading(); 97 | myChart.setOption(...); 98 | }); 99 | ``` 100 | 101 | 效果如下： 102 | 103 | 104 | 105 | ## 数据的动态更新 106 | 107 | ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。 108 | 109 | 所有数据的更新都通过 [setOption](${mainSitePath}/api.html#echartsInstance.setOption)实现，你只需要定时获取数据，[setOption](${mainSitePath}/api.html#echartsInstance.setOption) 填入数据，而不用考虑数据到底产生了哪些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。 110 | 111 | 具体可以看下面示例： 112 | 113 | 114 | -------------------------------------------------------------------------------- /contents/zh/how-to/interaction/coarse-pointer.md: -------------------------------------------------------------------------------- 1 | # 智能指针吸附 2 | 3 | 在图表中，部分可交互元素可能比较小，有时候用户不易准确地进行点击等操作，移动端尤其如此。因此，在 Apache EChartsTM 5.4.0 中，我们引入了“智能指针吸附”的概念。 4 | 5 | 从该版本起，在默认情况下，ECharts 对移动端的图表开启指针吸附，对非移动端的图表关闭。 6 | 7 | > 如果需要对所有平台都开启，则可以通过在 [init](${mainSitePath}api.html#echarts.init) 的时候将 `opt.useCoarsePointer` 设置为 `true` 来实现；设为 `false` 则对所有平台都关闭。 8 | 9 | ## 吸附原理 10 | 11 | 在鼠标或触摸事件发生时，ECharts 会根据鼠标或触摸的位置，判断是否和某个可交互元素相交。如果是，则认为该元素是交互对象（与优化前的逻辑一致）；如果不是，则在一定范围内找到最接近鼠标或触摸位置的一个元素。 12 | 13 | > 默认的范围是 44px（参见 [W3C 标准](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html)），开发者可在 [init](${mainSitePath}api.html#echarts.init) 的时候，通过 `opt.pointerSize` 设置该值。 14 | 15 | 更具体地说，ECharts 会在鼠标或触摸位置的周围，依次循环不同角度和不同半径（在 `opt.pointerSize` 范围内），直到找到一个元素与其相交。如果找到了，则认为该元素是交互对象。 16 | 17 | 19 | 20 | 21 | 也就是说，如果有元素在鼠标或触摸位置的 `opt.pointerSize` 半径范围内，则最靠近的可交互元素会被认为是交互对象。 22 | 23 | ## 性能分析 24 | 25 | 在实际算法实现的时候，我们首先将鼠标或触摸位置与所有可交互元素的 AABB 包围盒判断相交性，从而快速剔除了大部分不相交的元素。然后，我们再对剩余的元素进行精确的路径相交判断。因此，从用户体验角度，不会带来可感知的性能损耗。 26 | 27 | 对于大规模数据的图表系列（也就是开启了 `large: true` 的柱状图、散点图等），不会开启吸附功能。 28 | -------------------------------------------------------------------------------- /contents/zh/how-to/mobile.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/contents/zh/how-to/mobile.md -------------------------------------------------------------------------------- /contents/zh/meta/writing.md: -------------------------------------------------------------------------------- 1 | # 写作风格规范 2 | 3 | 本文的主要目的是为了统一该项目的写作风格。 4 | 5 | 语法主要参照[中文技术文档的写作规范](https://github.com/ruanyf/document-style-guide)。请在写作前先阅读一遍该语法。 6 | 7 | ## 重点 8 | 9 | > 段落的句子语气要使用陈述和肯定语气，避免使用感叹语气。 10 | 11 | > 句子内部的并列词，应该用全角顿号(、) 分隔，而不用逗号，即使并列词是英语也是如此。 12 | > 13 | > 错误：我最欣赏的科技公司有 Google, Facebook, 腾讯, 阿里和百度等。 14 | > 15 | > 正确：我最欣赏的科技公司有 Google、Facebook、腾讯、阿里和百度等。 16 | 17 | ## 其他注意事项 18 | 19 | 除了上述规范之外，还需要注意： 20 | 21 | - 写作时，应尽可能使用正式的书面语言，避免较为随意的个人博客风格。 22 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | import config from './configs/config' 2 | 3 | if (process.env.NODE_ENV === 'production') { 4 | console.log('Deploying to ...', process.env.NUXT_ENV_DEPLOY) 5 | } 6 | 7 | /** 8 | * @type {import('@nuxt/types').NuxtConfig} 9 | */ 10 | export default { 11 | ssr: true, 12 | 13 | // TODO static target will generate lot's of static js files. Not sure why 14 | // target: 'static', 15 | 16 | router: { 17 | mode: 'history', 18 | base: config.routerBase, 19 | scrollBehavior(to) { 20 | if (to.hash) { 21 | const id = to.hash.substr(1) 22 | const el = 23 | document.getElementById(decodeURIComponent(id)) || 24 | document.getElementById(id) 25 | 26 | if (el) { 27 | el.scrollIntoView && 28 | el.scrollIntoView({ 29 | behavior: 'smooth' 30 | }) 31 | } 32 | } else { 33 | document.getElementsByClassName('page-main')[0].scrollTo({ 34 | top: 0, 35 | left: 0, 36 | behavior: 'smooth' 37 | }) 38 | } 39 | } 40 | }, 41 | /* 42 | ** Headers of the page 43 | */ 44 | head: {}, 45 | tailwindcss: {}, 46 | /* 47 | ** Customize the progress-bar color 48 | */ 49 | loading: { 50 | color: '#F72C5B', 51 | continuous: true 52 | }, 53 | /* 54 | ** Global CSS 55 | */ 56 | css: [], 57 | /* 58 | ** Plugins to load before mounting the App 59 | */ 60 | plugins: [], 61 | /* 62 | ** Nuxt.js dev-modules 63 | */ 64 | buildModules: ['@nuxt/typescript-build', '@nuxtjs/tailwindcss'], 65 | /* 66 | ** Nuxt.js modules 67 | */ 68 | modules: [ 69 | [ 70 | 'nuxt-i18n', 71 | { 72 | locales: ['en', 'zh'], 73 | strategy: 'prefix', 74 | defaultLocale: 'en', 75 | detectBrowserLanguage: { 76 | useCookie: true, 77 | cookieKey: 'i18n_redirected', 78 | onlyOnRoot: true 79 | }, 80 | vueI18n: { 81 | fallbackLocale: 'en', 82 | messages: { 83 | en: { 84 | inThisPage: 'In This Page', 85 | searchHandbook: 'Search Handbook', 86 | contributorsWithThisDocument: 'Contributors', 87 | editInThisDocumentTip: 'Edit this Document', 88 | editInGithub: 'Edit this page on GitHub' 89 | }, 90 | zh: { 91 | inThisPage: '本页目录', 92 | searchHandbook: '搜索手册', 93 | contributorsWithThisDocument: '本文贡献者', 94 | editInThisDocumentTip: '编辑本文', 95 | editInGithub: '在 GitHub 上编辑本页' 96 | } 97 | } 98 | } 99 | } 100 | ] 101 | ], 102 | /* 103 | ** Build configuration 104 | */ 105 | build: { 106 | postcss: { 107 | plugins: { 108 | 'postcss-nested': {}, 109 | 'postcss-import': {} 110 | } 111 | }, 112 | 113 | extractCSS: { 114 | // allChunks: true 115 | }, 116 | /* 117 | ** You can extend webpack config here 118 | */ 119 | extend(config, ctx) { 120 | config.resolve.alias['vue'] = 'vue/dist/vue.common' 121 | 122 | config.module.rules.push({ 123 | test: /\.md$/, 124 | use: ['raw-loader'] 125 | }) 126 | //github.com/nuxt/nuxt.js/issues/4736#issuecomment-453429870 127 | https: config.module.rules.push({ 128 | test: /\.ya?ml$/, 129 | use: 'js-yaml-loader' 130 | }) 131 | // if (ctx.isDev && ctx.isClient) { 132 | // config.module.rules.push({ 133 | // enforce: 'pre', 134 | // test: /\.(js|vue)$/, 135 | // loader: 'eslint-loader', 136 | // exclude: /(node_modules)/, 137 | // options: { fix: true } 138 | // }) 139 | // } 140 | }, 141 | filenames: { 142 | chunk: ({ isDev }) => (isDev ? '[name].js' : 'js/[contenthash].js') 143 | } 144 | }, 145 | generate: { 146 | crawler: true 147 | } 148 | } 149 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "echarts-handbook", 3 | "version": "1.0.0", 4 | "description": "Apache ECharts Handbook", 5 | "license": "Apache-2.0", 6 | "scripts": { 7 | "dev": "cross-env NODE_OPTIONS=--openssl-legacy-provider nuxt", 8 | "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider nuxt start", 9 | "prepare-generate": "node build/generate-contributors.js && node build/generate", 10 | "build:gh": "npm run prepare-generate && cross-env NODE_OPTIONS=--openssl-legacy-provider NUXT_ENV_DEPLOY=gh nuxt generate", 11 | "build:local": "npm run prepare-generate && cross-env NODE_OPTIONS=--openssl-legacy-provider NUXT_ENV_DEPLOY=local nuxt generate", 12 | "build:localsite": "npm run prepare-generate && cross-env NODE_OPTIONS=--openssl-legacy-provider NUXT_ENV_DEPLOY=localsite nuxt generate", 13 | "build:asf": "npm run prepare-generate && cross-env NODE_OPTIONS=--openssl-legacy-provider NUXT_ENV_DEPLOY=asf nuxt generate" 14 | }, 15 | "dependencies": { 16 | "@nuxt/types": "^2.15.8", 17 | "@vue/composition-api": "^1.7.1", 18 | "clipboard": "^2.0.11", 19 | "intersection-observer": "^0.12.2", 20 | "js-base64": "^3.7.2", 21 | "js-yaml-loader": "^1.2.2", 22 | "lodash": "^4.17.21", 23 | "markdown-it": "^12.2.0", 24 | "markdown-it-anchor": "^8.1.2", 25 | "nuxt": "^2.15.8", 26 | "nuxt-i18n": "^6.28.1", 27 | "prism-themes": "^1.9.0", 28 | "prismjs": "^1.30.0", 29 | "resize-detector": "^0.3.0", 30 | "vanilla-lazyload": "^17.8.3", 31 | "vue": "2.6.14", 32 | "vue-observe-visibility": "^1.0.0", 33 | "vue-prism-editor": "^1.3.0", 34 | "vue-server-renderer": "2.6.14", 35 | "vue-template-compiler": "2.6.14" 36 | }, 37 | "devDependencies": { 38 | "@jamesives/github-pages-deploy-action": "^4.4.1", 39 | "@nuxt/typescript-build": "^2.1.0", 40 | "@nuxtjs/eslint-config-typescript": "^11.0.0", 41 | "@nuxtjs/tailwindcss": "^4.1.2", 42 | "babel-eslint": "^10.1.0", 43 | "cheerio": "^1.0.0-rc.12", 44 | "cross-env": "^7.0.3", 45 | "eslint": "^8.27.0", 46 | "eslint-plugin-nuxt": "^4.0.0", 47 | "eslint-plugin-prettier": "^4.2.1", 48 | "node-fetch": "^2.6.7", 49 | "postcss": "^8.4.31", 50 | "raw-loader": "^4.0.2" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | Thus you'd want to delete this README.md before deploying to production. 8 | 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 10 | 11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 12 | -------------------------------------------------------------------------------- /static/images/5-2-0/group-transition-2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/5-2-0/group-transition-2.gif -------------------------------------------------------------------------------- /static/images/5-2-0/group-transition.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/5-2-0/group-transition.gif -------------------------------------------------------------------------------- /static/images/5-2-0/polar-bar-label.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/5-2-0/polar-bar-label.jpg -------------------------------------------------------------------------------- /static/images/5-2-0/universal-transition-2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/5-2-0/universal-transition-2.gif -------------------------------------------------------------------------------- /static/images/5-2-0/universal-transition-3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/5-2-0/universal-transition-3.gif -------------------------------------------------------------------------------- /static/images/5-2-0/universal-transition.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/5-2-0/universal-transition.gif -------------------------------------------------------------------------------- /static/images/5-3-0/map-projection.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/5-3-0/map-projection.gif -------------------------------------------------------------------------------- /static/images/5-3-0/pie-label-after.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/5-3-0/pie-label-after.png -------------------------------------------------------------------------------- /static/images/5-3-0/pie-label-after2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/5-3-0/pie-label-after2.png -------------------------------------------------------------------------------- /static/images/5-3-0/pie-label-before.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/5-3-0/pie-label-before.png -------------------------------------------------------------------------------- /static/images/5-3-0/pie-label-before2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/5-3-0/pie-label-before2.png -------------------------------------------------------------------------------- /static/images/5-3-0/svg-after.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/5-3-0/svg-after.gif -------------------------------------------------------------------------------- /static/images/5-3-0/svg-before.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/5-3-0/svg-before.gif -------------------------------------------------------------------------------- /static/images/5-4-0/pie-amap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/5-4-0/pie-amap.png -------------------------------------------------------------------------------- /static/images/5-4-0/pie-bmap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/5-4-0/pie-bmap.png -------------------------------------------------------------------------------- /static/images/5-4-0/pie-calendar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/5-4-0/pie-calendar.png -------------------------------------------------------------------------------- /static/images/5-4-0/pie-geo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/5-4-0/pie-geo.png -------------------------------------------------------------------------------- /static/images/5-4-0/pie-grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/5-4-0/pie-grid.png -------------------------------------------------------------------------------- /static/images/5-5-0/ssr-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/5-5-0/ssr-example.png -------------------------------------------------------------------------------- /static/images/5-6-0/axis-tooltip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/5-6-0/axis-tooltip.png -------------------------------------------------------------------------------- /static/images/5-6-0/sunburst-emphasis-relative.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/5-6-0/sunburst-emphasis-relative.png -------------------------------------------------------------------------------- /static/images/demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/demo.png -------------------------------------------------------------------------------- /static/images/design/axis/charts_axis_img01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/design/axis/charts_axis_img01.jpg -------------------------------------------------------------------------------- /static/images/design/axis/charts_axis_img02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/design/axis/charts_axis_img02.jpg -------------------------------------------------------------------------------- /static/images/design/axis/charts_axis_img02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/design/axis/charts_axis_img02.png -------------------------------------------------------------------------------- /static/images/design/axis/charts_axis_img04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/design/axis/charts_axis_img04.png -------------------------------------------------------------------------------- /static/images/design/axis/charts_axis_img05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/design/axis/charts_axis_img05.png -------------------------------------------------------------------------------- /static/images/design/axis/charts_axis_img07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/design/axis/charts_axis_img07.png -------------------------------------------------------------------------------- /static/images/design/axis/charts_axis_img10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/design/axis/charts_axis_img10.png -------------------------------------------------------------------------------- /static/images/design/axis/charts_axis_img12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/design/axis/charts_axis_img12.png -------------------------------------------------------------------------------- /static/images/design/bar/bar01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/design/bar/bar01.jpg -------------------------------------------------------------------------------- /static/images/design/bar/bar02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/design/bar/bar02.jpg -------------------------------------------------------------------------------- /static/images/design/bar/bar03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/design/bar/bar03.jpg -------------------------------------------------------------------------------- /static/images/design/bar/bar04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/design/bar/bar04.jpg -------------------------------------------------------------------------------- /static/images/design/bi-directional-bar/bi-directional-bar01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/design/bi-directional-bar/bi-directional-bar01.jpg -------------------------------------------------------------------------------- /static/images/design/bi-directional-bar/bi-directional-bar02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/design/bi-directional-bar/bi-directional-bar02.jpg -------------------------------------------------------------------------------- /static/images/design/color/color01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/design/color/color01.png -------------------------------------------------------------------------------- /static/images/design/color/color02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/design/color/color02.png -------------------------------------------------------------------------------- /static/images/design/color/color03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/design/color/color03.png -------------------------------------------------------------------------------- /static/images/design/color/color04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/design/color/color04.png -------------------------------------------------------------------------------- /static/images/design/legend/charts_sign_img01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/design/legend/charts_sign_img01.png -------------------------------------------------------------------------------- /static/images/design/legend/charts_sign_img02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/design/legend/charts_sign_img02.png -------------------------------------------------------------------------------- /static/images/design/legend/charts_sign_img03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/design/legend/charts_sign_img03.png -------------------------------------------------------------------------------- /static/images/design/legend/charts_sign_img04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/design/legend/charts_sign_img04.png -------------------------------------------------------------------------------- /static/images/design/line/line01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/design/line/line01.jpg -------------------------------------------------------------------------------- /static/images/design/pie/pie01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/design/pie/pie01.jpg -------------------------------------------------------------------------------- /static/images/design/pie/pie02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/design/pie/pie02.jpg -------------------------------------------------------------------------------- /static/images/design/pie/pie03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/design/pie/pie03.jpg -------------------------------------------------------------------------------- /static/images/design/pie/pie04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/design/pie/pie04.jpg -------------------------------------------------------------------------------- /static/images/design/scatter/scatter5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/design/scatter/scatter5.jpg -------------------------------------------------------------------------------- /static/images/feature-v5/dashboard-pointer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/feature-v5/dashboard-pointer.png -------------------------------------------------------------------------------- /static/images/feature-v5/dataZoom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/feature-v5/dataZoom.png -------------------------------------------------------------------------------- /static/images/feature-v5/dirty-rect.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/feature-v5/dirty-rect.gif -------------------------------------------------------------------------------- /static/images/feature-v5/dirty-rect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/feature-v5/dirty-rect.png -------------------------------------------------------------------------------- /static/images/feature-v5/echarts-5-en.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/feature-v5/echarts-5-en.png -------------------------------------------------------------------------------- /static/images/feature-v5/echarts-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/feature-v5/echarts-5.png -------------------------------------------------------------------------------- /static/images/feature-v5/gauge-pointer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/feature-v5/gauge-pointer.png -------------------------------------------------------------------------------- /static/images/feature-v5/new-theme-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/feature-v5/new-theme-dark.png -------------------------------------------------------------------------------- /static/images/feature-v5/new-theme-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/feature-v5/new-theme-light.png -------------------------------------------------------------------------------- /static/images/feature-v5/new-tooltip-2 copy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/feature-v5/new-tooltip-2 copy.png -------------------------------------------------------------------------------- /static/images/feature-v5/new-tooltip-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/feature-v5/new-tooltip-2.png -------------------------------------------------------------------------------- /static/images/feature-v5/new-tooltip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/feature-v5/new-tooltip.png -------------------------------------------------------------------------------- /static/images/feature-v5/new-tooltip2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/feature-v5/new-tooltip2.png -------------------------------------------------------------------------------- /static/images/feature-v5/pie-label copy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/feature-v5/pie-label copy.png -------------------------------------------------------------------------------- /static/images/feature-v5/pie-label-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/feature-v5/pie-label-2.png -------------------------------------------------------------------------------- /static/images/feature-v5/pie-label.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/feature-v5/pie-label.png -------------------------------------------------------------------------------- /static/images/feature-v5/theme-color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/feature-v5/theme-color.png -------------------------------------------------------------------------------- /static/images/feature-v5/time-axis-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/feature-v5/time-axis-2.png -------------------------------------------------------------------------------- /static/images/feature-v5/time-axis.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/feature-v5/time-axis.png -------------------------------------------------------------------------------- /static/images/feature-v5/time-axis2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/feature-v5/time-axis2.png -------------------------------------------------------------------------------- /static/images/feature-v5/timeline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/feature-v5/timeline.png -------------------------------------------------------------------------------- /static/images/feature-v5/yAxis-default-style-change.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/feature-v5/yAxis-default-style-change.webp -------------------------------------------------------------------------------- /static/images/how-to/coarse-pointer-en.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/how-to/coarse-pointer-en.gif -------------------------------------------------------------------------------- /static/images/how-to/coarse-pointer-zh.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apache/echarts-handbook/ef08c758efac648e989f239ce91b12d1f7fcffd1/static/images/how-to/coarse-pointer-zh.gif -------------------------------------------------------------------------------- /store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /store/index.js: -------------------------------------------------------------------------------- 1 | import zhPosts from '~/contents/zh/posts.yml' 2 | import enPosts from '~/contents/en/posts.yml' 3 | import config from '~/configs/config' 4 | 5 | export const state = () => ({ 6 | filled: false, 7 | docVersion: '', 8 | ghVersion: '', 9 | visibleAffix: false, 10 | homepage: {}, 11 | adBlocked: false, 12 | focusMode: false, 13 | posts: { 14 | zh: zhPosts, 15 | en: enPosts 16 | }, 17 | config: config 18 | }) 19 | 20 | export const mutations = { 21 | toggle(state, key) { 22 | state[key] = !state[key] 23 | }, 24 | setDocVersion(state, docVersion) { 25 | state.docVersion = docVersion 26 | }, 27 | setGhVersion(state, ghVersion) { 28 | state.ghVersion = ghVersion 29 | }, 30 | setHomepage(state, homepage) { 31 | state.homepage = homepage 32 | }, 33 | setFilled(state) { 34 | state.filled = true 35 | }, 36 | setAdBlocked(state, value) { 37 | state.adBlocked = value 38 | }, 39 | setFocusMode(state, value) { 40 | state.focusMode = value 41 | } 42 | } 43 | 44 | let _focusTimeout = null 45 | 46 | export const actions = { 47 | focusMode({ commit }) { 48 | if (_focusTimeout) { 49 | return 50 | } 51 | _focusTimeout = setTimeout(() => commit('setFocusMode', true), 1300) 52 | }, 53 | clearFocusMode({ commit }) { 54 | if (_focusTimeout) { 55 | clearTimeout(_focusTimeout) 56 | _focusTimeout = null 57 | } 58 | commit('setFocusMode', false) 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | const colors = require('tailwindcss/colors') 2 | 3 | module.exports = { 4 | jit: true, 5 | // add '~tailwind.config` alias 6 | exposeConfig: true, 7 | 8 | theme: { 9 | extend: { 10 | colors: { 11 | orange: colors.orange, 12 | 'blue-gray': colors.blueGray, 13 | emerald: colors.emerald, 14 | lime: colors.lime, 15 | teal: colors.teal, 16 | 'light-blue': colors.sky 17 | } 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2018", 4 | "module": "esnext", 5 | "moduleResolution": "node", 6 | "lib": [ 7 | "esnext", 8 | "esnext.asynciterable", 9 | "dom" 10 | ], 11 | "esModuleInterop": true, 12 | "allowJs": true, 13 | "sourceMap": true, 14 | "strict": true, 15 | "noEmit": true, 16 | "noImplicitAny": false, 17 | "experimentalDecorators": true, 18 | "baseUrl": ".", 19 | "paths": { 20 | "~/*": [ 21 | "./*" 22 | ], 23 | "@/*": [ 24 | "./*" 25 | ] 26 | }, 27 | "types": [ 28 | "@types/node", 29 | "@nuxt/types", 30 | "./types/nuxt.d.ts" 31 | ] 32 | }, 33 | "exclude": [ 34 | "node_modules", 35 | ".nuxt", 36 | "dist" 37 | ] 38 | } 39 | -------------------------------------------------------------------------------- /types/nuxt.d.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import { Store } from 'vuex' 3 | 4 | // ComponentOptions is declared in types/options.d.ts 5 | declare module 'vue/types/options' { 6 | interface NuxtContext { 7 | app: V 8 | isClient: boolean 9 | isServer: boolean 10 | isStatic: boolean 11 | isDev: boolean 12 | store: Store // Consider vuex-typex in future 13 | env: object 14 | params: object 15 | query: object 16 | } 17 | 18 | interface ComponentOptions { 19 | asyncData?(context: NuxtContext): Promise | object 20 | fetch?(context: NuxtContext): Promise | object 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /types/vue.shim.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import Vue from 'vue' 3 | export default Vue 4 | } 5 | --------------------------------------------------------------------------------