You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by gi...@apache.org on 2021/09/15 10:11:16 UTC
[echarts-website] branch asf-site updated: Deploying to asf-site from @ apache/echarts-website@c5dda59b4900a8d4fe8f176ca48cd729a1db2123 🚀
This is an automated email from the ASF dual-hosted git repository.
github-bot pushed a commit to branch asf-site
in repository https://gitbox.apache.org/repos/asf/echarts-website.git
The following commit(s) were added to refs/heads/asf-site by this push:
new bbbf5f4 Deploying to asf-site from @ apache/echarts-website@c5dda59b4900a8d4fe8f176ca48cd729a1db2123 🚀
bbbf5f4 is described below
commit bbbf5f48270afc61b99fb4fbe000277b238ef992
Author: pissang <pi...@users.noreply.github.com>
AuthorDate: Wed Sep 15 10:11:06 2021 +0000
Deploying to asf-site from @ apache/echarts-website@c5dda59b4900a8d4fe8f176ca48cd729a1db2123 🚀
---
components/builder.html | 2 +-
components/download.html | 2 +-
en/404.html | 2 +-
en/api.html | 4 +-
en/builder.html | 4 +-
en/builder/echarts.html | 2 +-
en/changelog.html | 4 +-
en/cheat-sheet.html | 4 +-
en/coding-standard.html | 4 +-
en/committers.html | 4 +-
en/contributing.html | 2 +-
en/css/main.css | 2 +-
en/dependencies.html | 4 +-
en/download-extension.html | 4 +-
en/download-map.html | 4 +-
en/download-theme.html | 4 +-
en/download.html | 4 +-
en/events.html | 4 +-
en/events/2021-05-13-iscas.html | 4 +-
en/events/2021-07-05-apachecon.html | 4 +-
en/faq.html | 4 +-
en/feature.html | 4 +-
en/index.html | 6 +-
en/maillist.html | 4 +-
en/nav.html | 2 +
en/option-gl.html | 4 +-
en/option.html | 4 +-
en/option3.html | 4 +-
en/resources.html | 2 +-
en/security.html | 2 +-
en/spreadsheet.html | 8 +-
en/theme-builder.html | 4 +-
en/tutorial.html | 4 +-
examples/data/calendar-charts.js | 2 +-
examples/data/calendar-horizontal.js | 2 +-
examples/data/candlestick-brush.js | 2 +-
examples/data/scatter-symbol-morph.js | 52 +-
examples/en/editor.html | 6 +-
examples/en/index.html | 6 +-
examples/en/view.html | 6 +-
examples/examples/ts/area-basic.ts | 24 +
examples/examples/ts/area-pieces.ts | 67 +
examples/examples/ts/area-rainfall.ts | 190 +
examples/examples/ts/area-simple.ts | 80 +
examples/examples/ts/area-stack-gradient.ts | 176 +
examples/examples/ts/area-stack.ts | 105 +
examples/examples/ts/area-time-axis.ts | 69 +
examples/examples/ts/bar-animation-delay.ts | 70 +
examples/examples/ts/bar-background.ts | 26 +
examples/examples/ts/bar-brush.ts | 115 +
examples/examples/ts/bar-data-color.ts | 27 +
examples/examples/ts/bar-drilldown.ts | 105 +
examples/examples/ts/bar-gradient.ts | 94 +
examples/examples/ts/bar-histogram.ts | 127 +
examples/examples/ts/bar-label-rotation.ts | 166 +
examples/examples/ts/bar-large.ts | 95 +
examples/examples/ts/bar-negative.ts | 79 +
examples/examples/ts/bar-negative2.ts | 67 +
examples/examples/ts/bar-polar-label-radial.ts | 38 +
examples/examples/ts/bar-polar-label-tangential.ts | 37 +
examples/examples/ts/bar-polar-real-estate.ts | 104 +
examples/examples/ts/bar-polar-stack-radial.ts | 51 +
examples/examples/ts/bar-polar-stack.ts | 52 +
examples/examples/ts/bar-race-country.ts | 142 +
examples/examples/ts/bar-race.ts | 71 +
examples/examples/ts/bar-rich-text.ts | 153 +
examples/examples/ts/bar-simple.ts | 22 +
examples/examples/ts/bar-stack.ts | 127 +
examples/examples/ts/bar-tick-align.ts | 43 +
examples/examples/ts/bar-waterfall.ts | 67 +
examples/examples/ts/bar-waterfall2.ts | 91 +
examples/examples/ts/bar-y-category-stack.ts | 94 +
examples/examples/ts/bar-y-category.ts | 50 +
examples/examples/ts/bar1.ts | 76 +
examples/examples/ts/boxplot-light-velocity.ts | 86 +
examples/examples/ts/boxplot-light-velocity2.ts | 89 +
examples/examples/ts/boxplot-multi.ts | 108 +
examples/examples/ts/bubble-gradient.ts | 111 +
.../ts/calendar-charts.ts} | 30 +-
examples/examples/ts/calendar-effectscatter.ts | 163 +
examples/examples/ts/calendar-graph.ts | 126 +
examples/examples/ts/calendar-heatmap.ts | 56 +
.../ts/calendar-horizontal.ts} | 14 +-
examples/examples/ts/calendar-lunar.ts | 470 +++
examples/examples/ts/calendar-pie.ts | 120 +
examples/examples/ts/calendar-simple.ts | 39 +
.../ts/calendar-vertical.ts} | 54 +-
.../ts/candlestick-brush.ts} | 36 +-
examples/examples/ts/candlestick-large.ts | 213 +
examples/examples/ts/candlestick-sh-2015.ts | 137 +
examples/examples/ts/candlestick-sh.ts | 324 ++
examples/examples/ts/candlestick-simple.ts | 24 +
examples/examples/ts/candlestick-touch.ts | 249 ++
examples/examples/ts/circle-packing-with-d3.ts | 232 ++
examples/examples/ts/confidence-band.ts | 120 +
examples/examples/ts/custom-bar-trend.ts | 121 +
examples/examples/ts/custom-calendar-icon.ts | 119 +
examples/examples/ts/data-transform-filter.ts | 82 +
.../examples/ts/data-transform-multiple-pie.ts | 82 +
examples/examples/ts/data-transform-sort-bar.ts | 41 +
examples/examples/ts/dataset-default.ts | 52 +
examples/examples/ts/dataset-encode0.ts | 51 +
examples/examples/ts/dataset-encode1.ts | 100 +
examples/examples/ts/dataset-link.ts | 76 +
examples/examples/ts/dataset-series-layout-by.ts | 44 +
examples/examples/ts/dataset-simple0.ts | 31 +
examples/examples/ts/dataset-simple1.ts | 31 +
examples/examples/ts/dynamic-data.ts | 133 +
examples/examples/ts/dynamic-data2.ts | 82 +
examples/examples/ts/effectScatter-bmap.ts | 584 +++
examples/examples/ts/effectScatter-map.ts | 511 +++
examples/examples/ts/funnel-align.ts | 108 +
examples/examples/ts/funnel-customize.ts | 89 +
examples/examples/ts/funnel-mutiple.ts | 104 +
examples/examples/ts/funnel.ts | 69 +
examples/examples/ts/gauge-barometer.ts | 129 +
examples/examples/ts/gauge-car.ts | 515 +++
examples/examples/ts/gauge-clock.ts | 221 ++
examples/examples/ts/gauge-grade.ts | 91 +
examples/examples/ts/gauge-multi-title.ts | 92 +
examples/examples/ts/gauge-progress.ts | 95 +
examples/examples/ts/gauge-ring.ts | 112 +
examples/examples/ts/gauge-simple.ts | 31 +
examples/examples/ts/gauge-speed.ts | 57 +
examples/examples/ts/gauge-stage.ts | 66 +
examples/examples/ts/gauge-temperature.ts | 135 +
examples/examples/ts/gauge.ts | 25 +
examples/examples/ts/geo-beef-cuts.ts | 76 +
examples/examples/ts/geo-seatmap-flight.ts | 95 +
examples/examples/ts/geo-svg-lines.ts | 86 +
examples/examples/ts/geo-svg-map.ts | 200 +
examples/examples/ts/geo-svg-scatter-simple.ts | 56 +
examples/examples/ts/geo-svg-traffic.ts | 169 +
examples/examples/ts/graph-circular-layout.ts | 68 +
examples/examples/ts/graph-force-dynamic.ts | 59 +
examples/examples/ts/graph-force.ts | 56 +
examples/examples/ts/graph-force2.ts | 66 +
examples/examples/ts/graph-grid.ts | 52 +
examples/examples/ts/graph-label-overlap.ts | 51 +
examples/examples/ts/graph-life-expectancy.ts | 107 +
examples/examples/ts/graph-npm.ts | 70 +
examples/examples/ts/graph-simple.ts | 89 +
examples/examples/ts/graph-webkit-dep.ts | 45 +
examples/examples/ts/graph.ts | 70 +
examples/examples/ts/grid-multiple.ts | 176 +
examples/examples/ts/heatmap-cartesian.ts | 66 +
examples/examples/ts/line-aqi.ts | 101 +
examples/examples/ts/line-draggable.ts | 142 +
examples/examples/ts/line-easing.ts | 235 ++
examples/examples/ts/line-function.ts | 75 +
examples/examples/ts/line-gradient.ts | 76 +
examples/examples/ts/line-graphic.ts | 122 +
.../ts/line-in-cartesian-coordinate-system.ts | 17 +
examples/examples/ts/line-log.ts | 59 +
examples/examples/ts/line-marker.ts | 89 +
examples/examples/ts/line-markline.ts | 81 +
examples/examples/ts/line-pen.ts | 75 +
examples/examples/ts/line-polar.ts | 44 +
examples/examples/ts/line-polar2.ts | 49 +
examples/examples/ts/line-race.ts | 90 +
examples/examples/ts/line-sections.ts | 89 +
examples/examples/ts/line-simple.ts | 22 +
examples/examples/ts/line-smooth.ts | 22 +
examples/examples/ts/line-stack.ts | 71 +
examples/examples/ts/line-step.ts | 58 +
examples/examples/ts/line-style.ts | 34 +
examples/examples/ts/line-tooltip-touch.ts | 151 +
examples/examples/ts/line-y-category.ts | 53 +
examples/examples/ts/lines-airline.ts | 66 +
examples/examples/ts/lines-bmap-bus.ts | 150 +
examples/examples/ts/lines-bmap-effect.ts | 197 +
examples/examples/ts/lines-bmap.ts | 138 +
examples/examples/ts/lines-ny.ts | 91 +
examples/examples/ts/map-HK.ts | 98 +
examples/examples/ts/map-bar-morph.ts | 149 +
examples/examples/ts/map-usa.ts | 139 +
examples/examples/ts/mix-line-bar.ts | 81 +
examples/examples/ts/mix-zoom-on-value.ts | 103 +
examples/examples/ts/multiple-x-axis.ts | 97 +
examples/examples/ts/multiple-y-axis.ts | 111 +
examples/examples/ts/parallel-aqi.ts | 219 +
examples/examples/ts/parallel-nutrients.ts | 185 +
examples/examples/ts/parallel-simple.ts | 34 +
.../examples/ts/pictorialBar-bar-transition.ts | 144 +
examples/examples/ts/pictorialBar-body-fill.ts | 147 +
examples/examples/ts/pictorialBar-dotted.ts | 113 +
examples/examples/ts/pictorialBar-forest.ts | 112 +
examples/examples/ts/pictorialBar-hill.ts | 114 +
examples/examples/ts/pictorialBar-spirit.ts | 114 +
examples/examples/ts/pictorialBar-vehicle.ts | 112 +
examples/examples/ts/pictorialBar-velocity.ts | 102 +
examples/examples/ts/pie-alignTo.ts | 97 +
examples/examples/ts/pie-borderRadius.ts | 52 +
examples/examples/ts/pie-custom.ts | 72 +
examples/examples/ts/pie-doughnut.ts | 46 +
examples/examples/ts/pie-labelLine-adjust.ts | 97 +
examples/examples/ts/pie-legend.ts | 82 +
examples/examples/ts/pie-nest.ts | 89 +
examples/examples/ts/pie-parliament-transition.ts | 150 +
examples/examples/ts/pie-pattern.ts | 62 +
examples/examples/ts/pie-rich-text.ts | 137 +
examples/examples/ts/pie-roseType-simple.ts | 46 +
examples/examples/ts/pie-roseType.ts | 84 +
examples/examples/ts/pie-simple.ts | 44 +
examples/examples/ts/polar-roundCap.ts | 51 +
examples/examples/ts/radar-aqi.ts | 211 +
examples/examples/ts/radar-custom.ts | 133 +
examples/examples/ts/radar-multiple.ts | 99 +
examples/examples/ts/radar.ts | 41 +
examples/examples/ts/radar2.ts | 74 +
examples/examples/ts/sankey-energy.ts | 37 +
examples/examples/ts/sankey-itemstyle.ts | 1283 ++++++
examples/examples/ts/sankey-levels.ts | 72 +
examples/examples/ts/sankey-nodeAlign-left.ts | 38 +
examples/examples/ts/sankey-nodeAlign-right.ts | 40 +
examples/examples/ts/sankey-simple.ts | 56 +
examples/examples/ts/sankey-vertical.ts | 49 +
examples/examples/ts/scatter-aggregate-bar.ts | 189 +
examples/examples/ts/scatter-anscombe-quartet.ts | 147 +
examples/examples/ts/scatter-aqi-color.ts | 262 ++
examples/examples/ts/scatter-clustering.ts | 133 +
examples/examples/ts/scatter-effect.ts | 80 +
.../examples/ts/scatter-exponential-regression.ts | 86 +
examples/examples/ts/scatter-label-align-right.ts | 58 +
examples/examples/ts/scatter-label-align-top.ts | 53 +
examples/examples/ts/scatter-large.ts | 72 +
examples/examples/ts/scatter-linear-regression.ts | 269 ++
.../examples/ts/scatter-logarithmic-regression.ts | 135 +
examples/examples/ts/scatter-map-brush.ts | 647 +++
examples/examples/ts/scatter-matrix.ts | 310 ++
examples/examples/ts/scatter-nebula.ts | 78 +
examples/examples/ts/scatter-nutrients-matrix.ts | 430 ++
examples/examples/ts/scatter-nutrients.ts | 179 +
examples/examples/ts/scatter-painter-choice.ts | 63 +
examples/examples/ts/scatter-polar-punchCard.ts | 67 +
.../examples/ts/scatter-polynomial-regression.ts | 87 +
examples/examples/ts/scatter-punchCard.ts | 72 +
examples/examples/ts/scatter-simple.ts | 42 +
examples/examples/ts/scatter-single-axis.ts | 62 +
examples/examples/ts/scatter-stream-visual.ts | 56 +
examples/examples/ts/scatter-symbol-morph.ts | 135 +
examples/examples/ts/scatter-weibo.ts | 105 +
examples/examples/ts/scatter-weight.ts | 267 ++
examples/examples/ts/sunburst-borderRadius.ts | 66 +
examples/examples/ts/sunburst-drink.ts | 725 ++++
examples/examples/ts/sunburst-label-rotate.ts | 98 +
examples/examples/ts/sunburst-monochrome.ts | 178 +
examples/examples/ts/sunburst-simple.ts | 66 +
examples/examples/ts/sunburst-visualMap.ts | 95 +
examples/examples/ts/themeRiver-basic.ts | 100 +
examples/examples/ts/themeRiver-lastfm.ts | 82 +
examples/examples/ts/tree-basic.ts | 60 +
examples/examples/ts/tree-legend.ts | 261 ++
examples/examples/ts/tree-orient-bottom-top.ts | 61 +
examples/examples/ts/tree-orient-right-left.ts | 64 +
examples/examples/ts/tree-polyline.ts | 181 +
examples/examples/ts/tree-radial.ts | 43 +
examples/examples/ts/tree-vertical.ts | 56 +
examples/examples/ts/treemap-disk.ts | 80 +
examples/examples/ts/treemap-drill-down.ts | 100 +
examples/examples/ts/treemap-obama.ts | 225 ++
examples/examples/ts/treemap-show-parent.ts | 94 +
examples/examples/ts/treemap-simple.ts | 35 +
.../examples/ts/treemap-sunburst-transition.ts | 58 +
examples/examples/ts/treemap-visual.ts | 145 +
examples/examples/ts/watermark.ts | 220 +
examples/examples/ts/wind-barb.ts | 269 ++
examples/examples/tsconfig.json | 14 +
examples/examples/types/example.d.ts | 29 +
examples/js/example-bundle.js | 2 +-
examples/js/example-transform-ts-bundle.js | 2 +-
examples/types/echarts.d.ts | 4191 --------------------
examples/zh/editor.html | 6 +-
examples/zh/index.html | 6 +-
examples/zh/view.html | 6 +-
handbook/200.html | 7 +-
handbook/_nuxt/{6146f21.js => 9e600e1.js} | 2 +-
handbook/_nuxt/css/{89761e6.css => 79036f1.css} | 2 +-
handbook/_nuxt/css/{6d160d4.css => d725484.css} | 2 +-
handbook/_nuxt/css/{8cca5bf.css => d80653b.css} | 2 +-
handbook/_nuxt/js/08dc424523de06716042.js | 1 -
handbook/_nuxt/js/08f2b6a6c1138d018d6f.js | 1 +
handbook/_nuxt/js/176331c04836b8b84c4d.js | 1 +
handbook/_nuxt/js/236e22a239457041090b.js | 1 +
...7a24a3cb648e6c4e.js => 261e3287b52f9d5288a7.js} | 2 +-
...e4015f9b5ef7efa9.js => 4207fd6502bce2fe0e71.js} | 2 +-
...fabb3e350003bd5e.js => 487a63005f08ce1c1b9d.js} | 2 +-
handbook/_nuxt/js/4d99f73482ece951d69c.js | 1 +
handbook/_nuxt/js/536829e5c8d97f4ac7c6.js | 1 -
handbook/_nuxt/js/65fbbb1766aac308e2d5.js | 1 -
...ae44195ffebaa08a.js => 75b629822f727a79f6b7.js} | 2 +-
handbook/_nuxt/js/7e6805b6d420a9d924e2.js | 1 -
handbook/_nuxt/js/8660aaf641d4ed6acfd9.js | 1 -
handbook/_nuxt/js/87176580e664767aac13.js | 1 +
handbook/_nuxt/js/87d073533b02b80c9f5a.js | 1 -
handbook/_nuxt/js/91589afc8ac42871ff30.js | 1 -
handbook/_nuxt/js/921d7bcd80bc1b6261e0.js | 1 +
...253966298a392915.js => b1bb3f86faaa0b0b8e0f.js} | 0
handbook/_nuxt/js/b66855952f3a4278ff26.js | 1 +
...64b538994fe3b8b7.js => c86858accdc63ea5924c.js} | 2 +-
handbook/_nuxt/js/eba07e8d9f5c5213982f.js | 1 +
handbook/_nuxt/js/ed27abbf85118ce0e31b.js | 1 -
handbook/_nuxt/js/f6f0c76ff6360f4dff03.js | 1 -
handbook/_nuxt/js/f79944fc11900e6499b3.js | 1 +
handbook/en/basics/download/index.html | 5 +-
handbook/en/basics/help/index.html | 5 +-
handbook/en/basics/import/index.html | 42 +-
handbook/en/basics/inspiration/index.html | 5 +-
handbook/en/basics/release-note/5-2-0/index.html | 9 +-
.../en/basics/release-note/v5-feature/index.html | 5 +-
.../release-note/v5-upgrade-guide/index.html | 15 +-
handbook/en/best-practices/aria/index.html | 7 +-
.../en/best-practices/canvas-vs-svg/index.html | 5 +-
handbook/en/concepts/axis/index.html | 5 +-
handbook/en/concepts/chart-size/index.html | 5 +-
handbook/en/concepts/data-transform/index.html | 25 +-
handbook/en/concepts/dataset/index.html | 5 +-
handbook/en/concepts/event/index.html | 5 +-
handbook/en/concepts/legend/index.html | 5 +-
handbook/en/concepts/style/index.html | 5 +-
handbook/en/concepts/visual-map/index.html | 5 +-
handbook/en/get-started/index.html | 5 +-
.../en/how-to/chart-types/bar/bar-race/index.html | 5 +-
.../en/how-to/chart-types/bar/basic-bar/index.html | 5 +-
.../how-to/chart-types/bar/stacked-bar/index.html | 5 +-
.../en/how-to/chart-types/bar/waterfall/index.html | 5 +-
.../how-to/chart-types/line/area-line/index.html | 5 +-
.../how-to/chart-types/line/basic-line/index.html | 5 +-
.../how-to/chart-types/line/smooth-line/index.html | 5 +-
.../chart-types/line/stacked-line/index.html | 5 +-
.../how-to/chart-types/line/step-line/index.html | 5 +-
.../en/how-to/chart-types/pie/basic-pie/index.html | 5 +-
.../en/how-to/chart-types/pie/doughnut/index.html | 5 +-
handbook/en/how-to/chart-types/pie/rose/index.html | 5 +-
.../chart-types/scatter/basic-scatter/index.html | 5 +-
.../en/how-to/cross-platform/server/index.html | 5 +-
handbook/en/how-to/data/dynamic-data/index.html | 5 +-
handbook/en/how-to/interaction/drag/index.html | 5 +-
handbook/en/how-to/label/rich-text/index.html | 5 +-
handbook/en/index.html | 5 +-
handbook/en/meta/edit-guide/index.html | 5 +-
handbook/index.html | 5 +-
handbook/zh/basics/download/index.html | 5 +-
handbook/zh/basics/help/index.html | 5 +-
handbook/zh/basics/import/index.html | 35 +-
handbook/zh/basics/inspiration/index.html | 5 +-
handbook/zh/basics/release-note/5-2-0/index.html | 9 +-
.../zh/basics/release-note/v5-feature/index.html | 5 +-
.../release-note/v5-upgrade-guide/index.html | 15 +-
handbook/zh/best-practices/aria/index.html | 7 +-
.../zh/best-practices/canvas-vs-svg/index.html | 5 +-
handbook/zh/concepts/axis/index.html | 5 +-
handbook/zh/concepts/chart-size/index.html | 5 +-
handbook/zh/concepts/data-transform/index.html | 25 +-
handbook/zh/concepts/dataset/index.html | 5 +-
handbook/zh/concepts/event/index.html | 5 +-
handbook/zh/concepts/legend/index.html | 5 +-
handbook/zh/concepts/style/index.html | 9 +-
handbook/zh/concepts/visual-map/index.html | 5 +-
handbook/zh/get-started/index.html | 5 +-
.../zh/how-to/chart-types/bar/bar-race/index.html | 5 +-
.../zh/how-to/chart-types/bar/basic-bar/index.html | 5 +-
.../how-to/chart-types/bar/stacked-bar/index.html | 5 +-
.../zh/how-to/chart-types/bar/waterfall/index.html | 5 +-
.../how-to/chart-types/line/area-line/index.html | 5 +-
.../how-to/chart-types/line/basic-line/index.html | 5 +-
.../how-to/chart-types/line/smooth-line/index.html | 5 +-
.../chart-types/line/stacked-line/index.html | 5 +-
.../how-to/chart-types/line/step-line/index.html | 5 +-
.../zh/how-to/chart-types/pie/basic-pie/index.html | 5 +-
.../zh/how-to/chart-types/pie/doughnut/index.html | 5 +-
handbook/zh/how-to/chart-types/pie/rose/index.html | 5 +-
.../chart-types/scatter/basic-scatter/index.html | 5 +-
.../zh/how-to/cross-platform/baidu-app/index.html | 5 +-
.../zh/how-to/cross-platform/server/index.html | 5 +-
.../zh/how-to/cross-platform/wechat-app/index.html | 5 +-
handbook/zh/how-to/data/dynamic-data/index.html | 5 +-
handbook/zh/how-to/interaction/drag/index.html | 5 +-
handbook/zh/how-to/label/rich-text/index.html | 5 +-
handbook/zh/index.html | 5 +-
handbook/zh/meta/edit-guide/index.html | 5 +-
layouts/basic.html | 2 +-
layouts/doc-old.html | 2 +-
layouts/doc.html | 2 +-
layouts/example-simple.html | 6 +-
layouts/example.html | 6 +-
layouts/tool-spa.html | 2 +-
manually-redirect.html | 2 +-
zh/404.html | 2 +-
zh/api.html | 2 +-
zh/builder.html | 2 +-
zh/builder/echarts.html | 2 +-
zh/builder3.html | 2 +-
zh/changelog.html | 2 +-
zh/cheat-sheet.html | 2 +-
zh/coding-standard.html | 2 +-
zh/committers.html | 2 +-
zh/contributing.html | 2 +-
zh/css/main.css | 2 +-
zh/css/only_for_cdn_ready_check.css | 2 +-
zh/demo.html | 2 +-
zh/dependencies.html | 2 +-
zh/download-extension.html | 2 +-
zh/download-map.html | 2 +-
zh/download-theme.html | 2 +-
zh/download.html | 2 +-
zh/download3.html | 2 +-
zh/events.html | 2 +-
zh/events/2021-05-13-iscas.html | 2 +-
zh/events/2021-07-05-apachecon.html | 2 +-
zh/faq.html | 2 +-
zh/feature.html | 2 +-
zh/index.html | 4 +-
zh/maillist.html | 2 +-
zh/nav.html | 2 +
zh/option-gl.html | 2 +-
zh/option.html | 2 +-
zh/option3.html | 2 +-
zh/resources.html | 2 +-
zh/security.html | 2 +-
zh/spreadsheet.html | 8 +-
zh/theme-builder.html | 2 +-
zh/tutorial.html | 2 +-
423 files changed, 27222 insertions(+), 4597 deletions(-)
diff --git a/components/builder.html b/components/builder.html
index 3ce4e63..b8640a3 100644
--- a/components/builder.html
+++ b/components/builder.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/components/download.html b/components/download.html
index f83076b..ef2eab5 100644
--- a/components/download.html
+++ b/components/download.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/en/404.html b/en/404.html
index ab7aba9..fefd340 100644
--- a/en/404.html
+++ b/en/404.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/en/api.html b/en/api.html
index 474e39e..4b5e6bc 100644
--- a/en/api.html
+++ b/en/api.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -10,7 +10,7 @@
/* position: sticky should not have overflow parents.*/
overflow-x: hidden;
}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/en/css/doc-bundle.css?_v_=d2ec90c6e8"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
</script><script type="text/javascript">window.globalArgsExtra = {
baseUrl: 'documents/api-parts',
diff --git a/en/builder.html b/en/builder.html
index f184bb9..5467ebf 100644
--- a/en/builder.html
+++ b/en/builder.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>ECharts Online Builder</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
fetch('https://data.jsdelivr.com/v1/package/npm/echarts', {
mode: 'cors'
diff --git a/en/builder/echarts.html b/en/builder/echarts.html
index 5587ab3..f9f1065 100644
--- a/en/builder/echarts.html
+++ b/en/builder/echarts.html
@@ -54,7 +54,7 @@
'rollup': 'lib/rollup.browser',
'transformDev': 'lib/transform-dev-bundle'
},
- urlArgs: 'v=1630499963508'
+ urlArgs: 'v=1631700580897'
});
require(['build']);
diff --git a/en/changelog.html b/en/changelog.html
index dc5165d..c738127 100644
--- a/en/changelog.html
+++ b/en/changelog.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Changelog - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
<div class="time">2021-09-01</div>
<h4 id="break-changes">Break Changes</h4>
diff --git a/en/cheat-sheet.html b/en/cheat-sheet.html
index 4c76334..5b79d0b 100644
--- a/en/cheat-sheet.html
+++ b/en/cheat-sheet.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Cheat Sheet - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
</script><script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script><script src="https://echarts.apache.org/en/js/cheat-sheet-en.js?_v_=f31f64abe3"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/en/coding-standard.html b/en/coding-standard.html
index 6613b36..f336b09 100644
--- a/en/coding-standard.html
+++ b/en/coding-standard.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Coding Standard - Apache ECharts</title><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/vendors/prettify/prettify.css?_v_=20200710_1"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/prettify.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/lang-css.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery [...]
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
<h3 id="file">File</h3>
<p><strong>[MUST]</strong> JavaScript Source files must be encoded in UTF-8 without BOM.</p>
<h3 id="indentation">Indentation</h3>
diff --git a/en/committers.html b/en/committers.html
index 981a786..5b50cf4 100644
--- a/en/committers.html
+++ b/en/committers.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Committers - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
(function() {
var hm = document.createElement("script");
diff --git a/en/contributing.html b/en/contributing.html
index 96720df..9fc21c0 100644
--- a/en/contributing.html
+++ b/en/contributing.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/en/css/main.css b/en/css/main.css
index ca718d9..6eaea05 100644
--- a/en/css/main.css
+++ b/en/css/main.css
@@ -1 +1 @@
-@font-face{font-family:'iconfont';src:url("font/iconfont.eot");src:url("font/iconfont.eot?#iefix") format("embedded-opentype"),url("font/iconfont.woff") format("woff"),url("font/iconfont.ttf") format("truetype"),url("font/iconfont.svg#iconfont") format("svg")}.iconfont{font-family:"iconfont" !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@font-face{font-family:'Open Sa [...]
+@font-face{font-family:'iconfont';src:url("font/iconfont.eot");src:url("font/iconfont.eot?#iefix") format("embedded-opentype"),url("font/iconfont.woff") format("woff"),url("font/iconfont.ttf") format("truetype"),url("font/iconfont.svg#iconfont") format("svg")}.iconfont{font-family:"iconfont" !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@font-face{font-family:'Open Sa [...]
diff --git a/en/dependencies.html b/en/dependencies.html
index d9ac423..a76d9c1 100644
--- a/en/dependencies.html
+++ b/en/dependencies.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Dependencies - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
(function() {
var hm = document.createElement("script");
diff --git a/en/download-extension.html b/en/download-extension.html
index 5e06480..99150be 100644
--- a/en/download-extension.html
+++ b/en/download-extension.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Download Extensions - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
(function() {
var hm = document.createElement("script");
diff --git a/en/download-map.html b/en/download-map.html
index 0d78de9..216d8d8 100644
--- a/en/download-map.html
+++ b/en/download-map.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Download Maps - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
</script><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20 [...]
(function() {
var hm = document.createElement("script");
diff --git a/en/download-theme.html b/en/download-theme.html
index 6b8b07e..abba430 100644
--- a/en/download-theme.html
+++ b/en/download-theme.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Download Themes - Apache ECharts</title><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/vendors/prettify/prettify.css?_v_=20200710_1"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
<!-- import vintage theme -->
<script src="theme/vintage.js"></script>
<script>
diff --git a/en/download.html b/en/download.html
index 40c11e2..2b26225 100644
--- a/en/download.html
+++ b/en/download.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Download - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
#download-main .d-section-version .circle-wrap {
line-height: 120px;
font-size: 20px;
diff --git a/en/events.html b/en/events.html
index 8d3ac22..ddaec4e 100644
--- a/en/events.html
+++ b/en/events.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Events - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="Events - Apache ECharts"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apach [...]
+<!--[if (gt IE 8)|!(IE)]><body class="Events - Apache ECharts"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apach [...]
elements_selector: ".lazy"
};
document.getElementById('nav-contribute').className = 'active';</script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
diff --git a/en/events/2021-05-13-iscas.html b/en/events/2021-05-13-iscas.html
index 4eb21d5..4037155 100644
--- a/en/events/2021-05-13-iscas.html
+++ b/en/events/2021-05-13-iscas.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Events - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="Events - Apache ECharts"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apach [...]
+<!--[if (gt IE 8)|!(IE)]><body class="Events - Apache ECharts"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apach [...]
elements_selector: ".lazy"
};
document.getElementById('nav-contribute').className = 'active';</script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
diff --git a/en/events/2021-07-05-apachecon.html b/en/events/2021-07-05-apachecon.html
index 88a0675..8387fe6 100644
--- a/en/events/2021-07-05-apachecon.html
+++ b/en/events/2021-07-05-apachecon.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Events - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="Events - Apache ECharts"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apach [...]
+<!--[if (gt IE 8)|!(IE)]><body class="Events - Apache ECharts"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apach [...]
elements_selector: ".lazy"
};
document.getElementById('nav-contribute').className = 'active';</script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
diff --git a/en/faq.html b/en/faq.html
index 63f665c..0841da9 100644
--- a/en/faq.html
+++ b/en/faq.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>FAQ - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="FAQ - Apache ECharts"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.o [...]
+<!--[if (gt IE 8)|!(IE)]><body class="FAQ - Apache ECharts"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.o [...]
console.log(params);
});</code></pre><p>Please refer to <a href="https://www.makeapie.com/editor.html?c=xHyqn_rQ6g">this example</a>.</p><h3>How to make my custom map?</h3><p>The ECharts map is <a href="https://github.com/apache/echarts/blob/8eeb7e5abe207d0536c62ce1f4ddecc6adfdf85e/src/util/mapData/rawData/encode.js">additionally encoded</a> from original coordinates. You can use the <a href="https://github.com/giscafer/mapshaper-plus">mapshaper-plus tool</a> to upload a custom geojson file and then generate [...]
(function() {
diff --git a/en/feature.html b/en/feature.html
index a5df077..d45ec71 100644
--- a/en/feature.html
+++ b/en/feature.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Features - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
elements_selector: 'iframe'
};</script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
diff --git a/en/index.html b/en/index.html
index 0accdc7..9cde938 100644
--- a/en/index.html
+++ b/en/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,9 +7,9 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Apache ECharts</title><script src="https://cdn.jsdelivr.net/npm/scrollreveal@4.0.7/dist/scrollreveal.min.js"></script><script src="https://cdn.jsdelivr.net/npm/lottie-web@5.7.6/build/player/lottie.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"> [...]
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
elements_selector: ".lazy"
-};</script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script><script src="https://echarts.apache.org/en/js/index.js?_v_=1630499963508"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+};</script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script><script src="https://echarts.apache.org/en/js/index.js?_v_=1631700580897"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/en/maillist.html b/en/maillist.html
index ae61c44..946ace7 100644
--- a/en/maillist.html
+++ b/en/maillist.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Mailing List - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
(function() {
var hm = document.createElement("script");
diff --git a/en/nav.html b/en/nav.html
index f682309..7718b96 100644
--- a/en/nav.html
+++ b/en/nav.html
@@ -1,3 +1,5 @@
<template>
+<template>
<nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://e [...]
+</template>
</template>
\ No newline at end of file
diff --git a/en/option-gl.html b/en/option-gl.html
index 2786c17..920f7ed 100644
--- a/en/option-gl.html
+++ b/en/option-gl.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -10,7 +10,7 @@
/* position: sticky should not have overflow parents.*/
overflow-x: hidden;
}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/en/css/doc-bundle.css?_v_=d2ec90c6e8"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
</script><script type="text/javascript">window.globalArgsExtra = {
baseUrl: 'documents/option-gl-parts',
diff --git a/en/option.html b/en/option.html
index b67aa5e..92ec425 100644
--- a/en/option.html
+++ b/en/option.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -10,7 +10,7 @@
/* position: sticky should not have overflow parents.*/
overflow-x: hidden;
}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/en/css/doc-bundle.css?_v_=d2ec90c6e8"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
</script><script type="text/javascript">window.globalArgsExtra = {
baseUrl: 'documents/option-parts',
diff --git a/en/option3.html b/en/option3.html
index 2f34a32..89f8dee 100644
--- a/en/option3.html
+++ b/en/option3.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="ECharts Configurations"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache [...]
+<!--[if (gt IE 8)|!(IE)]><body class="ECharts Configurations"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache [...]
</script><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20 [...]
(function() {
var hm = document.createElement("script");
diff --git a/en/resources.html b/en/resources.html
index 5ebe77b..f8fedcd 100644
--- a/en/resources.html
+++ b/en/resources.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/en/security.html b/en/security.html
index 9523441..b2b1711 100644
--- a/en/security.html
+++ b/en/security.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/en/spreadsheet.html b/en/spreadsheet.html
index 53e0457..73eb4bd 100644
--- a/en/spreadsheet.html
+++ b/en/spreadsheet.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,12 +7,12 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Spreadsheet Tool - Apache ECharts</title><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/vendors/handsontable/0.26.1/dist/handsontable.full.min.css?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/spreadsheet.css?_v_=0fe8afb287"><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><bod [...]
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
var vendorPath = '../vendors';
define('globalArgs', extend({
- version: '1630499963508',
+ version: '1631700580897',
basePath: './'
}, window.globalArgsExtra || {}));
@@ -31,7 +31,7 @@ require.config({
numeral: vendorPath + '/numeral/1.4.7/numeral.min',
immutable: vendorPath + '/immutable/3.7.4/dist/immutable'
},
- urlArgs: '_v_=1630499963508'
+ urlArgs: '_v_=1631700580897'
});
require(['spreadsheet/spreadsheet'], function (spreadsheet) {
diff --git a/en/theme-builder.html b/en/theme-builder.html
index a72d35d..9314ee5 100644
--- a/en/theme-builder.html
+++ b/en/theme-builder.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Theme Builder - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlightjs@9.16.2/styles/default.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlightjs@9.16.2/styles/github.css">
<link rel="stylesheet" href="./theme-builder/main.css">
diff --git a/en/tutorial.html b/en/tutorial.html
index 49f54e4..16dce3d 100644
--- a/en/tutorial.html
+++ b/en/tutorial.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -10,7 +10,7 @@
/* position: sticky should not have overflow parents.*/
overflow-x: hidden;
}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/en/css/doc-bundle.css?_v_=d2ec90c6e8"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
</script><script type="text/javascript">window.globalArgsExtra = {
baseUrl: 'documents/tutorial-parts',
diff --git a/examples/data/calendar-charts.js b/examples/data/calendar-charts.js
index 39aaad7..9b0cbd2 100644
--- a/examples/data/calendar-charts.js
+++ b/examples/data/calendar-charts.js
@@ -1,7 +1,7 @@
/*
title: Calendar Charts
category: 'calendar, scatter'
-titleCN: 日力图
+titleCN: 日历图
shotWidth: 1000
difficulty: 11
*/
diff --git a/examples/data/calendar-horizontal.js b/examples/data/calendar-horizontal.js
index 9dde1f1..c9d9015 100644
--- a/examples/data/calendar-horizontal.js
+++ b/examples/data/calendar-horizontal.js
@@ -1,7 +1,7 @@
/*
title: Calendar Heatmap Horizontal
category: calendar
-titleCN: 横向日力图
+titleCN: 横向日历图
shotWidth: 900
difficulty: 2
*/
diff --git a/examples/data/candlestick-brush.js b/examples/data/candlestick-brush.js
index 9ea6029..36c4da7 100644
--- a/examples/data/candlestick-brush.js
+++ b/examples/data/candlestick-brush.js
@@ -1,7 +1,7 @@
/*
title: Candlestick Brush
category: candlestick
-titleCN: 日力图刷选
+titleCN: 日历图刷选
*/
var upColor = '#00da3c';
diff --git a/examples/data/scatter-symbol-morph.js b/examples/data/scatter-symbol-morph.js
index c3006a5..e17f440 100644
--- a/examples/data/scatter-symbol-morph.js
+++ b/examples/data/scatter-symbol-morph.js
@@ -44,6 +44,7 @@ var options = [{
type: 'scatter',
data: data,
symbol: 'roundRect',
+ symbolKeepAspect: true,
universalTransition: true,
symbolSize: 50
}
@@ -56,36 +57,71 @@ var options = [{
}]
},
+
{
+ // heart
series: [{
- type: 'scatter',
- symbol: 'diamond'
+ symbol: 'path://M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z',
}]
},
{
+ // happy
series: [{
- symbol: 'path://M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z',
+ symbol: 'path://M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM22 8c1.105 0 2 1.343 2 3s-0.895 3-2 3-2-1.343-2-3 0.895-3 2-3zM10 8c1.105 0 2 1.343 2 3s-0.895 3-2 3-2-1.343-2-3 0.895-3 2-3zM16 28c-5.215 0-9.544-4.371-10-9.947 2.93 1.691 6.377 2.658 10 2.658s7.070-0.963 10-2.654c-0.455 5.576-4.785 9.942-10 9.942z',
}]
},
{
+ // evil
series: [{
- symbol: 'path://M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM22 8c1.105 0 2 1.343 2 3s-0.895 3-2 3-2-1.343-2-3 0.895-3 2-3zM10 8c1.105 0 2 1.343 2 3s-0.895 3-2 3-2-1.343-2-3 0.895-3 2-3zM16 28c-5.215 0-9.544-4.371-10-9.947 2.93 1.691 6.377 2.658 10 2.658s7.070-0.963 10-2.654c-0.455 5.576-4.785 9.942-10 9.942z',
+ symbol: 'path://M32 2c0-1.422-0.298-2.775-0.833-4-1.049 2.401-3.014 4.31-5.453 5.287-2.694-2.061-6.061-3.287-9.714-3.287s-7.021 1.226-9.714 3.287c-2.439-0.976-4.404-2.886-5.453-5.287-0.535 1.225-0.833 2.578-0.833 4 0 2.299 0.777 4.417 2.081 6.106-1.324 2.329-2.081 5.023-2.081 7.894 0 8.837 7.163 16 16 16s16-7.163 16-16c0-2.871-0.757-5.565-2.081-7.894 1.304-1.689 2.081-3.806 2.081-6.106zM18.003 11.891c0.064-1.483 1.413-2.467 2.55-3.036 1.086-0.543 2.16-0.814 2.205-0.826 0.536-0.13 [...]
}]
},
{
+ // hipster
series: [{
- symbol: 'path://M32 2c0-1.422-0.298-2.775-0.833-4-1.049 2.401-3.014 4.31-5.453 5.287-2.694-2.061-6.061-3.287-9.714-3.287s-7.021 1.226-9.714 3.287c-2.439-0.976-4.404-2.886-5.453-5.287-0.535 1.225-0.833 2.578-0.833 4 0 2.299 0.777 4.417 2.081 6.106-1.324 2.329-2.081 5.023-2.081 7.894 0 8.837 7.163 16 16 16s16-7.163 16-16c0-2.871-0.757-5.565-2.081-7.894 1.304-1.689 2.081-3.806 2.081-6.106zM18.003 11.891c0.064-1.483 1.413-2.467 2.55-3.036 1.086-0.543 2.16-0.814 2.205-0.826 0.536-0.13 [...]
+ symbol: 'path://M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM22 8c1.105 0 2 0.895 2 2s-0.895 2-2 2-2-0.895-2-2 0.895-2 2-2zM10 8c1.105 0 2 0.895 2 2s-0.895 2-2 2-2-0.895-2-2 0.895-2 2-2zM16.994 21.23c-0.039-0.035-0.078-0.072-0.115-0.109-0.586-0.586-0.878-1.353-0.879-2.121-0 0.768-0.293 1.535-0.879 2.121-0.038 0.038-0.076 0.074-0.115 0.109-2.704 2.453-9.006-0.058-9.006-3.23 1.938 1.25 3.452 0.306 4.879-1.121 1.172-1.172 3.071-1.172 4.243 0 0.586 0.58 [...]
+ }]
+},
+
+{
+ // shocked
+ series: [{
+ symbol: 'path://M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM10 14c-1.105 0-2-1.343-2-3s0.895-3 2-3 2 1.343 2 3-0.895 3-2 3zM16 26c-2.209 0-4-1.791-4-4s1.791-4 4-4c2.209 0 4 1.791 4 4s-1.791 4-4 4zM22 14c-1.105 0-2-1.343-2-3s0.895-3 2-3 2 1.343 2 3-0.895 3-2 3z',
+ }]
+},
+
+{
+ // pie chart
+ series: [{
+ symbol: 'path://M14 18v-14c-7.732 0-14 6.268-14 14s6.268 14 14 14 14-6.268 14-14c0-2.251-0.532-4.378-1.476-6.262l-12.524 6.262zM28.524 7.738c-2.299-4.588-7.043-7.738-12.524-7.738v14l12.524-6.262z'
+ }]
+},
+
+{
+ // users
+ series: [{
+ symbol: 'path://M10.225 24.854c1.728-1.13 3.877-1.989 6.243-2.513-0.47-0.556-0.897-1.176-1.265-1.844-0.95-1.726-1.453-3.627-1.453-5.497 0-2.689 0-5.228 0.956-7.305 0.928-2.016 2.598-3.265 4.976-3.734-0.529-2.39-1.936-3.961-5.682-3.961-6 0-6 4.029-6 9 0 3.096 1.797 6.191 4 7.432v1.649c-6.784 0.555-12 3.888-12 7.918h8.719c0.454-0.403 0.956-0.787 1.506-1.146zM24 24.082v-1.649c2.203-1.241 4-4.337 4-7.432 0-4.971 0-9-6-9s-6 4.029-6 9c0 3.096 1.797 6.191 4 7.432v1.649c-6.784 0.555-12 3 [...]
}]
},
{
+ // mug
series: [{
- symbol: 'path://M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z',
+ symbol: 'path://M30 10h-6v-3c0-2.761-5.373-5-12-5s-12 2.239-12 5v20c0 2.761 5.373 5 12 5s12-2.239 12-5v-3h6c1.105 0 2-0.895 2-2v-10c0-1.105-0.895-2-2-2zM5.502 8.075c-1.156-0.381-1.857-0.789-2.232-1.075 0.375-0.286 1.075-0.694 2.232-1.075 1.811-0.597 4.118-0.925 6.498-0.925s4.688 0.329 6.498 0.925c1.156 0.381 1.857 0.789 2.232 1.075-0.375 0.286-1.076 0.694-2.232 1.075-1.811 0.597-4.118 0.925-6.498 0.925s-4.688-0.329-6.498-0.925zM28 20h-4v-6h4v6z'
}]
-}];
+},
+
+{
+ // plane
+ series: [{
+ symbol: 'path://M24 19.999l-5.713-5.713 13.713-10.286-4-4-17.141 6.858-5.397-5.397c-1.556-1.556-3.728-1.928-4.828-0.828s-0.727 3.273 0.828 4.828l5.396 5.396-6.858 17.143 4 4 10.287-13.715 5.713 5.713v7.999h4l2-6 6-2v-4l-7.999 0z'
+ }]
+}
+
+];
var optionIndex = 0;
@@ -94,4 +130,4 @@ option = options[optionIndex];
setInterval(function () {
optionIndex = (optionIndex + 1) % options.length;
myChart.setOption(options[optionIndex]);
-}, 1000);
\ No newline at end of file
+}, 700);
\ No newline at end of file
diff --git a/examples/en/editor.html b/examples/en/editor.html
index 817c050..6ee6937 100644
--- a/examples/en/editor.html
+++ b/examples/en/editor.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -10,12 +10,12 @@
/* position: sticky should not have overflow parents.*/
overflow-x: hidden;
}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/examples/css/example-bundle.css?_v_=4e03a5649f"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body>< [...]
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
</script><script type="text/javascript">window.globalArgsExtra = {
page: 'editor',
locale: 'en'
-};</script><script type="text/javascript">window.globalArgsExtra.version = '1630499963508';
+};</script><script type="text/javascript">window.globalArgsExtra.version = '1631700580897';
window.globalArgsExtra.cdnRoot = EC_WWW_CDN_PAY_ROOT + '/examples';
echartsExample.init('#ec-example-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
diff --git a/examples/en/index.html b/examples/en/index.html
index 72d1043..36816b2 100644
--- a/examples/en/index.html
+++ b/examples/en/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -10,12 +10,12 @@
/* position: sticky should not have overflow parents.*/
overflow-x: hidden;
}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/examples/css/example-bundle.css?_v_=4e03a5649f"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body>< [...]
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
</script><script type="text/javascript">window.globalArgsExtra = {
page: 'explore',
locale: 'en'
-};</script><script type="text/javascript">window.globalArgsExtra.version = '1630499963508';
+};</script><script type="text/javascript">window.globalArgsExtra.version = '1631700580897';
window.globalArgsExtra.cdnRoot = EC_WWW_CDN_PAY_ROOT + '/examples';
echartsExample.init('#ec-example-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
diff --git a/examples/en/view.html b/examples/en/view.html
index ff38b3c..cd6e4ef 100644
--- a/examples/en/view.html
+++ b/examples/en/view.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boot [...]
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -10,11 +10,11 @@
/* position: sticky should not have overflow parents.*/
overflow-x: hidden;
}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/examples/css/example-bundle.css?_v_=4e03a5649f"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body>< [...]
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/en/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target= [...]
</script><script type="text/javascript">window.globalArgsExtra = {
page: 'view',
locale: 'en'
-};</script><script type="text/javascript">window.globalArgsExtra.version = '1630499963508';
+};</script><script type="text/javascript">window.globalArgsExtra.version = '1631700580897';
window.globalArgsExtra.cdnRoot = EC_WWW_CDN_PAY_ROOT + '/examples';
echartsExample.init('#ec-example-main', window.globalArgsExtra);
diff --git a/examples/examples/ts/area-basic.ts b/examples/examples/ts/area-basic.ts
new file mode 100644
index 0000000..13cfbc5
--- /dev/null
+++ b/examples/examples/ts/area-basic.ts
@@ -0,0 +1,24 @@
+/*
+title: Basic area chart
+titleCN: 基础面积图
+category: line
+difficulty: 1
+*/
+
+option = {
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [{
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
+ type: 'line',
+ areaStyle: {}
+ }]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/area-pieces.ts b/examples/examples/ts/area-pieces.ts
new file mode 100644
index 0000000..70f3ea5
--- /dev/null
+++ b/examples/examples/ts/area-pieces.ts
@@ -0,0 +1,67 @@
+/*
+title: Area Pieces
+titleCN: 折线图区域高亮
+category: 'line, visualMap'
+difficulty: 3
+*/
+
+option = {
+ xAxis: {
+ type: 'category',
+ boundaryGap: false
+ },
+ yAxis: {
+ type: 'value',
+ boundaryGap: [0, '30%']
+ },
+ visualMap: {
+ type: 'piecewise',
+ show: false,
+ dimension: 0,
+ seriesIndex: 0,
+ pieces: [{
+ gt: 1,
+ lt: 3,
+ color: 'rgba(0, 0, 180, 0.4)'
+ }, {
+ gt: 5,
+ lt: 7,
+ color: 'rgba(0, 0, 180, 0.4)'
+ }]
+ },
+ series: [
+ {
+ type: 'line',
+ smooth: 0.6,
+ symbol: 'none',
+ lineStyle: {
+ color: '#5470C6',
+ width: 5
+ },
+ markLine: {
+ symbol: ['none', 'none'],
+ label: {show: false},
+ data: [
+ {xAxis: 1},
+ {xAxis: 3},
+ {xAxis: 5},
+ {xAxis: 7}
+ ]
+ },
+ areaStyle: {},
+ data: [
+ ['2019-10-10', 200],
+ ['2019-10-11', 560],
+ ['2019-10-12', 750],
+ ['2019-10-13', 580],
+ ['2019-10-14', 250],
+ ['2019-10-15', 300],
+ ['2019-10-16', 450],
+ ['2019-10-17', 300],
+ ['2019-10-18', 100]
+ ]
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/area-rainfall.ts b/examples/examples/ts/area-rainfall.ts
new file mode 100644
index 0000000..a8d833b
--- /dev/null
+++ b/examples/examples/ts/area-rainfall.ts
@@ -0,0 +1,190 @@
+/*
+title: Rainfall
+titleCN: 雨量流量关系图
+category: line
+difficulty: 5
+*/
+
+option = {
+ title: {
+ text: 'Rainfall and Flow Relationship',
+ left: 'center',
+ textAlign: 'right'
+ },
+ grid: {
+ bottom: 80
+ },
+ toolbox: {
+ feature: {
+ dataZoom: {
+ yAxisIndex: 'none'
+ },
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ animation: false,
+ label: {
+ backgroundColor: '#505765'
+ }
+ }
+ },
+ legend: {
+ data: ['Flow', 'Rainfall'],
+ left: 10
+ },
+ dataZoom: [
+ {
+ show: true,
+ realtime: true,
+ start: 65,
+ end: 85
+ },
+ {
+ type: 'inside',
+ realtime: true,
+ start: 65,
+ end: 85
+ }
+ ],
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ axisLine: {onZero: false},
+ data: [
+ '2009/6/12 2:00', '2009/6/12 3:00', '2009/6/12 4:00', '2009/6/12 5:00', '2009/6/12 6:00', '2009/6/12 7:00', '2009/6/12 8:00', '2009/6/12 9:00', '2009/6/12 10:00', '2009/6/12 11:00', '2009/6/12 12:00', '2009/6/12 13:00', '2009/6/12 14:00', '2009/6/12 15:00', '2009/6/12 16:00', '2009/6/12 17:00', '2009/6/12 18:00', '2009/6/12 19:00', '2009/6/12 20:00', '2009/6/12 21:00', '2009/6/12 22:00', '2009/6/12 23:00',
+ '2009/6/13 0:00', '2009/6/13 1:00', '2009/6/13 2:00', '2009/6/13 3:00', '2009/6/13 4:00', '2009/6/13 5:00', '2009/6/13 6:00', '2009/6/13 7:00', '2009/6/13 8:00', '2009/6/13 9:00', '2009/6/13 10:00', '2009/6/13 11:00', '2009/6/13 12:00', '2009/6/13 13:00', '2009/6/13 14:00', '2009/6/13 15:00', '2009/6/13 16:00', '2009/6/13 17:00', '2009/6/13 18:00', '2009/6/13 19:00', '2009/6/13 20:00', '2009/6/13 21:00', '2009/6/13 22:00', '2009/6/13 23:00',
+ '2009/6/14 0:00', '2009/6/14 1:00', '2009/6/14 2:00', '2009/6/14 3:00', '2009/6/14 4:00', '2009/6/14 5:00', '2009/6/14 6:00', '2009/6/14 7:00', '2009/6/14 8:00', '2009/6/14 9:00', '2009/6/14 10:00', '2009/6/14 11:00', '2009/6/14 12:00', '2009/6/14 13:00', '2009/6/14 14:00', '2009/6/14 15:00', '2009/6/14 16:00', '2009/6/14 17:00', '2009/6/14 18:00', '2009/6/14 19:00', '2009/6/14 20:00', '2009/6/14 21:00', '2009/6/14 22:00', '2009/6/14 23:00',
+ '2009/6/15 0:00', '2009/6/15 1:00', '2009/6/15 2:00', '2009/6/15 3:00', '2009/6/15 4:00', '2009/6/15 5:00', '2009/6/15 6:00', '2009/6/15 7:00', '2009/6/15 8:00', '2009/6/15 9:00', '2009/6/15 10:00', '2009/6/15 11:00', '2009/6/15 12:00', '2009/6/15 13:00', '2009/6/15 14:00', '2009/6/15 15:00', '2009/6/15 16:00', '2009/6/15 17:00', '2009/6/15 18:00', '2009/6/15 19:00', '2009/6/15 20:00', '2009/6/15 21:00', '2009/6/15 22:00', '2009/6/15 23:00',
+ '2009/6/15 0:00', '2009/6/16 1:00', '2009/6/16 2:00', '2009/6/16 3:00', '2009/6/16 4:00', '2009/6/16 5:00', '2009/6/16 6:00', '2009/6/16 7:00', '2009/6/16 8:00', '2009/6/16 9:00', '2009/6/16 10:00', '2009/6/16 11:00', '2009/6/16 12:00', '2009/6/16 13:00', '2009/6/16 14:00', '2009/6/16 15:00', '2009/6/16 16:00', '2009/6/16 17:00', '2009/6/16 18:00', '2009/6/16 19:00', '2009/6/16 20:00', '2009/6/16 21:00', '2009/6/16 22:00', '2009/6/16 23:00',
+ '2009/6/15 0:00', '2009/6/17 1:00', '2009/6/17 2:00', '2009/6/17 3:00', '2009/6/17 4:00', '2009/6/17 5:00', '2009/6/17 6:00', '2009/6/17 7:00', '2009/6/17 8:00', '2009/6/17 9:00', '2009/6/17 10:00', '2009/6/17 11:00', '2009/6/17 12:00', '2009/6/17 13:00', '2009/6/17 14:00', '2009/6/17 15:00', '2009/6/17 16:00', '2009/6/17 17:00', '2009/6/17 18:00', '2009/6/17 19:00', '2009/6/17 20:00', '2009/6/17 21:00', '2009/6/17 22:00', '2009/6/17 23:00',
+ '2009/6/18 0:00', '2009/6/18 1:00', '2009/6/18 2:00', '2009/6/18 3:00', '2009/6/18 4:00', '2009/6/18 5:00', '2009/6/18 6:00', '2009/6/18 7:00', '2009/6/18 8:00', '2009/6/18 9:00', '2009/6/18 10:00', '2009/6/18 11:00', '2009/6/18 12:00', '2009/6/18 13:00', '2009/6/18 14:00', '2009/6/18 15:00', '2009/6/18 16:00', '2009/6/18 17:00', '2009/6/18 18:00', '2009/6/18 19:00', '2009/6/18 20:00', '2009/6/18 21:00', '2009/6/18 22:00', '2009/6/18 23:00',
+ '2009/6/15 0:00', '2009/6/19 1:00', '2009/6/19 2:00', '2009/6/19 3:00', '2009/6/19 4:00', '2009/6/19 5:00', '2009/6/19 6:00', '2009/6/19 7:00', '2009/6/19 8:00', '2009/6/19 9:00', '2009/6/19 10:00', '2009/6/19 11:00', '2009/6/19 12:00', '2009/6/19 13:00', '2009/6/19 14:00', '2009/6/19 15:00', '2009/6/19 16:00', '2009/6/19 17:00', '2009/6/19 18:00', '2009/6/19 19:00', '2009/6/19 20:00', '2009/6/19 21:00', '2009/6/19 22:00', '2009/6/19 23:00',
+ '2009/6/20 0:00', '2009/6/20 1:00', '2009/6/20 2:00', '2009/6/20 3:00', '2009/6/20 4:00', '2009/6/20 5:00', '2009/6/20 6:00', '2009/6/20 7:00', '2009/6/20 8:00', '2009/6/20 9:00', '2009/6/20 10:00', '2009/6/20 11:00', '2009/6/20 12:00', '2009/6/20 13:00', '2009/6/20 14:00', '2009/6/20 15:00', '2009/6/20 16:00', '2009/6/20 17:00', '2009/6/20 18:00', '2009/6/20 19:00', '2009/6/20 20:00', '2009/6/20 21:00', '2009/6/20 22:00', '2009/6/20 23:00',
+ '2009/6/21 0:00', '2009/6/21 1:00', '2009/6/21 2:00', '2009/6/21 3:00', '2009/6/21 4:00', '2009/6/21 5:00', '2009/6/21 6:00', '2009/6/21 7:00', '2009/6/21 8:00', '2009/6/21 9:00', '2009/6/21 10:00', '2009/6/21 11:00', '2009/6/21 12:00', '2009/6/21 13:00', '2009/6/21 14:00', '2009/6/21 15:00', '2009/6/21 16:00', '2009/6/21 17:00', '2009/6/21 18:00', '2009/6/21 19:00', '2009/6/21 20:00', '2009/6/21 21:00', '2009/6/21 22:00', '2009/6/21 23:00',
+ '2009/6/22 0:00', '2009/6/22 1:00', '2009/6/22 2:00', '2009/6/22 3:00', '2009/6/22 4:00', '2009/6/22 5:00', '2009/6/22 6:00', '2009/6/22 7:00', '2009/6/22 8:00', '2009/6/22 9:00', '2009/6/22 10:00', '2009/6/22 11:00', '2009/6/22 12:00', '2009/6/22 13:00', '2009/6/22 14:00', '2009/6/22 15:00', '2009/6/22 16:00', '2009/6/22 17:00', '2009/6/22 18:00', '2009/6/22 19:00', '2009/6/22 20:00', '2009/6/22 21:00', '2009/6/22 22:00', '2009/6/22 23:00',
+ '2009/6/23 0:00', '2009/6/23 1:00', '2009/6/23 2:00', '2009/6/23 3:00', '2009/6/23 4:00', '2009/6/23 5:00', '2009/6/23 6:00', '2009/6/23 7:00', '2009/6/23 8:00', '2009/6/23 9:00', '2009/6/23 10:00', '2009/6/23 11:00', '2009/6/23 12:00', '2009/6/23 13:00', '2009/6/23 14:00', '2009/6/23 15:00', '2009/6/23 16:00', '2009/6/23 17:00', '2009/6/23 18:00', '2009/6/23 19:00', '2009/6/23 20:00', '2009/6/23 21:00', '2009/6/23 22:00', '2009/6/23 23:00',
+ '2009/6/24 0:00', '2009/6/24 1:00', '2009/6/24 2:00', '2009/6/24 3:00', '2009/6/24 4:00', '2009/6/24 5:00', '2009/6/24 6:00', '2009/6/24 7:00', '2009/6/24 8:00', '2009/6/24 9:00', '2009/6/24 10:00', '2009/6/24 11:00', '2009/6/24 12:00', '2009/6/24 13:00', '2009/6/24 14:00', '2009/6/24 15:00', '2009/6/24 16:00', '2009/6/24 17:00', '2009/6/24 18:00', '2009/6/24 19:00', '2009/6/24 20:00', '2009/6/24 21:00', '2009/6/24 22:00', '2009/6/24 23:00',
+ '2009/6/25 0:00', '2009/6/25 1:00', '2009/6/25 2:00', '2009/6/25 3:00', '2009/6/25 4:00', '2009/6/25 5:00', '2009/6/25 6:00', '2009/6/25 7:00', '2009/6/25 8:00', '2009/6/25 9:00', '2009/6/25 10:00', '2009/6/25 11:00', '2009/6/25 12:00', '2009/6/25 13:00', '2009/6/25 14:00', '2009/6/25 15:00', '2009/6/25 16:00', '2009/6/25 17:00', '2009/6/25 18:00', '2009/6/25 19:00', '2009/6/25 20:00', '2009/6/25 21:00', '2009/6/25 22:00', '2009/6/25 23:00',
+ '2009/6/26 0:00', '2009/6/26 1:00', '2009/6/26 2:00', '2009/6/26 3:00', '2009/6/26 4:00', '2009/6/26 5:00', '2009/6/26 6:00', '2009/6/26 7:00', '2009/6/26 8:00', '2009/6/26 9:00', '2009/6/26 10:00', '2009/6/26 11:00', '2009/6/26 12:00', '2009/6/26 13:00', '2009/6/26 14:00', '2009/6/26 15:00', '2009/6/26 16:00', '2009/6/26 17:00', '2009/6/26 18:00', '2009/6/26 19:00', '2009/6/26 20:00', '2009/6/26 21:00', '2009/6/26 22:00', '2009/6/26 23:00',
+ '2009/6/27 0:00', '2009/6/27 1:00', '2009/6/27 2:00', '2009/6/27 3:00', '2009/6/27 4:00', '2009/6/27 5:00', '2009/6/27 6:00', '2009/6/27 7:00', '2009/6/27 8:00', '2009/6/27 9:00', '2009/6/27 10:00', '2009/6/27 11:00', '2009/6/27 12:00', '2009/6/27 13:00', '2009/6/27 14:00', '2009/6/27 15:00', '2009/6/27 16:00', '2009/6/27 17:00', '2009/6/27 18:00', '2009/6/27 19:00', '2009/6/27 20:00', '2009/6/27 21:00', '2009/6/27 22:00', '2009/6/27 23:00',
+ '2009/6/28 0:00', '2009/6/28 1:00', '2009/6/28 2:00', '2009/6/28 3:00', '2009/6/28 4:00', '2009/6/28 5:00', '2009/6/28 6:00', '2009/6/28 7:00', '2009/6/28 8:00', '2009/6/28 9:00', '2009/6/28 10:00', '2009/6/28 11:00', '2009/6/28 12:00', '2009/6/28 13:00', '2009/6/28 14:00', '2009/6/28 15:00', '2009/6/28 16:00', '2009/6/28 17:00', '2009/6/28 18:00', '2009/6/28 19:00', '2009/6/28 20:00', '2009/6/28 21:00', '2009/6/28 22:00', '2009/6/28 23:00',
+ '2009/6/29 0:00', '2009/6/29 1:00', '2009/6/29 2:00', '2009/6/29 3:00', '2009/6/29 4:00', '2009/6/29 5:00', '2009/6/29 6:00', '2009/6/29 7:00', '2009/6/29 8:00', '2009/6/29 9:00', '2009/6/29 10:00', '2009/6/29 11:00', '2009/6/29 12:00', '2009/6/29 13:00', '2009/6/29 14:00', '2009/6/29 15:00', '2009/6/29 16:00', '2009/6/29 17:00', '2009/6/29 18:00', '2009/6/29 19:00', '2009/6/29 20:00', '2009/6/29 21:00', '2009/6/29 22:00', '2009/6/29 23:00',
+ '2009/6/30 0:00', '2009/6/30 1:00', '2009/6/30 2:00', '2009/6/30 3:00', '2009/6/30 4:00', '2009/6/30 5:00', '2009/6/30 6:00', '2009/6/30 7:00', '2009/6/30 8:00', '2009/6/30 9:00', '2009/6/30 10:00', '2009/6/30 11:00', '2009/6/30 12:00', '2009/6/30 13:00', '2009/6/30 14:00', '2009/6/30 15:00', '2009/6/30 16:00', '2009/6/30 17:00', '2009/6/30 18:00', '2009/6/30 19:00', '2009/6/30 20:00', '2009/6/30 21:00', '2009/6/30 22:00', '2009/6/30 23:00',
+ '2009/7/1 0:00', '2009/7/1 1:00', '2009/7/1 2:00', '2009/7/1 3:00', '2009/7/1 4:00', '2009/7/1 5:00', '2009/7/1 6:00', '2009/7/1 7:00', '2009/7/1 8:00', '2009/7/1 9:00', '2009/7/1 10:00', '2009/7/1 11:00', '2009/7/1 12:00', '2009/7/1 13:00', '2009/7/1 14:00', '2009/7/1 15:00', '2009/7/1 16:00', '2009/7/1 17:00', '2009/7/1 18:00', '2009/7/1 19:00', '2009/7/1 20:00', '2009/7/1 21:00', '2009/7/1 22:00', '2009/7/1 23:00',
+ '2009/7/2 0:00', '2009/7/2 1:00', '2009/7/2 2:00', '2009/7/2 3:00', '2009/7/2 4:00', '2009/7/2 5:00', '2009/7/2 6:00', '2009/7/2 7:00', '2009/7/2 8:00', '2009/7/2 9:00', '2009/7/2 10:00', '2009/7/2 11:00', '2009/7/2 12:00', '2009/7/2 13:00', '2009/7/2 14:00', '2009/7/2 15:00', '2009/7/2 16:00', '2009/7/2 17:00', '2009/7/2 18:00', '2009/7/2 19:00', '2009/7/2 20:00', '2009/7/2 21:00', '2009/7/2 22:00', '2009/7/2 23:00',
+ '2009/7/3 0:00', '2009/7/3 1:00', '2009/7/3 2:00', '2009/7/3 3:00', '2009/7/3 4:00', '2009/7/3 5:00', '2009/7/3 6:00', '2009/7/3 7:00', '2009/7/3 8:00', '2009/7/3 9:00', '2009/7/3 10:00', '2009/7/3 11:00', '2009/7/3 12:00', '2009/7/3 13:00', '2009/7/3 14:00', '2009/7/3 15:00', '2009/7/3 16:00', '2009/7/3 17:00', '2009/7/3 18:00', '2009/7/3 19:00', '2009/7/3 20:00', '2009/7/3 21:00', '2009/7/3 22:00', '2009/7/3 23:00',
+ '2009/7/4 0:00', '2009/7/4 1:00', '2009/7/4 2:00', '2009/7/4 3:00', '2009/7/4 4:00', '2009/7/4 5:00', '2009/7/4 6:00', '2009/7/4 7:00', '2009/7/4 8:00', '2009/7/4 9:00', '2009/7/4 10:00', '2009/7/4 11:00', '2009/7/4 12:00', '2009/7/4 13:00', '2009/7/4 14:00', '2009/7/4 15:00', '2009/7/4 16:00', '2009/7/4 17:00', '2009/7/4 18:00', '2009/7/4 19:00', '2009/7/4 20:00', '2009/7/4 21:00', '2009/7/4 22:00', '2009/7/4 23:00',
+ '2009/7/5 0:00', '2009/7/5 1:00', '2009/7/5 2:00', '2009/7/5 3:00', '2009/7/5 4:00', '2009/7/5 5:00', '2009/7/5 6:00', '2009/7/5 7:00', '2009/7/5 8:00', '2009/7/5 9:00', '2009/7/5 10:00', '2009/7/5 11:00', '2009/7/5 12:00', '2009/7/5 13:00', '2009/7/5 14:00', '2009/7/5 15:00', '2009/7/5 16:00', '2009/7/5 17:00', '2009/7/5 18:00', '2009/7/5 19:00', '2009/7/5 20:00', '2009/7/5 21:00', '2009/7/5 22:00', '2009/7/5 23:00',
+ '2009/7/6 0:00', '2009/7/6 1:00', '2009/7/6 2:00', '2009/7/6 3:00', '2009/7/6 4:00', '2009/7/6 5:00', '2009/7/6 6:00', '2009/7/6 7:00', '2009/7/6 8:00', '2009/7/6 9:00', '2009/7/6 10:00', '2009/7/6 11:00', '2009/7/6 12:00', '2009/7/6 13:00', '2009/7/6 14:00', '2009/7/6 15:00', '2009/7/6 16:00', '2009/7/6 17:00', '2009/7/6 18:00', '2009/7/6 19:00', '2009/7/6 20:00', '2009/7/6 21:00', '2009/7/6 22:00', '2009/7/6 23:00',
+ '2009/7/7 0:00', '2009/7/7 1:00', '2009/7/7 2:00', '2009/7/7 3:00', '2009/7/7 4:00', '2009/7/7 5:00', '2009/7/7 6:00', '2009/7/7 7:00', '2009/7/7 8:00', '2009/7/7 9:00', '2009/7/7 10:00', '2009/7/7 11:00', '2009/7/7 12:00', '2009/7/7 13:00', '2009/7/7 14:00', '2009/7/7 15:00', '2009/7/7 16:00', '2009/7/7 17:00', '2009/7/7 18:00', '2009/7/7 19:00', '2009/7/7 20:00', '2009/7/7 21:00', '2009/7/7 22:00', '2009/7/7 23:00',
+ '2009/7/8 0:00', '2009/7/8 1:00', '2009/7/8 2:00', '2009/7/8 3:00', '2009/7/8 4:00', '2009/7/8 5:00', '2009/7/8 6:00', '2009/7/8 7:00', '2009/7/8 8:00', '2009/7/8 9:00', '2009/7/8 10:00', '2009/7/8 11:00', '2009/7/8 12:00', '2009/7/8 13:00', '2009/7/8 14:00', '2009/7/8 15:00', '2009/7/8 16:00', '2009/7/8 17:00', '2009/7/8 18:00', '2009/7/8 19:00', '2009/7/8 20:00', '2009/7/8 21:00', '2009/7/8 22:00', '2009/7/8 23:00',
+ '2009/7/9 0:00', '2009/7/9 1:00', '2009/7/9 2:00', '2009/7/9 3:00', '2009/7/9 4:00', '2009/7/9 5:00', '2009/7/9 6:00', '2009/7/9 7:00', '2009/7/9 8:00', '2009/7/9 9:00', '2009/7/9 10:00', '2009/7/9 11:00', '2009/7/9 12:00', '2009/7/9 13:00', '2009/7/9 14:00', '2009/7/9 15:00', '2009/7/9 16:00', '2009/7/9 17:00', '2009/7/9 18:00', '2009/7/9 19:00', '2009/7/9 20:00', '2009/7/9 21:00', '2009/7/9 22:00', '2009/7/9 23:00',
+ '2009/7/10 0:00', '2009/7/10 1:00', '2009/7/10 2:00', '2009/7/10 3:00', '2009/7/10 4:00', '2009/7/10 5:00', '2009/7/10 6:00', '2009/7/10 7:00', '2009/7/10 8:00', '2009/7/10 9:00', '2009/7/10 10:00', '2009/7/10 11:00', '2009/7/10 12:00', '2009/7/10 13:00', '2009/7/10 14:00', '2009/7/10 15:00', '2009/7/10 16:00', '2009/7/10 17:00', '2009/7/10 18:00', '2009/7/10 19:00', '2009/7/10 20:00', '2009/7/10 21:00', '2009/7/10 22:00', '2009/7/10 23:00',
+ '2009/7/11 0:00', '2009/7/11 1:00', '2009/7/11 2:00', '2009/7/11 3:00', '2009/7/11 4:00', '2009/7/11 5:00', '2009/7/11 6:00', '2009/7/11 7:00', '2009/7/11 8:00', '2009/7/11 9:00', '2009/7/11 10:00', '2009/7/11 11:00', '2009/7/11 12:00', '2009/7/11 13:00', '2009/7/11 14:00', '2009/7/11 15:00', '2009/7/11 16:00', '2009/7/11 17:00', '2009/7/11 18:00', '2009/7/11 19:00', '2009/7/11 20:00', '2009/7/11 21:00', '2009/7/11 22:00', '2009/7/11 23:00',
+ '2009/7/12 0:00', '2009/7/12 1:00', '2009/7/12 2:00', '2009/7/12 3:00', '2009/7/12 4:00', '2009/7/12 5:00', '2009/7/12 6:00', '2009/7/12 7:00', '2009/7/12 8:00', '2009/7/12 9:00', '2009/7/12 10:00', '2009/7/12 11:00', '2009/7/12 12:00', '2009/7/12 13:00', '2009/7/12 14:00', '2009/7/12 15:00', '2009/7/12 16:00', '2009/7/12 17:00', '2009/7/12 18:00', '2009/7/12 19:00', '2009/7/12 20:00', '2009/7/12 21:00', '2009/7/12 22:00', '2009/7/12 23:00',
+ '2009/7/13 0:00', '2009/7/13 1:00', '2009/7/13 2:00', '2009/7/13 3:00', '2009/7/13 4:00', '2009/7/13 5:00', '2009/7/13 6:00', '2009/7/13 7:00', '2009/7/13 8:00', '2009/7/13 9:00', '2009/7/13 10:00', '2009/7/13 11:00', '2009/7/13 12:00', '2009/7/13 13:00', '2009/7/13 14:00', '2009/7/13 15:00', '2009/7/13 16:00', '2009/7/13 17:00', '2009/7/13 18:00', '2009/7/13 19:00', '2009/7/13 20:00', '2009/7/13 21:00', '2009/7/13 22:00', '2009/7/13 23:00',
+ '2009/7/14 0:00', '2009/7/14 1:00', '2009/7/14 2:00', '2009/7/14 3:00', '2009/7/14 4:00', '2009/7/14 5:00', '2009/7/14 6:00', '2009/7/14 7:00', '2009/7/14 8:00', '2009/7/14 9:00', '2009/7/14 10:00', '2009/7/14 11:00', '2009/7/14 12:00', '2009/7/14 13:00', '2009/7/14 14:00', '2009/7/14 15:00', '2009/7/14 16:00', '2009/7/14 17:00', '2009/7/14 18:00', '2009/7/14 19:00', '2009/7/14 20:00', '2009/7/14 21:00', '2009/7/14 22:00', '2009/7/14 23:00',
+ '2009/7/15 0:00', '2009/7/15 1:00', '2009/7/15 2:00', '2009/7/15 3:00', '2009/7/15 4:00', '2009/7/15 5:00', '2009/7/15 6:00', '2009/7/15 7:00', '2009/7/15 8:00', '2009/7/15 9:00', '2009/7/15 10:00', '2009/7/15 11:00', '2009/7/15 12:00', '2009/7/15 13:00', '2009/7/15 14:00', '2009/7/15 15:00', '2009/7/15 16:00', '2009/7/15 17:00', '2009/7/15 18:00', '2009/7/15 19:00', '2009/7/15 20:00', '2009/7/15 21:00', '2009/7/15 22:00', '2009/7/15 23:00',
+ '2009/7/16 0:00', '2009/7/16 1:00', '2009/7/16 2:00', '2009/7/16 3:00', '2009/7/16 4:00', '2009/7/16 5:00', '2009/7/16 6:00', '2009/7/16 7:00', '2009/7/16 8:00', '2009/7/16 9:00', '2009/7/16 10:00', '2009/7/16 11:00', '2009/7/16 12:00', '2009/7/16 13:00', '2009/7/16 14:00', '2009/7/16 15:00', '2009/7/16 16:00', '2009/7/16 17:00', '2009/7/16 18:00', '2009/7/16 19:00', '2009/7/16 20:00', '2009/7/16 21:00', '2009/7/16 22:00', '2009/7/16 23:00',
+ '2009/7/17 0:00', '2009/7/17 1:00', '2009/7/17 2:00', '2009/7/17 3:00', '2009/7/17 4:00', '2009/7/17 5:00', '2009/7/17 6:00', '2009/7/17 7:00', '2009/7/17 8:00', '2009/7/17 9:00', '2009/7/17 10:00', '2009/7/17 11:00', '2009/7/17 12:00', '2009/7/17 13:00', '2009/7/17 14:00', '2009/7/17 15:00', '2009/7/17 16:00', '2009/7/17 17:00', '2009/7/17 18:00', '2009/7/17 19:00', '2009/7/17 20:00', '2009/7/17 21:00', '2009/7/17 22:00', '2009/7/17 23:00',
+ '2009/7/18 0:00', '2009/7/18 1:00', '2009/7/18 2:00', '2009/7/18 3:00', '2009/7/18 4:00', '2009/7/18 5:00', '2009/7/18 6:00', '2009/7/18 7:00', '2009/7/18 8:00', '2009/7/18 9:00', '2009/7/18 10:00', '2009/7/18 11:00', '2009/7/18 12:00', '2009/7/18 13:00', '2009/7/18 14:00', '2009/7/18 15:00', '2009/7/18 16:00', '2009/7/18 17:00', '2009/7/18 18:00', '2009/7/18 19:00', '2009/7/18 20:00', '2009/7/18 21:00', '2009/7/18 22:00', '2009/7/18 23:00',
+ '2009/7/19 0:00', '2009/7/19 1:00', '2009/7/19 2:00', '2009/7/19 3:00', '2009/7/19 4:00', '2009/7/19 5:00', '2009/7/19 6:00', '2009/7/19 7:00', '2009/7/19 8:00', '2009/7/19 9:00', '2009/7/19 10:00', '2009/7/19 11:00', '2009/7/19 12:00', '2009/7/19 13:00', '2009/7/19 14:00', '2009/7/19 15:00', '2009/7/19 16:00', '2009/7/19 17:00', '2009/7/19 18:00', '2009/7/19 19:00', '2009/7/19 20:00', '2009/7/19 21:00', '2009/7/19 22:00', '2009/7/19 23:00',
+ '2009/7/20 0:00', '2009/7/20 1:00', '2009/7/20 2:00', '2009/7/20 3:00', '2009/7/20 4:00', '2009/7/20 5:00', '2009/7/20 6:00', '2009/7/20 7:00', '2009/7/20 8:00', '2009/7/20 9:00', '2009/7/20 10:00', '2009/7/20 11:00', '2009/7/20 12:00', '2009/7/20 13:00', '2009/7/20 14:00', '2009/7/20 15:00', '2009/7/20 16:00', '2009/7/20 17:00', '2009/7/20 18:00', '2009/7/20 19:00', '2009/7/20 20:00', '2009/7/20 21:00', '2009/7/20 22:00', '2009/7/20 23:00',
+ '2009/7/21 0:00', '2009/7/21 1:00', '2009/7/21 2:00', '2009/7/21 3:00', '2009/7/21 4:00', '2009/7/21 5:00', '2009/7/21 6:00', '2009/7/21 7:00', '2009/7/21 8:00', '2009/7/21 9:00', '2009/7/21 10:00', '2009/7/21 11:00', '2009/7/21 12:00', '2009/7/21 13:00', '2009/7/21 14:00', '2009/7/21 15:00', '2009/7/21 16:00', '2009/7/21 17:00', '2009/7/21 18:00', '2009/7/21 19:00', '2009/7/21 20:00', '2009/7/21 21:00', '2009/7/21 22:00', '2009/7/21 23:00',
+ '2009/7/22 0:00', '2009/7/22 1:00', '2009/7/22 2:00', '2009/7/22 3:00', '2009/7/22 4:00', '2009/7/22 5:00', '2009/7/22 6:00', '2009/7/22 7:00', '2009/7/22 8:00', '2009/7/22 9:00', '2009/7/22 10:00', '2009/7/22 11:00', '2009/7/22 12:00', '2009/7/22 13:00', '2009/7/22 14:00', '2009/7/22 15:00', '2009/7/22 16:00', '2009/7/22 17:00', '2009/7/22 18:00', '2009/7/22 19:00', '2009/7/22 20:00', '2009/7/22 21:00', '2009/7/22 22:00', '2009/7/22 23:00',
+ '2009/7/23 0:00', '2009/7/23 1:00', '2009/7/23 2:00', '2009/7/23 3:00', '2009/7/23 4:00', '2009/7/23 5:00', '2009/7/23 6:00', '2009/7/23 7:00', '2009/7/23 8:00', '2009/7/23 9:00', '2009/7/23 10:00', '2009/7/23 11:00', '2009/7/23 12:00', '2009/7/23 13:00', '2009/7/23 14:00', '2009/7/23 15:00', '2009/7/23 16:00', '2009/7/23 17:00', '2009/7/23 18:00', '2009/7/23 19:00', '2009/7/23 20:00', '2009/7/23 21:00', '2009/7/23 22:00', '2009/7/23 23:00',
+ '2009/7/24 0:00', '2009/7/24 1:00', '2009/7/24 2:00', '2009/7/24 3:00', '2009/7/24 4:00', '2009/7/24 5:00', '2009/7/24 6:00', '2009/7/24 7:00', '2009/7/24 8:00', '2009/7/24 9:00', '2009/7/24 10:00', '2009/7/24 11:00', '2009/7/24 12:00', '2009/7/24 13:00', '2009/7/24 14:00', '2009/7/24 15:00', '2009/7/24 16:00', '2009/7/24 17:00', '2009/7/24 18:00', '2009/7/24 19:00', '2009/7/24 20:00', '2009/7/24 21:00', '2009/7/24 22:00', '2009/7/24 23:00',
+ '2009/7/25 0:00', '2009/7/25 1:00', '2009/7/25 2:00', '2009/7/25 3:00', '2009/7/25 4:00', '2009/7/25 5:00', '2009/7/25 6:00', '2009/7/25 7:00', '2009/7/25 8:00', '2009/7/25 9:00', '2009/7/25 10:00', '2009/7/25 11:00', '2009/7/25 12:00', '2009/7/25 13:00', '2009/7/25 14:00', '2009/7/25 15:00', '2009/7/25 16:00', '2009/7/25 17:00', '2009/7/25 18:00', '2009/7/25 19:00', '2009/7/25 20:00', '2009/7/25 21:00', '2009/7/25 22:00', '2009/7/25 23:00',
+ '2009/7/26 0:00', '2009/7/26 1:00', '2009/7/26 2:00', '2009/7/26 3:00', '2009/7/26 4:00', '2009/7/26 5:00', '2009/7/26 6:00', '2009/7/26 7:00', '2009/7/26 8:00', '2009/7/26 9:00', '2009/7/26 10:00', '2009/7/26 11:00', '2009/7/26 12:00', '2009/7/26 13:00', '2009/7/26 14:00', '2009/7/26 15:00', '2009/7/26 16:00', '2009/7/26 17:00', '2009/7/26 18:00', '2009/7/26 19:00', '2009/7/26 20:00', '2009/7/26 21:00', '2009/7/26 22:00', '2009/7/26 23:00',
+ '2009/7/27 0:00', '2009/7/27 1:00', '2009/7/27 2:00', '2009/7/27 3:00', '2009/7/27 4:00', '2009/7/27 5:00', '2009/7/27 6:00', '2009/7/27 7:00', '2009/7/27 8:00', '2009/7/27 9:00', '2009/7/27 10:00', '2009/7/27 11:00', '2009/7/27 12:00', '2009/7/27 13:00', '2009/7/27 14:00', '2009/7/27 15:00', '2009/7/27 16:00', '2009/7/27 17:00', '2009/7/27 18:00', '2009/7/27 19:00', '2009/7/27 20:00', '2009/7/27 21:00', '2009/7/27 22:00', '2009/7/27 23:00',
+ '2009/7/28 0:00', '2009/7/28 1:00', '2009/7/28 2:00', '2009/7/28 3:00', '2009/7/28 4:00', '2009/7/28 5:00', '2009/7/28 6:00', '2009/7/28 7:00', '2009/7/28 8:00', '2009/7/28 9:00', '2009/7/28 10:00', '2009/7/28 11:00', '2009/7/28 12:00', '2009/7/28 13:00', '2009/7/28 14:00', '2009/7/28 15:00', '2009/7/28 16:00', '2009/7/28 17:00', '2009/7/28 18:00', '2009/7/28 19:00', '2009/7/28 20:00', '2009/7/28 21:00', '2009/7/28 22:00', '2009/7/28 23:00',
+ '2009/7/29 0:00', '2009/7/29 1:00', '2009/7/29 2:00', '2009/7/29 3:00', '2009/7/29 4:00', '2009/7/29 5:00', '2009/7/29 6:00', '2009/7/29 7:00', '2009/7/29 8:00', '2009/7/29 9:00', '2009/7/29 10:00', '2009/7/29 11:00', '2009/7/29 12:00', '2009/7/29 13:00', '2009/7/29 14:00', '2009/7/29 15:00', '2009/7/29 16:00', '2009/7/29 17:00', '2009/7/29 18:00', '2009/7/29 19:00', '2009/7/29 20:00', '2009/7/29 21:00', '2009/7/29 22:00', '2009/7/29 23:00',
+ '2009/7/30 0:00', '2009/7/30 1:00', '2009/7/30 2:00', '2009/7/30 3:00', '2009/7/30 4:00', '2009/7/30 5:00', '2009/7/30 6:00', '2009/7/30 7:00', '2009/7/30 8:00', '2009/7/30 9:00', '2009/7/30 10:00', '2009/7/30 11:00', '2009/7/30 12:00', '2009/7/30 13:00', '2009/7/30 14:00', '2009/7/30 15:00', '2009/7/30 16:00', '2009/7/30 17:00', '2009/7/30 18:00', '2009/7/30 19:00', '2009/7/30 20:00', '2009/7/30 21:00', '2009/7/30 22:00', '2009/7/30 23:00',
+ '2009/7/31 0:00', '2009/7/31 1:00', '2009/7/31 2:00', '2009/7/31 3:00', '2009/7/31 4:00', '2009/7/31 5:00', '2009/7/31 6:00', '2009/7/31 7:00', '2009/7/31 8:00', '2009/7/31 9:00', '2009/7/31 10:00', '2009/7/31 11:00', '2009/7/31 12:00', '2009/7/31 13:00', '2009/7/31 14:00', '2009/7/31 15:00', '2009/7/31 16:00', '2009/7/31 17:00', '2009/7/31 18:00', '2009/7/31 19:00', '2009/7/31 20:00', '2009/7/31 21:00', '2009/7/31 22:00', '2009/7/31 23:00',
+ '2009/8/1 0:00', '2009/8/1 1:00', '2009/8/1 2:00', '2009/8/1 3:00', '2009/8/1 4:00', '2009/8/1 5:00', '2009/8/1 6:00', '2009/8/1 7:00', '2009/8/1 8:00', '2009/8/1 9:00', '2009/8/1 10:00', '2009/8/1 11:00', '2009/8/1 12:00', '2009/8/1 13:00', '2009/8/1 14:00', '2009/8/1 15:00', '2009/8/1 16:00', '2009/8/1 17:00', '2009/8/1 18:00', '2009/8/1 19:00', '2009/8/1 20:00', '2009/8/1 21:00', '2009/8/1 22:00', '2009/8/1 23:00', '2009/8/2 0:00', '2009/8/2 1:00', '2009/8/2 2:00', '20 [...]
+ '2009/9/1 0:00', '2009/9/1 1:00', '2009/9/1 2:00', '2009/9/1 3:00', '2009/9/1 4:00', '2009/9/1 5:00', '2009/9/1 6:00', '2009/9/1 7:00', '2009/9/1 8:00', '2009/9/1 9:00', '2009/9/1 10:00', '2009/9/1 11:00', '2009/9/1 12:00', '2009/9/1 13:00', '2009/9/1 14:00', '2009/9/1 15:00', '2009/9/1 16:00', '2009/9/1 17:00', '2009/9/1 18:00', '2009/9/1 19:00', '2009/9/1 20:00', '2009/9/1 21:00', '2009/9/1 22:00', '2009/9/1 23:00', '2009/9/2 0:00', '2009/9/2 1:00', '2009/9/2 2:00', '20 [...]
+ '2009/10/1 0:00', '2009/10/1 1:00', '2009/10/1 2:00', '2009/10/1 3:00', '2009/10/1 4:00', '2009/10/1 5:00', '2009/10/1 6:00', '2009/10/1 7:00', '2009/10/1 8:00', '2009/10/1 9:00', '2009/10/1 10:00', '2009/10/1 11:00', '2009/10/1 12:00', '2009/10/1 13:00', '2009/10/1 14:00', '2009/10/1 15:00', '2009/10/1 16:00', '2009/10/1 17:00', '2009/10/1 18:00', '2009/10/1 19:00', '2009/10/1 20:00', '2009/10/1 21:00', '2009/10/1 22:00', '2009/10/1 23:00', '2009/10/2 0:00', '2009/10/2 1 [...]
+ ].map(function (str) {
+ return str.replace(' ', '\n');
+ })
+ }
+ ],
+ yAxis: [
+ {
+ name: 'Flow(m^3/s)',
+ type: 'value',
+ max: 500
+ },
+ {
+ name: 'Rainfall(mm)',
+ nameLocation: 'start',
+ max: 5,
+ type: 'value',
+ inverse: true
+ }
+ ],
+ series: [
+ {
+ name: 'Flow',
+ type: 'line',
+ areaStyle: {},
+ lineStyle: {
+ width: 1
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ markArea: {
+ silent: true,
+ itemStyle: {
+ opacity: 0.3
+ },
+ data: [[{
+ xAxis: '2009/9/12\n7:00'
+ }, {
+ xAxis: '2009/9/22\n7:00'
+ }]]
+ },
+ data: [
+ 0.97,0.96,0.96,0.95,0.95,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0.94,0 [...]
+ ]
+ },
+ {
+ name: 'Rainfall',
+ type: 'line',
+ yAxisIndex: 1,
+ areaStyle: {},
+ lineStyle: {
+ width: 1
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ markArea: {
+ silent: true,
+ itemStyle: {
+ opacity: 0.3
+ },
+ data: [
+ [{
+ xAxis: '2009/9/10\n7:00'
+ }, {
+ xAxis: '2009/9/20\n7:00'
+ }]
+ ]
+ },
+ data: [
+ 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.005,0.017,0.017,0.017,0.017,0.011,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.021,0.026,0.03,0.036,0.036,0.195,0.221,0.019,0.013,0.017,0.03,0.03,0.03,0.046,0.045,0.038,0.084,0.045,0.045,0.037,0.034,0.035,0.036,0.044,0.052,0.048,0.109,0.033,0.029,0.04,0.042,0.042,0.042,0.073,0.076,0.062,0.066,0.066,0.075,0.096,0.128 [...]
+ ]
+ }
+ ]
+};
+
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/area-simple.ts b/examples/examples/ts/area-simple.ts
new file mode 100644
index 0000000..8ab9c88
--- /dev/null
+++ b/examples/examples/ts/area-simple.ts
@@ -0,0 +1,80 @@
+/*
+title: Large scale area chart
+titleCN: 大数据量面积图
+category: 'line, dataZoom'
+difficulty: 4
+*/
+
+let base = +new Date(1968, 9, 3);
+let oneDay = 24 * 3600 * 1000;
+let date = [];
+
+let data = [Math.random() * 300];
+
+for (let i = 1; i < 20000; i++) {
+ var now = new Date(base += oneDay);
+ date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
+ data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
+}
+
+option = {
+ tooltip: {
+ trigger: 'axis',
+ position: function (pt) {
+ return [pt[0], '10%'];
+ }
+ },
+ title: {
+ left: 'center',
+ text: 'Large Area Chart',
+ },
+ toolbox: {
+ feature: {
+ dataZoom: {
+ yAxisIndex: 'none'
+ },
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: date
+ },
+ yAxis: {
+ type: 'value',
+ boundaryGap: [0, '100%']
+ },
+ dataZoom: [{
+ type: 'inside',
+ start: 0,
+ end: 10
+ }, {
+ start: 0,
+ end: 10
+ }],
+ series: [
+ {
+ name: 'Fake Data',
+ type: 'line',
+ symbol: 'none',
+ sampling: 'lttb',
+ itemStyle: {
+ color: 'rgb(255, 70, 131)'
+ },
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgb(255, 158, 68)'
+ }, {
+ offset: 1,
+ color: 'rgb(255, 70, 131)'
+ }])
+ },
+ data: data
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/area-stack-gradient.ts b/examples/examples/ts/area-stack-gradient.ts
new file mode 100644
index 0000000..8ab69ca
--- /dev/null
+++ b/examples/examples/ts/area-stack-gradient.ts
@@ -0,0 +1,176 @@
+/*
+title: Gradient Stacked Area Chart
+titleCN: 渐变堆叠面积图
+category: line
+difficulty: 2
+*/
+
+option = {
+ color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
+ title: {
+ text: 'Gradient Stacked Area Chart'
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ label: {
+ backgroundColor: '#6a7985'
+ }
+ }
+ },
+ legend: {
+ data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
+ },
+ toolbox: {
+ feature: {
+ saveAsImage: {}
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value'
+ }
+ ],
+ series: [
+ {
+ name: 'Line 1',
+ type: 'line',
+ stack: 'Total',
+ smooth: true,
+ lineStyle: {
+ width: 0
+ },
+ showSymbol: false,
+ areaStyle: {
+ opacity: 0.8,
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(128, 255, 165)'
+ }, {
+ offset: 1,
+ color: 'rgba(1, 191, 236)'
+ }])
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ data: [140, 232, 101, 264, 90, 340, 250]
+ },
+ {
+ name: 'Line 2',
+ type: 'line',
+ stack: 'Total',
+ smooth: true,
+ lineStyle: {
+ width: 0
+ },
+ showSymbol: false,
+ areaStyle: {
+ opacity: 0.8,
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(0, 221, 255)'
+ }, {
+ offset: 1,
+ color: 'rgba(77, 119, 255)'
+ }])
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ data: [120, 282, 111, 234, 220, 340, 310]
+ },
+ {
+ name: 'Line 3',
+ type: 'line',
+ stack: 'Total',
+ smooth: true,
+ lineStyle: {
+ width: 0
+ },
+ showSymbol: false,
+ areaStyle: {
+ opacity: 0.8,
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(55, 162, 255)'
+ }, {
+ offset: 1,
+ color: 'rgba(116, 21, 219)'
+ }])
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ data: [320, 132, 201, 334, 190, 130, 220]
+ },
+ {
+ name: 'Line 4',
+ type: 'line',
+ stack: 'Total',
+ smooth: true,
+ lineStyle: {
+ width: 0
+ },
+ showSymbol: false,
+ areaStyle: {
+ opacity: 0.8,
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(255, 0, 135)'
+ }, {
+ offset: 1,
+ color: 'rgba(135, 0, 157)'
+ }])
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ data: [220, 402, 231, 134, 190, 230, 120]
+ },
+ {
+ name: 'Line 5',
+ type: 'line',
+ stack: 'Total',
+ smooth: true,
+ lineStyle: {
+ width: 0
+ },
+ showSymbol: false,
+ label: {
+ show: true,
+ position: 'top'
+ },
+ areaStyle: {
+ opacity: 0.8,
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(255, 191, 0)'
+ }, {
+ offset: 1,
+ color: 'rgba(224, 62, 76)'
+ }])
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ data: [220, 302, 181, 234, 210, 290, 150]
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/area-stack.ts b/examples/examples/ts/area-stack.ts
new file mode 100644
index 0000000..3b0683c
--- /dev/null
+++ b/examples/examples/ts/area-stack.ts
@@ -0,0 +1,105 @@
+/*
+title: Stacked Area Chart
+titleCN: 堆叠面积图
+category: line
+difficulty: 2
+*/
+
+option = {
+ title: {
+ text: 'Stacked Area Chart'
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ label: {
+ backgroundColor: '#6a7985'
+ }
+ }
+ },
+ legend: {
+ data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+ },
+ toolbox: {
+ feature: {
+ saveAsImage: {}
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value'
+ }
+ ],
+ series: [
+ {
+ name: 'Email',
+ type: 'line',
+ stack: 'Total',
+ areaStyle: {},
+ emphasis: {
+ focus: 'series'
+ },
+ data: [120, 132, 101, 134, 90, 230, 210]
+ },
+ {
+ name: 'Union Ads',
+ type: 'line',
+ stack: 'Total',
+ areaStyle: {},
+ emphasis: {
+ focus: 'series'
+ },
+ data: [220, 182, 191, 234, 290, 330, 310]
+ },
+ {
+ name: 'Video Ads',
+ type: 'line',
+ stack: 'Total',
+ areaStyle: {},
+ emphasis: {
+ focus: 'series'
+ },
+ data: [150, 232, 201, 154, 190, 330, 410]
+ },
+ {
+ name: 'Direct',
+ type: 'line',
+ stack: 'Total',
+ areaStyle: {},
+ emphasis: {
+ focus: 'series'
+ },
+ data: [320, 332, 301, 334, 390, 330, 320]
+ },
+ {
+ name: 'Search Engine',
+ type: 'line',
+ stack: 'Total',
+ label: {
+ show: true,
+ position: 'top'
+ },
+ areaStyle: {},
+ emphasis: {
+ focus: 'series'
+ },
+ data: [820, 932, 901, 934, 1290, 1330, 1320]
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/area-time-axis.ts b/examples/examples/ts/area-time-axis.ts
new file mode 100644
index 0000000..17f2a6e
--- /dev/null
+++ b/examples/examples/ts/area-time-axis.ts
@@ -0,0 +1,69 @@
+/*
+title: Area Chart with Time Axis
+titleCN: 时间轴折线图
+category: line
+difficulty: 5
+*/
+
+let base = +new Date(1988, 9, 3);
+let oneDay = 24 * 3600 * 1000;
+
+let data = [[base, Math.random() * 300]];
+
+for (let i = 1; i < 20000; i++) {
+ let now = new Date(base += oneDay);
+ data.push([
+ +now,
+ Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])
+ ]);
+}
+
+option = {
+ tooltip: {
+ trigger: 'axis',
+ position: function (pt) {
+ return [pt[0], '10%'];
+ }
+ },
+ title: {
+ left: 'center',
+ text: 'Large Ara Chart',
+ },
+ toolbox: {
+ feature: {
+ dataZoom: {
+ yAxisIndex: 'none'
+ },
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ xAxis: {
+ type: 'time',
+ boundaryGap: false
+ },
+ yAxis: {
+ type: 'value',
+ boundaryGap: [0, '100%']
+ },
+ dataZoom: [{
+ type: 'inside',
+ start: 0,
+ end: 20
+ }, {
+ start: 0,
+ end: 20
+ }],
+ series: [
+ {
+ name: 'Fake Data',
+ type: 'line',
+ smooth: true,
+ symbol: 'none',
+ areaStyle: {},
+ data: data
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/bar-animation-delay.ts b/examples/examples/ts/bar-animation-delay.ts
new file mode 100644
index 0000000..3002c03
--- /dev/null
+++ b/examples/examples/ts/bar-animation-delay.ts
@@ -0,0 +1,70 @@
+/*
+title: Animation Delay
+titleCN: 柱状图动画延迟
+category: bar
+difficulty: 5
+*/
+
+var xAxisData = [];
+var data1 = [];
+var data2 = [];
+for (var i = 0; i < 100; i++) {
+ xAxisData.push('类目' + i);
+ data1.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5);
+ data2.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5);
+}
+
+option = {
+ title: {
+ text: 'Bar Animation Delay'
+ },
+ legend: {
+ data: ['bar', 'bar2']
+ },
+ toolbox: {
+ // y: 'bottom',
+ feature: {
+ magicType: {
+ type: ['stack']
+ },
+ dataView: {},
+ saveAsImage: {
+ pixelRatio: 2
+ }
+ }
+ },
+ tooltip: {},
+ xAxis: {
+ data: xAxisData,
+ splitLine: {
+ show: false
+ }
+ },
+ yAxis: {
+ },
+ series: [{
+ name: 'bar',
+ type: 'bar',
+ data: data1,
+ emphasis: {
+ focus: 'series'
+ },
+ animationDelay: function (idx) {
+ return idx * 10;
+ }
+ }, {
+ name: 'bar2',
+ type: 'bar',
+ data: data2,
+ emphasis: {
+ focus: 'series'
+ },
+ animationDelay: function (idx) {
+ return idx * 10 + 100;
+ }
+ }],
+ animationEasing: 'elasticOut',
+ animationDelayUpdate: function (idx) {
+ return idx * 5;
+ }
+};
\ No newline at end of file
diff --git a/examples/examples/ts/bar-background.ts b/examples/examples/ts/bar-background.ts
new file mode 100644
index 0000000..3c89094
--- /dev/null
+++ b/examples/examples/ts/bar-background.ts
@@ -0,0 +1,26 @@
+/*
+title: Bar with Background
+category: bar
+titleCN: 带背景色的柱状图
+difficulty: 0
+*/
+
+option = {
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [{
+ data: [120, 200, 150, 80, 70, 110, 130],
+ type: 'bar',
+ showBackground: true,
+ backgroundStyle: {
+ color: 'rgba(180, 180, 180, 0.2)'
+ }
+ }]
+};
+
+export {}
diff --git a/examples/examples/ts/bar-brush.ts b/examples/examples/ts/bar-brush.ts
new file mode 100644
index 0000000..abb4cbd
--- /dev/null
+++ b/examples/examples/ts/bar-brush.ts
@@ -0,0 +1,115 @@
+/*
+title: Brush Select on Column Chart
+titleCN: 柱状图框选
+category: bar
+difficulty: 4
+*/
+
+let xAxisData: string[] = [];
+let data1: number[] = [];
+let data2: number[] = [];
+let data3: number[] = [];
+let data4: number[] = [];
+
+for (let i = 0; i < 10; i++) {
+ xAxisData.push('Class' + i);
+ data1.push(+(Math.random() * 2).toFixed(2));
+ data2.push(+(Math.random() * 5).toFixed(2));
+ data3.push(+(Math.random() + 0.3).toFixed(2));
+ data4.push(+Math.random().toFixed(2));
+}
+
+var emphasisStyle = {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowColor: 'rgba(0,0,0,0.3)'
+ }
+};
+
+option = {
+ legend: {
+ data: ['bar', 'bar2', 'bar3', 'bar4'],
+ left: '10%'
+ },
+ brush: {
+ toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
+ xAxisIndex: 0
+ },
+ toolbox: {
+ feature: {
+ magicType: {
+ type: ['stack']
+ },
+ dataView: {}
+ }
+ },
+ tooltip: {},
+ xAxis: {
+ data: xAxisData,
+ name: 'X Axis',
+ axisLine: {onZero: true},
+ splitLine: {show: false},
+ splitArea: {show: false}
+ },
+ yAxis: {},
+ grid: {
+ bottom: 100
+ },
+ series: [
+ {
+ name: 'bar',
+ type: 'bar',
+ stack: 'one',
+ emphasis: emphasisStyle,
+ data: data1
+ },
+ {
+ name: 'bar2',
+ type: 'bar',
+ stack: 'one',
+ emphasis: emphasisStyle,
+ data: data2
+ },
+ {
+ name: 'bar3',
+ type: 'bar',
+ stack: 'two',
+ emphasis: emphasisStyle,
+ data: data3
+ },
+ {
+ name: 'bar4',
+ type: 'bar',
+ stack: 'two',
+ emphasis: emphasisStyle,
+ data: data4
+ }
+ ]
+};
+
+myChart.on('brushSelected', function (params: any) {
+ var brushed = [];
+ var brushComponent = params.batch[0];
+
+ for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
+ var rawIndices = brushComponent.selected[sIdx].dataIndex;
+ brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
+ }
+
+ myChart.setOption<echarts.EChartsOption>({
+ title: {
+ backgroundColor: '#333',
+ text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
+ bottom: 0,
+ right:'10%',
+ width: 100,
+ textStyle: {
+ fontSize: 12,
+ color: '#fff'
+ }
+ }
+ });
+});
+
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/bar-data-color.ts b/examples/examples/ts/bar-data-color.ts
new file mode 100644
index 0000000..b5eccae
--- /dev/null
+++ b/examples/examples/ts/bar-data-color.ts
@@ -0,0 +1,27 @@
+/*
+title: Set Style of Single Bar.
+category: bar
+titleCN: 自定义单个柱子颜色
+difficulty: 1
+*/
+
+option = {
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [{
+ data: [120, {
+ value: 200,
+ itemStyle: {
+ color: '#a90000'
+ }
+ }, 150, 80, 70, 110, 130],
+ type: 'bar'
+ }]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/bar-drilldown.ts b/examples/examples/ts/bar-drilldown.ts
new file mode 100644
index 0000000..864766c
--- /dev/null
+++ b/examples/examples/ts/bar-drilldown.ts
@@ -0,0 +1,105 @@
+/*
+title: Bar Chart Drilldown Animation.
+category: bar
+titleCN: 柱状图下钻动画
+difficulty: 5
+*/
+
+
+interface DataItem {
+ value: number
+ groupId: string
+}
+option = {
+ xAxis: {
+ data: ['Animals', 'Fruits', 'Cars']
+ },
+ yAxis: {},
+ dataGroupId: '',
+ animationDurationUpdate: 500,
+ series: {
+ type: 'bar',
+ id: 'sales',
+ data: [{
+ value: 5,
+ groupId: 'animals'
+ }, {
+ value: 2,
+ groupId: 'fruits'
+ }, {
+ value: 4,
+ groupId: 'cars'
+ }] as DataItem[],
+ universalTransition: {
+ enabled: true,
+ divideShape: 'clone'
+ }
+ }
+};
+
+const drilldownData = [{
+ dataGroupId: 'animals',
+ data: [
+ ['Cats', 4],
+ ['Dogs', 2],
+ ['Cows', 1],
+ ['Sheep', 2],
+ ['Pigs', 1]
+ ]
+}, {
+ dataGroupId: 'fruits',
+ data: [
+ ['Apples', 4],
+ ['Oranges', 2]
+ ]
+}, {
+ dataGroupId: 'cars',
+ data: [
+ ['Toyota', 4],
+ ['Opel', 2],
+ ['Volkswagen', 2]
+ ]
+}];
+
+myChart.on('click', function (event) {
+ if (event.data) {
+ var subData = drilldownData.find(function (data) {
+ return data.dataGroupId === (event.data as DataItem).groupId;
+ });
+ if (!subData) {
+ return;
+ }
+ myChart.setOption<echarts.EChartsOption>({
+ xAxis: {
+ data: subData.data.map(function (item) {
+ return item[0];
+ })
+ },
+ series: {
+ type: 'bar',
+ id: 'sales',
+ dataGroupId: subData.dataGroupId,
+ data: subData.data.map(function (item) {
+ return item[1];
+ }),
+ universalTransition: {
+ enabled: true,
+ divideShape: 'clone'
+ }
+ },
+ graphic: [{
+ type: 'text',
+ left: 50,
+ top: 20,
+ style: {
+ text: 'Back',
+ fontSize: 18
+ },
+ onclick: function () {
+ myChart.setOption<echarts.EChartsOption>(option);
+ }
+ }]
+ });
+ }
+});
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/bar-gradient.ts b/examples/examples/ts/bar-gradient.ts
new file mode 100644
index 0000000..a22168d
--- /dev/null
+++ b/examples/examples/ts/bar-gradient.ts
@@ -0,0 +1,94 @@
+/*
+title: Clickable Column Chart with Gradient
+titleCN: 特性示例：渐变色 阴影 点击缩放
+category: bar
+difficulty: 3
+*/
+
+var dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
+var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
+var yMax = 500;
+var dataShadow = [];
+
+for (var i = 0; i < data.length; i++) {
+ dataShadow.push(yMax);
+}
+
+option = {
+ title: {
+ text: '特性示例：渐变色 阴影 点击缩放',
+ subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
+ },
+ xAxis: {
+ data: dataAxis,
+ axisLabel: {
+ inside: true,
+ color: '#fff'
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ z: 10
+ },
+ yAxis: {
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ color: '#999'
+ }
+ },
+ dataZoom: [
+ {
+ type: 'inside'
+ }
+ ],
+ series: [
+ {
+ type: 'bar',
+ showBackground: true,
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(
+ 0, 0, 0, 1,
+ [
+ {offset: 0, color: '#83bff6'},
+ {offset: 0.5, color: '#188df0'},
+ {offset: 1, color: '#188df0'}
+ ]
+ )
+ },
+ emphasis: {
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(
+ 0, 0, 0, 1,
+ [
+ {offset: 0, color: '#2378f7'},
+ {offset: 0.7, color: '#2378f7'},
+ {offset: 1, color: '#83bff6'}
+ ]
+ )
+ }
+ },
+ data: data
+ }
+ ]
+};
+
+// Enable data zoom when user click bar.
+var zoomSize = 6;
+myChart.on('click', function (params) {
+ console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
+ myChart.dispatchAction({
+ type: 'dataZoom',
+ startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
+ endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
+ });
+});
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/bar-histogram.ts b/examples/examples/ts/bar-histogram.ts
new file mode 100644
index 0000000..424db37
--- /dev/null
+++ b/examples/examples/ts/bar-histogram.ts
@@ -0,0 +1,127 @@
+/*
+title: Histogram with Custom Series
+category: custom
+titleCN: 直方图（自定义系列）
+difficulty: 0
+*/
+
+// See https://github.com/ecomfe/echarts-stat
+echarts.registerTransform(ecStat.transform.histogram);
+
+option = {
+ dataset: [{
+ source: [
+ [8.3, 143],
+ [8.6, 214],
+ [8.8, 251],
+ [10.5, 26],
+ [10.7, 86],
+ [10.8, 93],
+ [11.0, 176],
+ [11.0, 39],
+ [11.1, 221],
+ [11.2, 188],
+ [11.3, 57],
+ [11.4, 91],
+ [11.4, 191],
+ [11.7, 8],
+ [12.0, 196],
+ [12.9, 177],
+ [12.9, 153],
+ [13.3, 201],
+ [13.7, 199],
+ [13.8, 47],
+ [14.0, 81],
+ [14.2, 98],
+ [14.5, 121],
+ [16.0, 37],
+ [16.3, 12],
+ [17.3, 105],
+ [17.5, 168],
+ [17.9, 84],
+ [18.0, 197],
+ [18.0, 155],
+ [20.6, 125]
+ ]
+ }, {
+ transform: {
+ type: 'ecStat:histogram',
+ config: {}
+ }
+ }, {
+ transform: {
+ type: 'ecStat:histogram',
+ // print: true,
+ config: { dimensions: [1] }
+ }
+ }],
+ tooltip: {
+ },
+ grid: [{
+ top: '50%',
+ right: '50%'
+ }, {
+ bottom: '52%',
+ right: '50%',
+ }, {
+ top: '50%',
+ left: '52%'
+ }],
+ xAxis: [{
+ scale: true,
+ gridIndex: 0
+ }, {
+ type: 'category',
+ scale: true,
+ axisTick: { show: false },
+ axisLabel: { show: false },
+ axisLine: { show: false },
+ gridIndex: 1
+ }, {
+ scale: true,
+ gridIndex: 2
+ }],
+ yAxis: [{
+ gridIndex: 0
+ }, {
+ gridIndex: 1
+ }, {
+ type: 'category',
+ axisTick: { show: false },
+ axisLabel: { show: false },
+ axisLine: { show: false },
+ gridIndex: 2
+ }],
+ series: [{
+ name: 'origianl scatter',
+ type: 'scatter',
+ xAxisIndex: 0,
+ yAxisIndex: 0,
+ encode: { tooltip: [0, 1] },
+ datasetIndex: 0
+ }, {
+ name: 'histogram',
+ type: 'bar',
+ xAxisIndex: 1,
+ yAxisIndex: 1,
+ barWidth: '99.3%',
+ label: {
+ show: true,
+ position: 'top'
+ },
+ encode: { x: 0, y: 1, itemName: 4 },
+ datasetIndex: 1
+ }, {
+ name: 'histogram',
+ type: 'bar',
+ xAxisIndex: 2,
+ yAxisIndex: 2,
+ barWidth: '99.3%',
+ label: {
+ show: true,
+ position: 'right'
+ },
+ encode: { x: 1, y: 0, itemName: 4 },
+ datasetIndex: 2
+ }]
+};
diff --git a/examples/examples/ts/bar-label-rotation.ts b/examples/examples/ts/bar-label-rotation.ts
new file mode 100644
index 0000000..9218f49
--- /dev/null
+++ b/examples/examples/ts/bar-label-rotation.ts
@@ -0,0 +1,166 @@
+/*
+title: Bar Label Rotation
+titleCN: 柱状图标签旋转
+category: bar
+difficulty: 3
+*/
+
+const posList = [
+ 'left', 'right', 'top', 'bottom',
+ 'inside',
+ 'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
+ 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
+] as const;
+
+app.configParameters = {
+ rotate: {
+ min: -90,
+ max: 90
+ },
+ align: {
+ options: {
+ left: 'left',
+ center: 'center',
+ right: 'right'
+ }
+ },
+ verticalAlign: {
+ options: {
+ top: 'top',
+ middle: 'middle',
+ bottom: 'bottom'
+ }
+ },
+ position: {
+ options: posList.reduce(function (map, pos) {
+ map[pos] = pos;
+ return map;
+ }, {} as Record<string, string>)
+ },
+ distance: {
+ min: 0,
+ max: 100
+ }
+};
+
+app.config = {
+ rotate: 90,
+ align: 'left',
+ verticalAlign: 'middle',
+ position: 'insideBottom',
+ distance: 15,
+ onChange: function () {
+ var labelOption = {
+ normal: {
+ rotate: app.config.rotate,
+ align: app.config.align,
+ verticalAlign: app.config.verticalAlign,
+ position: app.config.position,
+ distance: app.config.distance
+ }
+ };
+ myChart.setOption<echarts.EChartsOption>({
+ series: [{
+ label: labelOption
+ }, {
+ label: labelOption
+ }, {
+ label: labelOption
+ }, {
+ label: labelOption
+ }]
+ });
+ }
+};
+
+type BarLabelOption = NonNullable<echarts.BarSeriesOption['label']>
+
+const labelOption = {
+ show: true,
+ position: app.config.position as BarLabelOption['position'],
+ distance: app.config.distance as BarLabelOption['distance'],
+ align: app.config.align as BarLabelOption['align'],
+ verticalAlign: app.config.verticalAlign as BarLabelOption['verticalAlign'],
+ rotate: app.config.rotate as BarLabelOption['rotate'],
+ formatter: '{c} {name|{a}}',
+ fontSize: 16,
+ rich: {
+ name: {}
+ }
+};
+
+option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: {
+ data: ['Forest', 'Steppe', 'Desert', 'Wetland']
+ },
+ toolbox: {
+ show: true,
+ orient: 'vertical',
+ left: 'right',
+ top: 'center',
+ feature: {
+ mark: {show: true},
+ dataView: {show: true, readOnly: false},
+ magicType: {show: true, type: ['line', 'bar', 'stack']},
+ restore: {show: true},
+ saveAsImage: {show: true}
+ }
+ },
+ xAxis: [
+ {
+ type: 'category',
+ axisTick: {show: false},
+ data: ['2012', '2013', '2014', '2015', '2016']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value'
+ }
+ ],
+ series: [
+ {
+ name: 'Forest',
+ type: 'bar',
+ barGap: 0,
+ label: labelOption,
+ emphasis: {
+ focus: 'series'
+ },
+ data: [320, 332, 301, 334, 390]
+ },
+ {
+ name: 'Steppe',
+ type: 'bar',
+ label: labelOption,
+ emphasis: {
+ focus: 'series'
+ },
+ data: [220, 182, 191, 234, 290]
+ },
+ {
+ name: 'Desert',
+ type: 'bar',
+ label: labelOption,
+ emphasis: {
+ focus: 'series'
+ },
+ data: [150, 232, 201, 154, 190]
+ },
+ {
+ name: 'Wetland',
+ type: 'bar',
+ label: labelOption,
+ emphasis: {
+ focus: 'series'
+ },
+ data: [98, 77, 101, 99, 40]
+ }
+ ]
+};
\ No newline at end of file
diff --git a/examples/examples/ts/bar-large.ts b/examples/examples/ts/bar-large.ts
new file mode 100644
index 0000000..03be19a
--- /dev/null
+++ b/examples/examples/ts/bar-large.ts
@@ -0,0 +1,95 @@
+/*
+title: Large Scale Bar Chart
+category: bar
+titleCN: 大数据量柱图
+difficulty: 5
+*/
+
+
+const dataCount = 5e5;
+const data = generateData(dataCount);
+
+option = {
+ title: {
+ text: echarts.format.addCommas(dataCount) + ' Data',
+ left: 10
+ },
+ toolbox: {
+ feature: {
+ dataZoom: {
+ yAxisIndex: false
+ },
+ saveAsImage: {
+ pixelRatio: 2
+ }
+ }
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {
+ bottom: 90
+ },
+ dataZoom: [{
+ type: 'inside'
+ }, {
+ type: 'slider'
+ }],
+ xAxis: {
+ data: data.categoryData,
+ silent: false,
+ splitLine: {
+ show: false
+ },
+ splitArea: {
+ show: false
+ }
+ },
+ yAxis: {
+ splitArea: {
+ show: false
+ }
+ },
+ series: [{
+ type: 'bar',
+ data: data.valueData,
+ // Set `large` for large data amount
+ large: true
+ }]
+};
+
+function generateData(count: number) {
+ let baseValue = Math.random() * 1000;
+ let time = +new Date(2011, 0, 1);
+ let smallBaseValue: number;
+
+ function next(idx: number) {
+ smallBaseValue = idx % 30 === 0
+ ? Math.random() * 700
+ : (smallBaseValue + Math.random() * 500 - 250);
+ baseValue += Math.random() * 20 - 10;
+ return Math.max(
+ 0,
+ Math.round(baseValue + smallBaseValue) + 3000
+ );
+ }
+
+ const categoryData = [];
+ const valueData = [];
+
+ for (let i = 0; i < count; i++) {
+ categoryData.push(echarts.format.formatTime('yyyy-MM-dd\nhh:mm:ss', time, false));
+ valueData.push(next(i).toFixed(2));
+ time += 1000;
+ }
+
+ return {
+ categoryData: categoryData,
+ valueData: valueData
+ };
+}
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/bar-negative.ts b/examples/examples/ts/bar-negative.ts
new file mode 100644
index 0000000..a1c5aa2
--- /dev/null
+++ b/examples/examples/ts/bar-negative.ts
@@ -0,0 +1,79 @@
+/*
+title: Bar Chart with Negative Value
+titleCN: 正负条形图
+category: bar
+difficulty: 4
+*/
+
+option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: { // 坐标轴指示器，坐标轴触发有效
+ type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+ }
+ },
+ legend: {
+ data: ['利润', '支出', '收入']
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'value'
+ }
+ ],
+ yAxis: [
+ {
+ type: 'category',
+ axisTick: {
+ show: false
+ },
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ }
+ ],
+ series: [
+ {
+ name: '利润',
+ type: 'bar',
+ label: {
+ show: true,
+ position: 'inside'
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ data: [200, 170, 240, 244, 200, 220, 210]
+ },
+ {
+ name: '收入',
+ type: 'bar',
+ stack: 'Total',
+ label: {
+ show: true
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ data: [320, 302, 341, 374, 390, 450, 420]
+ },
+ {
+ name: '支出',
+ type: 'bar',
+ stack: 'Total',
+ label: {
+ show: true,
+ position: 'left'
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ data: [-120, -132, -101, -134, -190, -230, -210]
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/bar-negative2.ts b/examples/examples/ts/bar-negative2.ts
new file mode 100644
index 0000000..2d4884d
--- /dev/null
+++ b/examples/examples/ts/bar-negative2.ts
@@ -0,0 +1,67 @@
+/*
+title: Bar Chart with Negative Value
+titleCN: 交错正负轴标签
+category: bar
+difficulty: 2
+*/
+
+const labelRight = {
+ position: 'right'
+} as const;
+
+option = {
+ title: {
+ text: 'Bar Chart with Negative Value'
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {
+ top: 80,
+ bottom: 30
+ },
+ xAxis: {
+ type: 'value',
+ position: 'top',
+ splitLine: {
+ lineStyle: {
+ type: 'dashed'
+ }
+ }
+ },
+ yAxis: {
+ type: 'category',
+ axisLine: {show: false},
+ axisLabel: {show: false},
+ axisTick: {show: false},
+ splitLine: {show: false},
+ data: ['ten', 'nine', 'eight', 'seven', 'six', 'five', 'four', 'three', 'two', 'one']
+ },
+ series: [
+ {
+ name: 'Cost',
+ type: 'bar',
+ stack: 'Total',
+ label: {
+ show: true,
+ formatter: '{b}'
+ },
+ data: [
+ {value: -0.07, label: labelRight},
+ {value: -0.09, label: labelRight},
+ 0.2, 0.44,
+ {value: -0.23, label: labelRight},
+ 0.08,
+ {value: -0.17, label: labelRight},
+ 0.47,
+ {value: -0.36, label: labelRight},
+ 0.18
+ ]
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/bar-polar-label-radial.ts b/examples/examples/ts/bar-polar-label-radial.ts
new file mode 100644
index 0000000..9ab4b01
--- /dev/null
+++ b/examples/examples/ts/bar-polar-label-radial.ts
@@ -0,0 +1,38 @@
+/*
+title: Radial Polar Bar Label Position
+titleCN: 极坐标柱状图标签
+category: bar
+difficulty: 2
+*/
+
+option = {
+ title: [{
+ text: 'Radial Polar Bar Label Position (middle)'
+ }],
+ polar: {
+ radius: [30, '80%']
+ },
+ radiusAxis: {
+ max: 4
+ },
+ angleAxis: {
+ type: 'category',
+ data: ['a', 'b', 'c', 'd'],
+ startAngle: 75
+ },
+ tooltip: {},
+ series: {
+ type: 'bar',
+ data: [2, 1.2, 2.4, 3.6],
+ coordinateSystem: 'polar',
+ label: {
+ show: true,
+ position: 'middle', // or 'start', 'insideStart', 'end', 'insideEnd'
+ formatter: '{b}: {c}',
+ }
+ },
+ backgroundColor: '#fff',
+ animation: false
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/bar-polar-label-tangential.ts b/examples/examples/ts/bar-polar-label-tangential.ts
new file mode 100644
index 0000000..9fcd728
--- /dev/null
+++ b/examples/examples/ts/bar-polar-label-tangential.ts
@@ -0,0 +1,37 @@
+/*
+title: Tangential Polar Bar Label Position
+titleCN: 极坐标柱状图标签
+category: bar
+difficulty: 2
+*/
+option = {
+ title: [{
+ text: 'Tangential Polar Bar Label Position (middle)'
+ }],
+ polar: {
+ radius: [30, '80%']
+ },
+ angleAxis: {
+ max: 4,
+ startAngle: 75
+ },
+ radiusAxis: {
+ type: 'category',
+ data: ['a', 'b', 'c', 'd']
+ },
+ tooltip: {},
+ series: {
+ type: 'bar',
+ data: [2, 1.2, 2.4, 3.6],
+ coordinateSystem: 'polar',
+ label: {
+ show: true,
+ position: 'middle', // or 'start', 'insideStart', 'end', 'insideEnd'
+ formatter: '{b}: {c}',
+ }
+ },
+ backgroundColor: '#fff',
+ animation: false
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/bar-polar-real-estate.ts b/examples/examples/ts/bar-polar-real-estate.ts
new file mode 100644
index 0000000..42d60b2
--- /dev/null
+++ b/examples/examples/ts/bar-polar-real-estate.ts
@@ -0,0 +1,104 @@
+/*
+title: Bar Chart on Polar
+category: bar
+difficulty: 7
+shotWidth: 800
+*/
+
+const data = [
+ [5000, 10000, 6785.71],
+ [4000, 10000, 6825],
+ [3000, 6500, 4463.33],
+ [2500, 5600, 3793.83],
+ [2000, 4000, 3060],
+ [2000, 4000, 3222.33],
+ [2500, 4000, 3133.33],
+ [1800, 4000, 3100],
+ [2000, 3500, 2750],
+ [2000, 3000, 2500],
+ [1800, 3000, 2433.33],
+ [2000, 2700, 2375],
+ [1500, 2800, 2150],
+ [1500, 2300, 2100],
+ [1600, 3500, 2057.14],
+ [1500, 2600, 2037.5],
+ [1500, 2417.54, 1905.85],
+ [1500, 2000, 1775],
+ [1500, 1800, 1650]
+];
+const cities = ['北京', '上海', '深圳', '广州', '苏州', '杭州', '南京', '福州', '青岛', '济南', '长春', '大连', '温州', '郑州', '武汉', '成都', '东莞', '沈阳', '烟台'];
+const barHeight = 50;
+
+option = {
+ title: {
+ text: 'How expensive is it to rent an apartment in China?',
+ subtext: 'Data from https://www.numbeo.com'
+ },
+ legend: {
+ show: true,
+ top: 'bottom',
+ data: ['Range', 'Average']
+ },
+ grid: {
+ top: 100
+ },
+ angleAxis: {
+ type: 'category',
+ data: cities
+ },
+ tooltip: {
+ show: true,
+ formatter: function (params: any) {
+ const id = params.dataIndex;
+ return cities[id] + '<br>Lowest：' + data[id][0] + '<br>Highest：' + data[id][1] + '<br>Average：' + data[id][2];
+ }
+ },
+ radiusAxis: {
+ },
+ polar: {
+ },
+ series: [{
+ type: 'bar',
+ itemStyle: {
+ color: 'transparent'
+ },
+ data: data.map(function (d) {
+ return d[0];
+ }),
+ coordinateSystem: 'polar',
+ stack: 'Min Max',
+ silent: true
+ }, {
+ type: 'bar',
+ data: data.map(function (d) {
+ return d[1] - d[0];
+ }),
+ coordinateSystem: 'polar',
+ name: 'Range',
+ stack: 'Min Max'
+ }, {
+ type: 'bar',
+ itemStyle: {
+ color: 'transparent'
+ },
+ data: data.map(function (d) {
+ return d[2] - barHeight;
+ }),
+ coordinateSystem: 'polar',
+ stack: 'Average',
+ silent: true,
+ z: 10
+ }, {
+ type: 'bar',
+ data: data.map(function (d) {
+ return barHeight * 2;
+ }),
+ coordinateSystem: 'polar',
+ name: 'Average',
+ stack: 'Average',
+ barGap: '-100%',
+ z: 10
+ }]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/bar-polar-stack-radial.ts b/examples/examples/ts/bar-polar-stack-radial.ts
new file mode 100644
index 0000000..34a01e4
--- /dev/null
+++ b/examples/examples/ts/bar-polar-stack-radial.ts
@@ -0,0 +1,51 @@
+/*
+title: Stacked Bar Chart on Polar(Radial)
+titleCN: 极坐标系下的堆叠柱状图
+category: bar
+difficulty: 7
+*/
+
+option = {
+ angleAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ radiusAxis: {
+ },
+ polar: {
+ },
+ series: [{
+ type: 'bar',
+ data: [1, 2, 3, 4, 3, 5, 1],
+ coordinateSystem: 'polar',
+ name: 'A',
+ stack: 'a',
+ emphasis: {
+ focus: 'series'
+ }
+ }, {
+ type: 'bar',
+ data: [2, 4, 6, 1, 3, 2, 1],
+ coordinateSystem: 'polar',
+ name: 'B',
+ stack: 'a',
+ emphasis: {
+ focus: 'series'
+ }
+ }, {
+ type: 'bar',
+ data: [1, 2, 3, 4, 1, 2, 5],
+ coordinateSystem: 'polar',
+ name: 'C',
+ stack: 'a',
+ emphasis: {
+ focus: 'series'
+ }
+ }],
+ legend: {
+ show: true,
+ data: ['A', 'B', 'C']
+ }
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/bar-polar-stack.ts b/examples/examples/ts/bar-polar-stack.ts
new file mode 100644
index 0000000..b81466b
--- /dev/null
+++ b/examples/examples/ts/bar-polar-stack.ts
@@ -0,0 +1,52 @@
+/*
+title: Stacked Bar Chart on Polar
+titleCN: 极坐标系下的堆叠柱状图
+category: bar
+difficulty: 7
+*/
+
+option = {
+ angleAxis: {
+ },
+ radiusAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu'],
+ z: 10
+ },
+ polar: {
+ },
+ series: [{
+ type: 'bar',
+ data: [1, 2, 3, 4],
+ coordinateSystem: 'polar',
+ name: 'A',
+ stack: 'a',
+ emphasis: {
+ focus: 'series'
+ }
+ }, {
+ type: 'bar',
+ data: [2, 4, 6, 8],
+ coordinateSystem: 'polar',
+ name: 'B',
+ stack: 'a',
+ emphasis: {
+ focus: 'series'
+ }
+ }, {
+ type: 'bar',
+ data: [1, 2, 3, 4],
+ coordinateSystem: 'polar',
+ name: 'C',
+ stack: 'a',
+ emphasis: {
+ focus: 'series'
+ }
+ }],
+ legend: {
+ show: true,
+ data: ['A', 'B', 'C']
+ }
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/bar-race-country.ts b/examples/examples/ts/bar-race-country.ts
new file mode 100644
index 0000000..ee402de
--- /dev/null
+++ b/examples/examples/ts/bar-race-country.ts
@@ -0,0 +1,142 @@
+/*
+title: Bar Race
+titleCN: 动态排序柱状图 - 人均收入
+category: bar
+difficulty: 6
+videoStart: 1000
+videoEnd: 6000
+*/
+
+
+const updateFrequency = 2000;
+const dimension = 0;
+
+const countryColors: Record<string, string> = {"Australia":"#00008b","Canada":"#f00","China":"#ffde00","Cuba":"#002a8f","Finland":"#003580","France":"#ed2939","Germany":"#000","Iceland":"#003897","India":"#f93","Japan":"#bc002d","North Korea":"#024fa2","South Korea":"#000","New Zealand":"#00247d","Norway":"#ef2b2d","Poland":"#dc143c","Russia":"#d52b1e","Turkey":"#e30a17","United Kingdom":"#00247d","United States":"#b22234"};
+
+$.when(
+ $.getJSON('https://cdn.jsdelivr.net/npm/emoji-flags@1.3.0/data.json'),
+ $.getJSON(ROOT_PATH + '/data/asset/data/life-expectancy-table.json')
+).done(function (res0, res1) {
+ const flags = res0[0];
+ const data = res1[0];
+ const years: string[] = [];
+ for (var i = 0; i < data.length; ++i) {
+ if (years.length === 0 || years[years.length - 1] !== data[i][4]) {
+ years.push(data[i][4]);
+ }
+ }
+
+ function getFlag(countryName: string) {
+ if (!countryName) {
+ return '';
+ }
+ return (flags.find(function (item) {
+ return item.name === countryName;
+ }) || {}).emoji;
+ }
+ var startIndex = 10;
+ var startYear = years[startIndex];
+
+ option = {
+ grid: {
+ top: 10,
+ bottom: 30,
+ left: 150,
+ right: 80
+ },
+ xAxis: {
+ max: 'dataMax',
+ axisLabel: {
+ formatter: function (n: number) {
+ return Math.round(n) + '';
+ }
+ }
+ },
+ dataset: {
+ source: data.slice(1).filter(function (d) {
+ return d[4] === startYear;
+ })
+ },
+ yAxis: {
+ type: 'category',
+ inverse: true,
+ max: 10,
+ axisLabel: {
+ show: true,
+ fontSize: 14,
+ formatter: function (value: string) {
+ return value + '{flag|' + getFlag(value) + '}';
+ },
+ rich: {
+ flag: {
+ fontSize: 25,
+ padding: 5
+ }
+ }
+ },
+ animationDuration: 300,
+ animationDurationUpdate: 300
+ },
+ series: [{
+ realtimeSort: true,
+ seriesLayoutBy: 'column',
+ type: 'bar',
+ itemStyle: {
+ color: function (param: any) {
+ return countryColors[param.value[3]] || '#5470c6';
+ }
+ },
+ encode: {
+ x: dimension,
+ y: 3
+ },
+ label: {
+ show: true,
+ precision: 1,
+ position: 'right',
+ valueAnimation: true,
+ fontFamily: 'monospace'
+ }
+ }],
+ // Disable init animation.
+ animationDuration: 0,
+ animationDurationUpdate: updateFrequency,
+ animationEasing: 'linear',
+ animationEasingUpdate: 'linear',
+ graphic: {
+ elements: [{
+ type: 'text',
+ right: 160,
+ bottom: 60,
+ style: {
+ text: startYear,
+ font: 'bolder 80px monospace',
+ fill: 'rgba(100, 100, 100, 0.25)'
+ },
+ z: 100
+ }]
+ }
+ };
+
+ // console.log(option);
+ myChart.setOption<echarts.EChartsOption>(option);
+
+ for (var i = startIndex; i < years.length - 1; ++i) {
+ (function (i) {
+ setTimeout(function () {
+ updateYear(years[i + 1]);
+ }, (i - startIndex) * updateFrequency);
+ })(i);
+ }
+
+ function updateYear(year: string) {
+ var source = data.slice(1).filter(function (d) {
+ return d[4] === year;
+ });
+ option.series[0].data = source;
+ option.graphic.elements[0].style.text = year;
+ myChart.setOption<echarts.EChartsOption>(option);
+ }
+})
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/bar-race.ts b/examples/examples/ts/bar-race.ts
new file mode 100644
index 0000000..bc4de3d
--- /dev/null
+++ b/examples/examples/ts/bar-race.ts
@@ -0,0 +1,71 @@
+/*
+title: Bar Race
+titleCN: 动态排序柱状图
+category: bar
+difficulty: 5
+videoStart: 1000
+videoEnd: 6000
+*/
+
+const data: number[] = [];
+for (let i = 0; i < 5; ++i) {
+ data.push(Math.round(Math.random() * 200));
+}
+
+option = {
+ xAxis: {
+ max: 'dataMax',
+ },
+ yAxis: {
+ type: 'category',
+ data: ['A', 'B', 'C', 'D', 'E'],
+ inverse: true,
+ animationDuration: 300,
+ animationDurationUpdate: 300,
+ max: 2 // only the largest 3 bars will be displayed
+ },
+ series: [{
+ realtimeSort: true,
+ name: 'X',
+ type: 'bar',
+ data: data,
+ label: {
+ show: true,
+ position: 'right',
+ valueAnimation: true
+ }
+ }],
+ legend: {
+ show: true
+ },
+ animationDuration: 0,
+ animationDurationUpdate: 3000,
+ animationEasing: 'linear',
+ animationEasingUpdate: 'linear'
+};
+
+function run () {
+ for (var i = 0; i < data.length; ++i) {
+ if (Math.random() > 0.9) {
+ data[i] += Math.round(Math.random() * 2000);
+ }
+ else {
+ data[i] += Math.round(Math.random() * 200);
+ }
+ }
+ myChart.setOption<echarts.EChartsOption>({
+ series: [{
+ type: 'bar',
+ data
+ }]
+ });
+}
+
+setTimeout(function() {
+ run();
+}, 0);
+setInterval(function () {
+ run();
+}, 3000);
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/bar-rich-text.ts b/examples/examples/ts/bar-rich-text.ts
new file mode 100644
index 0000000..a4545d3
--- /dev/null
+++ b/examples/examples/ts/bar-rich-text.ts
@@ -0,0 +1,153 @@
+/*
+title: Wheater Statistics
+category: 'bar, rich'
+titleCN: 天气统计（富文本）
+difficulty: 6
+*/
+
+
+const weatherIcons = {
+ 'Sunny': ROOT_PATH + '/data/asset/img/weather/sunny_128.png',
+ 'Cloudy': ROOT_PATH + '/data/asset/img/weather/cloudy_128.png',
+ 'Showers': ROOT_PATH + '/data/asset/img/weather/showers_128.png'
+} as const;
+
+const seriesLabel = {
+ show: true
+} as const;
+
+option = {
+ title: {
+ text: 'Weather Statistics'
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: {
+ data: ['City Alpha', 'City Beta', 'City Gamma']
+ },
+ grid: {
+ left: 100
+ },
+ toolbox: {
+ show: true,
+ feature: {
+ saveAsImage: {}
+ }
+ },
+ xAxis: {
+ type: 'value',
+ name: 'Days',
+ axisLabel: {
+ formatter: '{value}'
+ }
+ },
+ yAxis: {
+ type: 'category',
+ inverse: true,
+ data: ['Sunny', 'Cloudy', 'Showers'],
+ axisLabel: {
+ formatter: function (value) {
+ return '{' + value + '| }\n{value|' + value + '}';
+ },
+ margin: 20,
+ rich: {
+ value: {
+ lineHeight: 30,
+ align: 'center'
+ },
+ Sunny: {
+ height: 40,
+ align: 'center',
+ backgroundColor: {
+ image: weatherIcons.Sunny
+ }
+ },
+ Cloudy: {
+ height: 40,
+ align: 'center',
+ backgroundColor: {
+ image: weatherIcons.Cloudy
+ }
+ },
+ Showers: {
+ height: 40,
+ align: 'center',
+ backgroundColor: {
+ image: weatherIcons.Showers
+ }
+ }
+ }
+ }
+ },
+ series: [
+ {
+ name: 'City Alpha',
+ type: 'bar',
+ data: [165, 170, 30],
+ label: seriesLabel,
+ markPoint: {
+ symbolSize: 1,
+ symbolOffset: [0, '50%'],
+ label: {
+ formatter: '{a|{a}\n}{b|{b} }{c|{c}}',
+ backgroundColor: 'rgb(242,242,242)',
+ borderColor: '#aaa',
+ borderWidth: 1,
+ borderRadius: 4,
+ padding: [4, 10],
+ lineHeight: 26,
+ // shadowBlur: 5,
+ // shadowColor: '#000',
+ // shadowOffsetX: 0,
+ // shadowOffsetY: 1,
+ position: 'right',
+ distance: 20,
+ rich: {
+ a: {
+ align: 'center',
+ color: '#fff',
+ fontSize: 18,
+ textShadowBlur: 2,
+ textShadowColor: '#000',
+ textShadowOffsetX: 0,
+ textShadowOffsetY: 1,
+ textBorderColor: '#333',
+ textBorderWidth: 2
+ },
+ b: {
+ color: '#333'
+ },
+ c: {
+ color: '#ff8811',
+ textBorderColor: '#000',
+ textBorderWidth: 1,
+ fontSize: 22
+ }
+ }
+ },
+ data: [
+ {type: 'max', name: 'max days: '},
+ {type: 'min', name: 'min days: '}
+ ]
+ }
+ },
+ {
+ name: 'City Beta',
+ type: 'bar',
+ label: seriesLabel,
+ data: [150, 105, 110]
+ },
+ {
+ name: 'City Gamma',
+ type: 'bar',
+ label: seriesLabel,
+ data: [220, 82, 63]
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/bar-simple.ts b/examples/examples/ts/bar-simple.ts
new file mode 100644
index 0000000..f1221bb
--- /dev/null
+++ b/examples/examples/ts/bar-simple.ts
@@ -0,0 +1,22 @@
+/*
+title: Basic Bar
+category: bar
+titleCN: 基础柱状图
+difficulty: 0
+*/
+
+option = {
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [{
+ data: [120, 200, 150, 80, 70, 110, 130],
+ type: 'bar'
+ }]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/bar-stack.ts b/examples/examples/ts/bar-stack.ts
new file mode 100644
index 0000000..eeb8721
--- /dev/null
+++ b/examples/examples/ts/bar-stack.ts
@@ -0,0 +1,127 @@
+/*
+title: Stacked Column Chart
+titleCN: 堆叠柱状图
+category: bar
+difficulty: 3
+*/
+
+option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: {
+ data: ['Direct', 'Email', 'Union Ads', 'Video Ads', 'Search Engine', '百度', '谷歌', '必应', '其他']
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value'
+ }
+ ],
+ series: [
+ {
+ name: 'Direct',
+ type: 'bar',
+ emphasis: {
+ focus: 'series'
+ },
+ data: [320, 332, 301, 334, 390, 330, 320]
+ },
+ {
+ name: 'Email',
+ type: 'bar',
+ stack: 'Ad',
+ emphasis: {
+ focus: 'series'
+ },
+ data: [120, 132, 101, 134, 90, 230, 210]
+ },
+ {
+ name: 'Union Ads',
+ type: 'bar',
+ stack: 'Ad',
+ emphasis: {
+ focus: 'series'
+ },
+ data: [220, 182, 191, 234, 290, 330, 310]
+ },
+ {
+ name: 'Video Ads',
+ type: 'bar',
+ stack: 'Ad',
+ emphasis: {
+ focus: 'series'
+ },
+ data: [150, 232, 201, 154, 190, 330, 410]
+ },
+ {
+ name: 'Search Engine',
+ type: 'bar',
+ data: [862, 1018, 964, 1026, 1679, 1600, 1570],
+ emphasis: {
+ focus: 'series'
+ },
+ markLine: {
+ lineStyle: {
+ type: 'dashed'
+ },
+ data: [
+ [{type: 'min'}, {type: 'max'}]
+ ]
+ }
+ },
+ {
+ name: 'Baidu',
+ type: 'bar',
+ barWidth: 5,
+ stack: 'Search Engine',
+ emphasis: {
+ focus: 'series'
+ },
+ data: [620, 732, 701, 734, 1090, 1130, 1120]
+ },
+ {
+ name: 'Google',
+ type: 'bar',
+ stack: 'Search Engine',
+ emphasis: {
+ focus: 'series'
+ },
+ data: [120, 132, 101, 134, 290, 230, 220]
+ },
+ {
+ name: 'Bing',
+ type: 'bar',
+ stack: 'Search Engine',
+ emphasis: {
+ focus: 'series'
+ },
+ data: [60, 72, 71, 74, 190, 130, 110]
+ },
+ {
+ name: 'Others',
+ type: 'bar',
+ stack: 'Search Engine',
+ emphasis: {
+ focus: 'series'
+ },
+ data: [62, 82, 91, 84, 109, 110, 120]
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/bar-tick-align.ts b/examples/examples/ts/bar-tick-align.ts
new file mode 100644
index 0000000..2c96c16
--- /dev/null
+++ b/examples/examples/ts/bar-tick-align.ts
@@ -0,0 +1,43 @@
+/*
+title: Axis Align with Tick
+titleCN: 坐标轴刻度与标签对齐
+category: bar
+difficulty: 0
+*/
+
+option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ axisTick: {
+ alignWithLabel: true
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value'
+ }
+ ],
+ series: [
+ {
+ name: 'Direct',
+ type: 'bar',
+ barWidth: '60%',
+ data: [10, 52, 200, 334, 390, 330, 220]
+ }
+ ]
+};
diff --git a/examples/examples/ts/bar-waterfall.ts b/examples/examples/ts/bar-waterfall.ts
new file mode 100644
index 0000000..ba0daef
--- /dev/null
+++ b/examples/examples/ts/bar-waterfall.ts
@@ -0,0 +1,67 @@
+/*
+title: Waterfall Chart
+titleCN: 瀑布图（柱状图模拟）
+category: bar
+difficulty: 1
+*/
+
+option = {
+ title: {
+ text: 'Waterfall Chart',
+ subtext: 'Living Expenses in Shenzhen'
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ },
+ formatter: function (params) {
+ var tar = params[1];
+ return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ splitLine: {show: false},
+ data: ['Total', 'Rent', 'Utilities', 'Transportation', 'Meals', 'Other']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ name: 'Placeholder',
+ type: 'bar',
+ stack: 'Total',
+ itemStyle: {
+ borderColor: 'transparent',
+ color: 'transparent'
+ },
+ emphasis: {
+ itemStyle: {
+ borderColor: 'transparent',
+ color: 'transparent'
+ }
+ },
+ data: [0, 1700, 1400, 1200, 300, 0]
+ },
+ {
+ name: 'Life Cost',
+ type: 'bar',
+ stack: 'Total',
+ label: {
+ show: true,
+ position: 'inside'
+ },
+ data: [2900, 1200, 300, 200, 900, 300]
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/bar-waterfall2.ts b/examples/examples/ts/bar-waterfall2.ts
new file mode 100644
index 0000000..ea1465e
--- /dev/null
+++ b/examples/examples/ts/bar-waterfall2.ts
@@ -0,0 +1,91 @@
+/*
+title: Waterfall Chart
+titleCN: 阶梯瀑布图（柱状图模拟）
+category: bar
+difficulty: 3
+*/
+
+option = {
+ title: {
+ text: 'Accumulated Waterfall Chart'
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ },
+ formatter: function (params) {
+ let tar;
+ if (params[1].value !== '-') {
+ tar = params[1];
+ }
+ else {
+ tar = params[0];
+ }
+ return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
+ }
+ },
+ legend: {
+ data: ['支出', '收入']
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ splitLine: {show: false},
+ data: function () {
+ var list = [];
+ for (var i = 1; i <= 11; i++) {
+ list.push('11月' + i + '日');
+ }
+ return list;
+ }()
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ name: '辅助',
+ type: 'bar',
+ stack: 'Total',
+ itemStyle: {
+ borderColor: 'transparent',
+ color: 'transparent'
+ },
+ emphasis: {
+ itemStyle: {
+ borderColor: 'transparent',
+ color: 'transparent'
+ }
+ },
+ data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292]
+ },
+ {
+ name: '收入',
+ type: 'bar',
+ stack: 'Total',
+ label: {
+ show: true,
+ position: 'top'
+ },
+ data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-']
+ },
+ {
+ name: '支出',
+ type: 'bar',
+ stack: 'Total',
+ label: {
+ show: true,
+ position: 'bottom'
+ },
+ data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203]
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/bar-y-category-stack.ts b/examples/examples/ts/bar-y-category-stack.ts
new file mode 100644
index 0000000..fa2c1b3
--- /dev/null
+++ b/examples/examples/ts/bar-y-category-stack.ts
@@ -0,0 +1,94 @@
+/*
+title: Stacked Horizontal Bar
+titleCN: 堆叠条形图
+category: bar
+difficulty: 3
+*/
+option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: { // Use axis to trigger tooltip
+ type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+ }
+ },
+ legend: {
+ data: ['Direct', 'Mail Ad', 'Affiliate Ad', 'Video Ad', 'Search Engine']
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'value'
+ },
+ yAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ series: [
+ {
+ name: 'Direct',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ data: [320, 302, 301, 334, 390, 330, 320]
+ },
+ {
+ name: 'Mail Ad',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ data: [120, 132, 101, 134, 90, 230, 210]
+ },
+ {
+ name: 'Affiliate Ad',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ data: [220, 182, 191, 234, 290, 330, 310]
+ },
+ {
+ name: 'Video Ad',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ data: [150, 212, 201, 154, 190, 330, 410]
+ },
+ {
+ name: 'Search Engine',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ data: [820, 832, 901, 934, 1290, 1330, 1320]
+ }
+ ]
+};
+
+export {};
\ No newline at end of file
diff --git a/examples/examples/ts/bar-y-category.ts b/examples/examples/ts/bar-y-category.ts
new file mode 100644
index 0000000..36d8272
--- /dev/null
+++ b/examples/examples/ts/bar-y-category.ts
@@ -0,0 +1,50 @@
+/*
+title: World Population
+category: bar
+titleCN: 世界人口总量 - 条形图
+difficulty: 2
+*/
+
+option = {
+ title: {
+ text: 'World Population'
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: {
+ data: ['2011', '2012']
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'value',
+ boundaryGap: [0, 0.01]
+ },
+ yAxis: {
+ type: 'category',
+ data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
+ },
+ series: [
+ {
+ name: '2011',
+ type: 'bar',
+ data: [18203, 23489, 29034, 104970, 131744, 630230]
+ },
+ {
+ name: '2012',
+ type: 'bar',
+ data: [19325, 23438, 31000, 121594, 134141, 681807]
+ }
+ ]
+};
+
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/bar1.ts b/examples/examples/ts/bar1.ts
new file mode 100644
index 0000000..e37585b
--- /dev/null
+++ b/examples/examples/ts/bar1.ts
@@ -0,0 +1,76 @@
+/*
+title: Rainfall and Evaporation
+category: bar
+titleCN: 某地区蒸发量和降水量
+difficulty: 4
+*/
+
+option = {
+ title: {
+ text: 'Rainfall and Evaporation',
+ subtext: 'Fake Data'
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['Rainfall', 'Evaporation']
+ },
+ toolbox: {
+ show: true,
+ feature: {
+ dataView: {show: true, readOnly: false},
+ magicType: {show: true, type: ['line', 'bar']},
+ restore: {show: true},
+ saveAsImage: {show: true}
+ }
+ },
+ calculable: true,
+ xAxis: [
+ {
+ type: 'category',
+ data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value'
+ }
+ ],
+ series: [
+ {
+ name: 'Rainfall',
+ type: 'bar',
+ data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
+ markPoint: {
+ data: [
+ {type: 'max', name: 'Max'},
+ {type: 'min', name: 'Min'}
+ ]
+ },
+ markLine: {
+ data: [
+ {type: 'average', name: 'Avg'}
+ ]
+ }
+ },
+ {
+ name: 'Evaporation',
+ type: 'bar',
+ data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
+ markPoint: {
+ data: [
+ {name: '年最高', value: 182.2, xAxis: 7, yAxis: 183},
+ {name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
+ ]
+ },
+ markLine: {
+ data: [
+ {type: 'average', name: 'Avg'}
+ ]
+ }
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/boxplot-light-velocity.ts b/examples/examples/ts/boxplot-light-velocity.ts
new file mode 100644
index 0000000..5e6f8b9
--- /dev/null
+++ b/examples/examples/ts/boxplot-light-velocity.ts
@@ -0,0 +1,86 @@
+/*
+title: Boxplot Light Velocity
+category: boxplot
+titleCN: 基础盒须图
+*/
+
+option = {
+ title: [
+ {
+ text: 'Michelson-Morley Experiment',
+ left: 'center'
+ },
+ {
+ text: 'upper: Q3 + 1.5 * IQR \nlower: Q1 - 1.5 * IQR',
+ borderColor: '#999',
+ borderWidth: 1,
+ textStyle: {
+ fontWeight: 'normal',
+ fontSize: 14,
+ lineHeight: 20
+ },
+ left: '10%',
+ top: '90%'
+ }
+ ],
+ dataset: [{
+ source: [
+ [850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
+ [960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
+ [880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
+ [890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
+ [890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
+ ]
+ }, {
+ transform: {
+ type: 'boxplot',
+ config: { itemNameFormatter: 'expr {value}' }
+ }
+ }, {
+ fromDatasetIndex: 1,
+ fromTransformResult: 1
+ }],
+ tooltip: {
+ trigger: 'item',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {
+ left: '10%',
+ right: '10%',
+ bottom: '15%'
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: true,
+ nameGap: 30,
+ splitArea: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ }
+ },
+ yAxis: {
+ type: 'value',
+ name: 'km/s minus 299,000',
+ splitArea: {
+ show: true
+ }
+ },
+ series: [
+ {
+ name: 'boxplot',
+ type: 'boxplot',
+ datasetIndex: 1
+ },
+ {
+ name: 'outlier',
+ type: 'scatter',
+ datasetIndex: 2
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/boxplot-light-velocity2.ts b/examples/examples/ts/boxplot-light-velocity2.ts
new file mode 100644
index 0000000..14452ec
--- /dev/null
+++ b/examples/examples/ts/boxplot-light-velocity2.ts
@@ -0,0 +1,89 @@
+/*
+title: Boxplot Light Velocity2
+category: boxplot
+titleCN: 垂直方向盒须图
+*/
+
+option = {
+ title: [
+ {
+ text: 'Michelson-Morley Experiment',
+ left: 'center'
+ },
+ {
+ text: 'upper: Q3 + 1.5 * IRQ \nlower: Q1 - 1.5 * IRQ',
+ borderColor: '#999',
+ borderWidth: 1,
+ textStyle: {
+ fontSize: 14
+ },
+ left: '10%',
+ top: '90%'
+ }
+ ],
+ dataset: [{
+ source: [
+ [850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
+ [960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
+ [880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
+ [890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
+ [890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
+ ]
+ }, {
+ transform: {
+ type: 'boxplot',
+ config: {
+ itemNameFormatter: function (params: any) {
+ return 'expr ' + params.value;
+ }
+ }
+ }
+ }, {
+ fromDatasetIndex: 1,
+ fromTransformResult: 1
+ }],
+ tooltip: {
+ trigger: 'item',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {
+ left: '10%',
+ right: '10%',
+ bottom: '15%'
+ },
+ yAxis: {
+ type: 'category',
+ boundaryGap: true,
+ nameGap: 30,
+ splitArea: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ }
+ },
+ xAxis: {
+ type: 'value',
+ name: 'km/s minus 299,000',
+ splitArea: {
+ show: true
+ }
+ },
+ series: [
+ {
+ name: 'boxplot',
+ type: 'boxplot',
+ datasetIndex: 1
+ },
+ {
+ name: 'outlier',
+ type: 'scatter',
+ encode: { x: 1, y: 0 },
+ datasetIndex: 2
+ }
+ ]
+};
+
+export {};
\ No newline at end of file
diff --git a/examples/examples/ts/boxplot-multi.ts b/examples/examples/ts/boxplot-multi.ts
new file mode 100644
index 0000000..f877282
--- /dev/null
+++ b/examples/examples/ts/boxplot-multi.ts
@@ -0,0 +1,108 @@
+/*
+title: Multiple Categories
+category: boxplot
+titleCN: 多系列盒须图
+*/
+
+
+// Generate data.
+function makeData() {
+ let data = [];
+ for (let i = 0; i < 18; i++) {
+ let cate = [];
+ for (let j = 0; j < 100; j++) {
+ cate.push(Math.random() * 200);
+ }
+ data.push(cate);
+ }
+ return data;
+}
+const data0 = makeData();
+const data1 = makeData();
+const data2 = makeData();
+
+
+option = {
+ title: {
+ text: 'Multiple Categories',
+ left: 'center'
+ },
+ dataset: [{
+ source: data0
+ }, {
+ source: data1
+ }, {
+ source: data2
+ }, {
+ fromDatasetIndex: 0,
+ transform: { type: 'boxplot' }
+ }, {
+ fromDatasetIndex: 1,
+ transform: { type: 'boxplot' }
+ }, {
+ fromDatasetIndex: 2,
+ transform: { type: 'boxplot' }
+ }],
+ legend: {
+ top: '10%'
+ },
+ tooltip: {
+ trigger: 'item',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {
+ left: '10%',
+ top: '20%',
+ right: '10%',
+ bottom: '15%'
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: true,
+ nameGap: 30,
+ splitArea: {
+ show: true
+ },
+ splitLine: {
+ show: false
+ }
+ },
+ yAxis: {
+ type: 'value',
+ name: 'Value',
+ min: -400,
+ max: 600,
+ splitArea: {
+ show: false
+ }
+ },
+ dataZoom: [{
+ type: 'inside',
+ start: 0,
+ end: 20
+ }, {
+ show: true,
+ type: 'slider',
+ top: '90%',
+ xAxisIndex: [0],
+ start: 0,
+ end: 20
+ }],
+ series: [{
+ name: 'category0',
+ type: 'boxplot',
+ datasetIndex: 3
+ }, {
+ name: 'category1',
+ type: 'boxplot',
+ datasetIndex: 4
+ }, {
+ name: 'category2',
+ type: 'boxplot',
+ datasetIndex: 5
+ }]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/bubble-gradient.ts b/examples/examples/ts/bubble-gradient.ts
new file mode 100644
index 0000000..42ec11d
--- /dev/null
+++ b/examples/examples/ts/bubble-gradient.ts
@@ -0,0 +1,111 @@
+/*
+title: Bubble Chart
+category: scatter
+titleCN: 气泡图
+difficulty: 6
+*/
+
+const data = [
+ [[28604,77,17096869,'Australia',1990],[31163,77.4,27662440,'Canada',1990],[1516,68,1154605773,'China',1990],[13670,74.7,10582082,'Cuba',1990],[28599,75,4986705,'Finland',1990],[29476,77.1,56943299,'France',1990],[31476,75.4,78958237,'Germany',1990],[28666,78.1,254830,'Iceland',1990],[1777,57.7,870601776,'India',1990],[29550,79.1,122249285,'Japan',1990],[2076,67.9,20194354,'North Korea',1990],[12087,72,42972254,'South Korea',1990],[24021,75.4,3397534,'New Zealand',1990],[43296,76.8,42 [...]
+ [[44056,81.8,23968973,'Australia',2015],[43294,81.7,35939927,'Canada',2015],[13334,76.9,1376048943,'China',2015],[21291,78.5,11389562,'Cuba',2015],[38923,80.8,5503457,'Finland',2015],[37599,81.9,64395345,'France',2015],[44053,81.1,80688545,'Germany',2015],[42182,82.8,329425,'Iceland',2015],[5903,66.8,1311050527,'India',2015],[36162,83.5,126573481,'Japan',2015],[1390,71.4,25155317,'North Korea',2015],[34644,80.7,50293439,'South Korea',2015],[34186,80.6,4528526,'New Zealand',2015],[643 [...]
+];
+
+option = {
+ backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
+ offset: 0,
+ color: '#f7f8fa'
+ }, {
+ offset: 1,
+ color: '#cdd0d5'
+ }]),
+ title: {
+ text: 'Life Expectancy and GDP by Country' ,
+ left: '5%',
+ top: '3%'
+ },
+ legend: {
+ right: '10%',
+ top: '3%',
+ data: ['1990', '2015']
+ },
+ grid: {
+ left: '8%',
+ top: '10%'
+ },
+ xAxis: {
+ splitLine: {
+ lineStyle: {
+ type: 'dashed'
+ }
+ }
+ },
+ yAxis: {
+ splitLine: {
+ lineStyle: {
+ type: 'dashed'
+ }
+ },
+ scale: true
+ },
+ series: [{
+ name: '1990',
+ data: data[0],
+ type: 'scatter',
+ symbolSize: function (data) {
+ return Math.sqrt(data[2]) / 5e2;
+ },
+ emphasis: {
+ focus: 'series',
+ label: {
+ show: true,
+ formatter: function (param) {
+ return param.data[3];
+ },
+ position: 'top'
+ }
+ },
+ itemStyle: {
+ shadowBlur: 10,
+ shadowColor: 'rgba(120, 36, 50, 0.5)',
+ shadowOffsetY: 5,
+ color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
+ offset: 0,
+ color: 'rgb(251, 118, 123)'
+ }, {
+ offset: 1,
+ color: 'rgb(204, 46, 72)'
+ }])
+ }
+ }, {
+ name: '2015',
+ data: data[1],
+ type: 'scatter',
+ symbolSize: function (data) {
+ return Math.sqrt(data[2]) / 5e2;
+ },
+ emphasis: {
+ focus: 'series',
+ label: {
+ show: true,
+ formatter: function (param) {
+ return param.data[3];
+ },
+ position: 'top'
+ }
+ },
+ itemStyle: {
+ shadowBlur: 10,
+ shadowColor: 'rgba(25, 100, 150, 0.5)',
+ shadowOffsetY: 5,
+ color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
+ offset: 0,
+ color: 'rgb(129, 227, 238)'
+ }, {
+ offset: 1,
+ color: 'rgb(25, 183, 207)'
+ }])
+ }
+ }]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/data/calendar-charts.js b/examples/examples/ts/calendar-charts.ts
similarity index 84%
copy from examples/data/calendar-charts.js
copy to examples/examples/ts/calendar-charts.ts
index 39aaad7..5418331 100644
--- a/examples/data/calendar-charts.js
+++ b/examples/examples/ts/calendar-charts.ts
@@ -1,18 +1,18 @@
/*
title: Calendar Charts
category: 'calendar, scatter'
-titleCN: 日力图
+titleCN: 日历图
shotWidth: 1000
difficulty: 11
*/
-function getVirtulData(year) {
+function getVirtulData(year: string) {
year = year || '2017';
- var date = +echarts.number.parseDate(year + '-01-01');
- var end = +echarts.number.parseDate((+year + 1) + '-01-01');
- var dayTime = 3600 * 24 * 1000;
- var data = [];
- for (var time = date; time < end; time += dayTime) {
+ let date = +echarts.number.parseDate(year + '-01-01');
+ let end = +echarts.number.parseDate((+year + 1) + '-01-01');
+ let dayTime = 3600 * 24 * 1000;
+ let data = [];
+ for (let time = date; time < end; time += dayTime) {
data.push([
echarts.format.formatTime('yyyy-MM-dd', time),
Math.floor(Math.random() * 1000)
@@ -24,7 +24,7 @@ function getVirtulData(year) {
-var graphData = [
+const graphData = [
[
'2017-02-01',
260
@@ -55,7 +55,7 @@ var graphData = [
]
];
-var links = graphData.map(function (item, idx) {
+const links = graphData.map(function (item, idx) {
return {
source: idx,
target: idx + 1
@@ -144,7 +144,7 @@ option = {
},
dayLabel: {
firstDay: 1,
- nameMap: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+ nameMap: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
},
monthLabel: {
nameMap: 'cn',
@@ -167,7 +167,7 @@ option = {
}, {
type: 'heatmap',
coordinateSystem: 'calendar',
- data: getVirtulData(2017)
+ data: getVirtulData('2017')
}, {
type: 'effectScatter',
coordinateSystem: 'calendar',
@@ -175,7 +175,7 @@ option = {
symbolSize: function (val) {
return val[1] / 40;
},
- data: getVirtulData(2017)
+ data: getVirtulData('2017')
}, {
type: 'scatter',
coordinateSystem: 'calendar',
@@ -183,11 +183,13 @@ option = {
symbolSize: function (val) {
return val[1] / 60;
},
- data: getVirtulData(2017)
+ data: getVirtulData('2017')
}, {
type: 'heatmap',
coordinateSystem: 'calendar',
calendarIndex: 3,
- data: getVirtulData(2017)
+ data: getVirtulData('2017')
}]
};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/calendar-effectscatter.ts b/examples/examples/ts/calendar-effectscatter.ts
new file mode 100644
index 0000000..131d57c
--- /dev/null
+++ b/examples/examples/ts/calendar-effectscatter.ts
@@ -0,0 +1,163 @@
+/*
+title: Calendar Effectscatter
+category: calendar
+titleCN: 热力特效散点图
+difficulty:3
+*/
+
+function getVirtulData(year: string) {
+ year = year || '2017';
+ let date = +echarts.number.parseDate(year + '-01-01');
+ let end = +echarts.number.parseDate((+year + 1) + '-01-01');
+ let dayTime = 3600 * 24 * 1000;
+ let data: [string, number][] = [];
+ for (let time = date; time < end; time += dayTime) {
+ data.push([
+ echarts.format.formatTime('yyyy-MM-dd', time),
+ Math.floor(Math.random() * 10000)
+ ]);
+ }
+ return data;
+}
+
+const data = getVirtulData('2016');
+
+option = {
+ backgroundColor: '#404a59',
+
+ title: {
+ top: 30,
+ text: 'Daily Step Count in 2016',
+ subtext: 'Fake Data',
+ left: 'center',
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ top: '30',
+ left: '100',
+ data: ['Steps', 'Top 12'],
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ calendar: [{
+ top: 100,
+ left: 'center',
+ range: ['2016-01-01', '2016-06-30'],
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#000',
+ width: 4,
+ type: 'solid'
+ }
+ },
+ yearLabel: {
+ formatter: '{start} 1st',
+ color: '#fff'
+ },
+ itemStyle: {
+ color: '#323c48',
+ borderWidth: 1,
+ borderColor: '#111'
+ }
+ }, {
+ top: 340,
+ left: 'center',
+ range: ['2016-07-01', '2016-12-31'],
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#000',
+ width: 4,
+ type: 'solid'
+ }
+ },
+ yearLabel: {
+ formatter: '{start} 2nd',
+ color: '#fff'
+ },
+ itemStyle: {
+ color: '#323c48',
+ borderWidth: 1,
+ borderColor: '#111'
+ }
+ }],
+ series: [
+ {
+ name: 'Steps',
+ type: 'scatter',
+ coordinateSystem: 'calendar',
+ data: data,
+ symbolSize: function (val) {
+ return val[1] / 500;
+ },
+ itemStyle: {
+ color: '#ddb926'
+ }
+ },
+ {
+ name: 'Steps',
+ type: 'scatter',
+ coordinateSystem: 'calendar',
+ calendarIndex: 1,
+ data: data,
+ symbolSize: function (val) {
+ return val[1] / 500;
+ },
+ itemStyle: {
+ color: '#ddb926'
+ }
+ },
+ {
+ name: 'Top 12',
+ type: 'effectScatter',
+ coordinateSystem: 'calendar',
+ calendarIndex: 1,
+ data: data.sort(function (a, b) {
+ return b[1] - a[1];
+ }).slice(0, 12),
+ symbolSize: function (val) {
+ return val[1] / 500;
+ },
+ showEffectOn: 'render',
+ rippleEffect: {
+ brushType: 'stroke'
+ },
+ itemStyle: {
+ color: '#f4e925',
+ shadowBlur: 10,
+ shadowColor: '#333'
+ },
+ zlevel: 1
+ },
+ {
+ name: 'Top 12',
+ type: 'effectScatter',
+ coordinateSystem: 'calendar',
+ data: data.sort(function (a, b) {
+ return b[1] - a[1];
+ }).slice(0, 12),
+ symbolSize: function (val) {
+ return val[1] / 500;
+ },
+ showEffectOn: 'render',
+ rippleEffect: {
+ brushType: 'stroke'
+ },
+ itemStyle: {
+ color: '#f4e925',
+ shadowBlur: 10,
+ shadowColor: '#333'
+ },
+ zlevel: 1
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/calendar-graph.ts b/examples/examples/ts/calendar-graph.ts
new file mode 100644
index 0000000..63c6251
--- /dev/null
+++ b/examples/examples/ts/calendar-graph.ts
@@ -0,0 +1,126 @@
+/*
+title: Calendar Graph
+category: 'calendar, graph'
+titleCN: 日历关系图
+difficulty: 4
+*/
+
+const graphData: [string, number][] = [
+ [
+ '2017-02-01',
+ 260
+ ],
+ [
+ '2017-02-04',
+ 200
+ ],
+ [
+ '2017-02-09',
+ 279
+ ],
+ [
+ '2017-02-13',
+ 847
+ ],
+ [
+ '2017-02-18',
+ 241
+ ],
+ [
+ '2017-02-23',
+ 411
+ ],
+ [
+ '2017-03-14',
+ 985
+ ]
+];
+
+const links = graphData.map(function (item, idx) {
+ return {
+ source: idx,
+ target: idx + 1
+ };
+});
+links.pop();
+
+function getVirtulData(year: string) {
+ year = year || '2017';
+ var date = +echarts.number.parseDate(year + '-01-01');
+ var end = +echarts.number.parseDate((+year + 1) + '-01-01');
+ var dayTime = 3600 * 24 * 1000;
+ var data = [];
+ for (var time = date; time < end; time += dayTime) {
+ data.push([
+ echarts.format.formatTime('yyyy-MM-dd', time),
+ Math.floor(Math.random() * 1000)
+ ]);
+ }
+ return data;
+}
+
+
+option = {
+ tooltip: {},
+ calendar: {
+ top: 'middle',
+ left: 'center',
+ orient: 'vertical',
+ cellSize: 40,
+ yearLabel: {
+ margin: 50,
+ fontSize: 30
+ },
+ dayLabel: {
+ firstDay: 1,
+ nameMap: 'cn'
+ },
+ monthLabel: {
+ nameMap: 'cn',
+ margin: 15,
+ fontSize: 20,
+ color: '#999'
+ },
+ range: ['2017-02', '2017-03-31']
+ },
+ visualMap: {
+ min: 0,
+ max: 1000,
+ type: 'piecewise',
+ left: 'center',
+ bottom: 20,
+ inRange: {
+ color: ['#5291FF', '#C7DBFF']
+ },
+ seriesIndex: [1],
+ orient: 'horizontal'
+ },
+ series: [{
+ type: 'graph',
+ edgeSymbol: ['none', 'arrow'],
+ coordinateSystem: 'calendar',
+ links: links,
+ symbolSize: 15,
+ calendarIndex: 0,
+ itemStyle: {
+ color: 'yellow',
+ shadowBlur: 9,
+ shadowOffsetX: 1.5,
+ shadowOffsetY: 3,
+ shadowColor: '#555'
+ },
+ lineStyle: {
+ color: '#D10E00',
+ width: 1,
+ opacity: 1
+ },
+ data: graphData,
+ z: 20
+ }, {
+ type: 'heatmap',
+ coordinateSystem: 'calendar',
+ data: getVirtulData('2017')
+ }]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/calendar-heatmap.ts b/examples/examples/ts/calendar-heatmap.ts
new file mode 100644
index 0000000..389c667
--- /dev/null
+++ b/examples/examples/ts/calendar-heatmap.ts
@@ -0,0 +1,56 @@
+/*
+title: Calendar Heatmap
+category: 'calendar, heatmap'
+titleCN: 日历热力图
+difficulty: 1
+*/
+
+function getVirtulData(year: string) {
+ year = year || '2017';
+ var date = +echarts.number.parseDate(year + '-01-01');
+ var end = +echarts.number.parseDate((+year + 1) + '-01-01');
+ var dayTime = 3600 * 24 * 1000;
+ var data: [string, number][] = [];
+ for (var time = date; time < end; time += dayTime) {
+ data.push([
+ echarts.format.formatTime('yyyy-MM-dd', time),
+ Math.floor(Math.random() * 10000)
+ ]);
+ }
+ return data;
+}
+
+option = {
+ title: {
+ top: 30,
+ left: 'center',
+ text: 'Daily Step Count'
+ },
+ tooltip: {},
+ visualMap: {
+ min: 0,
+ max: 10000,
+ type: 'piecewise',
+ orient: 'horizontal',
+ left: 'center',
+ top: 65
+ },
+ calendar: {
+ top: 120,
+ left: 30,
+ right: 30,
+ cellSize: ['auto', 13],
+ range: '2016',
+ itemStyle: {
+ borderWidth: 0.5
+ },
+ yearLabel: {show: false}
+ },
+ series: {
+ type: 'heatmap',
+ coordinateSystem: 'calendar',
+ data: getVirtulData('2016')
+ }
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/data/calendar-horizontal.js b/examples/examples/ts/calendar-horizontal.ts
similarity index 78%
copy from examples/data/calendar-horizontal.js
copy to examples/examples/ts/calendar-horizontal.ts
index 9dde1f1..c764b97 100644
--- a/examples/data/calendar-horizontal.js
+++ b/examples/examples/ts/calendar-horizontal.ts
@@ -1,18 +1,18 @@
/*
title: Calendar Heatmap Horizontal
category: calendar
-titleCN: 横向日力图
+titleCN: 横向日历图
shotWidth: 900
difficulty: 2
*/
-function getVirtulData(year) {
+function getVirtulData(year: string) {
year = year || '2017';
- var date = +echarts.number.parseDate(year + '-01-01');
- var end = +echarts.number.parseDate((+year + 1) + '-01-01');
- var dayTime = 3600 * 24 * 1000;
- var data = [];
- for (var time = date; time < end; time += dayTime) {
+ let date = +echarts.number.parseDate(year + '-01-01');
+ let end = +echarts.number.parseDate((+year + 1) + '-01-01');
+ let dayTime = 3600 * 24 * 1000;
+ let data: [string, number][] = [];
+ for (let time = date; time < end; time += dayTime) {
data.push([
echarts.format.formatTime('yyyy-MM-dd', time),
Math.floor(Math.random() * 1000)
diff --git a/examples/examples/ts/calendar-lunar.ts b/examples/examples/ts/calendar-lunar.ts
new file mode 100644
index 0000000..ea41f54
--- /dev/null
+++ b/examples/examples/ts/calendar-lunar.ts
@@ -0,0 +1,470 @@
+/*
+title: Calendar Lunar
+category: calendar
+titleCN: 农历日历图
+difficulty: 4
+*/
+
+const dateList = [
+ ['2017-1-1', '初四'],
+ ['2017-1-2', '初五'],
+ ['2017-1-3', '初六'],
+ ['2017-1-4', '初七'],
+ ['2017-1-5', '初八', '小寒'],
+ ['2017-1-6', '初九'],
+ ['2017-1-7', '初十'],
+ ['2017-1-8', '十一'],
+ ['2017-1-9', '十二'],
+ ['2017-1-10', '十三'],
+ ['2017-1-11', '十四'],
+ ['2017-1-12', '十五'],
+ ['2017-1-13', '十六'],
+ ['2017-1-14', '十七'],
+ ['2017-1-15', '十八'],
+ ['2017-1-16', '十九'],
+ ['2017-1-17', '二十'],
+ ['2017-1-18', '廿一'],
+ ['2017-1-19', '廿二'],
+ ['2017-1-20', '廿三', '大寒'],
+ ['2017-1-21', '廿四'],
+ ['2017-1-22', '廿五'],
+ ['2017-1-23', '廿六'],
+ ['2017-1-24', '廿七'],
+ ['2017-1-25', '廿八'],
+ ['2017-1-26', '廿九'],
+ ['2017-1-27', '三十'],
+ ['2017-1-28', '正月'],
+ ['2017-1-29', '初二'],
+ ['2017-1-30', '初三'],
+ ['2017-1-31', '初四'],
+ ['2017-2-1', '初五'],
+ ['2017-2-2', '初六'],
+ ['2017-2-3', '初七', '立春'],
+ ['2017-2-4', '初八'],
+ ['2017-2-5', '初九'],
+ ['2017-2-6', '初十'],
+ ['2017-2-7', '十一'],
+ ['2017-2-8', '十二'],
+ ['2017-2-9', '十三'],
+ ['2017-2-10', '十四'],
+ ['2017-2-11', '十五'],
+ ['2017-2-12', '十六'],
+ ['2017-2-13', '十七'],
+ ['2017-2-14', '十八'],
+ ['2017-2-15', '十九'],
+ ['2017-2-16', '二十'],
+ ['2017-2-17', '廿一'],
+ ['2017-2-18', '廿二', '雨水'],
+ ['2017-2-19', '廿三'],
+ ['2017-2-20', '廿四'],
+ ['2017-2-21', '廿五'],
+ ['2017-2-22', '廿六'],
+ ['2017-2-23', '廿七'],
+ ['2017-2-24', '廿八'],
+ ['2017-2-25', '廿九'],
+ ['2017-2-26', '二月'],
+ ['2017-2-27', '初二'],
+ ['2017-2-28', '初三'],
+ ['2017-3-1', '初四'],
+ ['2017-3-2', '初五'],
+ ['2017-3-3', '初六'],
+ ['2017-3-4', '初七'],
+ ['2017-3-5', '初八', '驚蟄'],
+ ['2017-3-6', '初九'],
+ ['2017-3-7', '初十'],
+ ['2017-3-8', '十一'],
+ ['2017-3-9', '十二'],
+ ['2017-3-10', '十三'],
+ ['2017-3-11', '十四'],
+ ['2017-3-12', '十五'],
+ ['2017-3-13', '十六'],
+ ['2017-3-14', '十七'],
+ ['2017-3-15', '十八'],
+ ['2017-3-16', '十九'],
+ ['2017-3-17', '二十'],
+ ['2017-3-18', '廿一'],
+ ['2017-3-19', '廿二'],
+ ['2017-3-20', '廿三', '春分'],
+ ['2017-3-21', '廿四'],
+ ['2017-3-22', '廿五'],
+ ['2017-3-23', '廿六'],
+ ['2017-3-24', '廿七'],
+ ['2017-3-25', '廿八'],
+ ['2017-3-26', '廿九'],
+ ['2017-3-27', '三十'],
+ ['2017-3-28', '三月'],
+ ['2017-3-29', '初二'],
+ ['2017-3-30', '初三'],
+ ['2017-3-31', '初四'],
+ ['2017-4-1', '初五'],
+ ['2017-4-2', '初六'],
+ ['2017-4-3', '初七'],
+ ['2017-4-4', '初八', '清明'],
+ ['2017-4-5', '初九'],
+ ['2017-4-6', '初十'],
+ ['2017-4-7', '十一'],
+ ['2017-4-8', '十二'],
+ ['2017-4-9', '十三'],
+ ['2017-4-10', '十四'],
+ ['2017-4-11', '十五'],
+ ['2017-4-12', '十六'],
+ ['2017-4-13', '十七'],
+ ['2017-4-14', '十八'],
+ ['2017-4-15', '十九'],
+ ['2017-4-16', '二十'],
+ ['2017-4-17', '廿一'],
+ ['2017-4-18', '廿二'],
+ ['2017-4-19', '廿三'],
+ ['2017-4-20', '廿四', '穀雨'],
+ ['2017-4-21', '廿五'],
+ ['2017-4-22', '廿六'],
+ ['2017-4-23', '廿七'],
+ ['2017-4-24', '廿八'],
+ ['2017-4-25', '廿九'],
+ ['2017-4-26', '四月'],
+ ['2017-4-27', '初二'],
+ ['2017-4-28', '初三'],
+ ['2017-4-29', '初四'],
+ ['2017-4-30', '初五'],
+ ['2017-5-1', '初六'],
+ ['2017-5-2', '初七'],
+ ['2017-5-3', '初八'],
+ ['2017-5-4', '初九'],
+ ['2017-5-5', '初十', '立夏'],
+ ['2017-5-6', '十一'],
+ ['2017-5-7', '十二'],
+ ['2017-5-8', '十三'],
+ ['2017-5-9', '十四'],
+ ['2017-5-10', '十五'],
+ ['2017-5-11', '十六'],
+ ['2017-5-12', '十七'],
+ ['2017-5-13', '十八'],
+ ['2017-5-14', '十九'],
+ ['2017-5-15', '二十'],
+ ['2017-5-16', '廿一'],
+ ['2017-5-17', '廿二'],
+ ['2017-5-18', '廿三'],
+ ['2017-5-19', '廿四'],
+ ['2017-5-20', '廿五'],
+ ['2017-5-21', '廿六', '小滿'],
+ ['2017-5-22', '廿七'],
+ ['2017-5-23', '廿八'],
+ ['2017-5-24', '廿九'],
+ ['2017-5-25', '三十'],
+ ['2017-5-26', '五月'],
+ ['2017-5-27', '初二'],
+ ['2017-5-28', '初三'],
+ ['2017-5-29', '初四'],
+ ['2017-5-30', '初五'],
+ ['2017-5-31', '初六'],
+ ['2017-6-1', '初七'],
+ ['2017-6-2', '初八'],
+ ['2017-6-3', '初九'],
+ ['2017-6-4', '初十'],
+ ['2017-6-5', '十一', '芒種'],
+ ['2017-6-6', '十二'],
+ ['2017-6-7', '十三'],
+ ['2017-6-8', '十四'],
+ ['2017-6-9', '十五'],
+ ['2017-6-10', '十六'],
+ ['2017-6-11', '十七'],
+ ['2017-6-12', '十八'],
+ ['2017-6-13', '十九'],
+ ['2017-6-14', '二十'],
+ ['2017-6-15', '廿一'],
+ ['2017-6-16', '廿二'],
+ ['2017-6-17', '廿三'],
+ ['2017-6-18', '廿四'],
+ ['2017-6-19', '廿五'],
+ ['2017-6-20', '廿六'],
+ ['2017-6-21', '廿七', '夏至'],
+ ['2017-6-22', '廿八'],
+ ['2017-6-23', '廿九'],
+ ['2017-6-24', '六月'],
+ ['2017-6-25', '初二'],
+ ['2017-6-26', '初三'],
+ ['2017-6-27', '初四'],
+ ['2017-6-28', '初五'],
+ ['2017-6-29', '初六'],
+ ['2017-6-30', '初七'],
+ ['2017-7-1', '初八'],
+ ['2017-7-2', '初九'],
+ ['2017-7-3', '初十'],
+ ['2017-7-4', '十一'],
+ ['2017-7-5', '十二'],
+ ['2017-7-6', '十三'],
+ ['2017-7-7', '十四', '小暑'],
+ ['2017-7-8', '十五'],
+ ['2017-7-9', '十六'],
+ ['2017-7-10', '十七'],
+ ['2017-7-11', '十八'],
+ ['2017-7-12', '十九'],
+ ['2017-7-13', '二十'],
+ ['2017-7-14', '廿一'],
+ ['2017-7-15', '廿二'],
+ ['2017-7-16', '廿三'],
+ ['2017-7-17', '廿四'],
+ ['2017-7-18', '廿五'],
+ ['2017-7-19', '廿六'],
+ ['2017-7-20', '廿七'],
+ ['2017-7-21', '廿八'],
+ ['2017-7-22', '廿九', '大暑'],
+ ['2017-7-23', '閏六',],
+ ['2017-7-24', '初二'],
+ ['2017-7-25', '初三'],
+ ['2017-7-26', '初四'],
+ ['2017-7-27', '初五'],
+ ['2017-7-28', '初六'],
+ ['2017-7-29', '初七'],
+ ['2017-7-30', '初八'],
+ ['2017-7-31', '初九'],
+ ['2017-8-1', '初十'],
+ ['2017-8-2', '十一'],
+ ['2017-8-3', '十二'],
+ ['2017-8-4', '十三'],
+ ['2017-8-5', '十四'],
+ ['2017-8-6', '十五'],
+ ['2017-8-7', '十六', '立秋'],
+ ['2017-8-8', '十七'],
+ ['2017-8-9', '十八'],
+ ['2017-8-10', '十九'],
+ ['2017-8-11', '二十'],
+ ['2017-8-12', '廿一'],
+ ['2017-8-13', '廿二'],
+ ['2017-8-14', '廿三'],
+ ['2017-8-15', '廿四'],
+ ['2017-8-16', '廿五'],
+ ['2017-8-17', '廿六'],
+ ['2017-8-18', '廿七'],
+ ['2017-8-19', '廿八'],
+ ['2017-8-20', '廿九'],
+ ['2017-8-21', '三十'],
+ ['2017-8-22', '七月'],
+ ['2017-8-23', '初二', '處暑'],
+ ['2017-8-24', '初三'],
+ ['2017-8-25', '初四'],
+ ['2017-8-26', '初五'],
+ ['2017-8-27', '初六'],
+ ['2017-8-28', '初七'],
+ ['2017-8-29', '初八'],
+ ['2017-8-30', '初九'],
+ ['2017-8-31', '初十'],
+ ['2017-9-1', '十一'],
+ ['2017-9-2', '十二'],
+ ['2017-9-3', '十三'],
+ ['2017-9-4', '十四'],
+ ['2017-9-5', '十五'],
+ ['2017-9-6', '十六'],
+ ['2017-9-7', '十七', '白露'],
+ ['2017-9-8', '十八'],
+ ['2017-9-9', '十九'],
+ ['2017-9-10', '二十'],
+ ['2017-9-11', '廿一'],
+ ['2017-9-12', '廿二'],
+ ['2017-9-13', '廿三'],
+ ['2017-9-14', '廿四'],
+ ['2017-9-15', '廿五'],
+ ['2017-9-16', '廿六'],
+ ['2017-9-17', '廿七'],
+ ['2017-9-18', '廿八'],
+ ['2017-9-19', '廿九'],
+ ['2017-9-20', '八月'],
+ ['2017-9-21', '初二'],
+ ['2017-9-22', '初三'],
+ ['2017-9-23', '初四', '秋分'],
+ ['2017-9-24', '初五'],
+ ['2017-9-25', '初六'],
+ ['2017-9-26', '初七'],
+ ['2017-9-27', '初八'],
+ ['2017-9-28', '初九'],
+ ['2017-9-29', '初十'],
+ ['2017-9-30', '十一'],
+ ['2017-10-1', '十二'],
+ ['2017-10-2', '十三'],
+ ['2017-10-3', '十四'],
+ ['2017-10-4', '十五'],
+ ['2017-10-5', '十六'],
+ ['2017-10-6', '十七'],
+ ['2017-10-7', '十八'],
+ ['2017-10-8', '十九', '寒露'],
+ ['2017-10-9', '二十'],
+ ['2017-10-10', '廿一'],
+ ['2017-10-11', '廿二'],
+ ['2017-10-12', '廿三'],
+ ['2017-10-13', '廿四'],
+ ['2017-10-14', '廿五'],
+ ['2017-10-15', '廿六'],
+ ['2017-10-16', '廿七'],
+ ['2017-10-17', '廿八'],
+ ['2017-10-18', '廿九'],
+ ['2017-10-19', '三十'],
+ ['2017-10-20', '九月'],
+ ['2017-10-21', '初二'],
+ ['2017-10-22', '初三'],
+ ['2017-10-23', '初四', '霜降'],
+ ['2017-10-24', '初五'],
+ ['2017-10-25', '初六'],
+ ['2017-10-26', '初七'],
+ ['2017-10-27', '初八'],
+ ['2017-10-28', '初九'],
+ ['2017-10-29', '初十'],
+ ['2017-10-30', '十一'],
+ ['2017-10-31', '十二'],
+ ['2017-11-1', '十三'],
+ ['2017-11-2', '十四'],
+ ['2017-11-3', '十五'],
+ ['2017-11-4', '十六'],
+ ['2017-11-5', '十七'],
+ ['2017-11-6', '十八'],
+ ['2017-11-7', '十九', '立冬'],
+ ['2017-11-8', '二十'],
+ ['2017-11-9', '廿一'],
+ ['2017-11-10', '廿二'],
+ ['2017-11-11', '廿三'],
+ ['2017-11-12', '廿四'],
+ ['2017-11-13', '廿五'],
+ ['2017-11-14', '廿六'],
+ ['2017-11-15', '廿七'],
+ ['2017-11-16', '廿八'],
+ ['2017-11-17', '廿九'],
+ ['2017-11-18', '十月'],
+ ['2017-11-19', '初二'],
+ ['2017-11-20', '初三'],
+ ['2017-11-21', '初四'],
+ ['2017-11-22', '初五', '小雪'],
+ ['2017-11-23', '初六'],
+ ['2017-11-24', '初七'],
+ ['2017-11-25', '初八'],
+ ['2017-11-26', '初九'],
+ ['2017-11-27', '初十'],
+ ['2017-11-28', '十一'],
+ ['2017-11-29', '十二'],
+ ['2017-11-30', '十三'],
+ ['2017-12-1', '十四'],
+ ['2017-12-2', '十五'],
+ ['2017-12-3', '十六'],
+ ['2017-12-4', '十七'],
+ ['2017-12-5', '十八'],
+ ['2017-12-6', '十九'],
+ ['2017-12-7', '二十', '大雪'],
+ ['2017-12-8', '廿一'],
+ ['2017-12-9', '廿二'],
+ ['2017-12-10', '廿三'],
+ ['2017-12-11', '廿四'],
+ ['2017-12-12', '廿五'],
+ ['2017-12-13', '廿六'],
+ ['2017-12-14', '廿七'],
+ ['2017-12-15', '廿八'],
+ ['2017-12-16', '廿九'],
+ ['2017-12-17', '三十'],
+ ['2017-12-18', '十一月'],
+ ['2017-12-19', '初二'],
+ ['2017-12-20', '初三'],
+ ['2017-12-21', '初四'],
+ ['2017-12-22', '初五', '冬至'],
+ ['2017-12-23', '初六'],
+ ['2017-12-24', '初七'],
+ ['2017-12-25', '初八'],
+ ['2017-12-26', '初九'],
+ ['2017-12-27', '初十'],
+ ['2017-12-28', '十一'],
+ ['2017-12-29', '十二'],
+ ['2017-12-30', '十三'],
+ ['2017-12-31', '十四']
+];
+
+let heatmapData = [];
+let lunarData = [];
+for (let i = 0; i < dateList.length; i++) {
+ heatmapData.push([
+ dateList[i][0],
+ Math.random() * 300
+ ]);
+ lunarData.push([
+ dateList[i][0],
+ 1,
+ dateList[i][1],
+ dateList[i][2]
+ ]);
+}
+
+
+option = {
+ tooltip: {
+ formatter: function (params) {
+ return '降雨量: ' + params.value[1].toFixed(2);
+ }
+ },
+
+ visualMap: {
+ show: false,
+ min: 0,
+ max: 300,
+ calculable: true,
+ seriesIndex: [2],
+ orient: 'horizontal',
+ left: 'center',
+ bottom: 20,
+ inRange: {
+ color: ['#e0ffff', '#006edd'],
+ opacity: 0.3
+ },
+ controller: {
+ inRange: {
+ opacity: 0.5
+ }
+ }
+ },
+
+ calendar: [{
+ left: 'center',
+ top: 'middle',
+ cellSize: [70, 70],
+ yearLabel: {show: false},
+ orient: 'vertical',
+ dayLabel: {
+ firstDay: 1,
+ nameMap: 'cn'
+ },
+ monthLabel: {
+ show: false
+ },
+ range: '2017-03'
+ }],
+
+ series: [{
+ type: 'scatter',
+ coordinateSystem: 'calendar',
+ symbolSize: 1,
+ label: {
+ show: true,
+ formatter: function (params) {
+ var d = echarts.number.parseDate(params.value[0]);
+ return d.getDate() + '\n\n' + params.value[2] + '\n\n';
+ },
+ color: '#000'
+ },
+ data: lunarData
+ }, {
+ type: 'scatter',
+ coordinateSystem: 'calendar',
+ symbolSize: 1,
+ label: {
+ show: true,
+ formatter: function (params) {
+ return '\n\n\n' + (params.value[3] || '');
+ },
+ fontSize: 14,
+ fontWeight: 700,
+ color: '#a00'
+ },
+ data: lunarData
+ }, {
+ name: '降雨量',
+ type: 'heatmap',
+ coordinateSystem: 'calendar',
+ data: heatmapData
+ }]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/calendar-pie.ts b/examples/examples/ts/calendar-pie.ts
new file mode 100644
index 0000000..fef76b3
--- /dev/null
+++ b/examples/examples/ts/calendar-pie.ts
@@ -0,0 +1,120 @@
+/*
+title: Calendar Pie
+category: 'calendar, pie'
+titleCN: 日历饼图
+difficulty: 6
+*/
+
+const cellSize = [80, 80];
+const pieRadius = 30;
+
+type DataItem = [string, number];
+
+function getVirtulData() {
+ let date = +echarts.number.parseDate('2017-02-01');
+ let end = +echarts.number.parseDate('2017-03-01');
+ let dayTime = 3600 * 24 * 1000;
+ let data: DataItem[] = [];
+ for (let time = date; time < end; time += dayTime) {
+ data.push([
+ echarts.format.formatTime('yyyy-MM-dd', time),
+ Math.floor(Math.random() * 10000)
+ ]);
+ }
+ return data;
+}
+
+function getPieSeries(scatterData: DataItem[], chart: echarts.ECharts) {
+ return scatterData.map(function (item, index) {
+ var center = chart.convertToPixel('calendar', item);
+ return {
+ id: index + 'pie',
+ type: 'pie',
+ center: center,
+ label: {
+ normal: {
+ formatter: '{c}',
+ position: 'inside'
+ }
+ },
+ radius: pieRadius,
+ data: [
+ {name: '工作', value: Math.round(Math.random() * 24)},
+ {name: '娱乐', value: Math.round(Math.random() * 24)},
+ {name: '睡觉', value: Math.round(Math.random() * 24)}
+ ]
+ };
+ });
+}
+
+function getPieSeriesUpdate(scatterData: DataItem[], chart: echarts.ECharts) {
+ return scatterData.map(function (item, index) {
+ var center = chart.convertToPixel('calendar', item);
+ return {
+ id: index + 'pie',
+ center: center
+ };
+ });
+}
+
+var scatterData = getVirtulData();
+
+option = {
+ tooltip : {},
+ legend: {
+ data: ['Work', 'Entertainment', 'Sleep'],
+ bottom: 20
+ },
+ calendar: {
+ top: 'middle',
+ left: 'center',
+ orient: 'vertical',
+ cellSize: cellSize,
+ yearLabel: {
+ show: false,
+ fontSize: 30
+ },
+ dayLabel: {
+ margin: 20,
+ firstDay: 1,
+ nameMap: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ monthLabel: {
+ show: false
+ },
+ range: ['2017-02']
+ },
+ series: [{
+ id: 'label',
+ type: 'scatter',
+ coordinateSystem: 'calendar',
+ symbolSize: 1,
+ label: {
+ show: true,
+ formatter: function (params) {
+ return echarts.format.formatTime('dd', params.value[0]);
+ },
+ offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
+ fontSize: 14
+ },
+ data: scatterData
+ }]
+};
+
+let pieInitialized: boolean;
+setTimeout(function () {
+ pieInitialized = true;
+ myChart.setOption<echarts.EChartsOption>({
+ series: getPieSeries(scatterData, myChart)
+ });
+}, 10);
+
+app.onresize = function () {
+ if (pieInitialized) {
+ myChart.setOption<echarts.EChartsOption>({
+ series: getPieSeriesUpdate(scatterData, myChart)
+ });
+ }
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/calendar-simple.ts b/examples/examples/ts/calendar-simple.ts
new file mode 100644
index 0000000..607da8c
--- /dev/null
+++ b/examples/examples/ts/calendar-simple.ts
@@ -0,0 +1,39 @@
+/*
+title: Simple Calendar
+titleCN: 基础日历图
+category: calendar
+difficulty: 0
+*/
+
+function getVirtulData(year: string) {
+ year = year || '2017';
+ var date = +echarts.number.parseDate(year + '-01-01');
+ var end = +echarts.number.parseDate(year + '-12-31');
+ var dayTime = 3600 * 24 * 1000;
+ var data = [];
+ for (var time = date; time <= end; time += dayTime) {
+ data.push([
+ echarts.format.formatTime('yyyy-MM-dd', time),
+ Math.floor(Math.random() * 10000)
+ ]);
+ }
+ return data;
+}
+
+option = {
+ visualMap: {
+ show: false,
+ min: 0,
+ max: 10000
+ },
+ calendar: {
+ range: '2017'
+ },
+ series: {
+ type: 'heatmap',
+ coordinateSystem: 'calendar',
+ data: getVirtulData('2017')
+ }
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/data/calendar-horizontal.js b/examples/examples/ts/calendar-vertical.ts
similarity index 54%
copy from examples/data/calendar-horizontal.js
copy to examples/examples/ts/calendar-vertical.ts
index 9dde1f1..212c3d0 100644
--- a/examples/data/calendar-horizontal.js
+++ b/examples/examples/ts/calendar-vertical.ts
@@ -1,12 +1,12 @@
/*
-title: Calendar Heatmap Horizontal
-category: calendar
-titleCN: 横向日力图
+title: Calendar Heatmap Vertical
+category: 'calendar, heatmap'
+titleCN: 纵向日历图
shotWidth: 900
-difficulty: 2
+difficulty: 1
*/
-function getVirtulData(year) {
+function getVirtulData(year: string) {
year = year || '2017';
var date = +echarts.number.parseDate(year + '-01-01');
var end = +echarts.number.parseDate((+year + 1) + '-01-01');
@@ -22,51 +22,59 @@ function getVirtulData(year) {
}
-
option = {
tooltip: {
- position: 'top'
+ position: 'top',
+ formatter: function (p) {
+ var format = echarts.format.formatTime('yyyy-MM-dd', p.data[0]);
+ return format + ': ' + p.data[1];
+ }
},
visualMap: {
min: 0,
max: 1000,
calculable: true,
- orient: 'horizontal',
- left: 'center',
- top: 'top'
+ orient: 'vertical',
+ left: '670',
+ top: 'center'
},
calendar: [{
- range: '2017',
- cellSize: ['auto', 20]
+ orient: 'vertical',
+ range: '2015'
},
{
- top: 260,
- range: '2016',
- cellSize: ['auto', 20]
+ left: 300,
+ orient: 'vertical',
+ range: '2016'
},
{
- top: 450,
- range: '2015',
- cellSize: ['auto', 20],
- right: 5
+ left: 520,
+ cellSize: [20, 'auto'],
+ bottom: 10,
+ orient: 'vertical',
+ range: '2017',
+ dayLabel: {
+ margin: 5
+ }
}],
series: [{
type: 'heatmap',
coordinateSystem: 'calendar',
calendarIndex: 0,
- data: getVirtulData(2017)
+ data: getVirtulData('2015')
}, {
type: 'heatmap',
coordinateSystem: 'calendar',
calendarIndex: 1,
- data: getVirtulData(2016)
+ data: getVirtulData('2016')
}, {
type: 'heatmap',
coordinateSystem: 'calendar',
calendarIndex: 2,
- data: getVirtulData(2015)
+ data: getVirtulData('2017')
}]
-
};
+
+export {}
\ No newline at end of file
diff --git a/examples/data/candlestick-brush.js b/examples/examples/ts/candlestick-brush.ts
similarity index 91%
copy from examples/data/candlestick-brush.js
copy to examples/examples/ts/candlestick-brush.ts
index 9ea6029..d5ce863 100644
--- a/examples/data/candlestick-brush.js
+++ b/examples/examples/ts/candlestick-brush.ts
@@ -1,18 +1,18 @@
/*
title: Candlestick Brush
category: candlestick
-titleCN: 日力图刷选
+titleCN: K 线图刷选
*/
-var upColor = '#00da3c';
-var downColor = '#ec0000';
+const upColor = '#00da3c';
+const downColor = '#ec0000';
-function splitData(rawData) {
- var categoryData = [];
- var values = [];
- var volumes = [];
- for (var i = 0; i < rawData.length; i++) {
+function splitData(rawData: number[][]) {
+ let categoryData = [];
+ let values = [];
+ let volumes = [];
+ for (let i = 0; i < rawData.length; i++) {
categoryData.push(rawData[i].splice(0, 1)[0]);
values.push(rawData[i]);
volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
@@ -25,7 +25,7 @@ function splitData(rawData) {
};
}
-function calculateMA(dayCount, data) {
+function calculateMA(dayCount: number, data: { values: number[][]}) {
var result = [];
for (var i = 0, len = data.values.length; i < len; i++) {
if (i < dayCount) {
@@ -45,7 +45,7 @@ $.get(ROOT_PATH + '/data/asset/data/stock-DJI.json', function (rawData) {
var data = splitData(rawData);
- myChart.setOption(option = {
+ myChart.setOption<echarts.EChartsOption>(option = {
animation: false,
legend: {
bottom: 10,
@@ -64,14 +64,18 @@ $.get(ROOT_PATH + '/data/asset/data/stock-DJI.json', function (rawData) {
color: '#000'
},
position: function (pos, params, el, elRect, size) {
- var obj = {top: 10};
+ const obj: Record<string, number> = {
+ top: 10
+ };
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
return obj;
}
// extraCssText: 'width: 170px'
},
axisPointer: {
- link: {xAxisIndex: 'all'},
+ link: [{
+ xAxisIndex: 'all'
+ }],
label: {
backgroundColor: '#777'
}
@@ -189,8 +193,8 @@ $.get(ROOT_PATH + '/data/asset/data/stock-DJI.json', function (rawData) {
itemStyle: {
color: upColor,
color0: downColor,
- borderColor: null,
- borderColor0: null
+ borderColor: undefined,
+ borderColor0: undefined
},
tooltip: {
formatter: function (param) {
@@ -261,4 +265,6 @@ $.get(ROOT_PATH + '/data/asset/data/stock-DJI.json', function (rawData) {
}
]
});
-});
\ No newline at end of file
+});
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/candlestick-large.ts b/examples/examples/ts/candlestick-large.ts
new file mode 100644
index 0000000..b86038e
--- /dev/null
+++ b/examples/examples/ts/candlestick-large.ts
@@ -0,0 +1,213 @@
+/*
+title: Large Scale Candlestick
+category: candlestick
+titleCN: 大数据量K线图
+difficulty: 3
+*/
+
+const upColor = '#ec0000';
+const upBorderColor = '#8A0000';
+const downColor = '#00da3c';
+const downBorderColor = '#008F28';
+
+const dataCount = 2e5;
+const data = generateOHLC(dataCount);
+
+option = {
+ dataset: {
+ source: data
+ },
+ title: {
+ text: 'Data Amount: ' + echarts.format.addCommas(dataCount)
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'line'
+ }
+ },
+ toolbox: {
+ feature: {
+ dataZoom: {
+ yAxisIndex: false
+ },
+ }
+ },
+ grid: [
+ {
+ left: '10%',
+ right: '10%',
+ bottom: 200
+ },
+ {
+ left: '10%',
+ right: '10%',
+ height: 80,
+ bottom: 80
+ }
+ ],
+ xAxis: [
+ {
+ type: 'category',
+ scale: true,
+ boundaryGap: false,
+ // inverse: true,
+ axisLine: {onZero: false},
+ splitLine: {show: false},
+ splitNumber: 20,
+ min: 'dataMin',
+ max: 'dataMax'
+ },
+ {
+ type: 'category',
+ gridIndex: 1,
+ scale: true,
+ boundaryGap: false,
+ axisLine: {onZero: false},
+ axisTick: {show: false},
+ splitLine: {show: false},
+ axisLabel: {show: false},
+ splitNumber: 20,
+ min: 'dataMin',
+ max: 'dataMax'
+ }
+ ],
+ yAxis: [
+ {
+ scale: true,
+ splitArea: {
+ show: true
+ }
+ },
+ {
+ scale: true,
+ gridIndex: 1,
+ splitNumber: 2,
+ axisLabel: {show: false},
+ axisLine: {show: false},
+ axisTick: {show: false},
+ splitLine: {show: false}
+ }
+ ],
+ dataZoom: [
+ {
+ type: 'inside',
+ xAxisIndex: [0, 1],
+ start: 10,
+ end: 100
+ },
+ {
+ show: true,
+ xAxisIndex: [0, 1],
+ type: 'slider',
+ bottom: 10,
+ start: 10,
+ end: 100
+ }
+ ],
+ visualMap: {
+ show: false,
+ seriesIndex: 1,
+ dimension: 6,
+ pieces: [{
+ value: 1,
+ color: upColor
+ }, {
+ value: -1,
+ color: downColor
+ }]
+ },
+ series: [
+ {
+ type: 'candlestick',
+ itemStyle: {
+ color: upColor,
+ color0: downColor,
+ borderColor: upBorderColor,
+ borderColor0: downBorderColor
+ },
+ encode: {
+ x: 0,
+ y: [1, 4, 3, 2]
+ }
+ },
+ {
+ name: 'Volumn',
+ type: 'bar',
+ xAxisIndex: 1,
+ yAxisIndex: 1,
+ itemStyle: {
+ color: '#7fbe9e'
+ },
+ large: true,
+ encode: {
+ x: 0,
+ y: 5
+ }
+ }
+ ]
+};
+
+type DataItem = [string, number, number, number, number, number, number];
+
+function generateOHLC(count: number) {
+ let data: DataItem[]= [];
+
+ let xValue = +new Date(2011, 0, 1);
+ let minute = 60 * 1000;
+ let baseValue = Math.random() * 12000;
+ let boxVals = new Array(4);
+ let dayRange = 12;
+
+ for (let i = 0; i < count; i++) {
+ baseValue = baseValue + Math.random() * 20 - 10;
+
+ for (let j = 0; j < 4; j++) {
+ boxVals[j] = (Math.random() - 0.5) * dayRange + baseValue;
+ }
+ boxVals.sort();
+
+ let openIdx = Math.round(Math.random() * 3);
+ let closeIdx = Math.round(Math.random() * 2);
+ if (closeIdx === openIdx) {
+ closeIdx++;
+ }
+ let volumn = boxVals[3] * (1000 + Math.random() * 500);
+
+ // ['open', 'close', 'lowest', 'highest', 'volumn']
+ // [1, 4, 3, 2]
+ data[i] = [
+ echarts.format.formatTime('yyyy-MM-dd\nhh:mm:ss', xValue += minute),
+ +boxVals[openIdx].toFixed(2), // open
+ +boxVals[3].toFixed(2), // highest
+ +boxVals[0].toFixed(2), // lowest
+ +boxVals[closeIdx].toFixed(2), // close
+ +volumn.toFixed(0),
+ getSign(data, i, +boxVals[openIdx], +boxVals[closeIdx], 4) // sign
+ ];
+ }
+
+ return data;
+
+ function getSign(data: DataItem[], dataIndex: number, openVal: number, closeVal: number, closeDimIdx: number) {
+ var sign;
+ if (openVal > closeVal) {
+ sign = -1;
+ }
+ else if (openVal < closeVal) {
+ sign = 1;
+ }
+ else {
+ sign = dataIndex > 0
+ // If close === open, compare with close of last record
+ ? (data[dataIndex - 1][closeDimIdx] <= closeVal ? 1 : -1)
+ // No record of previous, set to be positive
+ : 1;
+ }
+
+ return sign;
+ }
+}
+
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/candlestick-sh-2015.ts b/examples/examples/ts/candlestick-sh-2015.ts
new file mode 100644
index 0000000..7d24525
--- /dev/null
+++ b/examples/examples/ts/candlestick-sh-2015.ts
@@ -0,0 +1,137 @@
+/*
+title: 'ShangHai Index, 2015'
+category: candlestick
+titleCN: 2015 年上证指数
+*/
+
+type DataItem = (number | string)[]
+const rawData = [['2015/12/31','3570.47','3539.18','-33.69','-0.94%','3538.35','3580.6','176963664','25403106','-'],['2015/12/30','3566.73','3572.88','9.14','0.26%','3538.11','3573.68','187889600','26778766','-'],['2015/12/29','3528.4','3563.74','29.96','0.85%','3515.52','3564.17','182551920','25093890','-'],['2015/12/28','3635.77','3533.78','-94.13','-2.59%','3533.78','3641.59','269983264','36904280','-'],['2015/12/25','3614.05','3627.91','15.43','0.43%','3601.74','3635.26','198451120', [...]
+
+function calculateMA(dayCount: number, data: DataItem[]) {
+ var result = [];
+ for (var i = 0, len = data.length; i < len; i++) {
+ if (i < dayCount) {
+ result.push('-');
+ continue;
+ }
+ var sum = 0;
+ for (var j = 0; j < dayCount; j++) {
+ sum += +data[i - j][1];
+ }
+ result.push(sum / dayCount);
+ }
+ return result;
+}
+
+
+const dates = rawData.map(function (item) {
+ return item[0];
+});
+
+const data = rawData.map(function (item) {
+ return [+item[1], +item[2], +item[5], +item[6]];
+});
+option = {
+ legend: {
+ data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'],
+ inactiveColor: '#777',
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ animation: false,
+ type: 'cross',
+ lineStyle: {
+ color: '#376df4',
+ width: 2,
+ opacity: 1
+ }
+ }
+ },
+ xAxis: {
+ type: 'category',
+ data: dates,
+ axisLine: { lineStyle: { color: '#8392A5' } }
+ },
+ yAxis: {
+ scale: true,
+ axisLine: { lineStyle: { color: '#8392A5' } },
+ splitLine: { show: false }
+ },
+ grid: {
+ bottom: 80
+ },
+ dataZoom: [{
+ textStyle: {
+ color: '#8392A5'
+ },
+ handleIcon: 'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+ dataBackground: {
+ areaStyle: {
+ color: '#8392A5'
+ },
+ lineStyle: {
+ opacity: 0.8,
+ color: '#8392A5'
+ }
+ },
+ brushSelect: true
+ }, {
+ type: 'inside'
+ }],
+ series: [
+ {
+ type: 'candlestick',
+ name: 'Day',
+ data: data,
+ itemStyle: {
+ color: '#FD1050',
+ color0: '#0CF49B',
+ borderColor: '#FD1050',
+ borderColor0: '#0CF49B'
+ }
+ },
+ {
+ name: 'MA5',
+ type: 'line',
+ data: calculateMA(5, data),
+ smooth: true,
+ showSymbol: false,
+ lineStyle: {
+ width: 1
+ }
+ },
+ {
+ name: 'MA10',
+ type: 'line',
+ data: calculateMA(10, data),
+ smooth: true,
+ showSymbol: false,
+ lineStyle: {
+ width: 1
+ }
+ },
+ {
+ name: 'MA20',
+ type: 'line',
+ data: calculateMA(20, data),
+ smooth: true,
+ showSymbol: false,
+ lineStyle: {
+ width: 1
+ }
+ },
+ {
+ name: 'MA30',
+ type: 'line',
+ data: calculateMA(30, data),
+ smooth: true,
+ showSymbol: false,
+ lineStyle: {
+ width: 1
+ }
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/candlestick-sh.ts b/examples/examples/ts/candlestick-sh.ts
new file mode 100644
index 0000000..f25b802
--- /dev/null
+++ b/examples/examples/ts/candlestick-sh.ts
@@ -0,0 +1,324 @@
+/*
+title: ShangHai Index
+category: candlestick
+titleCN: 上证指数
+difficulty: 2
+*/
+
+const upColor = '#ec0000';
+const upBorderColor = '#8A0000';
+const downColor = '#00da3c';
+const downBorderColor = '#008F28';
+
+
+// Each item: open，close，lowest，highest
+const data0 = splitData([
+ ['2013/1/24', 2320.26,2320.26,2287.3,2362.94],
+ ['2013/1/25', 2300,2291.3,2288.26,2308.38],
+ ['2013/1/28', 2295.35,2346.5,2295.35,2346.92],
+ ['2013/1/29', 2347.22,2358.98,2337.35,2363.8],
+ ['2013/1/30', 2360.75,2382.48,2347.89,2383.76],
+ ['2013/1/31', 2383.43,2385.42,2371.23,2391.82],
+ ['2013/2/1', 2377.41,2419.02,2369.57,2421.15],
+ ['2013/2/4', 2425.92,2428.15,2417.58,2440.38],
+ ['2013/2/5', 2411,2433.13,2403.3,2437.42],
+ ['2013/2/6', 2432.68,2434.48,2427.7,2441.73],
+ ['2013/2/7', 2430.69,2418.53,2394.22,2433.89],
+ ['2013/2/8', 2416.62,2432.4,2414.4,2443.03],
+ ['2013/2/18', 2441.91,2421.56,2415.43,2444.8],
+ ['2013/2/19', 2420.26,2382.91,2373.53,2427.07],
+ ['2013/2/20', 2383.49,2397.18,2370.61,2397.94],
+ ['2013/2/21', 2378.82,2325.95,2309.17,2378.82],
+ ['2013/2/22', 2322.94,2314.16,2308.76,2330.88],
+ ['2013/2/25', 2320.62,2325.82,2315.01,2338.78],
+ ['2013/2/26', 2313.74,2293.34,2289.89,2340.71],
+ ['2013/2/27', 2297.77,2313.22,2292.03,2324.63],
+ ['2013/2/28', 2322.32,2365.59,2308.92,2366.16],
+ ['2013/3/1', 2364.54,2359.51,2330.86,2369.65],
+ ['2013/3/4', 2332.08,2273.4,2259.25,2333.54],
+ ['2013/3/5', 2274.81,2326.31,2270.1,2328.14],
+ ['2013/3/6', 2333.61,2347.18,2321.6,2351.44],
+ ['2013/3/7', 2340.44,2324.29,2304.27,2352.02],
+ ['2013/3/8', 2326.42,2318.61,2314.59,2333.67],
+ ['2013/3/11', 2314.68,2310.59,2296.58,2320.96],
+ ['2013/3/12', 2309.16,2286.6,2264.83,2333.29],
+ ['2013/3/13', 2282.17,2263.97,2253.25,2286.33],
+ ['2013/3/14', 2255.77,2270.28,2253.31,2276.22],
+ ['2013/3/15', 2269.31,2278.4,2250,2312.08],
+ ['2013/3/18', 2267.29,2240.02,2239.21,2276.05],
+ ['2013/3/19', 2244.26,2257.43,2232.02,2261.31],
+ ['2013/3/20', 2257.74,2317.37,2257.42,2317.86],
+ ['2013/3/21', 2318.21,2324.24,2311.6,2330.81],
+ ['2013/3/22', 2321.4,2328.28,2314.97,2332],
+ ['2013/3/25', 2334.74,2326.72,2319.91,2344.89],
+ ['2013/3/26', 2318.58,2297.67,2281.12,2319.99],
+ ['2013/3/27', 2299.38,2301.26,2289,2323.48],
+ ['2013/3/28', 2273.55,2236.3,2232.91,2273.55],
+ ['2013/3/29', 2238.49,2236.62,2228.81,2246.87],
+ ['2013/4/1', 2229.46,2234.4,2227.31,2243.95],
+ ['2013/4/2', 2234.9,2227.74,2220.44,2253.42],
+ ['2013/4/3', 2232.69,2225.29,2217.25,2241.34],
+ ['2013/4/8', 2196.24,2211.59,2180.67,2212.59],
+ ['2013/4/9', 2215.47,2225.77,2215.47,2234.73],
+ ['2013/4/10', 2224.93,2226.13,2212.56,2233.04],
+ ['2013/4/11', 2236.98,2219.55,2217.26,2242.48],
+ ['2013/4/12', 2218.09,2206.78,2204.44,2226.26],
+ ['2013/4/15', 2199.91,2181.94,2177.39,2204.99],
+ ['2013/4/16', 2169.63,2194.85,2165.78,2196.43],
+ ['2013/4/17', 2195.03,2193.8,2178.47,2197.51],
+ ['2013/4/18', 2181.82,2197.6,2175.44,2206.03],
+ ['2013/4/19', 2201.12,2244.64,2200.58,2250.11],
+ ['2013/4/22', 2236.4,2242.17,2232.26,2245.12],
+ ['2013/4/23', 2242.62,2184.54,2182.81,2242.62],
+ ['2013/4/24', 2187.35,2218.32,2184.11,2226.12],
+ ['2013/4/25', 2213.19,2199.31,2191.85,2224.63],
+ ['2013/4/26', 2203.89,2177.91,2173.86,2210.58],
+ ['2013/5/2', 2170.78,2174.12,2161.14,2179.65],
+ ['2013/5/3', 2179.05,2205.5,2179.05,2222.81],
+ ['2013/5/6', 2212.5,2231.17,2212.5,2236.07],
+ ['2013/5/7', 2227.86,2235.57,2219.44,2240.26],
+ ['2013/5/8', 2242.39,2246.3,2235.42,2255.21],
+ ['2013/5/9', 2246.96,2232.97,2221.38,2247.86],
+ ['2013/5/10', 2228.82,2246.83,2225.81,2247.67],
+ ['2013/5/13', 2247.68,2241.92,2231.36,2250.85],
+ ['2013/5/14', 2238.9,2217.01,2205.87,2239.93],
+ ['2013/5/15', 2217.09,2224.8,2213.58,2225.19],
+ ['2013/5/16', 2221.34,2251.81,2210.77,2252.87],
+ ['2013/5/17', 2249.81,2282.87,2248.41,2288.09],
+ ['2013/5/20', 2286.33,2299.99,2281.9,2309.39],
+ ['2013/5/21', 2297.11,2305.11,2290.12,2305.3],
+ ['2013/5/22', 2303.75,2302.4,2292.43,2314.18],
+ ['2013/5/23', 2293.81,2275.67,2274.1,2304.95],
+ ['2013/5/24', 2281.45,2288.53,2270.25,2292.59],
+ ['2013/5/27', 2286.66,2293.08,2283.94,2301.7],
+ ['2013/5/28', 2293.4,2321.32,2281.47,2322.1],
+ ['2013/5/29', 2323.54,2324.02,2321.17,2334.33],
+ ['2013/5/30', 2316.25,2317.75,2310.49,2325.72],
+ ['2013/5/31', 2320.74,2300.59,2299.37,2325.53],
+ ['2013/6/3', 2300.21,2299.25,2294.11,2313.43],
+ ['2013/6/4', 2297.1,2272.42,2264.76,2297.1],
+ ['2013/6/5', 2270.71,2270.93,2260.87,2276.86],
+ ['2013/6/6', 2264.43,2242.11,2240.07,2266.69],
+ ['2013/6/7', 2242.26,2210.9,2205.07,2250.63],
+ ['2013/6/13', 2190.1,2148.35,2126.22,2190.1]
+]);
+
+
+function splitData(rawData: (number | string)[][]) {
+ const categoryData = [];
+ const values = []
+ for (var i = 0; i < rawData.length; i++) {
+ categoryData.push(rawData[i].splice(0, 1)[0]);
+ values.push(rawData[i])
+ }
+ return {
+ categoryData: categoryData,
+ values: values
+ };
+}
+
+function calculateMA(dayCount: number) {
+ var result = [];
+ for (var i = 0, len = data0.values.length; i < len; i++) {
+ if (i < dayCount) {
+ result.push('-');
+ continue;
+ }
+ var sum = 0;
+ for (var j = 0; j < dayCount; j++) {
+ sum += +data0.values[i - j][1];
+ }
+ result.push(sum / dayCount);
+ }
+ return result;
+}
+
+
+
+option = {
+ title: {
+ text: '上证指数',
+ left: 0
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross'
+ }
+ },
+ legend: {
+ data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
+ },
+ grid: {
+ left: '10%',
+ right: '10%',
+ bottom: '15%'
+ },
+ xAxis: {
+ type: 'category',
+ data: data0.categoryData,
+ scale: true,
+ boundaryGap: false,
+ axisLine: {onZero: false},
+ splitLine: {show: false},
+ splitNumber: 20,
+ min: 'dataMin',
+ max: 'dataMax'
+ },
+ yAxis: {
+ scale: true,
+ splitArea: {
+ show: true
+ }
+ },
+ dataZoom: [
+ {
+ type: 'inside',
+ start: 50,
+ end: 100
+ },
+ {
+ show: true,
+ type: 'slider',
+ top: '90%',
+ start: 50,
+ end: 100
+ }
+ ],
+ series: [
+ {
+ name: '日K',
+ type: 'candlestick',
+ data: data0.values,
+ itemStyle: {
+ color: upColor,
+ color0: downColor,
+ borderColor: upBorderColor,
+ borderColor0: downBorderColor
+ },
+ markPoint: {
+ label: {
+ formatter: function (param) {
+ return param != null ? Math.round(param.value) : '';
+ }
+ },
+ data: [
+ {
+ name: 'Mark',
+ coord: ['2013/5/31', 2300],
+ value: 2300,
+ itemStyle: {
+ color: 'rgb(41,60,85)'
+ }
+ },
+ {
+ name: 'highest value',
+ type: 'max',
+ valueDim: 'highest'
+ },
+ {
+ name: 'lowest value',
+ type: 'min',
+ valueDim: 'lowest'
+ },
+ {
+ name: 'average value on close',
+ type: 'average',
+ valueDim: 'close'
+ }
+ ],
+ tooltip: {
+ formatter: function (param) {
+ return param.name + '<br>' + (param.data.coord || '');
+ }
+ }
+ },
+ markLine: {
+ symbol: ['none', 'none'],
+ data: [
+ [
+ {
+ name: 'from lowest to highest',
+ type: 'min',
+ valueDim: 'lowest',
+ symbol: 'circle',
+ symbolSize: 10,
+ label: {
+ show: false
+ },
+ emphasis: {
+ label: {
+ show: false
+ }
+ }
+ },
+ {
+ type: 'max',
+ valueDim: 'highest',
+ symbol: 'circle',
+ symbolSize: 10,
+ label: {
+ show: false
+ },
+ emphasis: {
+ label: {
+ show: false
+ }
+ }
+ }
+ ],
+ {
+ name: 'min line on close',
+ type: 'min',
+ valueDim: 'close'
+ },
+ {
+ name: 'max line on close',
+ type: 'max',
+ valueDim: 'close'
+ }
+ ]
+ }
+ },
+ {
+ name: 'MA5',
+ type: 'line',
+ data: calculateMA(5),
+ smooth: true,
+ lineStyle: {
+ opacity: 0.5
+ }
+ },
+ {
+ name: 'MA10',
+ type: 'line',
+ data: calculateMA(10),
+ smooth: true,
+ lineStyle: {
+ opacity: 0.5
+ }
+ },
+ {
+ name: 'MA20',
+ type: 'line',
+ data: calculateMA(20),
+ smooth: true,
+ lineStyle: {
+ opacity: 0.5
+ }
+ },
+ {
+ name: 'MA30',
+ type: 'line',
+ data: calculateMA(30),
+ smooth: true,
+ lineStyle: {
+ opacity: 0.5
+ }
+ },
+
+ ]
+};
+
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/candlestick-simple.ts b/examples/examples/ts/candlestick-simple.ts
new file mode 100644
index 0000000..498e5d0
--- /dev/null
+++ b/examples/examples/ts/candlestick-simple.ts
@@ -0,0 +1,24 @@
+/*
+title: Basic Candlestick
+category: candlestick
+titleCN: 基础 K 线图
+difficulty: 0
+*/
+
+option = {
+ xAxis: {
+ data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27']
+ },
+ yAxis: {},
+ series: [{
+ type: 'candlestick',
+ data: [
+ [20, 34, 10,38],
+ [40, 35, 30, 50],
+ [31, 38, 33, 44],
+ [38, 15, 5, 42]
+ ]
+ }]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/candlestick-touch.ts b/examples/examples/ts/candlestick-touch.ts
new file mode 100644
index 0000000..9057461
--- /dev/null
+++ b/examples/examples/ts/candlestick-touch.ts
@@ -0,0 +1,249 @@
+/*
+title: Axis Pointer Link and Touch
+category: candlestick
+titleCN: 触屏上的坐标轴指示器
+difficulty: 4
+*/
+
+type DataItem = (string | number)[]
+
+const rawData: DataItem[] = [["2015/1/5","3258.63","3350.52","115.84","3.58%","3253.88","3369.28","531352384","54976008","-"],["2015/1/6","3330.8","3351.45","0.93","0.03%","3303.18","3394.22","501661696","53239848","-"],["2015/1/7","3326.65","3373.95","22.51","0.67%","3312.21","3374.9","391918880","43641672","-"],["2015/1/8","3371.96","3293.46","-80.5","-2.39%","3285.09","3381.57","371131200","39923032","-"],["2015/1/9","3276.97","3285.41","-8.04","-0.24%","3267.51","3404.83","410240864" [...]
+const colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];
+const labelFont = 'bold 12px Sans-serif';
+
+function calculateMA(dayCount: number, data: DataItem[]) {
+ let result = [];
+ for (let i = 0, len = data.length; i < len; i++) {
+ if (i < dayCount) {
+ result.push('-');
+ continue;
+ }
+ let sum = 0;
+ for (let j = 0; j < dayCount; j++) {
+ sum += +data[i - j][1];
+ }
+ result.push((sum / dayCount).toFixed(2));
+ }
+ return result;
+}
+
+
+const dates = ["2016-03-29", "2016-03-30", "2016-03-31", "2016-04-01", "2016-04-04", "2016-04-05", "2016-04-06", "2016-04-07", "2016-04-08", "2016-04-11", "2016-04-12", "2016-04-13", "2016-04-14", "2016-04-15", "2016-04-18", "2016-04-19", "2016-04-20", "2016-04-21", "2016-04-22", "2016-04-25", "2016-04-26", "2016-04-27", "2016-04-28", "2016-04-29", "2016-05-02", "2016-05-03", "2016-05-04", "2016-05-05", "2016-05-06", "2016-05-09", "2016-05-10", "2016-05-11", "2016-05-12", "2016-05-13", " [...]
+const data = [[17512.58,17633.11,17434.27,17642.81,86160000],[17652.36,17716.66,17652.36,17790.11,79330000],[17716.05,17685.09,17669.72,17755.7,102600000],[17661.74,17792.75,17568.02,17811.48,104890000],[17799.39,17737,17710.67,17806.38,85230000],[17718.03,17603.32,17579.56,17718.03,115230000],[17605.45,17716.05,17542.54,17723.55,99410000],[17687.28,17541.96,17484.23,17687.28,90120000],[17555.39,17576.96,17528.16,17694.51,79990000],[17586.48,17556.41,17555.9,17731.63,107100000],[17571.34 [...]
+const volumes = [86160000,79330000,102600000,104890000,85230000,115230000,99410000,90120000,79990000,107100000,81020000,91710000,84510000,118160000,89390000,89820000,100210000,102720000,134120000,83770000,92570000,109090000,100920000,136670000,80100000,97060000,95020000,81530000,80020000,85590000,75790000,87390000,88560000,86640000,88440000,103260000,79120000,95530000,111990000,87790000,86480000,79180000,68940000,73190000,147390000,78530000,75560000,82270000,71870000,78750000,71260000,69 [...]
+
+const dataMA5 = calculateMA(5, data);
+const dataMA10 = calculateMA(10, data);
+const dataMA20 = calculateMA(20, data);
+
+
+option = {
+ animation: false,
+ color: colorList,
+ title: {
+ left: 'center',
+ text: 'Candlestick on Mobile'
+ },
+ legend: {
+ top: 30,
+ data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
+ },
+ tooltip: {
+ triggerOn: 'none',
+ transitionDuration: 0,
+ confine: true,
+ borderRadius: 4,
+ borderWidth: 1,
+ borderColor: '#333',
+ backgroundColor: 'rgba(255,255,255,0.9)',
+ textStyle: {
+ fontSize: 12,
+ color: '#333'
+ },
+ position: function (pos, params, el, elRect, size) {
+ const obj: Record<string, number> = {
+ top: 60
+ };
+ obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
+ return obj;
+ }
+ },
+ axisPointer: {
+ link: [{
+ xAxisIndex: [0, 1]
+ }]
+ },
+ dataZoom: [{
+ type: 'slider',
+ xAxisIndex: [0, 1],
+ realtime: false,
+ start: 20,
+ end: 70,
+ top: 65,
+ height: 20,
+ handleIcon: 'path://M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+ handleSize: '120%'
+ }, {
+ type: 'inside',
+ xAxisIndex: [0, 1],
+ start: 40,
+ end: 70,
+ top: 30,
+ height: 20
+ }],
+ xAxis: [{
+ type: 'category',
+ data: dates,
+ boundaryGap : false,
+ axisLine: { lineStyle: { color: '#777' } },
+ axisLabel: {
+ formatter: function (value) {
+ return echarts.format.formatTime('MM-dd', value);
+ }
+ },
+ min: 'dataMin',
+ max: 'dataMax',
+ axisPointer: {
+ show: true
+ }
+ }, {
+ type: 'category',
+ gridIndex: 1,
+ data: dates,
+ scale: true,
+ boundaryGap : false,
+ splitLine: {show: false},
+ axisLabel: {show: false},
+ axisTick: {show: false},
+ axisLine: { lineStyle: { color: '#777' } },
+ splitNumber: 20,
+ min: 'dataMin',
+ max: 'dataMax',
+ axisPointer: {
+ type: 'shadow',
+ label: {show: false},
+ triggerTooltip: true,
+ handle: {
+ show: true,
+ margin: 30,
+ color: '#B80C00'
+ }
+ }
+ }],
+ yAxis: [{
+ scale: true,
+ splitNumber: 2,
+ axisLine: { lineStyle: { color: '#777' } },
+ splitLine: { show: true },
+ axisTick: { show: false },
+ axisLabel: {
+ inside: true,
+ formatter: '{value}\n'
+ }
+ }, {
+ scale: true,
+ gridIndex: 1,
+ splitNumber: 2,
+ axisLabel: {show: false},
+ axisLine: {show: false},
+ axisTick: {show: false},
+ splitLine: {show: false}
+ }],
+ grid: [{
+ left: 20,
+ right: 20,
+ top: 110,
+ height: 120
+ }, {
+ left: 20,
+ right: 20,
+ height: 40,
+ top: 260
+ }],
+ graphic: [{
+ type: 'group',
+ left: 'center',
+ top: 70,
+ width: 300,
+ bounding: 'raw',
+ children: [{
+ id: 'MA5',
+ type: 'text',
+ style: {fill: colorList[1], font: labelFont},
+ left: 0
+ }, {
+ id: 'MA10',
+ type: 'text',
+ style: {fill: colorList[2], font: labelFont},
+ left: 'center'
+ }, {
+ id: 'MA20',
+ type: 'text',
+ style: {fill: colorList[3], font: labelFont},
+ right: 0
+ }]
+ }],
+ series: [{
+ name: 'Volume',
+ type: 'bar',
+ xAxisIndex: 1,
+ yAxisIndex: 1,
+ itemStyle: {
+ color: '#7fbe9e'
+ },
+ emphasis: {
+ itemStyle: {
+ color: '#140'
+ }
+ },
+ data: volumes
+ }, {
+ type: 'candlestick',
+ name: '日K',
+ data: data,
+ itemStyle: {
+ color: '#ef232a',
+ color0: '#14b143',
+ borderColor: '#ef232a',
+ borderColor0: '#14b143'
+ },
+ emphasis: {
+ itemStyle: {
+ color: 'black',
+ color0: '#444',
+ borderColor: 'black',
+ borderColor0: '#444'
+ }
+ }
+ }, {
+ name: 'MA5',
+ type: 'line',
+ data: dataMA5,
+ smooth: true,
+ showSymbol: false,
+ lineStyle: {
+ width: 1
+ }
+ }, {
+ name: 'MA10',
+ type: 'line',
+ data: dataMA10,
+ smooth: true,
+ showSymbol: false,
+ lineStyle: {
+ width: 1
+ }
+ }, {
+ name: 'MA20',
+ type: 'line',
+ data: dataMA20,
+ smooth: true,
+ showSymbol: false,
+ lineStyle: {
+ width: 1
+ }
+ }]
+};
+
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/circle-packing-with-d3.ts b/examples/examples/ts/circle-packing-with-d3.ts
new file mode 100644
index 0000000..50d8b09
--- /dev/null
+++ b/examples/examples/ts/circle-packing-with-d3.ts
@@ -0,0 +1,232 @@
+/*
+title: Circle Packing with d3
+category: custom
+titleCN: Circle Packing with d3
+difficulty: 11
+*/
+
+$.when(
+ $.get(ROOT_PATH + '/data/asset/data/option-view.json'),
+ $.getScript('https://cdn.jsdelivr.net/npm/d3-hierarchy@2.0.0/dist/d3-hierarchy.min.js')
+).done(function (res) {
+ run(res[0]);
+});
+
+function run(rawData: RawDataNode) {
+ const dataWrap = prepareData(rawData);
+ initChart(dataWrap.seriesData, dataWrap.maxDepth);
+}
+
+interface DataItem {
+ id: string
+ value: number
+ depth: number
+ index: number
+}
+
+type RawDataNode = {
+ [key: string]: RawDataNode
+} & {
+ $count: number
+}
+
+function prepareData(rawData: RawDataNode) {
+ const seriesData: DataItem[] = [];
+ let maxDepth = 0;
+
+ function convert(source: RawDataNode, basePath: string, depth: number) {
+ if (source == null) {
+ return;
+ }
+ if (maxDepth > 5) {
+ return;
+ }
+ maxDepth = Math.max(depth, maxDepth);
+
+ seriesData.push({
+ id: basePath,
+ value: source.$count,
+ depth: depth,
+ index: seriesData.length
+ });
+
+ for (var key in source) {
+ if (source.hasOwnProperty(key) && !key.match(/^\$/)) {
+ var path = basePath + '.' + key;
+ convert(source[key], path, depth + 1);
+ }
+ }
+ }
+
+ convert(rawData, 'option', 0);
+
+ return {
+ seriesData: seriesData,
+ maxDepth: maxDepth
+ };
+}
+
+function initChart(seriesData: DataItem[], maxDepth: number) {
+ var displayRoot = stratify();
+
+ function stratify() {
+ return d3.stratify()
+ .parentId(function (d) {
+ return d.id.substring(0, d.id.lastIndexOf('.'));
+ })(
+ seriesData
+ )
+ .sum(function (d) {
+ return d.value || 0;
+ })
+ .sort(function (a, b) {
+ return b.value - a.value;
+ });
+ }
+
+ function overallLayout(params, api) {
+ var context = params.context;
+ d3.pack()
+ .size([api.getWidth() - 2, api.getHeight() - 2])
+ .padding(3)(displayRoot);
+
+ context.nodes = {};
+ displayRoot.descendants().forEach(function (node, index) {
+ context.nodes[node.id] = node;
+ });
+ }
+
+ const renderItem: echarts.CustomSeriesOption['renderItem'] = function (params, api) {
+ var context = params.context;
+
+ // Only do that layout once in each time `setOption` called.
+ if (!context.layout) {
+ context.layout = true;
+ overallLayout(params, api);
+ }
+
+ var nodePath = api.value('id');
+ var node = context.nodes[nodePath];
+
+ if (!node) {
+ // Reder nothing.
+ return;
+ }
+
+ var isLeaf = !node.children || !node.children.length;
+
+ var focus = new Uint32Array(node.descendants().map(function (node) {
+ return node.data.index;
+ }));
+
+ var nodeName = isLeaf
+ ? nodePath.slice(nodePath.lastIndexOf('.') + 1).split(/(?=[A-Z][^A-Z])/g).join('\n')
+ : '';
+
+ var z2 = api.value('depth') * 2;
+
+ return {
+ type: 'circle',
+ focus: focus,
+ shape: {
+ cx: node.x,
+ cy: node.y,
+ r: node.r
+ },
+ transition: ['shape'],
+ z2: z2,
+ textContent: {
+ type: 'text',
+ style: {
+ // transition: isLeaf ? 'fontSize' : null,
+ text: nodeName,
+ fontFamily: 'Arial',
+ width: node.r * 1.3,
+ overflow: 'truncate',
+ fontSize: node.r / 3
+ },
+ emphasis: {
+ style: {
+ overflow: null,
+ fontSize: Math.max(node.r / 3, 12)
+ }
+ }
+ },
+ textConfig: {
+ position: 'inside'
+ },
+ style: {
+ fill: api.visual('color')
+ },
+ emphasis: {
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ shadowBlur: 20,
+ shadowOffsetX: 3,
+ shadowOffsetY: 5,
+ shadowColor: 'rgba(0,0,0,0.3)'
+ }
+ }
+ };
+ }
+
+ option = {
+ dataset: {
+ source: seriesData
+ },
+ tooltip: {},
+ visualMap: [{
+ show: false,
+ min: 0,
+ max: maxDepth,
+ dimension: 'depth',
+ inRange: {
+ color: ['#006edd', '#e0ffff']
+ }
+ }],
+ hoverLayerThreshold: Infinity,
+ series: {
+ type: 'custom',
+ renderItem: renderItem,
+ progressive: 0,
+ coordinateSystem: 'none',
+ encode: {
+ tooltip: 'value',
+ itemName: 'id'
+ }
+ }
+ };
+
+ myChart.setOption<echarts.EChartsOption>(option);
+
+ myChart.on('click', { seriesIndex: 0 }, function (params) {
+ drillDown(params.data.id);
+ });
+
+ function drillDown(targetNodeId?: string) {
+ displayRoot = stratify();
+ if (targetNodeId != null) {
+ displayRoot = displayRoot.descendants().find(function (node) {
+ return node.data.id === targetNodeId;
+ });
+ }
+ // A trick to prevent d3-hierarchy from visiting parents in this algorithm.
+ displayRoot.parent = null;
+
+ myChart.setOption<echarts.EChartsOption>({
+ dataset: {
+ source: seriesData
+ }
+ });
+ }
+
+ // Reset: click on the blank area.
+ myChart.getZr().on('click', function (event) {
+ if (!event.target) {
+ drillDown();
+ }
+ });
+}
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/confidence-band.ts b/examples/examples/ts/confidence-band.ts
new file mode 100644
index 0000000..c4edba0
--- /dev/null
+++ b/examples/examples/ts/confidence-band.ts
@@ -0,0 +1,120 @@
+/*
+title: Confidence Band
+category: line
+titleCN: Confidence Band
+difficulty: 4
+*/
+
+myChart.showLoading();
+
+interface DataItem {
+ l: number
+ u: number
+ date: string
+ value: number
+}
+$.get(ROOT_PATH + '/data/asset/data/confidence-band.json', function (data: DataItem[]) {
+ myChart.hideLoading();
+
+ var base = -data.reduce(function (min, val) {
+ return Math.floor(Math.min(min, val.l));
+ }, Infinity);
+ myChart.setOption<echarts.EChartsOption>(option = {
+ title: {
+ text: 'Confidence Band',
+ subtext: 'Example in MetricsGraphics.js',
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ animation: false,
+ label: {
+ backgroundColor: '#ccc',
+ borderColor: '#aaa',
+ borderWidth: 1,
+ shadowBlur: 0,
+ shadowOffsetX: 0,
+ shadowOffsetY: 0,
+
+ color: '#222'
+ }
+ },
+ formatter: function (params) {
+ return params[2].name + '<br />' + ((params[2].value - base) * 100).toFixed(1) + '%';
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ data: data.map(function (item) {
+ return item.date;
+ }),
+ axisLabel: {
+ formatter: function (value, idx) {
+ var date = new Date(value);
+ return idx === 0 ? value : [date.getMonth() + 1, date.getDate()].join('-');
+ }
+ },
+ boundaryGap: false
+ },
+ yAxis: {
+ axisLabel: {
+ formatter: function (val: number) {
+ return (val - base) * 100 + '%';
+ }
+ },
+ axisPointer: {
+ label: {
+ formatter: function (params) {
+ return ((params.value - base) * 100).toFixed(1) + '%';
+ }
+ }
+ },
+ splitNumber: 3
+ },
+ series: [{
+ name: 'L',
+ type: 'line',
+ data: data.map(function (item) {
+ return item.l + base;
+ }),
+ lineStyle: {
+ opacity: 0
+ },
+ stack: 'confidence-band',
+ symbol: 'none'
+ }, {
+ name: 'U',
+ type: 'line',
+ data: data.map(function (item) {
+ return item.u - item.l;
+ }),
+ lineStyle: {
+ opacity: 0
+ },
+ areaStyle: {
+ color: '#ccc'
+ },
+ stack: 'confidence-band',
+ symbol: 'none'
+ }, {
+ type: 'line',
+ data: data.map(function (item) {
+ return item.value + base;
+ }),
+ itemStyle: {
+ color: '#333'
+ },
+ showSymbol: false
+ }]
+ });
+});
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/custom-bar-trend.ts b/examples/examples/ts/custom-bar-trend.ts
new file mode 100644
index 0000000..07bf06e
--- /dev/null
+++ b/examples/examples/ts/custom-bar-trend.ts
@@ -0,0 +1,121 @@
+/*
+title: Custom Bar Trend
+category: custom
+titleCN: 使用自定义系列添加柱状图趋势
+difficulty: 3
+*/
+
+const yearCount = 7;
+const categoryCount = 30;
+
+const xAxisData: string[] = [];
+const customData: number[][] = [];
+const legendData: string[] = [];
+const dataList: number[][] = [];
+
+legendData.push('trend');
+const encodeY = [];
+for (var i = 0; i < yearCount; i++) {
+ legendData.push((2010 + i) + '');
+ dataList.push([]);
+ encodeY.push(1 + i);
+}
+
+for (var i = 0; i < categoryCount; i++) {
+ var val = Math.random() * 1000;
+ xAxisData.push('category' + i);
+ var customVal = [i];
+ customData.push(customVal);
+
+ for (var j = 0; j < dataList.length; j++) {
+ var value = j === 0
+ ? echarts.number.round(val, 2)
+ : echarts.number.round(Math.max(0, dataList[j - 1][i] + (Math.random() - 0.5) * 200), 2);
+ dataList[j].push(value);
+ customVal.push(value);
+ }
+}
+
+
+
+option = {
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ data: legendData
+ },
+ dataZoom: [{
+ type: 'slider',
+ start: 50,
+ end: 70
+ }, {
+ type: 'inside',
+ start: 50,
+ end: 70
+ }],
+ xAxis: {
+ data: xAxisData
+ },
+ yAxis: {},
+ series: [
+ {
+ type: 'custom',
+ name: 'trend',
+ renderItem: function(params, api) {
+ var xValue = api.value(0);
+ var currentSeriesIndices = api.currentSeriesIndices();
+ var barLayout = api.barLayout({
+ barGap: '30%',
+ barCategoryGap: '20%',
+ count: currentSeriesIndices.length - 1
+ });
+
+ var points = [];
+ for (var i = 0; i < currentSeriesIndices.length; i++) {
+ var seriesIndex = currentSeriesIndices[i];
+ if (seriesIndex !== params.seriesIndex) {
+ var point = api.coord([xValue, api.value(seriesIndex)]);
+ point[0] += barLayout[i - 1].offsetCenter;
+ point[1] -= 20;
+ points.push(point);
+ }
+ }
+ var style = api.style({
+ stroke: api.visual('color') as string,
+ fill: 'none'
+ });
+
+ return {
+ type: 'polyline',
+ shape: {
+ points: points
+ },
+ style: style
+ };
+ },
+ itemStyle: {
+ borderWidth: 2
+ },
+ encode: {
+ x: 0,
+ y: encodeY
+ },
+ data: customData,
+ z: 100
+ },
+ ...dataList.map(function (data, index) {
+ return {
+ type: 'bar',
+ animation: false,
+ name: legendData[index + 1],
+ itemStyle: {
+ opacity: 0.5
+ },
+ data: data
+ } as echarts.BarSeriesOption;
+ })
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/custom-calendar-icon.ts b/examples/examples/ts/custom-calendar-icon.ts
new file mode 100644
index 0000000..fc80cad
--- /dev/null
+++ b/examples/examples/ts/custom-calendar-icon.ts
@@ -0,0 +1,119 @@
+/*
+title: Custom Calendar Icon
+category: 'custom, calendar'
+titleCN: 日历图自定义图标
+difficulty: 7
+*/
+
+
+const layouts = [
+ [[0, 0]],
+ [[-0.25, 0], [0.25, 0]],
+ [[0, -0.2], [-0.2, 0.2], [0.2, 0.2]],
+ [[-0.25, -0.25], [-0.25, 0.25], [0.25, -0.25], [0.25, 0.25]]
+];
+const pathes = [
+ 'M936.857805 523.431322c0 0-42.065715-68.89513-88.786739-68.89513-46.68416 0-95.732122 71.223091-95.732122 71.223091s-44.28544-72.503296-93.440922-71.152538c-35.565466 0.977306-62.89705 30.882406-79.124275 64.06615L579.773747 790.800797c-3.253248 37.391565-5.677568 50.904371-12.002816 69.63497-6.651802 19.698688-19.544883 35.227341-31.650099 45.909606-14.30231 12.621414-29.59831 22.066586-45.854208 27.424563-16.28969 5.362074-30.098739 6.496973-51.536794 6.496973-19.498906 0-36.95104 [...]
+ 'M533.504 268.288q33.792-41.984 71.68-75.776 32.768-27.648 74.24-50.176t86.528-19.456q63.488 5.12 105.984 30.208t67.584 63.488 34.304 87.04 6.144 99.84-17.92 97.792-36.864 87.04-48.64 74.752-53.248 61.952q-40.96 41.984-85.504 78.336t-84.992 62.464-73.728 41.472-51.712 15.36q-20.48 1.024-52.224-14.336t-69.632-41.472-79.872-61.952-82.944-75.776q-26.624-25.6-57.344-59.392t-57.856-74.24-46.592-87.552-21.504-100.352 11.264-99.84 39.936-83.456 65.536-61.952 88.064-35.328q24.576-5.12 49.152 [...]
+ 'M741.06368 733.310464c8.075264-29.262438 20.615373-40.632422 14.64105-162.810061C966.089728 361.789952 967.93897 72.37847 967.855002 54.693683c0.279347-0.279347 0.418509-0.419533 0.418509-0.419533s-0.17705-0.00512-0.428749-0.00512c0-0.251699 0-0.428749 0-0.428749s-0.139162 0.14633-0.418509 0.425677c-17.695744-0.083866-307.10784 1.760051-515.833958 212.142592-122.181632-5.984256-133.55305 6.563533-162.815693 14.644531C235.35063 295.798886 103.552614 436.975309 90.630758 486.076621c-1 [...]
+ 'M848.794624 939.156685 571.780416 939.156685 571.780416 653.17123l341.897539 0 0 221.100654C913.677926 909.960704 884.482867 939.156685 848.794624 939.156685zM571.780403 318.743552c-11.861606-3.210138-31.443354-8.36864-39.829709-16.176435-0.596582-0.561766-1.016218-1.246413-1.613824-1.841971-0.560845 0.596582-1.016218 1.280205-1.613824 1.841971-8.386355 7.807795-15.96631 12.965274-27.827917 16.176435l0 263.544325L141.030675 582.287877 141.030675 355.202884c0-35.687834 29.195059-64.8 [...]
+];
+const colors = [
+ '#c4332b', '#16B644', '#6862FD', '#FDC763'
+];
+
+function getVirtulData(year: string) {
+ year = year || '2017';
+ let date = +echarts.number.parseDate(year + '-01-01');
+ let end = +echarts.number.parseDate((+year + 1) + '-01-01');
+ let dayTime = 3600 * 24 * 1000;
+ let data: [string, string][] = [];
+ for (let time = date; time < end; time += dayTime) {
+ let items = [];
+ let eventCount = Math.round(Math.random() * pathes.length);
+ for (let i = 0; i < eventCount; i++) {
+ items.push(Math.round(Math.random() * (pathes.length - 1)));
+ }
+ data.push([
+ echarts.format.formatTime('yyyy-MM-dd', time),
+ items.join('|')
+ ]);
+ }
+ return data;
+}
+
+option = {
+ tooltip: {
+ },
+ calendar: [{
+ left: 'center',
+ top: 'middle',
+ cellSize: [70, 70],
+ yearLabel: {show: false},
+ orient: 'vertical',
+ dayLabel: {
+ firstDay: 1,
+ nameMap: 'cn'
+ },
+ monthLabel: {
+ show: false
+ },
+ range: '2017-03'
+ }],
+ series: [{
+ type: 'custom',
+ coordinateSystem: 'calendar',
+ renderItem: function (params, api) {
+ const cellPoint = api.coord(api.value(0));
+ const cellWidth = params.coordSys.cellWidth;
+ const cellHeight = params.coordSys.cellHeight;
+
+ const value = api.value(1) as string;
+ const events = value && value.split('|');
+
+ if (isNaN(cellPoint[0]) || isNaN(cellPoint[1])) {
+ return;
+ }
+
+ const group = {
+ type: 'group',
+ children: (layouts[events.length - 1] || []).map(function (itemLayout, index) {
+ return {
+ type: 'path',
+ shape: {
+ pathData: pathes[events[index]],
+ x: -8,
+ y: -8,
+ width: 16,
+ height: 16
+ },
+ position: [
+ cellPoint[0] + echarts.number.linearMap(itemLayout[0], [-0.5, 0.5], [-cellWidth / 2, cellWidth / 2]),
+ cellPoint[1] + echarts.number.linearMap(itemLayout[1], [-0.5, 0.5], [-cellHeight / 2 + 20, cellHeight / 2])
+ ],
+ style: api.style({
+ fill: colors[events[index]]
+ })
+ };
+ }) || []
+ };
+
+ group.children.push({
+ type: 'text',
+ style: {
+ x: cellPoint[0],
+ y: cellPoint[1] - cellHeight / 2 + 15,
+ text: echarts.format.formatTime('dd', api.value(0)),
+ fill: '#777',
+ textFont: api.font({fontSize: 14})
+ }
+ });
+
+ return group;
+ },
+ dimensions: [null, {type: 'ordinal'}],
+ data: getVirtulData('2017')
+ }]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/data-transform-filter.ts b/examples/examples/ts/data-transform-filter.ts
new file mode 100644
index 0000000..48fe5c9
--- /dev/null
+++ b/examples/examples/ts/data-transform-filter.ts
@@ -0,0 +1,82 @@
+/*
+title: Data Transform Fitler
+category: line
+titleCN: 数据过滤
+difficulty: 3
+*/
+
+$.get(ROOT_PATH + '/data/asset/data/life-expectancy-table.json', function (_rawData) {
+ run(_rawData);
+});
+
+function run(_rawData: any) {
+
+ option = {
+ dataset: [{
+ id: 'dataset_raw',
+ source: _rawData
+ }, {
+ id: 'dataset_since_1950_of_germany',
+ fromDatasetId: 'dataset_raw',
+ transform: {
+ type: 'filter',
+ config: {
+ and: [
+ { dimension: 'Year', gte: 1950 },
+ { dimension: 'Country', '=': 'Germany' }
+ ]
+ }
+ }
+ }, {
+ id: 'dataset_since_1950_of_france',
+ fromDatasetId: 'dataset_raw',
+ transform: {
+ type: 'filter',
+ config: {
+ and: [
+ { dimension: 'Year', gte: 1950 },
+ { dimension: 'Country', '=': 'France' }
+ ]
+ }
+ }
+ }],
+ title: {
+ text: 'Income of Germany and France since 1950'
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ xAxis: {
+ type: 'category',
+ nameLocation: 'middle'
+ },
+ yAxis: {
+ name: 'Income'
+ },
+ series: [{
+ type: 'line',
+ datasetId: 'dataset_since_1950_of_germany',
+ showSymbol: false,
+ encode: {
+ x: 'Year',
+ y: 'Income',
+ itemName: 'Year',
+ tooltip: ['Income']
+ }
+ }, {
+ type: 'line',
+ datasetId: 'dataset_since_1950_of_france',
+ showSymbol: false,
+ encode: {
+ x: 'Year',
+ y: 'Income',
+ itemName: 'Year',
+ tooltip: ['Income']
+ }
+ }]
+ };
+
+ myChart.setOption<echarts.EChartsOption>(option);
+}
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/data-transform-multiple-pie.ts b/examples/examples/ts/data-transform-multiple-pie.ts
new file mode 100644
index 0000000..7832cb2
--- /dev/null
+++ b/examples/examples/ts/data-transform-multiple-pie.ts
@@ -0,0 +1,82 @@
+/*
+title: Partition Data to Pies
+category: dataset, pie, transform
+titleCN: 分割数据到数个饼图
+difficulty: 3
+*/
+
+option = {
+ dataset: [{
+ source: [
+ ['Product', 'Sales', 'Price', 'Year'],
+ ['Cake', 123, 32, 2011],
+ ['Cereal', 231, 14, 2011],
+ ['Tofu', 235, 5, 2011],
+ ['Dumpling', 341, 25, 2011],
+ ['Biscuit', 122, 29, 2011],
+ ['Cake', 143, 30, 2012],
+ ['Cereal', 201, 19, 2012],
+ ['Tofu', 255, 7, 2012],
+ ['Dumpling', 241, 27, 2012],
+ ['Biscuit', 102, 34, 2012],
+ ['Cake', 153, 28, 2013],
+ ['Cereal', 181, 21, 2013],
+ ['Tofu', 395, 4, 2013],
+ ['Dumpling', 281, 31, 2013],
+ ['Biscuit', 92, 39, 2013],
+ ['Cake', 223, 29, 2014],
+ ['Cereal', 211, 17, 2014],
+ ['Tofu', 345, 3, 2014],
+ ['Dumpling', 211, 35, 2014],
+ ['Biscuit', 72, 24, 2014],
+ ],
+ }, {
+ transform: {
+ type: 'filter',
+ config: { dimension: 'Year', value: 2011 }
+ },
+ }, {
+ transform: {
+ type: 'filter',
+ config: { dimension: 'Year', value: 2012 }
+ }
+ }, {
+ transform: {
+ type: 'filter',
+ config: { dimension: 'Year', value: 2013 }
+ }
+ }],
+ series: [{
+ type: 'pie', radius: 50, center: ['50%', '25%'],
+ datasetIndex: 1
+ }, {
+ type: 'pie', radius: 50, center: ['50%', '50%'],
+ datasetIndex: 2
+ }, {
+ type: 'pie', radius: 50, center: ['50%', '75%'],
+ datasetIndex: 3
+ }],
+
+
+ // Optional. Only for responsive layout:
+ media: [{
+ query: { minAspectRatio: 1 },
+ option: {
+ series: [
+ { center: ['25%', '50%'] },
+ { center: ['50%', '50%'] },
+ { center: ['75%', '50%'] }
+ ]
+ }
+ }, {
+ option: {
+ series: [
+ { center: ['50%', '25%'] },
+ { center: ['50%', '50%'] },
+ { center: ['50%', '75%'] }
+ ]
+ }
+ }]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/data-transform-sort-bar.ts b/examples/examples/ts/data-transform-sort-bar.ts
new file mode 100644
index 0000000..b26f013
--- /dev/null
+++ b/examples/examples/ts/data-transform-sort-bar.ts
@@ -0,0 +1,41 @@
+/*
+title: Sort Data in Bar Chart
+category: dataset, bar, transform
+titleCN: 柱状图排序
+difficulty: 0
+*/
+
+option = {
+ dataset: [{
+ dimensions: ['name', 'age', 'profession', 'score', 'date'],
+ source: [
+ ['Hannah Krause', 41, 'Engineer', 314, '2011-02-12'],
+ ['Zhao Qian', 20, 'Teacher', 351, '2011-03-01'],
+ ['Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],
+ ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],
+ ['Karle Neumann', 25, 'Engineer', 253, '2011-04-02'],
+ ['Adrian Groß', 19, 'Teacher', '-', '2011-01-16'],
+ ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],
+ ['Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],
+ ['Han Meimei', 67, 'Engineer', 366, '2011-03-12'],
+ ]
+ }, {
+ transform: {
+ type: 'sort',
+ config: { dimension: 'score', order: 'desc' }
+ }
+ }],
+ xAxis: {
+ type: 'category',
+ axisLabel: { interval: 0, rotate: 30 },
+ },
+ yAxis: {},
+ series: {
+ type: 'bar',
+ encode: { x: 'name', y: 'score' },
+ datasetIndex: 1
+ }
+};
+
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/dataset-default.ts b/examples/examples/ts/dataset-default.ts
new file mode 100644
index 0000000..382316c
--- /dev/null
+++ b/examples/examples/ts/dataset-default.ts
@@ -0,0 +1,52 @@
+/*
+title: Default arrangement
+category: 'dataset, pie'
+titleCN: 默认 encode 设置
+difficulty: 3
+*/
+
+option = {
+ legend: {},
+ tooltip: {},
+ dataset: {
+ source: [
+ ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
+ ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
+ ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
+ ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
+ ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
+ ]
+ },
+ series: [{
+ type: 'pie',
+ radius: '20%',
+ center: ['25%', '30%']
+ // No encode specified, by default, it is '2012'.
+ }, {
+ type: 'pie',
+ radius: '20%',
+ center: ['75%', '30%'],
+ encode: {
+ itemName: 'product',
+ value: '2013'
+ }
+ }, {
+ type: 'pie',
+ radius: '20%',
+ center: ['25%', '75%'],
+ encode: {
+ itemName: 'product',
+ value: '2014'
+ }
+ }, {
+ type: 'pie',
+ radius: '20%',
+ center: ['75%', '75%'],
+ encode: {
+ itemName: 'product',
+ value: '2015'
+ }
+ }]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/dataset-encode0.ts b/examples/examples/ts/dataset-encode0.ts
new file mode 100644
index 0000000..153bc4b
--- /dev/null
+++ b/examples/examples/ts/dataset-encode0.ts
@@ -0,0 +1,51 @@
+/*
+title: Simple Encode
+category: 'dataset, bar'
+titleCN: 指定数据到坐标轴的映射
+difficulty: 1
+*/
+
+option = {
+ dataset: {
+ source: [
+ ['score', 'amount', 'product'],
+ [89.3, 58212, 'Matcha Latte'],
+ [57.1, 78254, 'Milk Tea'],
+ [74.4, 41032, 'Cheese Cocoa'],
+ [50.1, 12755, 'Cheese Brownie'],
+ [89.7, 20145, 'Matcha Cocoa'],
+ [68.1, 79146, 'Tea'],
+ [19.6, 91852, 'Orange Juice'],
+ [10.6, 101852, 'Lemon Juice'],
+ [32.7, 20112, 'Walnut Brownie']
+ ]
+ },
+ grid: {containLabel: true},
+ xAxis: {name: 'amount'},
+ yAxis: {type: 'category'},
+ visualMap: {
+ orient: 'horizontal',
+ left: 'center',
+ min: 10,
+ max: 100,
+ text: ['High Score', 'Low Score'],
+ // Map the score column to color
+ dimension: 0,
+ inRange: {
+ color: ['#65B581', '#FFCE34', '#FD665F']
+ }
+ },
+ series: [
+ {
+ type: 'bar',
+ encode: {
+ // Map the "amount" column to X axis.
+ x: 'amount',
+ // Map the "product" column to Y axis
+ y: 'product'
+ }
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/dataset-encode1.ts b/examples/examples/ts/dataset-encode1.ts
new file mode 100644
index 0000000..cfd4f5a
--- /dev/null
+++ b/examples/examples/ts/dataset-encode1.ts
@@ -0,0 +1,100 @@
+/*
+title: Encode and Matrix
+category: dataset
+titleCN: 指定数据到坐标轴的映射
+difficulty: 3
+*/
+
+$.get(ROOT_PATH + '/data/asset/data/life-expectancy-table.json', function (data) {
+
+ var sizeValue = '57%';
+ var symbolSize = 2.5;
+ option = {
+ legend: {},
+ tooltip: {},
+ toolbox: {
+ left: 'center',
+ feature: {
+ dataZoom: {}
+ }
+ },
+ grid: [
+ {right: sizeValue, bottom: sizeValue},
+ {left: sizeValue, bottom: sizeValue},
+ {right: sizeValue, top: sizeValue},
+ {left: sizeValue, top: sizeValue}
+ ],
+ xAxis: [
+ {type: 'value', gridIndex: 0, name: 'Income', axisLabel: {rotate: 50, interval: 0}},
+ {type: 'category', gridIndex: 1, name: 'Country', boundaryGap: false, axisLabel: {rotate: 50, interval: 0}},
+ {type: 'value', gridIndex: 2, name: 'Income', axisLabel: {rotate: 50, interval: 0}},
+ {type: 'value', gridIndex: 3, name: 'Life Expectancy', axisLabel: {rotate: 50, interval: 0}}
+ ],
+ yAxis: [
+ {type: 'value', gridIndex: 0, name: 'Life Expectancy'},
+ {type: 'value', gridIndex: 1, name: 'Income'},
+ {type: 'value', gridIndex: 2, name: 'Population'},
+ {type: 'value', gridIndex: 3, name: 'Population'}
+ ],
+ dataset: {
+ dimensions: [
+ 'Income',
+ 'Life Expectancy',
+ 'Population',
+ 'Country',
+ {name: 'Year', type: 'ordinal'}
+ ],
+ source: data
+ },
+ series: [
+ {
+ type: 'scatter',
+ symbolSize: symbolSize,
+ xAxisIndex: 0,
+ yAxisIndex: 0,
+ encode: {
+ x: 'Income',
+ y: 'Life Expectancy',
+ tooltip: [0, 1, 2, 3, 4]
+ }
+ },
+ {
+ type: 'scatter',
+ symbolSize: symbolSize,
+ xAxisIndex: 1,
+ yAxisIndex: 1,
+ encode: {
+ x: 'Country',
+ y: 'Income',
+ tooltip: [0, 1, 2, 3, 4]
+ }
+ },
+ {
+ type: 'scatter',
+ symbolSize: symbolSize,
+ xAxisIndex: 2,
+ yAxisIndex: 2,
+ encode: {
+ x: 'Income',
+ y: 'Population',
+ tooltip: [0, 1, 2, 3, 4]
+ }
+ },
+ {
+ type: 'scatter',
+ symbolSize: symbolSize,
+ xAxisIndex: 3,
+ yAxisIndex: 3,
+ encode: {
+ x: 'Life Expectancy',
+ y: 'Population',
+ tooltip: [0, 1, 2, 3, 4]
+ }
+ }
+ ]
+ };
+
+ myChart.setOption<echarts.EChartsOption>(option);
+});
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/dataset-link.ts b/examples/examples/ts/dataset-link.ts
new file mode 100644
index 0000000..598a177
--- /dev/null
+++ b/examples/examples/ts/dataset-link.ts
@@ -0,0 +1,76 @@
+/*
+title: Share Dataset
+category: 'dataset, line, pie'
+titleCN: 联动和共享数据集
+difficulty: 5
+*/
+
+
+setTimeout(function () {
+
+ option = {
+ legend: {},
+ tooltip: {
+ trigger: 'axis',
+ showContent: false
+ },
+ dataset: {
+ source: [
+ ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
+ ['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
+ ['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
+ ['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
+ ['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
+ ]
+ },
+ xAxis: {type: 'category'},
+ yAxis: {gridIndex: 0},
+ grid: {top: '55%'},
+ series: [
+ {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
+ {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
+ {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
+ {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
+ {
+ type: 'pie',
+ id: 'pie',
+ radius: '30%',
+ center: ['50%', '25%'],
+ emphasis: {
+ focus: 'self'
+ },
+ label: {
+ formatter: '{b}: {@2012} ({d}%)'
+ },
+ encode: {
+ itemName: 'product',
+ value: '2012',
+ tooltip: '2012'
+ }
+ }
+ ]
+ };
+
+ myChart.on('updateAxisPointer', function (event: any) {
+ const xAxisInfo = event.axesInfo[0];
+ if (xAxisInfo) {
+ const dimension = xAxisInfo.value + 1;
+ myChart.setOption<echarts.EChartsOption>({
+ series: {
+ id: 'pie',
+ label: {
+ formatter: '{b}: {@[' + dimension + ']} ({d}%)'
+ },
+ encode: {
+ value: dimension,
+ tooltip: dimension
+ }
+ }
+ });
+ }
+ });
+
+ myChart.setOption<echarts.EChartsOption>(option);
+});
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/dataset-series-layout-by.ts b/examples/examples/ts/dataset-series-layout-by.ts
new file mode 100644
index 0000000..ac85cd4
--- /dev/null
+++ b/examples/examples/ts/dataset-series-layout-by.ts
@@ -0,0 +1,44 @@
+/*
+title: Series Layout By Column or Row
+category: 'dataset, bar'
+titleCN: 系列按行和按列排布
+difficulty: 5
+*/
+
+option = {
+ legend: {},
+ tooltip: {},
+ dataset: {
+ source: [
+ ['product', '2012', '2013', '2014', '2015'],
+ ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
+ ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
+ ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
+ ]
+ },
+ xAxis: [
+ {type: 'category', gridIndex: 0},
+ {type: 'category', gridIndex: 1}
+ ],
+ yAxis: [
+ {gridIndex: 0},
+ {gridIndex: 1}
+ ],
+ grid: [
+ {bottom: '55%'},
+ {top: '55%'}
+ ],
+ series: [
+ // These series are in the first grid.
+ {type: 'bar', seriesLayoutBy: 'row'},
+ {type: 'bar', seriesLayoutBy: 'row'},
+ {type: 'bar', seriesLayoutBy: 'row'},
+ // These series are in the second grid.
+ {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
+ {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
+ {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
+ {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/dataset-simple0.ts b/examples/examples/ts/dataset-simple0.ts
new file mode 100644
index 0000000..335a862
--- /dev/null
+++ b/examples/examples/ts/dataset-simple0.ts
@@ -0,0 +1,31 @@
+/*
+title: Simple Example of Dataset
+category: 'dataset, bar'
+titleCN: 最简单的数据集（dataset）
+difficulty: 5
+*/
+
+option = {
+ legend: {},
+ tooltip: {},
+ dataset: {
+ source: [
+ ['product', '2015', '2016', '2017'],
+ ['Matcha Latte', 43.3, 85.8, 93.7],
+ ['Milk Tea', 83.1, 73.4, 55.1],
+ ['Cheese Cocoa', 86.4, 65.2, 82.5],
+ ['Walnut Brownie', 72.4, 53.9, 39.1]
+ ]
+ },
+ xAxis: {type: 'category'},
+ yAxis: {},
+ // Declare several bar series, each will be mapped
+ // to a column of dataset.source by default.
+ series: [
+ {type: 'bar'},
+ {type: 'bar'},
+ {type: 'bar'}
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/dataset-simple1.ts b/examples/examples/ts/dataset-simple1.ts
new file mode 100644
index 0000000..9103dfe
--- /dev/null
+++ b/examples/examples/ts/dataset-simple1.ts
@@ -0,0 +1,31 @@
+/*
+title: Dataset in Object Array
+category: 'dataset, bar'
+titleCN: 对象数组的输入格式
+difficulty: 5
+*/
+
+option = {
+ legend: {},
+ tooltip: {},
+ dataset: {
+ dimensions: ['product', '2015', '2016', '2017'],
+ source: [
+ {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
+ {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
+ {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
+ {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
+ ]
+ },
+ xAxis: {type: 'category'},
+ yAxis: {},
+ // Declare several bar series, each will be mapped
+ // to a column of dataset.source by default.
+ series: [
+ {type: 'bar'},
+ {type: 'bar'},
+ {type: 'bar'}
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/dynamic-data.ts b/examples/examples/ts/dynamic-data.ts
new file mode 100644
index 0000000..c227b1a
--- /dev/null
+++ b/examples/examples/ts/dynamic-data.ts
@@ -0,0 +1,133 @@
+/*
+title: Dynamic Data
+category: bar
+titleCN: 动态数据
+difficulty: 6
+*/
+
+option = {
+ title: {
+ text: 'Dynamic Data'
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ label: {
+ backgroundColor: '#283b56'
+ }
+ }
+ },
+ legend: {
+ data:['最新成交价', '预购队列']
+ },
+ toolbox: {
+ show: true,
+ feature: {
+ dataView: {readOnly: false},
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ dataZoom: {
+ show: false,
+ start: 0,
+ end: 100
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: true,
+ data: (function (){
+ var now = new Date();
+ var res = [];
+ var len = 10;
+ while (len--) {
+ res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
+ now = new Date(now - 2000);
+ }
+ return res;
+ })()
+ },
+ {
+ type: 'category',
+ boundaryGap: true,
+ data: (function (){
+ var res = [];
+ var len = 10;
+ while (len--) {
+ res.push(10 - len - 1);
+ }
+ return res;
+ })()
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ scale: true,
+ name: '价格',
+ max: 30,
+ min: 0,
+ boundaryGap: [0.2, 0.2]
+ },
+ {
+ type: 'value',
+ scale: true,
+ name: '预购量',
+ max: 1200,
+ min: 0,
+ boundaryGap: [0.2, 0.2]
+ }
+ ],
+ series: [
+ {
+ name: '预购队列',
+ type: 'bar',
+ xAxisIndex: 1,
+ yAxisIndex: 1,
+ data: (function (){
+ var res = [];
+ var len = 10;
+ while (len--) {
+ res.push(Math.round(Math.random() * 1000));
+ }
+ return res;
+ })()
+ },
+ {
+ name: '最新成交价',
+ type: 'line',
+ data: (function (){
+ var res = [];
+ var len = 0;
+ while (len < 10) {
+ res.push((Math.random()*10 + 5).toFixed(1) - 0);
+ len++;
+ }
+ return res;
+ })()
+ }
+ ]
+};
+
+app.count = 11;
+setInterval(function (){
+ var axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');
+
+ var data0 = option.series[0].data;
+ var data1 = option.series[1].data;
+ data0.shift();
+ data0.push(Math.round(Math.random() * 1000));
+ data1.shift();
+ data1.push((Math.random() * 10 + 5).toFixed(1) - 0);
+
+ option.xAxis[0].data.shift();
+ option.xAxis[0].data.push(axisData);
+ option.xAxis[1].data.shift();
+ option.xAxis[1].data.push(app.count++);
+
+ myChart.setOption<echarts.EChartsOption>(option);
+}, 2100);
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/dynamic-data2.ts b/examples/examples/ts/dynamic-data2.ts
new file mode 100644
index 0000000..ef2e928
--- /dev/null
+++ b/examples/examples/ts/dynamic-data2.ts
@@ -0,0 +1,82 @@
+/*
+title: Dynamic Data + Time Axis
+category: line
+titleCN: 动态数据 + 时间坐标轴
+difficulty: 5
+*/
+
+interface DataItem {
+ name: string
+ value: [string, number]
+}
+
+function randomData(): DataItem {
+ now = new Date(+now + oneDay);
+ value = value + Math.random() * 21 - 10;
+ return {
+ name: now.toString(),
+ value: [
+ [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
+ Math.round(value)
+ ]
+ };
+}
+
+let data: DataItem[] = [];
+let now = new Date(1997, 9, 3);
+let oneDay = 24 * 3600 * 1000;
+let value = Math.random() * 1000;
+for (var i = 0; i < 1000; i++) {
+ data.push(randomData());
+}
+
+option = {
+ title: {
+ text: 'Dynamic Data & Time Axis'
+ },
+ tooltip: {
+ trigger: 'axis',
+ formatter: function (params) {
+ params = params[0];
+ var date = new Date(params.name);
+ return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
+ },
+ axisPointer: {
+ animation: false
+ }
+ },
+ xAxis: {
+ type: 'time',
+ splitLine: {
+ show: false
+ }
+ },
+ yAxis: {
+ type: 'value',
+ boundaryGap: [0, '100%'],
+ splitLine: {
+ show: false
+ }
+ },
+ series: [{
+ name: '模拟数据',
+ type: 'line',
+ showSymbol: false,
+ data: data
+ }]
+};
+
+setInterval(function () {
+ for (var i = 0; i < 5; i++) {
+ data.shift();
+ data.push(randomData());
+ }
+
+ myChart.setOption<echarts.EChartsOption>({
+ series: [{
+ data: data
+ }]
+ });
+}, 1000);
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/effectScatter-bmap.ts b/examples/examples/ts/effectScatter-bmap.ts
new file mode 100644
index 0000000..e9ee0ae
--- /dev/null
+++ b/examples/examples/ts/effectScatter-bmap.ts
@@ -0,0 +1,584 @@
+/*
+title: Air Quality - Baidu Map
+category: 'scatter, map'
+tags: bmap
+titleCN: 全国主要城市空气质量 - 百度地图
+difficulty: 10
+*/
+
+interface DataItem {
+ name: string
+ value: number
+}
+
+const data: DataItem[] = [
+ {name: '海门', value: 9},
+ {name: '鄂尔多斯', value: 12},
+ {name: '招远', value: 12},
+ {name: '舟山', value: 12},
+ {name: '齐齐哈尔', value: 14},
+ {name: '盐城', value: 15},
+ {name: '赤峰', value: 16},
+ {name: '青岛', value: 18},
+ {name: '乳山', value: 18},
+ {name: '金昌', value: 19},
+ {name: '泉州', value: 21},
+ {name: '莱西', value: 21},
+ {name: '日照', value: 21},
+ {name: '胶南', value: 22},
+ {name: '南通', value: 23},
+ {name: '拉萨', value: 24},
+ {name: '云浮', value: 24},
+ {name: '梅州', value: 25},
+ {name: '文登', value: 25},
+ {name: '上海', value: 25},
+ {name: '攀枝花', value: 25},
+ {name: '威海', value: 25},
+ {name: '承德', value: 25},
+ {name: '厦门', value: 26},
+ {name: '汕尾', value: 26},
+ {name: '潮州', value: 26},
+ {name: '丹东', value: 27},
+ {name: '太仓', value: 27},
+ {name: '曲靖', value: 27},
+ {name: '烟台', value: 28},
+ {name: '福州', value: 29},
+ {name: '瓦房店', value: 30},
+ {name: '即墨', value: 30},
+ {name: '抚顺', value: 31},
+ {name: '玉溪', value: 31},
+ {name: '张家口', value: 31},
+ {name: '阳泉', value: 31},
+ {name: '莱州', value: 32},
+ {name: '湖州', value: 32},
+ {name: '汕头', value: 32},
+ {name: '昆山', value: 33},
+ {name: '宁波', value: 33},
+ {name: '湛江', value: 33},
+ {name: '揭阳', value: 34},
+ {name: '荣成', value: 34},
+ {name: '连云港', value: 35},
+ {name: '葫芦岛', value: 35},
+ {name: '常熟', value: 36},
+ {name: '东莞', value: 36},
+ {name: '河源', value: 36},
+ {name: '淮安', value: 36},
+ {name: '泰州', value: 36},
+ {name: '南宁', value: 37},
+ {name: '营口', value: 37},
+ {name: '惠州', value: 37},
+ {name: '江阴', value: 37},
+ {name: '蓬莱', value: 37},
+ {name: '韶关', value: 38},
+ {name: '嘉峪关', value: 38},
+ {name: '广州', value: 38},
+ {name: '延安', value: 38},
+ {name: '太原', value: 39},
+ {name: '清远', value: 39},
+ {name: '中山', value: 39},
+ {name: '昆明', value: 39},
+ {name: '寿光', value: 40},
+ {name: '盘锦', value: 40},
+ {name: '长治', value: 41},
+ {name: '深圳', value: 41},
+ {name: '珠海', value: 42},
+ {name: '宿迁', value: 43},
+ {name: '咸阳', value: 43},
+ {name: '铜川', value: 44},
+ {name: '平度', value: 44},
+ {name: '佛山', value: 44},
+ {name: '海口', value: 44},
+ {name: '江门', value: 45},
+ {name: '章丘', value: 45},
+ {name: '肇庆', value: 46},
+ {name: '大连', value: 47},
+ {name: '临汾', value: 47},
+ {name: '吴江', value: 47},
+ {name: '石嘴山', value: 49},
+ {name: '沈阳', value: 50},
+ {name: '苏州', value: 50},
+ {name: '茂名', value: 50},
+ {name: '嘉兴', value: 51},
+ {name: '长春', value: 51},
+ {name: '胶州', value: 52},
+ {name: '银川', value: 52},
+ {name: '张家港', value: 52},
+ {name: '三门峡', value: 53},
+ {name: '锦州', value: 54},
+ {name: '南昌', value: 54},
+ {name: '柳州', value: 54},
+ {name: '三亚', value: 54},
+ {name: '自贡', value: 56},
+ {name: '吉林', value: 56},
+ {name: '阳江', value: 57},
+ {name: '泸州', value: 57},
+ {name: '西宁', value: 57},
+ {name: '宜宾', value: 58},
+ {name: '呼和浩特', value: 58},
+ {name: '成都', value: 58},
+ {name: '大同', value: 58},
+ {name: '镇江', value: 59},
+ {name: '桂林', value: 59},
+ {name: '张家界', value: 59},
+ {name: '宜兴', value: 59},
+ {name: '北海', value: 60},
+ {name: '西安', value: 61},
+ {name: '金坛', value: 62},
+ {name: '东营', value: 62},
+ {name: '牡丹江', value: 63},
+ {name: '遵义', value: 63},
+ {name: '绍兴', value: 63},
+ {name: '扬州', value: 64},
+ {name: '常州', value: 64},
+ {name: '潍坊', value: 65},
+ {name: '重庆', value: 66},
+ {name: '台州', value: 67},
+ {name: '南京', value: 67},
+ {name: '滨州', value: 70},
+ {name: '贵阳', value: 71},
+ {name: '无锡', value: 71},
+ {name: '本溪', value: 71},
+ {name: '克拉玛依', value: 72},
+ {name: '渭南', value: 72},
+ {name: '马鞍山', value: 72},
+ {name: '宝鸡', value: 72},
+ {name: '焦作', value: 75},
+ {name: '句容', value: 75},
+ {name: '北京', value: 79},
+ {name: '徐州', value: 79},
+ {name: '衡水', value: 80},
+ {name: '包头', value: 80},
+ {name: '绵阳', value: 80},
+ {name: '乌鲁木齐', value: 84},
+ {name: '枣庄', value: 84},
+ {name: '杭州', value: 84},
+ {name: '淄博', value: 85},
+ {name: '鞍山', value: 86},
+ {name: '溧阳', value: 86},
+ {name: '库尔勒', value: 86},
+ {name: '安阳', value: 90},
+ {name: '开封', value: 90},
+ {name: '济南', value: 92},
+ {name: '德阳', value: 93},
+ {name: '温州', value: 95},
+ {name: '九江', value: 96},
+ {name: '邯郸', value: 98},
+ {name: '临安', value: 99},
+ {name: '兰州', value: 99},
+ {name: '沧州', value: 100},
+ {name: '临沂', value: 103},
+ {name: '南充', value: 104},
+ {name: '天津', value: 105},
+ {name: '富阳', value: 106},
+ {name: '泰安', value: 112},
+ {name: '诸暨', value: 112},
+ {name: '郑州', value: 113},
+ {name: '哈尔滨', value: 114},
+ {name: '聊城', value: 116},
+ {name: '芜湖', value: 117},
+ {name: '唐山', value: 119},
+ {name: '平顶山', value: 119},
+ {name: '邢台', value: 119},
+ {name: '德州', value: 120},
+ {name: '济宁', value: 120},
+ {name: '荆州', value: 127},
+ {name: '宜昌', value: 130},
+ {name: '义乌', value: 132},
+ {name: '丽水', value: 133},
+ {name: '洛阳', value: 134},
+ {name: '秦皇岛', value: 136},
+ {name: '株洲', value: 143},
+ {name: '石家庄', value: 147},
+ {name: '莱芜', value: 148},
+ {name: '常德', value: 152},
+ {name: '保定', value: 153},
+ {name: '湘潭', value: 154},
+ {name: '金华', value: 157},
+ {name: '岳阳', value: 169},
+ {name: '长沙', value: 175},
+ {name: '衢州', value: 177},
+ {name: '廊坊', value: 193},
+ {name: '菏泽', value: 194},
+ {name: '合肥', value: 229},
+ {name: '武汉', value: 273},
+ {name: '大庆', value: 279}
+];
+const geoCoordMap: Record<string, number[]> = {
+ '海门':[121.15,31.89],
+ '鄂尔多斯':[109.781327,39.608266],
+ '招远':[120.38,37.35],
+ '舟山':[122.207216,29.985295],
+ '齐齐哈尔':[123.97,47.33],
+ '盐城':[120.13,33.38],
+ '赤峰':[118.87,42.28],
+ '青岛':[120.33,36.07],
+ '乳山':[121.52,36.89],
+ '金昌':[102.188043,38.520089],
+ '泉州':[118.58,24.93],
+ '莱西':[120.53,36.86],
+ '日照':[119.46,35.42],
+ '胶南':[119.97,35.88],
+ '南通':[121.05,32.08],
+ '拉萨':[91.11,29.97],
+ '云浮':[112.02,22.93],
+ '梅州':[116.1,24.55],
+ '文登':[122.05,37.2],
+ '上海':[121.48,31.22],
+ '攀枝花':[101.718637,26.582347],
+ '威海':[122.1,37.5],
+ '承德':[117.93,40.97],
+ '厦门':[118.1,24.46],
+ '汕尾':[115.375279,22.786211],
+ '潮州':[116.63,23.68],
+ '丹东':[124.37,40.13],
+ '太仓':[121.1,31.45],
+ '曲靖':[103.79,25.51],
+ '烟台':[121.39,37.52],
+ '福州':[119.3,26.08],
+ '瓦房店':[121.979603,39.627114],
+ '即墨':[120.45,36.38],
+ '抚顺':[123.97,41.97],
+ '玉溪':[102.52,24.35],
+ '张家口':[114.87,40.82],
+ '阳泉':[113.57,37.85],
+ '莱州':[119.942327,37.177017],
+ '湖州':[120.1,30.86],
+ '汕头':[116.69,23.39],
+ '昆山':[120.95,31.39],
+ '宁波':[121.56,29.86],
+ '湛江':[110.359377,21.270708],
+ '揭阳':[116.35,23.55],
+ '荣成':[122.41,37.16],
+ '连云港':[119.16,34.59],
+ '葫芦岛':[120.836932,40.711052],
+ '常熟':[120.74,31.64],
+ '东莞':[113.75,23.04],
+ '河源':[114.68,23.73],
+ '淮安':[119.15,33.5],
+ '泰州':[119.9,32.49],
+ '南宁':[108.33,22.84],
+ '营口':[122.18,40.65],
+ '惠州':[114.4,23.09],
+ '江阴':[120.26,31.91],
+ '蓬莱':[120.75,37.8],
+ '韶关':[113.62,24.84],
+ '嘉峪关':[98.289152,39.77313],
+ '广州':[113.23,23.16],
+ '延安':[109.47,36.6],
+ '太原':[112.53,37.87],
+ '清远':[113.01,23.7],
+ '中山':[113.38,22.52],
+ '昆明':[102.73,25.04],
+ '寿光':[118.73,36.86],
+ '盘锦':[122.070714,41.119997],
+ '长治':[113.08,36.18],
+ '深圳':[114.07,22.62],
+ '珠海':[113.52,22.3],
+ '宿迁':[118.3,33.96],
+ '咸阳':[108.72,34.36],
+ '铜川':[109.11,35.09],
+ '平度':[119.97,36.77],
+ '佛山':[113.11,23.05],
+ '海口':[110.35,20.02],
+ '江门':[113.06,22.61],
+ '章丘':[117.53,36.72],
+ '肇庆':[112.44,23.05],
+ '大连':[121.62,38.92],
+ '临汾':[111.5,36.08],
+ '吴江':[120.63,31.16],
+ '石嘴山':[106.39,39.04],
+ '沈阳':[123.38,41.8],
+ '苏州':[120.62,31.32],
+ '茂名':[110.88,21.68],
+ '嘉兴':[120.76,30.77],
+ '长春':[125.35,43.88],
+ '胶州':[120.03336,36.264622],
+ '银川':[106.27,38.47],
+ '张家港':[120.555821,31.875428],
+ '三门峡':[111.19,34.76],
+ '锦州':[121.15,41.13],
+ '南昌':[115.89,28.68],
+ '柳州':[109.4,24.33],
+ '三亚':[109.511909,18.252847],
+ '自贡':[104.778442,29.33903],
+ '吉林':[126.57,43.87],
+ '阳江':[111.95,21.85],
+ '泸州':[105.39,28.91],
+ '西宁':[101.74,36.56],
+ '宜宾':[104.56,29.77],
+ '呼和浩特':[111.65,40.82],
+ '成都':[104.06,30.67],
+ '大同':[113.3,40.12],
+ '镇江':[119.44,32.2],
+ '桂林':[110.28,25.29],
+ '张家界':[110.479191,29.117096],
+ '宜兴':[119.82,31.36],
+ '北海':[109.12,21.49],
+ '西安':[108.95,34.27],
+ '金坛':[119.56,31.74],
+ '东营':[118.49,37.46],
+ '牡丹江':[129.58,44.6],
+ '遵义':[106.9,27.7],
+ '绍兴':[120.58,30.01],
+ '扬州':[119.42,32.39],
+ '常州':[119.95,31.79],
+ '潍坊':[119.1,36.62],
+ '重庆':[106.54,29.59],
+ '台州':[121.420757,28.656386],
+ '南京':[118.78,32.04],
+ '滨州':[118.03,37.36],
+ '贵阳':[106.71,26.57],
+ '无锡':[120.29,31.59],
+ '本溪':[123.73,41.3],
+ '克拉玛依':[84.77,45.59],
+ '渭南':[109.5,34.52],
+ '马鞍山':[118.48,31.56],
+ '宝鸡':[107.15,34.38],
+ '焦作':[113.21,35.24],
+ '句容':[119.16,31.95],
+ '北京':[116.46,39.92],
+ '徐州':[117.2,34.26],
+ '衡水':[115.72,37.72],
+ '包头':[110,40.58],
+ '绵阳':[104.73,31.48],
+ '乌鲁木齐':[87.68,43.77],
+ '枣庄':[117.57,34.86],
+ '杭州':[120.19,30.26],
+ '淄博':[118.05,36.78],
+ '鞍山':[122.85,41.12],
+ '溧阳':[119.48,31.43],
+ '库尔勒':[86.06,41.68],
+ '安阳':[114.35,36.1],
+ '开封':[114.35,34.79],
+ '济南':[117,36.65],
+ '德阳':[104.37,31.13],
+ '温州':[120.65,28.01],
+ '九江':[115.97,29.71],
+ '邯郸':[114.47,36.6],
+ '临安':[119.72,30.23],
+ '兰州':[103.73,36.03],
+ '沧州':[116.83,38.33],
+ '临沂':[118.35,35.05],
+ '南充':[106.110698,30.837793],
+ '天津':[117.2,39.13],
+ '富阳':[119.95,30.07],
+ '泰安':[117.13,36.18],
+ '诸暨':[120.23,29.71],
+ '郑州':[113.65,34.76],
+ '哈尔滨':[126.63,45.75],
+ '聊城':[115.97,36.45],
+ '芜湖':[118.38,31.33],
+ '唐山':[118.02,39.63],
+ '平顶山':[113.29,33.75],
+ '邢台':[114.48,37.05],
+ '德州':[116.29,37.45],
+ '济宁':[116.59,35.38],
+ '荆州':[112.239741,30.335165],
+ '宜昌':[111.3,30.7],
+ '义乌':[120.06,29.32],
+ '丽水':[119.92,28.45],
+ '洛阳':[112.44,34.7],
+ '秦皇岛':[119.57,39.95],
+ '株洲':[113.16,27.83],
+ '石家庄':[114.48,38.03],
+ '莱芜':[117.67,36.19],
+ '常德':[111.69,29.05],
+ '保定':[115.48,38.85],
+ '湘潭':[112.91,27.87],
+ '金华':[119.64,29.12],
+ '岳阳':[113.09,29.37],
+ '长沙':[113,28.21],
+ '衢州':[118.88,28.97],
+ '廊坊':[116.7,39.53],
+ '菏泽':[115.480656,35.23375],
+ '合肥':[117.27,31.86],
+ '武汉':[114.31,30.52],
+ '大庆':[125.03,46.58]
+};
+
+const convertData = function (data: DataItem[]) {
+ var res = [];
+ for (var i = 0; i < data.length; i++) {
+ var geoCoord = geoCoordMap[data[i].name];
+ if (geoCoord) {
+ res.push({
+ name: data[i].name,
+ value: geoCoord.concat(data[i].value)
+ });
+ }
+ }
+ return res;
+};
+
+option = {
+ title: {
+ text: '全国主要城市空气质量 - 百度地图',
+ subtext: 'data from PM25.in',
+ sublink: 'http://www.pm25.in',
+ left: 'center'
+ },
+ tooltip : {
+ trigger: 'item'
+ },
+ bmap: {
+ center: [104.114129, 37.550339],
+ zoom: 5,
+ roam: true,
+ mapStyle: {
+ styleJson: [{
+ 'featureType': 'water',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#d1d1d1'
+ }
+ }, {
+ 'featureType': 'land',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#f3f3f3'
+ }
+ }, {
+ 'featureType': 'railway',
+ 'elementType': 'all',
+ 'stylers': {
+ 'visibility': 'off'
+ }
+ }, {
+ 'featureType': 'highway',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#fdfdfd'
+ }
+ }, {
+ 'featureType': 'highway',
+ 'elementType': 'labels',
+ 'stylers': {
+ 'visibility': 'off'
+ }
+ }, {
+ 'featureType': 'arterial',
+ 'elementType': 'geometry',
+ 'stylers': {
+ 'color': '#fefefe'
+ }
+ }, {
+ 'featureType': 'arterial',
+ 'elementType': 'geometry.fill',
+ 'stylers': {
+ 'color': '#fefefe'
+ }
+ }, {
+ 'featureType': 'poi',
+ 'elementType': 'all',
+ 'stylers': {
+ 'visibility': 'off'
+ }
+ }, {
+ 'featureType': 'green',
+ 'elementType': 'all',
+ 'stylers': {
+ 'visibility': 'off'
+ }
+ }, {
+ 'featureType': 'subway',
+ 'elementType': 'all',
+ 'stylers': {
+ 'visibility': 'off'
+ }
+ }, {
+ 'featureType': 'manmade',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#d1d1d1'
+ }
+ }, {
+ 'featureType': 'local',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#d1d1d1'
+ }
+ }, {
+ 'featureType': 'arterial',
+ 'elementType': 'labels',
+ 'stylers': {
+ 'visibility': 'off'
+ }
+ }, {
+ 'featureType': 'boundary',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#fefefe'
+ }
+ }, {
+ 'featureType': 'building',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#d1d1d1'
+ }
+ }, {
+ 'featureType': 'label',
+ 'elementType': 'labels.text.fill',
+ 'stylers': {
+ 'color': '#999999'
+ }
+ }]
+ }
+ },
+ series : [
+ {
+ name: 'pm2.5',
+ type: 'scatter',
+ coordinateSystem: 'bmap',
+ data: convertData(data),
+ symbolSize: function (val) {
+ return val[2] / 10;
+ },
+ encode: {
+ value: 2
+ },
+ label: {
+ formatter: '{b}',
+ position: 'right',
+ show: false
+ },
+ emphasis: {
+ label: {
+ show: true
+ }
+ }
+ },
+ {
+ name: 'Top 5',
+ type: 'effectScatter',
+ coordinateSystem: 'bmap',
+ data: convertData(data.sort(function (a, b) {
+ return b.value - a.value;
+ }).slice(0, 6)),
+ symbolSize: function (val) {
+ return val[2] / 10;
+ },
+ encode: {
+ value: 2
+ },
+ showEffectOn: 'render',
+ rippleEffect: {
+ brushType: 'stroke'
+ },
+ label: {
+ formatter: '{b}',
+ position: 'right',
+ show: true
+ },
+ itemStyle: {
+ shadowBlur: 10,
+ shadowColor: '#333'
+ },
+ emphasis: {
+ scale: true
+ },
+ zlevel: 1
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/effectScatter-map.ts b/examples/examples/ts/effectScatter-map.ts
new file mode 100644
index 0000000..1f6429e
--- /dev/null
+++ b/examples/examples/ts/effectScatter-map.ts
@@ -0,0 +1,511 @@
+/*
+title: Air Quality
+category: scatter
+titleCN: 全国主要城市空气质量
+difficulty: 2
+*/
+
+interface DataItem {
+ name: string
+ value: number
+}
+const data: DataItem[] = [
+ {name: '海门', value: 9},
+ {name: '鄂尔多斯', value: 12},
+ {name: '招远', value: 12},
+ {name: '舟山', value: 12},
+ {name: '齐齐哈尔', value: 14},
+ {name: '盐城', value: 15},
+ {name: '赤峰', value: 16},
+ {name: '青岛', value: 18},
+ {name: '乳山', value: 18},
+ {name: '金昌', value: 19},
+ {name: '泉州', value: 21},
+ {name: '莱西', value: 21},
+ {name: '日照', value: 21},
+ {name: '胶南', value: 22},
+ {name: '南通', value: 23},
+ {name: '拉萨', value: 24},
+ {name: '云浮', value: 24},
+ {name: '梅州', value: 25},
+ {name: '文登', value: 25},
+ {name: '上海', value: 25},
+ {name: '攀枝花', value: 25},
+ {name: '威海', value: 25},
+ {name: '承德', value: 25},
+ {name: '厦门', value: 26},
+ {name: '汕尾', value: 26},
+ {name: '潮州', value: 26},
+ {name: '丹东', value: 27},
+ {name: '太仓', value: 27},
+ {name: '曲靖', value: 27},
+ {name: '烟台', value: 28},
+ {name: '福州', value: 29},
+ {name: '瓦房店', value: 30},
+ {name: '即墨', value: 30},
+ {name: '抚顺', value: 31},
+ {name: '玉溪', value: 31},
+ {name: '张家口', value: 31},
+ {name: '阳泉', value: 31},
+ {name: '莱州', value: 32},
+ {name: '湖州', value: 32},
+ {name: '汕头', value: 32},
+ {name: '昆山', value: 33},
+ {name: '宁波', value: 33},
+ {name: '湛江', value: 33},
+ {name: '揭阳', value: 34},
+ {name: '荣成', value: 34},
+ {name: '连云港', value: 35},
+ {name: '葫芦岛', value: 35},
+ {name: '常熟', value: 36},
+ {name: '东莞', value: 36},
+ {name: '河源', value: 36},
+ {name: '淮安', value: 36},
+ {name: '泰州', value: 36},
+ {name: '南宁', value: 37},
+ {name: '营口', value: 37},
+ {name: '惠州', value: 37},
+ {name: '江阴', value: 37},
+ {name: '蓬莱', value: 37},
+ {name: '韶关', value: 38},
+ {name: '嘉峪关', value: 38},
+ {name: '广州', value: 38},
+ {name: '延安', value: 38},
+ {name: '太原', value: 39},
+ {name: '清远', value: 39},
+ {name: '中山', value: 39},
+ {name: '昆明', value: 39},
+ {name: '寿光', value: 40},
+ {name: '盘锦', value: 40},
+ {name: '长治', value: 41},
+ {name: '深圳', value: 41},
+ {name: '珠海', value: 42},
+ {name: '宿迁', value: 43},
+ {name: '咸阳', value: 43},
+ {name: '铜川', value: 44},
+ {name: '平度', value: 44},
+ {name: '佛山', value: 44},
+ {name: '海口', value: 44},
+ {name: '江门', value: 45},
+ {name: '章丘', value: 45},
+ {name: '肇庆', value: 46},
+ {name: '大连', value: 47},
+ {name: '临汾', value: 47},
+ {name: '吴江', value: 47},
+ {name: '石嘴山', value: 49},
+ {name: '沈阳', value: 50},
+ {name: '苏州', value: 50},
+ {name: '茂名', value: 50},
+ {name: '嘉兴', value: 51},
+ {name: '长春', value: 51},
+ {name: '胶州', value: 52},
+ {name: '银川', value: 52},
+ {name: '张家港', value: 52},
+ {name: '三门峡', value: 53},
+ {name: '锦州', value: 54},
+ {name: '南昌', value: 54},
+ {name: '柳州', value: 54},
+ {name: '三亚', value: 54},
+ {name: '自贡', value: 56},
+ {name: '吉林', value: 56},
+ {name: '阳江', value: 57},
+ {name: '泸州', value: 57},
+ {name: '西宁', value: 57},
+ {name: '宜宾', value: 58},
+ {name: '呼和浩特', value: 58},
+ {name: '成都', value: 58},
+ {name: '大同', value: 58},
+ {name: '镇江', value: 59},
+ {name: '桂林', value: 59},
+ {name: '张家界', value: 59},
+ {name: '宜兴', value: 59},
+ {name: '北海', value: 60},
+ {name: '西安', value: 61},
+ {name: '金坛', value: 62},
+ {name: '东营', value: 62},
+ {name: '牡丹江', value: 63},
+ {name: '遵义', value: 63},
+ {name: '绍兴', value: 63},
+ {name: '扬州', value: 64},
+ {name: '常州', value: 64},
+ {name: '潍坊', value: 65},
+ {name: '重庆', value: 66},
+ {name: '台州', value: 67},
+ {name: '南京', value: 67},
+ {name: '滨州', value: 70},
+ {name: '贵阳', value: 71},
+ {name: '无锡', value: 71},
+ {name: '本溪', value: 71},
+ {name: '克拉玛依', value: 72},
+ {name: '渭南', value: 72},
+ {name: '马鞍山', value: 72},
+ {name: '宝鸡', value: 72},
+ {name: '焦作', value: 75},
+ {name: '句容', value: 75},
+ {name: '北京', value: 79},
+ {name: '徐州', value: 79},
+ {name: '衡水', value: 80},
+ {name: '包头', value: 80},
+ {name: '绵阳', value: 80},
+ {name: '乌鲁木齐', value: 84},
+ {name: '枣庄', value: 84},
+ {name: '杭州', value: 84},
+ {name: '淄博', value: 85},
+ {name: '鞍山', value: 86},
+ {name: '溧阳', value: 86},
+ {name: '库尔勒', value: 86},
+ {name: '安阳', value: 90},
+ {name: '开封', value: 90},
+ {name: '济南', value: 92},
+ {name: '德阳', value: 93},
+ {name: '温州', value: 95},
+ {name: '九江', value: 96},
+ {name: '邯郸', value: 98},
+ {name: '临安', value: 99},
+ {name: '兰州', value: 99},
+ {name: '沧州', value: 100},
+ {name: '临沂', value: 103},
+ {name: '南充', value: 104},
+ {name: '天津', value: 105},
+ {name: '富阳', value: 106},
+ {name: '泰安', value: 112},
+ {name: '诸暨', value: 112},
+ {name: '郑州', value: 113},
+ {name: '哈尔滨', value: 114},
+ {name: '聊城', value: 116},
+ {name: '芜湖', value: 117},
+ {name: '唐山', value: 119},
+ {name: '平顶山', value: 119},
+ {name: '邢台', value: 119},
+ {name: '德州', value: 120},
+ {name: '济宁', value: 120},
+ {name: '荆州', value: 127},
+ {name: '宜昌', value: 130},
+ {name: '义乌', value: 132},
+ {name: '丽水', value: 133},
+ {name: '洛阳', value: 134},
+ {name: '秦皇岛', value: 136},
+ {name: '株洲', value: 143},
+ {name: '石家庄', value: 147},
+ {name: '莱芜', value: 148},
+ {name: '常德', value: 152},
+ {name: '保定', value: 153},
+ {name: '湘潭', value: 154},
+ {name: '金华', value: 157},
+ {name: '岳阳', value: 169},
+ {name: '长沙', value: 175},
+ {name: '衢州', value: 177},
+ {name: '廊坊', value: 193},
+ {name: '菏泽', value: 194},
+ {name: '合肥', value: 229},
+ {name: '武汉', value: 273},
+ {name: '大庆', value: 279}
+];
+const geoCoordMap: Record<string, number[]> = {
+ '海门':[121.15,31.89],
+ '鄂尔多斯':[109.781327,39.608266],
+ '招远':[120.38,37.35],
+ '舟山':[122.207216,29.985295],
+ '齐齐哈尔':[123.97,47.33],
+ '盐城':[120.13,33.38],
+ '赤峰':[118.87,42.28],
+ '青岛':[120.33,36.07],
+ '乳山':[121.52,36.89],
+ '金昌':[102.188043,38.520089],
+ '泉州':[118.58,24.93],
+ '莱西':[120.53,36.86],
+ '日照':[119.46,35.42],
+ '胶南':[119.97,35.88],
+ '南通':[121.05,32.08],
+ '拉萨':[91.11,29.97],
+ '云浮':[112.02,22.93],
+ '梅州':[116.1,24.55],
+ '文登':[122.05,37.2],
+ '上海':[121.48,31.22],
+ '攀枝花':[101.718637,26.582347],
+ '威海':[122.1,37.5],
+ '承德':[117.93,40.97],
+ '厦门':[118.1,24.46],
+ '汕尾':[115.375279,22.786211],
+ '潮州':[116.63,23.68],
+ '丹东':[124.37,40.13],
+ '太仓':[121.1,31.45],
+ '曲靖':[103.79,25.51],
+ '烟台':[121.39,37.52],
+ '福州':[119.3,26.08],
+ '瓦房店':[121.979603,39.627114],
+ '即墨':[120.45,36.38],
+ '抚顺':[123.97,41.97],
+ '玉溪':[102.52,24.35],
+ '张家口':[114.87,40.82],
+ '阳泉':[113.57,37.85],
+ '莱州':[119.942327,37.177017],
+ '湖州':[120.1,30.86],
+ '汕头':[116.69,23.39],
+ '昆山':[120.95,31.39],
+ '宁波':[121.56,29.86],
+ '湛江':[110.359377,21.270708],
+ '揭阳':[116.35,23.55],
+ '荣成':[122.41,37.16],
+ '连云港':[119.16,34.59],
+ '葫芦岛':[120.836932,40.711052],
+ '常熟':[120.74,31.64],
+ '东莞':[113.75,23.04],
+ '河源':[114.68,23.73],
+ '淮安':[119.15,33.5],
+ '泰州':[119.9,32.49],
+ '南宁':[108.33,22.84],
+ '营口':[122.18,40.65],
+ '惠州':[114.4,23.09],
+ '江阴':[120.26,31.91],
+ '蓬莱':[120.75,37.8],
+ '韶关':[113.62,24.84],
+ '嘉峪关':[98.289152,39.77313],
+ '广州':[113.23,23.16],
+ '延安':[109.47,36.6],
+ '太原':[112.53,37.87],
+ '清远':[113.01,23.7],
+ '中山':[113.38,22.52],
+ '昆明':[102.73,25.04],
+ '寿光':[118.73,36.86],
+ '盘锦':[122.070714,41.119997],
+ '长治':[113.08,36.18],
+ '深圳':[114.07,22.62],
+ '珠海':[113.52,22.3],
+ '宿迁':[118.3,33.96],
+ '咸阳':[108.72,34.36],
+ '铜川':[109.11,35.09],
+ '平度':[119.97,36.77],
+ '佛山':[113.11,23.05],
+ '海口':[110.35,20.02],
+ '江门':[113.06,22.61],
+ '章丘':[117.53,36.72],
+ '肇庆':[112.44,23.05],
+ '大连':[121.62,38.92],
+ '临汾':[111.5,36.08],
+ '吴江':[120.63,31.16],
+ '石嘴山':[106.39,39.04],
+ '沈阳':[123.38,41.8],
+ '苏州':[120.62,31.32],
+ '茂名':[110.88,21.68],
+ '嘉兴':[120.76,30.77],
+ '长春':[125.35,43.88],
+ '胶州':[120.03336,36.264622],
+ '银川':[106.27,38.47],
+ '张家港':[120.555821,31.875428],
+ '三门峡':[111.19,34.76],
+ '锦州':[121.15,41.13],
+ '南昌':[115.89,28.68],
+ '柳州':[109.4,24.33],
+ '三亚':[109.511909,18.252847],
+ '自贡':[104.778442,29.33903],
+ '吉林':[126.57,43.87],
+ '阳江':[111.95,21.85],
+ '泸州':[105.39,28.91],
+ '西宁':[101.74,36.56],
+ '宜宾':[104.56,29.77],
+ '呼和浩特':[111.65,40.82],
+ '成都':[104.06,30.67],
+ '大同':[113.3,40.12],
+ '镇江':[119.44,32.2],
+ '桂林':[110.28,25.29],
+ '张家界':[110.479191,29.117096],
+ '宜兴':[119.82,31.36],
+ '北海':[109.12,21.49],
+ '西安':[108.95,34.27],
+ '金坛':[119.56,31.74],
+ '东营':[118.49,37.46],
+ '牡丹江':[129.58,44.6],
+ '遵义':[106.9,27.7],
+ '绍兴':[120.58,30.01],
+ '扬州':[119.42,32.39],
+ '常州':[119.95,31.79],
+ '潍坊':[119.1,36.62],
+ '重庆':[106.54,29.59],
+ '台州':[121.420757,28.656386],
+ '南京':[118.78,32.04],
+ '滨州':[118.03,37.36],
+ '贵阳':[106.71,26.57],
+ '无锡':[120.29,31.59],
+ '本溪':[123.73,41.3],
+ '克拉玛依':[84.77,45.59],
+ '渭南':[109.5,34.52],
+ '马鞍山':[118.48,31.56],
+ '宝鸡':[107.15,34.38],
+ '焦作':[113.21,35.24],
+ '句容':[119.16,31.95],
+ '北京':[116.46,39.92],
+ '徐州':[117.2,34.26],
+ '衡水':[115.72,37.72],
+ '包头':[110,40.58],
+ '绵阳':[104.73,31.48],
+ '乌鲁木齐':[87.68,43.77],
+ '枣庄':[117.57,34.86],
+ '杭州':[120.19,30.26],
+ '淄博':[118.05,36.78],
+ '鞍山':[122.85,41.12],
+ '溧阳':[119.48,31.43],
+ '库尔勒':[86.06,41.68],
+ '安阳':[114.35,36.1],
+ '开封':[114.35,34.79],
+ '济南':[117,36.65],
+ '德阳':[104.37,31.13],
+ '温州':[120.65,28.01],
+ '九江':[115.97,29.71],
+ '邯郸':[114.47,36.6],
+ '临安':[119.72,30.23],
+ '兰州':[103.73,36.03],
+ '沧州':[116.83,38.33],
+ '临沂':[118.35,35.05],
+ '南充':[106.110698,30.837793],
+ '天津':[117.2,39.13],
+ '富阳':[119.95,30.07],
+ '泰安':[117.13,36.18],
+ '诸暨':[120.23,29.71],
+ '郑州':[113.65,34.76],
+ '哈尔滨':[126.63,45.75],
+ '聊城':[115.97,36.45],
+ '芜湖':[118.38,31.33],
+ '唐山':[118.02,39.63],
+ '平顶山':[113.29,33.75],
+ '邢台':[114.48,37.05],
+ '德州':[116.29,37.45],
+ '济宁':[116.59,35.38],
+ '荆州':[112.239741,30.335165],
+ '宜昌':[111.3,30.7],
+ '义乌':[120.06,29.32],
+ '丽水':[119.92,28.45],
+ '洛阳':[112.44,34.7],
+ '秦皇岛':[119.57,39.95],
+ '株洲':[113.16,27.83],
+ '石家庄':[114.48,38.03],
+ '莱芜':[117.67,36.19],
+ '常德':[111.69,29.05],
+ '保定':[115.48,38.85],
+ '湘潭':[112.91,27.87],
+ '金华':[119.64,29.12],
+ '岳阳':[113.09,29.37],
+ '长沙':[113,28.21],
+ '衢州':[118.88,28.97],
+ '廊坊':[116.7,39.53],
+ '菏泽':[115.480656,35.23375],
+ '合肥':[117.27,31.86],
+ '武汉':[114.31,30.52],
+ '大庆':[125.03,46.58]
+};
+
+var convertData = function (data: DataItem[]) {
+ var res = [];
+ for (var i = 0; i < data.length; i++) {
+ var geoCoord = geoCoordMap[data[i].name];
+ if (geoCoord) {
+ res.push({
+ name: data[i].name,
+ value: geoCoord.concat(data[i].value)
+ });
+ }
+ }
+ return res;
+};
+
+option = {
+ backgroundColor: '#404a59',
+ title: {
+ text: '全国主要城市空气质量',
+ subtext: 'data from PM25.in',
+ sublink: 'http://www.pm25.in',
+ left: 'center',
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ tooltip : {
+ trigger: 'item'
+ },
+ legend: {
+ orient: 'vertical',
+ top: 'bottom',
+ left: 'right',
+ data:['pm2.5'],
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ geo: {
+ map: 'china',
+ roam: true,
+ label: {
+ show: false
+ },
+ itemStyle: {
+ areaColor: '#323c48',
+ borderColor: '#111'
+ },
+ emphasis: {
+ itemStyle: {
+ areaColor: '#2a333d'
+ }
+ }
+ },
+ series : [
+ {
+ name: 'pm2.5',
+ type: 'scatter',
+ coordinateSystem: 'geo',
+ data: convertData(data),
+ encode: {
+ value: 2
+ },
+ symbolSize: function (val) {
+ return val[2] / 10;
+ },
+ label: {
+ formatter: '{b}',
+ position: 'right',
+ show: false
+ },
+ itemStyle: {
+ color: '#ddb926'
+ },
+ emphasis: {
+ label: {
+ show: true
+ }
+ }
+ },
+ {
+ name: 'Top 5',
+ type: 'effectScatter',
+ coordinateSystem: 'geo',
+ data: convertData(data.sort(function (a, b) {
+ return b.value - a.value;
+ }).slice(0, 6)),
+ encode: {
+ value: 2
+ },
+ symbolSize: function (val) {
+ return val[2] / 10;
+ },
+ showEffectOn: 'render',
+ rippleEffect: {
+ brushType: 'stroke'
+ },
+ emphasis: {
+ scale: true
+ },
+ label: {
+ formatter: '{b}',
+ position: 'right',
+ show: true
+ },
+ itemStyle: {
+ color: '#f4e925',
+ shadowBlur: 10,
+ shadowColor: '#333'
+ },
+ zlevel: 1
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/funnel-align.ts b/examples/examples/ts/funnel-align.ts
new file mode 100644
index 0000000..1bca3f8
--- /dev/null
+++ b/examples/examples/ts/funnel-align.ts
@@ -0,0 +1,108 @@
+/*
+title: Funnel Compare
+category: funnel
+titleCN: 漏斗图(对比)
+*/
+
+option = {
+ title: {
+ text: 'Funnel Compare',
+ subtext: 'Fake Data',
+ left: 'left',
+ top: 'bottom'
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ toolbox: {
+ show: true,
+ orient: 'vertical',
+ top: 'center',
+ feature: {
+ dataView: {readOnly: false},
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'left',
+ data: ['Prod A', 'Prod B', 'Prod C', 'Prod D', 'Prod E']
+ },
+
+ series: [
+ {
+ name: 'Funnel',
+ type: 'funnel',
+ width: '40%',
+ height: '45%',
+ left: '5%',
+ top: '50%',
+ funnelAlign: 'right',
+
+ data: [
+ {value: 60, name: 'Prod C'},
+ {value: 30, name: 'Prod D'},
+ {value: 10, name: 'Prod E'},
+ {value: 80, name: 'Prod B'},
+ {value: 100, name: 'Prod A'}
+ ]
+ },
+ {
+ name: 'Pyramid',
+ type: 'funnel',
+ width: '40%',
+ height: '45%',
+ left: '5%',
+ top: '5%',
+ sort: 'ascending',
+ funnelAlign: 'right',
+
+ data: [
+ {value: 60, name: 'Prod C'},
+ {value: 30, name: 'Prod D'},
+ {value: 10, name: 'Prod E'},
+ {value: 80, name: 'Prod B'},
+ {value: 100, name: 'Prod A'}
+ ]
+ },
+ {
+ name: 'Funnel',
+ type: 'funnel',
+ width: '40%',
+ height: '45%',
+ left: '55%',
+ top: '5%',
+ funnelAlign: 'left',
+
+ data: [
+ {value: 60, name: 'Prod C'},
+ {value: 30, name: 'Prod D'},
+ {value: 10, name: 'Prod E'},
+ {value: 80, name: 'Prod B'},
+ {value: 100, name: 'Prod A'}
+ ]
+ },
+ {
+ name: 'Pyramid',
+ type: 'funnel',
+ width: '40%',
+ height: '45%',
+ left: '55%',
+ top: '50%',
+ sort: 'ascending',
+ funnelAlign: 'left',
+
+ data: [
+ {value: 60, name: 'Prod C'},
+ {value: 30, name: 'Prod D'},
+ {value: 10, name: 'Prod E'},
+ {value: 80, name: 'Prod B'},
+ {value: 100, name: 'Prod A'}
+ ]
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/funnel-customize.ts b/examples/examples/ts/funnel-customize.ts
new file mode 100644
index 0000000..229ae83
--- /dev/null
+++ b/examples/examples/ts/funnel-customize.ts
@@ -0,0 +1,89 @@
+/*
+title: Customized Funnel
+category: funnel
+titleCN: 漏斗图
+*/
+
+option = {
+ title: {
+ text: 'Funnel'
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: "{a} <br/>{b} : {c}%"
+ },
+ toolbox: {
+ feature: {
+ dataView: {readOnly: false},
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ legend: {
+ data: ['Show','Click','Visit','Inquiry','Order']
+ },
+ series: [
+ {
+ name: 'Expected',
+ type: 'funnel',
+ left: '10%',
+ width: '80%',
+ label: {
+ formatter: '{b}Expected'
+ },
+ labelLine: {
+ show: false
+ },
+ itemStyle: {
+ opacity: 0.7
+ },
+ emphasis: {
+ label: {
+ position: 'inside',
+ formatter: '{b}Expected: {c}%'
+ }
+ },
+ data: [
+ {value: 60, name: 'Visit'},
+ {value: 40, name: 'Inquiry'},
+ {value: 20, name: 'Order'},
+ {value: 80, name: 'Click'},
+ {value: 100, name: 'Show'}
+ ]
+ },
+ {
+ name: 'Actual',
+ type: 'funnel',
+ left: '10%',
+ width: '80%',
+ maxSize: '80%',
+ label: {
+ position: 'inside',
+ formatter: '{c}%',
+ color: '#fff'
+ },
+ itemStyle: {
+ opacity: 0.5,
+ borderColor: '#fff',
+ borderWidth: 2
+ },
+ emphasis: {
+ label: {
+ position: 'inside',
+ formatter: '{b}Actual: {c}%'
+ }
+ },
+ data: [
+ {value: 30, name: 'Visit'},
+ {value: 10, name: 'Inquiry'},
+ {value: 5, name: 'Order'},
+ {value: 50, name: 'Click'},
+ {value: 80, name: 'Show'}
+ ],
+ // Ensure outer shape will not be over inner shape when hover.
+ z: 100
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/examples/examples/ts/funnel-mutiple.ts b/examples/examples/ts/funnel-mutiple.ts
new file mode 100644
index 0000000..6b5b9f6
--- /dev/null
+++ b/examples/examples/ts/funnel-mutiple.ts
@@ -0,0 +1,104 @@
+/*
+title: Multiple Funnels
+category: funnel
+titleCN: Funnel
+*/
+
+option = {
+ title: {
+ text: 'Funnel',
+ left: 'left',
+ top: 'bottom'
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ toolbox: {
+ orient: 'vertical',
+ top: 'center',
+ feature: {
+ dataView: {readOnly: false},
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'left',
+ data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
+ },
+
+ series: [
+ {
+ name: 'Funnel',
+ type: 'funnel',
+ width: '40%',
+ height: '45%',
+ left: '5%',
+ top: '50%',
+ data: [
+ {value: 60, name: 'Visit'},
+ {value: 30, name: 'Inquiry'},
+ {value: 10, name: 'Order'},
+ {value: 80, name: 'Click'},
+ {value: 100, name: 'Show'}
+ ]
+ },
+ {
+ name: 'Pyramid',
+ type: 'funnel',
+ width: '40%',
+ height: '45%',
+ left: '5%',
+ top: '5%',
+ sort: 'ascending',
+ data: [
+ {value: 60, name: 'Visit'},
+ {value: 30, name: 'Inquiry'},
+ {value: 10, name: 'Order'},
+ {value: 80, name: 'Click'},
+ {value: 100, name: 'Show'}
+ ]
+ },
+ {
+ name: 'Funnel',
+ type: 'funnel',
+ width: '40%',
+ height: '45%',
+ left: '55%',
+ top: '5%',
+ label: {
+ position: 'left'
... 27018 lines suppressed ...
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org