You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2021/09/10 02:49:52 UTC
[echarts-examples] branch dev updated (0ae073f -> 665dcbd)
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a change to branch dev
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git.
from 0ae073f update animated screenshots
add 42ac02a fix log error
add 0c61acb fix: fix typo
add c7f6e81 Merge branch 'dev' into gh-pages
add 0f346ea fix: remove e2e/package-lock.json
add ab4e2c8 fix: add e2e/package-lock.json to .gitignore.
add b1085cf fix: some tweak for e2e test (but probably not important)
add d96def5 optimize animation screenshots
add 52b3add use native ffmpeg for performance consideration
add a6bd42f update thumbs
add cc00bfe add missing thumbs
add 2cc7638 fix typos
add a0c5739 update examples
add e8e8f1b WIP: coverting js code to ts
add 6f7dd55 optimize ts editor
add 6ed8aab WIP: add more ts examples
add 1ba2276 WIP: add more ts files
add d759480 WIP: update more examples to ts
add 6703ff3 WIP: update examples to ts
new 424edd8 compile ts to js files
new 16a6683 use prettier to format code
new 5743f81 format example code
new a6bbe0c add ts mode. update gl codes
new 85dfdaf feat: add ts and js switch. add prettier
new 91a9f36 add language switch confirm
new bfb64a2 fix build example
new 8eb05c1 add ts flag
new 4bed1e1 add js and ts tag in explore page
new e1814a8 optimize explore page
new 0323de6 fix example type errors
new 99f366e update more ts examples
new bf9114e fix ts tag still show on js only example
new ecc739d feat: add doc link in full option tab
new 665dcbd fix doc link lang
The 15 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
.babelrc | 11 +-
.eslintrc.js | 13 +
.gitignore | 2 +
.prettierignore | 27 +
.prettierrc | 7 +
.vscode/settings.json | 7 +
README.md | 30 +-
_config.yml | 2 -
build/copyResource.js | 134 +-
build/server.js | 24 +-
build/webpack.config.js | 155 +-
common/buildCode.js | 615 +-
common/compareImage.js | 81 +-
common/task.js | 96 +-
config/common.js | 6 +-
config/env.asf.js | 2 +-
config/env.dev.js | 2 +-
config/env.localsite.js | 2 +-
e2e/cases/README.md | 2 +-
e2e/cases/liquidfill.js | 14 +-
e2e/cases/wordcloud.js | 230 +-
e2e/config.js | 58 +-
e2e/main.js | 1275 ++--
e2e/package-lock.json | 6131 --------------------
e2e/package.json | 8 +-
e2e/preview.html | 47 +-
e2e/report.html | 353 +-
e2e/template.html | 47 +-
e2e/tsconfig.json | 18 +-
e2e/webpack.config.js | 29 +-
package-lock.json | 239 +-
package.json | 20 +-
public/data-gl/animating-contour-on-globe.js | 179 -
public/data-gl/bar3d-dataset.js | 48 -
public/data-gl/bar3d-global-population.js | 96 -
public/data-gl/bar3d-mapbox-view-change.js | 104 -
public/data-gl/bar3d-music-visualization.js | 156 -
public/data-gl/bar3d-myth.js | 104 -
.../bar3d-noise-modified-from-marpi-demo.js | 210 -
public/data-gl/bar3d-on-mapbox.js | 71 -
public/data-gl/bar3d-punch-card.js | 75 -
public/data-gl/bar3d-shanghai.js | 71 -
public/data-gl/bar3d-simplex-noise.js | 79 -
public/data-gl/bar3d-voxelize-image.js | 171 -
public/data-gl/flowGL-noise.js | 106 -
public/data-gl/geo3d-with-different-height.js | 72 -
public/data-gl/geo3d.js | 50 -
public/data-gl/global-population-bar3d-on-globe.js | 64 -
public/data-gl/global-wind-visualization-2.js | 248 -
public/data-gl/global-wind-visualization.js | 196 -
public/data-gl/globe-atmosphere.js | 30 -
public/data-gl/globe-contour-paint.js | 178 -
public/data-gl/globe-country-carousel.js | 107 -
public/data-gl/globe-displacement.js | 56 -
public/data-gl/globe-echarts-gl-hello-world.js | 35 -
public/data-gl/globe-layers.js | 42 -
public/data-gl/globe-moon.js | 54 -
public/data-gl/globe-with-echarts-surface.js | 239 -
public/data-gl/graphgl-gpu-layout.js | 70 -
public/data-gl/graphgl-large-internet.js | 64 -
public/data-gl/graphgl-npm-dep.js | 104 -
public/data-gl/image-surface-sushuang.js | 86 -
public/data-gl/image-to-bar3d.js | 89 -
public/data-gl/iron-globe.js | 40 -
public/data-gl/line3d-orthographic.js | 50 -
public/data-gl/lines3d-airline-on-globe.js | 57 -
public/data-gl/lines3d-flight-path-on-mapbox.js | 183 -
public/data-gl/lines3d-flights-gl.js | 96 -
public/data-gl/lines3d-flights-on-geo3d.js | 77 -
public/data-gl/lines3d-flights.js | 148 -
public/data-gl/lines3d-taxi-chengdu.js | 492 --
public/data-gl/lines3d-taxi-routes-of-cape-town.js | 169 -
public/data-gl/linesGL-ny.js | 91 -
public/data-gl/map3d-alcohol-consumption.js | 72 -
public/data-gl/map3d-buildings-on-mapbox.js | 77 -
public/data-gl/map3d-buildings.js | 110 -
public/data-gl/map3d-colorful-cities.js | 93 -
...d-plastic-material-style-buildings-on-mapbox.js | 85 -
public/data-gl/map3d-wood-city.js | 94 -
public/data-gl/map3d-wood-map-on-mapbox.js | 68 -
public/data-gl/map3d-wood-map.js | 72 -
public/data-gl/metal-bar3d.js | 99 -
public/data-gl/metal-surface.js | 101 -
public/data-gl/parametric-surface-rose.js | 149 -
public/data-gl/scatter3D-dataset.js | 41 -
public/data-gl/scatter3d-globe-population.js | 89 -
public/data-gl/scatter3d-orthographic.js | 68 -
public/data-gl/scatter3d-scatter.js | 108 -
public/data-gl/scatter3d-shanghai.js | 50 -
public/data-gl/scatter3d-simplex-noise.js | 68 -
.../data-gl/scatter3d-weibo-checkin-on-mapbox.js | 87 -
public/data-gl/scatter3d.js | 208 -
public/data-gl/scatterGL-gps.js | 89 -
public/data-gl/scattergl-weibo.js | 100 -
public/data-gl/simple-surface.js | 53 -
public/data-gl/sphere-parametric-surface.js | 48 -
public/data-gl/stacked-bar3d.js | 62 -
public/data-gl/surface-breather.js | 119 -
public/data-gl/surface-golden-rose.js | 159 -
public/data-gl/surface-leather.js | 137 -
public/data-gl/surface-mollusc-shell.js | 78 -
public/data-gl/surface-theme-roses.js | 154 -
public/data-gl/surface-wave.js | 58 -
public/data-gl/transparent-bar3d.js | 76 -
.../data/archive/custom-aggregate-scatter-bar.js | 209 -
.../data/archive/custom-aggregate-scatter-pie.js | 189 -
public/data/area-basic.js | 22 -
public/data/area-pieces.js | 66 -
public/data/area-rainfall.js | 188 -
public/data/area-simple.js | 78 -
public/data/area-stack-gradient.js | 174 -
public/data/area-stack.js | 103 -
public/data/area-time-axis.js | 67 -
public/data/bar-animation-delay.js | 70 -
public/data/bar-background.js | 24 -
public/data/bar-brush.js | 114 -
public/data/bar-data-color.js | 25 -
public/data/bar-drilldown.js | 99 -
public/data/bar-gradient.js | 96 -
public/data/bar-histogram.js | 126 -
public/data/bar-label-rotation.js | 166 -
public/data/bar-large.js | 93 -
public/data/bar-negative.js | 77 -
public/data/bar-negative2.js | 66 -
public/data/bar-polar-label-radial.js | 30 -
public/data/bar-polar-label-tangential.js | 30 -
public/data/bar-polar-real-estate.js | 101 -
public/data/bar-polar-stack-radial.js | 49 -
public/data/bar-polar-stack.js | 50 -
public/data/bar-race-country.js | 142 -
public/data/bar-race.js | 65 -
public/data/bar-rich-text.js | 151 -
public/data/bar-simple.js | 20 -
public/data/bar-stack.js | 125 -
public/data/bar-tick-align.js | 43 -
public/data/bar-waterfall.js | 66 -
public/data/bar-waterfall2.js | 91 -
public/data/bar-y-category-stack.js | 92 -
public/data/bar-y-category.js | 48 -
public/data/bar1.js | 74 -
public/data/boxplot-light-velocity.js | 84 -
public/data/boxplot-light-velocity2.js | 87 -
public/data/boxplot-multi.js | 106 -
public/data/bubble-gradient.js | 109 -
public/data/calendar-charts.js | 193 -
public/data/calendar-effectscatter.js | 167 -
public/data/calendar-graph.js | 126 -
public/data/calendar-heatmap.js | 54 -
public/data/calendar-horizontal.js | 72 -
public/data/calendar-lunar.js | 468 --
public/data/calendar-pie.js | 116 -
public/data/calendar-simple.js | 37 -
public/data/calendar-vertical.js | 78 -
public/data/candlestick-brush.js | 264 -
public/data/candlestick-large.js | 208 -
public/data/candlestick-sh-2015.js | 134 -
public/data/candlestick-sh.js | 324 --
public/data/candlestick-simple.js | 22 -
public/data/candlestick-touch.js | 245 -
public/data/circle-packing-with-d3.js | 219 -
public/data/confidence-band.js | 113 -
public/data/covid-america.js | 404 --
public/data/custom-bar-trend.js | 115 -
public/data/custom-calendar-icon.js | 119 -
public/data/custom-cartesian-polygon.js | 66 -
public/data/custom-error-bar.js | 113 -
public/data/custom-error-scatter.js | 143 -
public/data/custom-gantt-flight.js | 533 --
public/data/custom-gauge.js | 173 -
public/data/custom-hexbin.js | 251 -
public/data/custom-ohlc.js | 161 -
public/data/custom-polar-heatmap.js | 82 -
public/data/custom-profile.js | 120 -
public/data/custom-profit.js | 67 -
public/data/custom-spiral-race.js | 255 -
public/data/custom-wind.js | 111 -
public/data/cycle-plot.js | 142 -
public/data/data-transform-aggregate.js | 128 -
public/data/data-transform-filter.js | 81 -
public/data/data-transform-multiple-pie.js | 80 -
public/data/data-transform-sort-bar.js | 38 -
public/data/dataset-default.js | 50 -
public/data/dataset-encode0.js | 49 -
public/data/dataset-encode1.js | 98 -
public/data/dataset-link.js | 73 -
public/data/dataset-series-layout-by.js | 42 -
public/data/dataset-simple0.js | 29 -
public/data/dataset-simple1.js | 29 -
public/data/doc-example/dataset-encode-simple0.js | 30 -
public/data/doc-example/sunburst-color.js | 44 -
public/data/doc-example/sunburst-simple.js | 28 -
public/data/doc-example/timeline-dynamic-series.js | 72 -
public/data/dynamic-data.js | 132 -
public/data/dynamic-data2.js | 77 -
public/data/effectScatter-bmap.js | 575 --
public/data/effectScatter-map.js | 503 --
public/data/funnel-align.js | 114 -
public/data/funnel-customize.js | 88 -
public/data/funnel-mutiple.js | 103 -
public/data/funnel.js | 72 -
public/data/gauge-barometer.js | 122 -
public/data/gauge-car.js | 575 --
public/data/gauge-clock.js | 230 -
public/data/gauge-grade.js | 88 -
public/data/gauge-multi-title.js | 85 -
public/data/gauge-progress.js | 93 -
public/data/gauge-ring.js | 102 -
public/data/gauge-simple.js | 29 -
public/data/gauge-speed.js | 55 -
public/data/gauge-stage.js | 61 -
public/data/gauge-temperature.js | 125 -
public/data/gauge.js | 23 -
public/data/geo-beef-cuts.js | 74 -
public/data/geo-lines.js | 298 -
public/data/geo-map-scatter.js | 349 --
public/data/geo-organ.js | 79 -
public/data/geo-seatmap-flight.js | 93 -
public/data/geo-svg-lines.js | 84 -
public/data/geo-svg-map.js | 202 -
public/data/geo-svg-scatter-simple.js | 54 -
public/data/geo-svg-traffic.js | 167 -
public/data/graph-circular-layout.js | 59 -
public/data/graph-force-dynamic.js | 57 -
public/data/graph-force.js | 48 -
public/data/graph-force2.js | 64 -
public/data/graph-grid.js | 50 -
public/data/graph-label-overlap.js | 49 -
public/data/graph-life-expectancy.js | 103 -
public/data/graph-npm.js | 54 -
public/data/graph-simple.js | 87 -
public/data/graph-webkit-dep.js | 43 -
public/data/graph.js | 61 -
public/data/grid-multiple.js | 174 -
public/data/heatmap-bmap.js | 45 -
public/data/heatmap-cartesian.js | 65 -
public/data/heatmap-large-piecewise.js | 373 --
public/data/heatmap-large.js | 365 --
public/data/heatmap-map.js | 447 --
public/data/line-aqi.js | 99 -
public/data/line-draggable.js | 139 -
public/data/line-easing.js | 233 -
public/data/line-function.js | 72 -
public/data/line-gradient.js | 74 -
public/data/line-graphic.js | 125 -
public/data/line-in-cartesian-coordinate-system.js | 15 -
public/data/line-log.js | 57 -
public/data/line-marker.js | 88 -
public/data/line-markline.js | 78 -
public/data/line-pen.js | 73 -
public/data/line-polar.js | 42 -
public/data/line-polar2.js | 47 -
public/data/line-race.js | 90 -
public/data/line-sections.js | 86 -
public/data/line-simple.js | 20 -
public/data/line-smooth.js | 21 -
public/data/line-stack.js | 69 -
public/data/line-step.js | 56 -
public/data/line-style.js | 32 -
public/data/line-tooltip-touch.js | 151 -
public/data/line-y-category.js | 53 -
public/data/lines-airline.js | 64 -
public/data/lines-bmap-bus.js | 148 -
public/data/lines-bmap-effect.js | 195 -
public/data/lines-bmap.js | 133 -
public/data/lines-ny.js | 91 -
public/data/map-HK.js | 98 -
public/data/map-bar-morph.js | 147 -
public/data/map-bin.js | 207 -
public/data/map-china-dataRange.js | 137 -
public/data/map-china.js | 26 -
public/data/map-labels.js | 169 -
public/data/map-locate.js | 52 -
public/data/map-polygon.js | 659 ---
public/data/map-province.js | 95 -
public/data/map-usa.js | 137 -
public/data/map-world-dataRange.js | 237 -
public/data/map-world.js | 213 -
public/data/mix-line-bar.js | 78 -
public/data/mix-timeline-finance.js | 381 --
public/data/mix-zoom-on-value.js | 101 -
public/data/multiple-x-axis.js | 96 -
public/data/multiple-y-axis.js | 111 -
public/data/parallel-aqi.js | 224 -
public/data/parallel-nutrients.js | 186 -
public/data/parallel-simple.js | 31 -
public/data/pictorialBar-bar-transition.js | 144 -
public/data/pictorialBar-body-fill.js | 146 -
public/data/pictorialBar-dotted.js | 111 -
public/data/pictorialBar-forest.js | 111 -
public/data/pictorialBar-hill.js | 113 -
public/data/pictorialBar-spirit.js | 114 -
public/data/pictorialBar-vehicle.js | 113 -
public/data/pictorialBar-velocity.js | 100 -
public/data/pie-alignTo.js | 94 -
public/data/pie-borderRadius.js | 50 -
public/data/pie-custom.js | 70 -
public/data/pie-doughnut.js | 45 -
public/data/pie-labelLine-adjust.js | 95 -
public/data/pie-legend.js | 81 -
public/data/pie-nest.js | 87 -
public/data/pie-parliament-transition.js | 141 -
public/data/pie-pattern.js | 63 -
public/data/pie-rich-text.js | 135 -
public/data/pie-roseType-simple.js | 44 -
public/data/pie-roseType.js | 82 -
public/data/pie-simple.js | 42 -
public/data/polar-roundCap.js | 49 -
public/data/radar-aqi.js | 222 -
public/data/radar-custom.js | 138 -
public/data/radar-multiple.js | 97 -
public/data/radar.js | 40 -
public/data/radar2.js | 73 -
public/data/sankey-energy.js | 35 -
public/data/sankey-itemstyle.js | 1281 ----
public/data/sankey-levels.js | 71 -
public/data/sankey-nodeAlign-left.js | 37 -
public/data/sankey-nodeAlign-right.js | 38 -
public/data/sankey-simple.js | 54 -
public/data/sankey-vertical.js | 47 -
public/data/scatter-aggregate-bar.js | 187 -
public/data/scatter-anscombe-quartet.js | 145 -
public/data/scatter-aqi-color.js | 261 -
public/data/scatter-clustering-process.js | 245 -
public/data/scatter-clustering.js | 131 -
public/data/scatter-effect.js | 78 -
public/data/scatter-exponential-regression.js | 84 -
public/data/scatter-label-align-right.js | 57 -
public/data/scatter-label-align-top.js | 51 -
public/data/scatter-large.js | 74 -
public/data/scatter-life-expectancy-timeline.js | 169 -
public/data/scatter-linear-regression.js | 267 -
public/data/scatter-logarithmic-regression.js | 133 -
public/data/scatter-map-brush.js | 652 ---
public/data/scatter-map.js | 472 --
public/data/scatter-matrix.js | 300 -
public/data/scatter-nebula.js | 76 -
public/data/scatter-nutrients-matrix.js | 422 --
public/data/scatter-nutrients.js | 177 -
public/data/scatter-painter-choice.js | 61 -
public/data/scatter-polar-punchCard.js | 65 -
public/data/scatter-polynomial-regression.js | 84 -
public/data/scatter-punchCard.js | 70 -
public/data/scatter-simple.js | 39 -
public/data/scatter-single-axis.js | 56 -
public/data/scatter-stream-visual.js | 60 -
public/data/scatter-symbol-morph.js | 97 -
public/data/scatter-weibo.js | 103 -
public/data/scatter-weight.js | 264 -
public/data/scatter-world-population.js | 503 --
public/data/sunburst-book.js | 336 --
public/data/sunburst-borderRadius.js | 65 -
public/data/sunburst-drink.js | 723 ---
public/data/sunburst-label-rotate.js | 95 -
public/data/sunburst-monochrome.js | 175 -
public/data/sunburst-simple.js | 64 -
public/data/sunburst-visualMap.js | 94 -
public/data/themeRiver-basic.js | 100 -
public/data/themeRiver-lastfm.js | 80 -
public/data/thumb-dark/bar-drilldown.png | Bin 0 -> 11499 bytes
public/data/thumb-dark/bar-drilldown.webp | Bin 0 -> 2474 bytes
public/data/thumb-dark/bar-polar-label-radial.png | Bin 0 -> 53804 bytes
public/data/thumb-dark/bar-polar-label-radial.webp | Bin 0 -> 8408 bytes
.../data/thumb-dark/bar-polar-label-tangential.png | Bin 0 -> 73532 bytes
.../thumb-dark/bar-polar-label-tangential.webp | Bin 0 -> 12660 bytes
public/data/thumb-dark/bar-race-country.webp | Bin 9754 -> 789550 bytes
public/data/thumb-dark/bar-race.webp | Bin 2760 -> 264420 bytes
public/data/thumb-dark/gauge-clock.webp | Bin 5070 -> 65104 bytes
public/data/thumb-dark/gauge-ring.webp | Bin 6294 -> 222920 bytes
public/data/thumb-dark/gauge-simple.webp | Bin 3914 -> 45740 bytes
public/data/thumb-dark/gauge-temperature.webp | Bin 8266 -> 104304 bytes
public/data/thumb-dark/geo-svg-scatter-simple.png | Bin 0 -> 195652 bytes
public/data/thumb-dark/geo-svg-scatter-simple.webp | Bin 0 -> 20796 bytes
public/data/thumb-dark/line-race.webp | Bin 18682 -> 610648 bytes
public/data/thumb-dark/map-bar-morph.png | Bin 0 -> 69116 bytes
public/data/thumb-dark/map-bar-morph.webp | Bin 0 -> 259692 bytes
.../thumb-dark/pictorialBar-bar-transition.png | Bin 0 -> 73404 bytes
.../thumb-dark/pictorialBar-bar-transition.webp | Bin 0 -> 570992 bytes
public/data/thumb-dark/pictorialBar-forest.webp | Bin 8966 -> 227558 bytes
public/data/thumb-dark/pictorialBar-hill.webp | Bin 20812 -> 466722 bytes
.../data/thumb-dark/pie-parliament-transition.png | Bin 0 -> 33542 bytes
.../data/thumb-dark/pie-parliament-transition.webp | Bin 0 -> 855768 bytes
public/data/thumb-dark/scatter-aggregate-bar.png | Bin 0 -> 95503 bytes
public/data/thumb-dark/scatter-aggregate-bar.webp | Bin 0 -> 399840 bytes
public/data/thumb-dark/scatter-symbol-morph.png | Bin 0 -> 26584 bytes
public/data/thumb-dark/scatter-symbol-morph.webp | Bin 0 -> 2001348 bytes
.../thumb-dark/treemap-sunburst-transition.png | Bin 0 -> 97310 bytes
.../thumb-dark/treemap-sunburst-transition.webp | Bin 0 -> 213552 bytes
public/data/thumb/bar-drilldown.png | Bin 0 -> 9993 bytes
public/data/thumb/bar-drilldown.webp | Bin 0 -> 2112 bytes
public/data/thumb/bar-polar-label-radial.png | Bin 0 -> 52497 bytes
public/data/thumb/bar-polar-label-radial.webp | Bin 0 -> 8582 bytes
public/data/thumb/bar-polar-label-tangential.png | Bin 0 -> 73607 bytes
public/data/thumb/bar-polar-label-tangential.webp | Bin 0 -> 12994 bytes
public/data/thumb/bar-race-country.webp | Bin 9738 -> 822554 bytes
public/data/thumb/bar-race.webp | Bin 2504 -> 250728 bytes
public/data/thumb/data-transform-aggregate.png | Bin 53181 -> 54761 bytes
public/data/thumb/gauge-clock.webp | Bin 7788 -> 57998 bytes
public/data/thumb/gauge-ring.webp | Bin 5594 -> 151816 bytes
public/data/thumb/gauge-simple.webp | Bin 3846 -> 39940 bytes
public/data/thumb/gauge-temperature.webp | Bin 6464 -> 70688 bytes
public/data/thumb/geo-svg-scatter-simple.png | Bin 0 -> 195360 bytes
public/data/thumb/geo-svg-scatter-simple.webp | Bin 0 -> 20858 bytes
public/data/thumb/line-race.webp | Bin 16390 -> 554814 bytes
public/data/thumb/map-bar-morph.png | Bin 0 -> 68614 bytes
public/data/thumb/map-bar-morph.webp | Bin 0 -> 214358 bytes
public/data/thumb/pictorialBar-bar-transition.png | Bin 0 -> 58849 bytes
public/data/thumb/pictorialBar-bar-transition.webp | Bin 0 -> 456466 bytes
public/data/thumb/pictorialBar-forest.webp | Bin 9164 -> 219566 bytes
public/data/thumb/pictorialBar-hill.webp | Bin 20776 -> 392340 bytes
public/data/thumb/pie-parliament-transition.png | Bin 0 -> 29717 bytes
public/data/thumb/pie-parliament-transition.webp | Bin 0 -> 632662 bytes
public/data/thumb/scatter-aggregate-bar.png | Bin 0 -> 76586 bytes
public/data/thumb/scatter-aggregate-bar.webp | Bin 0 -> 340958 bytes
public/data/thumb/scatter-symbol-morph.png | Bin 0 -> 24364 bytes
public/data/thumb/scatter-symbol-morph.webp | Bin 0 -> 2002988 bytes
public/data/thumb/treemap-sunburst-transition.png | Bin 0 -> 101746 bytes
public/data/thumb/treemap-sunburst-transition.webp | Bin 0 -> 201466 bytes
public/data/tree-basic.js | 58 -
public/data/tree-legend.js | 260 -
public/data/tree-orient-bottom-top.js | 59 -
public/data/tree-orient-right-left.js | 64 -
public/data/tree-polyline.js | 179 -
public/data/tree-radial.js | 41 -
public/data/tree-vertical.js | 54 -
public/data/treemap-disk.js | 87 -
public/data/treemap-drill-down.js | 85 -
public/data/treemap-obama.js | 226 -
public/data/treemap-show-parent.js | 103 -
public/data/treemap-simple.js | 33 -
public/data/treemap-sunburst-transition.js | 56 -
public/data/treemap-visual.js | 144 -
public/data/watermark.js | 218 -
public/data/wind-barb.js | 272 -
public/en/editor.html | 53 +-
public/en/index.html | 54 +-
public/en/view.html | 53 +-
public/examples/ts/README.md | 3 +
.../ts/archive/custom-aggregate-scatter-bar.js | 209 +
.../archive/custom-aggregate-scatter-cluster.js | 0
.../ts/archive/custom-aggregate-scatter-pie.js | 189 +
.../ts}/archive/custom-combine-separate-morph.js | 0
.../ts}/archive/custom-one-to-one-morph.js | 0
.../ts}/archive/custom-story-transition.js | 0
public/examples/ts/area-basic.ts | 26 +
public/examples/ts/area-pieces.ts | 65 +
public/examples/ts/area-rainfall.ts | 148 +
public/examples/ts/area-simple.ts | 86 +
public/examples/ts/area-stack-gradient.ts | 191 +
public/examples/ts/area-stack.ts | 105 +
public/examples/ts/area-time-axis.ts | 69 +
public/examples/ts/bar-animation-delay.ts | 72 +
public/examples/ts/bar-background.ts | 28 +
public/examples/ts/bar-brush.ts | 114 +
public/examples/ts/bar-data-color.ts | 37 +
public/examples/ts/bar-drilldown.ts | 114 +
public/examples/ts/bar-gradient.ts | 91 +
public/examples/ts/bar-histogram.ts | 146 +
public/examples/ts/bar-label-rotation.ts | 181 +
public/examples/ts/bar-large.ts | 99 +
public/examples/ts/bar-negative.ts | 80 +
public/examples/ts/bar-negative2.ts | 79 +
public/examples/ts/bar-polar-label-radial.ts | 40 +
public/examples/ts/bar-polar-label-tangential.ts | 39 +
public/examples/ts/bar-polar-real-estate.ts | 116 +
public/examples/ts/bar-polar-stack-radial.ts | 53 +
public/examples/ts/bar-polar-stack.ts | 54 +
public/examples/ts/bar-race-country.ts | 171 +
public/examples/ts/bar-race.ts | 74 +
public/examples/ts/bar-rich-text.ts | 152 +
public/examples/ts/bar-simple.ts | 24 +
public/examples/ts/bar-stack.ts | 123 +
public/examples/ts/bar-tick-align.ts | 43 +
public/examples/ts/bar-waterfall.ts | 67 +
public/examples/ts/bar-waterfall2.ts | 90 +
public/examples/ts/bar-y-category-stack.ts | 93 +
public/examples/ts/bar-y-category.ts | 47 +
public/examples/ts/bar1.ts | 77 +
public/examples/ts/boxplot-light-velocity.ts | 91 +
public/examples/ts/boxplot-light-velocity2.ts | 94 +
public/examples/ts/boxplot-multi.ts | 120 +
public/examples/ts/bubble-gradient.ts | 163 +
public/examples/ts/calendar-charts.ts | 183 +
public/examples/ts/calendar-effectscatter.ts | 170 +
public/examples/ts/calendar-graph.ts | 107 +
public/examples/ts/calendar-heatmap.ts | 56 +
public/examples/ts/calendar-horizontal.ts | 75 +
public/examples/ts/calendar-lunar.ts | 467 ++
public/examples/ts/calendar-pie.ts | 126 +
public/examples/ts/calendar-simple.ts | 39 +
public/examples/ts/calendar-vertical.ts | 85 +
public/examples/ts/candlestick-brush.ts | 274 +
public/examples/ts/candlestick-large.ts | 220 +
public/examples/ts/candlestick-sh-2015.ts | 141 +
public/examples/ts/candlestick-sh.ts | 317 +
public/examples/ts/candlestick-simple.ts | 26 +
public/examples/ts/candlestick-touch.ts | 277 +
public/examples/ts/circle-packing-with-d3.js | 230 +
public/examples/ts/confidence-band.ts | 136 +
public/examples/ts/custom-bar-trend.ts | 126 +
public/examples/ts/custom-calendar-icon.ts | 142 +
public/examples/ts/custom-cartesian-polygon.ts | 69 +
public/examples/ts/custom-error-bar.ts | 126 +
public/examples/ts/custom-error-scatter.ts | 172 +
public/examples/ts/custom-gantt-flight.js | 586 ++
public/examples/ts/custom-gauge.js | 180 +
public/examples/ts/custom-hexbin.js | 259 +
public/examples/ts/custom-ohlc.ts | 173 +
public/examples/ts/custom-polar-heatmap.ts | 84 +
public/examples/ts/custom-profile.js | 123 +
public/examples/ts/custom-profit.ts | 82 +
public/examples/ts/custom-spiral-race.js | 300 +
public/examples/ts/custom-wind.ts | 126 +
public/examples/ts/cycle-plot.js | 145 +
public/examples/ts/data-transform-aggregate.js | 144 +
public/examples/ts/data-transform-filter.ts | 91 +
public/examples/ts/data-transform-multiple-pie.ts | 99 +
public/examples/ts/data-transform-sort-bar.ts | 43 +
public/examples/ts/dataset-default.ts | 57 +
public/examples/ts/dataset-encode0.ts | 51 +
public/examples/ts/dataset-encode1.ts | 123 +
public/examples/ts/dataset-link.ts | 94 +
public/examples/ts/dataset-series-layout-by.ts | 38 +
public/examples/ts/dataset-simple0.ts | 27 +
public/examples/ts/dataset-simple1.ts | 27 +
.../ts}/doc-example/aria-decal-newspaper.js | 0
.../ts}/doc-example/aria-decal-simple.js | 0
.../ts}/doc-example/aria-decal.js | 0
.../{data => examples/ts}/doc-example/aria-pie.js | 0
.../ts}/doc-example/axisPointer-handle-image.js | 0
.../ts}/doc-example/bar-dataZoom-filterMode.js | 0
.../{data => examples/ts}/doc-example/bar-large.js | 0
.../ts}/doc-example/bar-media-timeline.js | 0
.../ts}/doc-example/barGrid-barGap.js | 0
.../ts}/doc-example/candlestick-axisPointer.js | 0
.../ts}/doc-example/canvas-vs-svg-en.js | 0
.../ts}/doc-example/canvas-vs-svg.js | 0
.../ts}/doc-example/custom-transition-simple.js | 0
.../data-transform-multiple-sort-bar.js | 0
.../ts/doc-example/dataset-encode-simple0.js | 30 +
.../ts}/doc-example/geo-svg-label-basic.js | 0
.../ts}/doc-example/geo-svg-layout-basic.js | 0
.../ts}/doc-example/geo-svg-named-basic.js | 0
.../ts}/doc-example/getting-started.js | 0
.../ts}/doc-example/graphic-bounding.js | 0
.../ts}/doc-example/label-position.js | 0
.../ts}/doc-example/line-stack-tiled.js | 0
.../ts}/doc-example/map-example.js | 0
.../doc-example/map-visualMap-continuous-text.js | 0
.../ts}/doc-example/map-visualMap-continuous.js | 0
.../ts}/doc-example/map-visualMap-pieces.js | 0
.../doc-example/map-visualMap-piecewise-text.js | 0
.../ts}/doc-example/mix-timeline-all.js | 0
.../ts}/doc-example/parallel-all.js | 0
.../ts}/doc-example/pictorialBar-clip.js | 0
.../ts}/doc-example/pictorialBar-graphicType.js | 0
.../ts}/doc-example/pictorialBar-patternSize.js | 0
.../ts}/doc-example/pictorialBar-position.js | 0
.../ts}/doc-example/pictorialBar-repeat.js | 0
.../doc-example/pictorialBar-repeatDirection.js | 0
.../ts}/doc-example/pictorialBar-repeatLayout.js | 0
.../pictorialBar-symbolBoundingDataArray.js | 0
.../ts}/doc-example/pictorialBar-symbolSize.js | 0
.../ts}/doc-example/pie-highlight.js | 0
.../ts}/doc-example/pie-label-bleedMargin.js | 0
.../doc-example/pie-label-distanceToLabelLine.js | 0
.../ts}/doc-example/pie-label-margin.js | 0
.../{data => examples/ts}/doc-example/pie-media.js | 0
.../ts}/doc-example/polar-anticlockwise.js | 0
.../ts}/doc-example/polar-start-angle.js | 0
public/{data => examples/ts}/doc-example/radar.js | 0
.../ts}/doc-example/scatter-dataZoom-all.js | 0
.../ts}/doc-example/scatter-tutorial-dataZoom-1.js | 0
.../ts}/doc-example/scatter-tutorial-dataZoom-2.js | 0
.../ts}/doc-example/scatter-tutorial-dataZoom-3.js | 0
.../doc-example/scatter-visualMap-categories.js | 0
.../ts}/doc-example/scatter-visualMap-piecewise.js | 0
public/examples/ts/doc-example/sunburst-color.js | 44 +
.../ts}/doc-example/sunburst-highlight-ancestor.js | 0
.../doc-example/sunburst-highlight-descendant.js | 0
.../ts}/doc-example/sunburst-label-align.js | 0
public/examples/ts/doc-example/sunburst-simple.js | 28 +
.../ts}/doc-example/text-block-fragment.js | 0
.../ts}/doc-example/text-fregment-align.js | 0
.../ts}/doc-example/text-options.js | 0
.../ts/doc-example/timeline-dynamic-series.js | 72 +
.../ts}/doc-example/title-block.js | 0
.../ts}/doc-example/treemap-borderColor.js | 0
.../ts}/doc-example/tutorial-async.js | 0
.../ts}/doc-example/tutorial-dynamic-data.js | 0
.../ts}/doc-example/tutorial-loading.js | 0
.../ts}/doc-example/tutorial-styling-step0.js | 0
.../ts}/doc-example/tutorial-styling-step1.js | 0
.../ts}/doc-example/tutorial-styling-step2.js | 0
.../ts}/doc-example/tutorial-styling-step3.js | 0
.../ts}/doc-example/tutorial-styling-step4.js | 0
.../ts}/doc-example/tutorial-styling-step5.js | 0
.../ts}/doc-example/value-animation-simple.js | 0
public/examples/ts/dynamic-data.ts | 151 +
public/examples/ts/dynamic-data2.ts | 94 +
public/examples/ts/effectScatter-bmap.ts | 605 ++
public/examples/ts/effectScatter-map.ts | 515 ++
public/examples/ts/funnel-align.ts | 108 +
public/examples/ts/funnel-customize.ts | 89 +
public/examples/ts/funnel-mutiple.ts | 104 +
public/examples/ts/funnel.ts | 69 +
public/examples/ts/gauge-barometer.ts | 134 +
public/examples/ts/gauge-car.ts | 521 ++
public/examples/ts/gauge-clock.ts | 235 +
public/examples/ts/gauge-grade.ts | 92 +
public/examples/ts/gauge-multi-title.ts | 99 +
public/examples/ts/gauge-progress.ts | 100 +
public/examples/ts/gauge-ring.ts | 119 +
public/examples/ts/gauge-simple.ts | 35 +
public/examples/ts/gauge-speed.ts | 61 +
public/examples/ts/gauge-stage.ts | 74 +
public/examples/ts/gauge-temperature.ts | 145 +
public/examples/ts/gauge.ts | 29 +
public/examples/ts/geo-beef-cuts.ts | 75 +
public/examples/ts/geo-lines.js | 305 +
public/examples/ts/geo-map-scatter.js | 348 ++
public/examples/ts/geo-organ.js | 88 +
public/examples/ts/geo-seatmap-flight.ts | 92 +
public/examples/ts/geo-svg-lines.ts | 91 +
public/examples/ts/geo-svg-map.ts | 213 +
public/examples/ts/geo-svg-scatter-simple.ts | 52 +
public/examples/ts/geo-svg-traffic.ts | 172 +
.../examples/ts/gl/animating-contour-on-globe.js | 182 +
public/examples/ts/gl/bar3d-dataset.js | 51 +
public/examples/ts/gl/bar3d-global-population.js | 109 +
public/examples/ts/gl/bar3d-mapbox-view-change.js | 118 +
public/examples/ts/gl/bar3d-music-visualization.js | 161 +
public/examples/ts/gl/bar3d-myth.js | 107 +
.../ts/gl/bar3d-noise-modified-from-marpi-demo.js | 216 +
public/examples/ts/gl/bar3d-on-mapbox.js | 86 +
public/examples/ts/gl/bar3d-punch-card.js | 92 +
public/examples/ts/gl/bar3d-shanghai.js | 84 +
public/examples/ts/gl/bar3d-simplex-noise.js | 94 +
public/examples/ts/gl/bar3d-voxelize-image.js | 175 +
public/examples/ts/gl/flowGL-noise.js | 125 +
.../examples/ts/gl/geo3d-with-different-height.js | 74 +
public/examples/ts/gl/geo3d.js | 49 +
.../ts/gl/global-population-bar3d-on-globe.js | 67 +
.../examples/ts/gl/global-wind-visualization-2.js | 277 +
public/examples/ts/gl/global-wind-visualization.js | 211 +
public/examples/ts/gl/globe-atmosphere.js | 30 +
public/examples/ts/gl/globe-contour-paint.js | 177 +
public/examples/ts/gl/globe-country-carousel.js | 112 +
public/examples/ts/gl/globe-displacement.js | 57 +
.../examples/ts/gl/globe-echarts-gl-hello-world.js | 35 +
public/examples/ts/gl/globe-layers.js | 45 +
public/examples/ts/gl/globe-moon.js | 54 +
.../examples/ts/gl/globe-with-echarts-surface.js | 254 +
public/examples/ts/gl/graphgl-gpu-layout.js | 71 +
public/examples/ts/gl/graphgl-large-internet.js | 101 +
public/examples/ts/gl/graphgl-npm-dep.js | 140 +
public/examples/ts/gl/image-surface-sushuang.js | 90 +
public/examples/ts/gl/image-to-bar3d.js | 93 +
public/examples/ts/gl/iron-globe.js | 39 +
public/examples/ts/gl/line3d-orthographic.js | 64 +
public/examples/ts/gl/lines3d-airline-on-globe.js | 53 +
.../ts/gl/lines3d-flight-path-on-mapbox.js | 190 +
public/examples/ts/gl/lines3d-flights-gl.js | 94 +
public/examples/ts/gl/lines3d-flights-on-geo3d.js | 76 +
public/examples/ts/gl/lines3d-flights.js | 149 +
public/examples/ts/gl/lines3d-taxi-chengdu.js | 1073 ++++
.../ts/gl/lines3d-taxi-routes-of-cape-town.js | 176 +
public/examples/ts/gl/linesGL-ny.js | 93 +
public/examples/ts/gl/map3d-alcohol-consumption.js | 85 +
public/examples/ts/gl/map3d-buildings-on-mapbox.js | 78 +
public/examples/ts/gl/map3d-buildings.js | 123 +
public/examples/ts/gl/map3d-colorful-cities.js | 108 +
...d-plastic-material-style-buildings-on-mapbox.js | 88 +
public/examples/ts/gl/map3d-wood-city.js | 95 +
public/examples/ts/gl/map3d-wood-map-on-mapbox.js | 73 +
public/examples/ts/gl/map3d-wood-map.js | 74 +
public/examples/ts/gl/metal-bar3d.js | 101 +
public/examples/ts/gl/metal-surface.js | 126 +
public/examples/ts/gl/parametric-surface-rose.js | 168 +
public/examples/ts/gl/scatter3D-dataset.js | 44 +
.../examples/ts/gl/scatter3d-globe-population.js | 89 +
public/examples/ts/gl/scatter3d-orthographic.js | 83 +
public/examples/ts/gl/scatter3d-scatter.js | 131 +
public/examples/ts/gl/scatter3d-shanghai.js | 63 +
public/examples/ts/gl/scatter3d-simplex-noise.js | 83 +
.../ts/gl/scatter3d-weibo-checkin-on-mapbox.js | 91 +
public/examples/ts/gl/scatter3d.js | 225 +
public/examples/ts/gl/scatterGL-gps.js | 90 +
public/examples/ts/gl/scattergl-weibo.js | 104 +
public/examples/ts/gl/simple-surface.js | 67 +
public/examples/ts/gl/sphere-parametric-surface.js | 62 +
public/examples/ts/gl/stacked-bar3d.js | 61 +
public/examples/ts/gl/surface-breather.js | 145 +
public/examples/ts/gl/surface-golden-rose.js | 175 +
public/examples/ts/gl/surface-leather.js | 140 +
public/examples/ts/gl/surface-mollusc-shell.js | 92 +
public/examples/ts/gl/surface-theme-roses.js | 170 +
public/examples/ts/gl/surface-wave.js | 72 +
public/examples/ts/gl/transparent-bar3d.js | 93 +
public/examples/ts/graph-circular-layout.ts | 70 +
public/examples/ts/graph-force-dynamic.ts | 65 +
public/examples/ts/graph-force.ts | 58 +
public/examples/ts/graph-force2.ts | 64 +
public/examples/ts/graph-grid.ts | 52 +
public/examples/ts/graph-label-overlap.ts | 53 +
public/examples/ts/graph-life-expectancy.ts | 104 +
public/examples/ts/graph-npm.ts | 78 +
public/examples/ts/graph-simple.ts | 101 +
public/examples/ts/graph-webkit-dep.ts | 47 +
public/examples/ts/graph.ts | 72 +
public/examples/ts/grid-multiple.ts | 184 +
public/examples/ts/heatmap-bmap.js | 51 +
public/examples/ts/heatmap-cartesian.ts | 76 +
public/examples/ts/heatmap-large-piecewise.js | 449 ++
public/examples/ts/heatmap-large.js | 441 ++
public/examples/ts/heatmap-map.js | 449 ++
public/examples/ts/line-aqi.ts | 119 +
public/examples/ts/line-draggable.ts | 153 +
public/examples/ts/line-easing.ts | 296 +
public/examples/ts/line-function.ts | 77 +
public/examples/ts/line-gradient.ts | 91 +
public/examples/ts/line-graphic.ts | 122 +
.../ts/line-in-cartesian-coordinate-system.ts | 23 +
public/examples/ts/line-log.ts | 68 +
public/examples/ts/line-marker.ts | 86 +
public/examples/ts/line-markline.ts | 92 +
public/examples/ts/line-pen.ts | 83 +
public/examples/ts/line-polar.ts | 45 +
public/examples/ts/line-polar2.ts | 51 +
public/examples/ts/line-race.ts | 105 +
public/examples/ts/line-sections.ts | 105 +
public/examples/ts/line-simple.ts | 24 +
public/examples/ts/line-smooth.ts | 24 +
public/examples/ts/line-stack.ts | 71 +
public/examples/ts/line-step.ts | 58 +
public/examples/ts/line-style.ts | 36 +
public/examples/ts/line-tooltip-touch.ts | 159 +
public/examples/ts/line-y-category.ts | 53 +
public/examples/ts/lines-airline.ts | 67 +
public/examples/ts/lines-bmap-bus.ts | 171 +
public/examples/ts/lines-bmap-effect.ts | 202 +
public/examples/ts/lines-bmap.ts | 163 +
public/examples/ts/lines-ny.ts | 95 +
public/examples/ts/map-HK.ts | 100 +
public/examples/ts/map-bar-morph.ts | 151 +
public/examples/ts/map-bin.js | 242 +
public/examples/ts/map-china-dataRange.js | 137 +
public/examples/ts/map-china.js | 24 +
public/examples/ts/map-labels.js | 173 +
public/examples/ts/map-locate.js | 58 +
public/examples/ts/map-polygon.js | 662 +++
public/examples/ts/map-province.js | 105 +
public/examples/ts/map-usa.ts | 156 +
public/examples/ts/map-world-dataRange.js | 240 +
public/examples/ts/map-world.js | 213 +
public/examples/ts/mix-line-bar.ts | 84 +
public/examples/ts/mix-timeline-finance.js | 441 ++
public/examples/ts/mix-zoom-on-value.ts | 103 +
public/examples/ts/multiple-x-axis.ts | 110 +
public/examples/ts/multiple-y-axis.ts | 116 +
public/examples/ts/parallel-aqi.ts | 229 +
public/examples/ts/parallel-nutrients.ts | 183 +
public/examples/ts/parallel-simple.ts | 33 +
public/examples/ts/pictorialBar-bar-transition.ts | 165 +
public/examples/ts/pictorialBar-body-fill.ts | 169 +
public/examples/ts/pictorialBar-dotted.ts | 109 +
public/examples/ts/pictorialBar-forest.ts | 120 +
public/examples/ts/pictorialBar-hill.ts | 134 +
public/examples/ts/pictorialBar-spirit.ts | 121 +
public/examples/ts/pictorialBar-vehicle.ts | 128 +
public/examples/ts/pictorialBar-velocity.ts | 118 +
public/examples/ts/pie-alignTo.ts | 113 +
public/examples/ts/pie-borderRadius.ts | 52 +
public/examples/ts/pie-custom.ts | 74 +
public/examples/ts/pie-doughnut.ts | 46 +
public/examples/ts/pie-labelLine-adjust.ts | 97 +
public/examples/ts/pie-legend.ts | 80 +
public/examples/ts/pie-nest.ts | 100 +
public/examples/ts/pie-parliament-transition.ts | 150 +
public/examples/ts/pie-pattern.ts | 66 +
public/examples/ts/pie-rich-text.ts | 137 +
public/examples/ts/pie-roseType-simple.ts | 46 +
public/examples/ts/pie-roseType.ts | 93 +
public/examples/ts/pie-simple.ts | 44 +
public/examples/ts/polar-roundCap.ts | 53 +
public/examples/ts/radar-aqi.ts | 214 +
public/examples/ts/radar-custom.ts | 131 +
public/examples/ts/radar-multiple.ts | 109 +
public/examples/ts/radar.ts | 43 +
public/examples/ts/radar2.ts | 76 +
public/examples/ts/sankey-energy.ts | 39 +
public/examples/ts/sankey-itemstyle.ts | 1283 ++++
public/examples/ts/sankey-levels.ts | 79 +
public/examples/ts/sankey-nodeAlign-left.ts | 40 +
public/examples/ts/sankey-nodeAlign-right.ts | 41 +
public/examples/ts/sankey-simple.ts | 70 +
public/examples/ts/sankey-vertical.ts | 49 +
public/examples/ts/scatter-aggregate-bar.ts | 199 +
public/examples/ts/scatter-anscombe-quartet.ts | 152 +
public/examples/ts/scatter-aqi-color.ts | 260 +
public/examples/ts/scatter-clustering-process.js | 248 +
public/examples/ts/scatter-clustering.ts | 140 +
public/examples/ts/scatter-effect.ts | 84 +
.../examples/ts/scatter-exponential-regression.ts | 92 +
public/examples/ts/scatter-label-align-right.ts | 61 +
public/examples/ts/scatter-label-align-top.ts | 55 +
public/examples/ts/scatter-large.ts | 80 +
.../ts/scatter-life-expectancy-timeline.js | 172 +
public/examples/ts/scatter-linear-regression.ts | 274 +
.../examples/ts/scatter-logarithmic-regression.ts | 143 +
public/examples/ts/scatter-map-brush.ts | 840 +++
public/examples/ts/scatter-map.js | 472 ++
public/examples/ts/scatter-matrix.ts | 322 +
public/examples/ts/scatter-nebula.ts | 85 +
public/examples/ts/scatter-nutrients-matrix.ts | 488 ++
public/examples/ts/scatter-nutrients.ts | 184 +
public/examples/ts/scatter-painter-choice.ts | 72 +
public/examples/ts/scatter-polar-punchCard.ts | 82 +
.../examples/ts/scatter-polynomial-regression.ts | 92 +
public/examples/ts/scatter-punchCard.ts | 87 +
public/examples/ts/scatter-simple.ts | 43 +
public/examples/ts/scatter-single-axis.ts | 70 +
public/examples/ts/scatter-stream-visual.ts | 64 +
public/examples/ts/scatter-symbol-morph.ts | 160 +
public/examples/ts/scatter-weibo.ts | 114 +
public/examples/ts/scatter-weight.ts | 280 +
public/examples/ts/scatter-world-population.js | 520 ++
public/examples/ts/sunburst-book.js | 446 ++
public/examples/ts/sunburst-borderRadius.ts | 86 +
public/examples/ts/sunburst-drink.ts | 866 +++
public/examples/ts/sunburst-label-rotate.ts | 128 +
public/examples/ts/sunburst-monochrome.ts | 246 +
public/examples/ts/sunburst-simple.ts | 86 +
public/examples/ts/sunburst-visualMap.ts | 126 +
public/examples/ts/themeRiver-basic.ts | 185 +
public/examples/ts/themeRiver-lastfm.ts | 81 +
public/examples/ts/tree-basic.ts | 65 +
public/examples/ts/tree-legend.ts | 258 +
public/examples/ts/tree-orient-bottom-top.ts | 62 +
public/examples/ts/tree-orient-right-left.ts | 67 +
public/examples/ts/tree-polyline.ts | 179 +
public/examples/ts/tree-radial.ts | 45 +
public/examples/ts/tree-vertical.ts | 58 +
public/examples/ts/treemap-disk.ts | 83 +
public/examples/ts/treemap-drill-down.ts | 103 +
public/examples/ts/treemap-obama.ts | 242 +
public/examples/ts/treemap-show-parent.ts | 97 +
public/examples/ts/treemap-simple.ts | 47 +
public/examples/ts/treemap-sunburst-transition.ts | 66 +
public/examples/ts/treemap-visual.ts | 155 +
public/examples/ts/watermark.ts | 244 +
public/examples/ts/wind-barb.ts | 321 +
public/examples/tsconfig.json | 13 +
public/examples/types/example.d.ts | 32 +
public/types/echarts.d.ts | 4191 -------------
public/zh/editor.html | 53 +-
public/zh/index.html | 54 +-
public/zh/view.html | 53 +-
src/common/config.js | 227 +-
src/common/helper.js | 105 +-
src/common/i18n.js | 291 +-
src/common/route.js | 30 +
src/common/store.js | 88 +-
src/data/chart-list-data.js | 485 +-
src/dep/showDebugDirtyRect.js | 152 +-
src/editor/CodeAce.vue | 196 +-
src/editor/CodeMonaco.vue | 338 +-
src/editor/Editor.vue | 947 +--
src/editor/FullCodePreview.vue | 143 +-
src/editor/Preview.vue | 796 +--
src/editor/View.vue | 27 +-
src/editor/downloadExample.js | 22 +-
src/editor/object-visualizer.css | 120 +-
src/editor/sandbox.js | 376 +-
src/editor/transformTs.js | 10 +-
src/explore/ExampleCard.vue | 284 +-
src/explore/Explore.vue | 671 ++-
src/main.js | 61 +-
src/style/color.scss | 42 +-
src/style/config.xl.scss | 1219 ++--
tool/build-example.js | 677 ++-
tool/compile-example.js | 35 +
tool/screenshot.html | 320 +-
tool/seedrandom.js | 459 +-
tool/updateFrontMatter.js | 43 +-
884 files changed, 54177 insertions(+), 58979 deletions(-)
create mode 100644 .eslintrc.js
create mode 100644 .prettierignore
create mode 100644 .prettierrc
create mode 100644 .vscode/settings.json
delete mode 100644 _config.yml
delete mode 100644 e2e/package-lock.json
delete mode 100644 public/data-gl/animating-contour-on-globe.js
delete mode 100644 public/data-gl/bar3d-dataset.js
delete mode 100644 public/data-gl/bar3d-global-population.js
delete mode 100644 public/data-gl/bar3d-mapbox-view-change.js
delete mode 100644 public/data-gl/bar3d-music-visualization.js
delete mode 100644 public/data-gl/bar3d-myth.js
delete mode 100644 public/data-gl/bar3d-noise-modified-from-marpi-demo.js
delete mode 100644 public/data-gl/bar3d-on-mapbox.js
delete mode 100644 public/data-gl/bar3d-punch-card.js
delete mode 100644 public/data-gl/bar3d-shanghai.js
delete mode 100644 public/data-gl/bar3d-simplex-noise.js
delete mode 100644 public/data-gl/bar3d-voxelize-image.js
delete mode 100644 public/data-gl/flowGL-noise.js
delete mode 100644 public/data-gl/geo3d-with-different-height.js
delete mode 100644 public/data-gl/geo3d.js
delete mode 100644 public/data-gl/global-population-bar3d-on-globe.js
delete mode 100644 public/data-gl/global-wind-visualization-2.js
delete mode 100644 public/data-gl/global-wind-visualization.js
delete mode 100644 public/data-gl/globe-atmosphere.js
delete mode 100644 public/data-gl/globe-contour-paint.js
delete mode 100644 public/data-gl/globe-country-carousel.js
delete mode 100644 public/data-gl/globe-displacement.js
delete mode 100644 public/data-gl/globe-echarts-gl-hello-world.js
delete mode 100644 public/data-gl/globe-layers.js
delete mode 100644 public/data-gl/globe-moon.js
delete mode 100644 public/data-gl/globe-with-echarts-surface.js
delete mode 100644 public/data-gl/graphgl-gpu-layout.js
delete mode 100644 public/data-gl/graphgl-large-internet.js
delete mode 100644 public/data-gl/graphgl-npm-dep.js
delete mode 100644 public/data-gl/image-surface-sushuang.js
delete mode 100644 public/data-gl/image-to-bar3d.js
delete mode 100644 public/data-gl/iron-globe.js
delete mode 100644 public/data-gl/line3d-orthographic.js
delete mode 100644 public/data-gl/lines3d-airline-on-globe.js
delete mode 100644 public/data-gl/lines3d-flight-path-on-mapbox.js
delete mode 100644 public/data-gl/lines3d-flights-gl.js
delete mode 100644 public/data-gl/lines3d-flights-on-geo3d.js
delete mode 100644 public/data-gl/lines3d-flights.js
delete mode 100644 public/data-gl/lines3d-taxi-chengdu.js
delete mode 100644 public/data-gl/lines3d-taxi-routes-of-cape-town.js
delete mode 100644 public/data-gl/linesGL-ny.js
delete mode 100644 public/data-gl/map3d-alcohol-consumption.js
delete mode 100644 public/data-gl/map3d-buildings-on-mapbox.js
delete mode 100644 public/data-gl/map3d-buildings.js
delete mode 100644 public/data-gl/map3d-colorful-cities.js
delete mode 100644 public/data-gl/map3d-plastic-material-style-buildings-on-mapbox.js
delete mode 100644 public/data-gl/map3d-wood-city.js
delete mode 100644 public/data-gl/map3d-wood-map-on-mapbox.js
delete mode 100644 public/data-gl/map3d-wood-map.js
delete mode 100644 public/data-gl/metal-bar3d.js
delete mode 100644 public/data-gl/metal-surface.js
delete mode 100644 public/data-gl/parametric-surface-rose.js
delete mode 100644 public/data-gl/scatter3D-dataset.js
delete mode 100644 public/data-gl/scatter3d-globe-population.js
delete mode 100644 public/data-gl/scatter3d-orthographic.js
delete mode 100644 public/data-gl/scatter3d-scatter.js
delete mode 100644 public/data-gl/scatter3d-shanghai.js
delete mode 100644 public/data-gl/scatter3d-simplex-noise.js
delete mode 100644 public/data-gl/scatter3d-weibo-checkin-on-mapbox.js
delete mode 100644 public/data-gl/scatter3d.js
delete mode 100644 public/data-gl/scatterGL-gps.js
delete mode 100644 public/data-gl/scattergl-weibo.js
delete mode 100644 public/data-gl/simple-surface.js
delete mode 100644 public/data-gl/sphere-parametric-surface.js
delete mode 100644 public/data-gl/stacked-bar3d.js
delete mode 100644 public/data-gl/surface-breather.js
delete mode 100644 public/data-gl/surface-golden-rose.js
delete mode 100644 public/data-gl/surface-leather.js
delete mode 100644 public/data-gl/surface-mollusc-shell.js
delete mode 100644 public/data-gl/surface-theme-roses.js
delete mode 100644 public/data-gl/surface-wave.js
delete mode 100644 public/data-gl/transparent-bar3d.js
delete mode 100644 public/data/archive/custom-aggregate-scatter-bar.js
delete mode 100644 public/data/archive/custom-aggregate-scatter-pie.js
delete mode 100644 public/data/area-basic.js
delete mode 100644 public/data/area-pieces.js
delete mode 100644 public/data/area-rainfall.js
delete mode 100644 public/data/area-simple.js
delete mode 100644 public/data/area-stack-gradient.js
delete mode 100644 public/data/area-stack.js
delete mode 100644 public/data/area-time-axis.js
delete mode 100644 public/data/bar-animation-delay.js
delete mode 100644 public/data/bar-background.js
delete mode 100644 public/data/bar-brush.js
delete mode 100644 public/data/bar-data-color.js
delete mode 100644 public/data/bar-drilldown.js
delete mode 100644 public/data/bar-gradient.js
delete mode 100644 public/data/bar-histogram.js
delete mode 100644 public/data/bar-label-rotation.js
delete mode 100644 public/data/bar-large.js
delete mode 100644 public/data/bar-negative.js
delete mode 100644 public/data/bar-negative2.js
delete mode 100644 public/data/bar-polar-label-radial.js
delete mode 100644 public/data/bar-polar-label-tangential.js
delete mode 100644 public/data/bar-polar-real-estate.js
delete mode 100644 public/data/bar-polar-stack-radial.js
delete mode 100644 public/data/bar-polar-stack.js
delete mode 100644 public/data/bar-race-country.js
delete mode 100644 public/data/bar-race.js
delete mode 100644 public/data/bar-rich-text.js
delete mode 100644 public/data/bar-simple.js
delete mode 100644 public/data/bar-stack.js
delete mode 100644 public/data/bar-tick-align.js
delete mode 100644 public/data/bar-waterfall.js
delete mode 100644 public/data/bar-waterfall2.js
delete mode 100644 public/data/bar-y-category-stack.js
delete mode 100644 public/data/bar-y-category.js
delete mode 100644 public/data/bar1.js
delete mode 100644 public/data/boxplot-light-velocity.js
delete mode 100644 public/data/boxplot-light-velocity2.js
delete mode 100644 public/data/boxplot-multi.js
delete mode 100644 public/data/bubble-gradient.js
delete mode 100644 public/data/calendar-charts.js
delete mode 100644 public/data/calendar-effectscatter.js
delete mode 100644 public/data/calendar-graph.js
delete mode 100644 public/data/calendar-heatmap.js
delete mode 100644 public/data/calendar-horizontal.js
delete mode 100644 public/data/calendar-lunar.js
delete mode 100644 public/data/calendar-pie.js
delete mode 100644 public/data/calendar-simple.js
delete mode 100644 public/data/calendar-vertical.js
delete mode 100644 public/data/candlestick-brush.js
delete mode 100644 public/data/candlestick-large.js
delete mode 100644 public/data/candlestick-sh-2015.js
delete mode 100644 public/data/candlestick-sh.js
delete mode 100644 public/data/candlestick-simple.js
delete mode 100644 public/data/candlestick-touch.js
delete mode 100644 public/data/circle-packing-with-d3.js
delete mode 100644 public/data/confidence-band.js
delete mode 100644 public/data/covid-america.js
delete mode 100644 public/data/custom-bar-trend.js
delete mode 100644 public/data/custom-calendar-icon.js
delete mode 100644 public/data/custom-cartesian-polygon.js
delete mode 100644 public/data/custom-error-bar.js
delete mode 100644 public/data/custom-error-scatter.js
delete mode 100644 public/data/custom-gantt-flight.js
delete mode 100644 public/data/custom-gauge.js
delete mode 100644 public/data/custom-hexbin.js
delete mode 100644 public/data/custom-ohlc.js
delete mode 100644 public/data/custom-polar-heatmap.js
delete mode 100644 public/data/custom-profile.js
delete mode 100644 public/data/custom-profit.js
delete mode 100644 public/data/custom-spiral-race.js
delete mode 100644 public/data/custom-wind.js
delete mode 100644 public/data/cycle-plot.js
delete mode 100644 public/data/data-transform-aggregate.js
delete mode 100644 public/data/data-transform-filter.js
delete mode 100644 public/data/data-transform-multiple-pie.js
delete mode 100644 public/data/data-transform-sort-bar.js
delete mode 100644 public/data/dataset-default.js
delete mode 100644 public/data/dataset-encode0.js
delete mode 100644 public/data/dataset-encode1.js
delete mode 100644 public/data/dataset-link.js
delete mode 100644 public/data/dataset-series-layout-by.js
delete mode 100644 public/data/dataset-simple0.js
delete mode 100644 public/data/dataset-simple1.js
delete mode 100644 public/data/doc-example/dataset-encode-simple0.js
delete mode 100644 public/data/doc-example/sunburst-color.js
delete mode 100644 public/data/doc-example/sunburst-simple.js
delete mode 100644 public/data/doc-example/timeline-dynamic-series.js
delete mode 100644 public/data/dynamic-data.js
delete mode 100644 public/data/dynamic-data2.js
delete mode 100644 public/data/effectScatter-bmap.js
delete mode 100644 public/data/effectScatter-map.js
delete mode 100644 public/data/funnel-align.js
delete mode 100644 public/data/funnel-customize.js
delete mode 100644 public/data/funnel-mutiple.js
delete mode 100644 public/data/funnel.js
delete mode 100644 public/data/gauge-barometer.js
delete mode 100644 public/data/gauge-car.js
delete mode 100644 public/data/gauge-clock.js
delete mode 100644 public/data/gauge-grade.js
delete mode 100644 public/data/gauge-multi-title.js
delete mode 100644 public/data/gauge-progress.js
delete mode 100644 public/data/gauge-ring.js
delete mode 100644 public/data/gauge-simple.js
delete mode 100644 public/data/gauge-speed.js
delete mode 100644 public/data/gauge-stage.js
delete mode 100644 public/data/gauge-temperature.js
delete mode 100644 public/data/gauge.js
delete mode 100644 public/data/geo-beef-cuts.js
delete mode 100644 public/data/geo-lines.js
delete mode 100644 public/data/geo-map-scatter.js
delete mode 100644 public/data/geo-organ.js
delete mode 100644 public/data/geo-seatmap-flight.js
delete mode 100644 public/data/geo-svg-lines.js
delete mode 100644 public/data/geo-svg-map.js
delete mode 100644 public/data/geo-svg-scatter-simple.js
delete mode 100644 public/data/geo-svg-traffic.js
delete mode 100644 public/data/graph-circular-layout.js
delete mode 100644 public/data/graph-force-dynamic.js
delete mode 100644 public/data/graph-force.js
delete mode 100644 public/data/graph-force2.js
delete mode 100644 public/data/graph-grid.js
delete mode 100644 public/data/graph-label-overlap.js
delete mode 100644 public/data/graph-life-expectancy.js
delete mode 100644 public/data/graph-npm.js
delete mode 100644 public/data/graph-simple.js
delete mode 100644 public/data/graph-webkit-dep.js
delete mode 100644 public/data/graph.js
delete mode 100644 public/data/grid-multiple.js
delete mode 100644 public/data/heatmap-bmap.js
delete mode 100644 public/data/heatmap-cartesian.js
delete mode 100644 public/data/heatmap-large-piecewise.js
delete mode 100644 public/data/heatmap-large.js
delete mode 100644 public/data/heatmap-map.js
delete mode 100644 public/data/line-aqi.js
delete mode 100644 public/data/line-draggable.js
delete mode 100644 public/data/line-easing.js
delete mode 100644 public/data/line-function.js
delete mode 100644 public/data/line-gradient.js
delete mode 100644 public/data/line-graphic.js
delete mode 100644 public/data/line-in-cartesian-coordinate-system.js
delete mode 100644 public/data/line-log.js
delete mode 100644 public/data/line-marker.js
delete mode 100644 public/data/line-markline.js
delete mode 100644 public/data/line-pen.js
delete mode 100644 public/data/line-polar.js
delete mode 100644 public/data/line-polar2.js
delete mode 100644 public/data/line-race.js
delete mode 100644 public/data/line-sections.js
delete mode 100644 public/data/line-simple.js
delete mode 100644 public/data/line-smooth.js
delete mode 100644 public/data/line-stack.js
delete mode 100644 public/data/line-step.js
delete mode 100644 public/data/line-style.js
delete mode 100644 public/data/line-tooltip-touch.js
delete mode 100644 public/data/line-y-category.js
delete mode 100644 public/data/lines-airline.js
delete mode 100644 public/data/lines-bmap-bus.js
delete mode 100644 public/data/lines-bmap-effect.js
delete mode 100644 public/data/lines-bmap.js
delete mode 100644 public/data/lines-ny.js
delete mode 100644 public/data/map-HK.js
delete mode 100644 public/data/map-bar-morph.js
delete mode 100644 public/data/map-bin.js
delete mode 100644 public/data/map-china-dataRange.js
delete mode 100644 public/data/map-china.js
delete mode 100644 public/data/map-labels.js
delete mode 100644 public/data/map-locate.js
delete mode 100644 public/data/map-polygon.js
delete mode 100644 public/data/map-province.js
delete mode 100644 public/data/map-usa.js
delete mode 100644 public/data/map-world-dataRange.js
delete mode 100644 public/data/map-world.js
delete mode 100644 public/data/mix-line-bar.js
delete mode 100644 public/data/mix-timeline-finance.js
delete mode 100644 public/data/mix-zoom-on-value.js
delete mode 100644 public/data/multiple-x-axis.js
delete mode 100644 public/data/multiple-y-axis.js
delete mode 100644 public/data/parallel-aqi.js
delete mode 100644 public/data/parallel-nutrients.js
delete mode 100644 public/data/parallel-simple.js
delete mode 100644 public/data/pictorialBar-bar-transition.js
delete mode 100644 public/data/pictorialBar-body-fill.js
delete mode 100644 public/data/pictorialBar-dotted.js
delete mode 100644 public/data/pictorialBar-forest.js
delete mode 100644 public/data/pictorialBar-hill.js
delete mode 100644 public/data/pictorialBar-spirit.js
delete mode 100644 public/data/pictorialBar-vehicle.js
delete mode 100644 public/data/pictorialBar-velocity.js
delete mode 100644 public/data/pie-alignTo.js
delete mode 100644 public/data/pie-borderRadius.js
delete mode 100644 public/data/pie-custom.js
delete mode 100644 public/data/pie-doughnut.js
delete mode 100644 public/data/pie-labelLine-adjust.js
delete mode 100644 public/data/pie-legend.js
delete mode 100644 public/data/pie-nest.js
delete mode 100644 public/data/pie-parliament-transition.js
delete mode 100644 public/data/pie-pattern.js
delete mode 100644 public/data/pie-rich-text.js
delete mode 100644 public/data/pie-roseType-simple.js
delete mode 100644 public/data/pie-roseType.js
delete mode 100644 public/data/pie-simple.js
delete mode 100644 public/data/polar-roundCap.js
delete mode 100644 public/data/radar-aqi.js
delete mode 100644 public/data/radar-custom.js
delete mode 100644 public/data/radar-multiple.js
delete mode 100644 public/data/radar.js
delete mode 100644 public/data/radar2.js
delete mode 100644 public/data/sankey-energy.js
delete mode 100644 public/data/sankey-itemstyle.js
delete mode 100644 public/data/sankey-levels.js
delete mode 100644 public/data/sankey-nodeAlign-left.js
delete mode 100644 public/data/sankey-nodeAlign-right.js
delete mode 100644 public/data/sankey-simple.js
delete mode 100644 public/data/sankey-vertical.js
delete mode 100644 public/data/scatter-aggregate-bar.js
delete mode 100644 public/data/scatter-anscombe-quartet.js
delete mode 100644 public/data/scatter-aqi-color.js
delete mode 100644 public/data/scatter-clustering-process.js
delete mode 100644 public/data/scatter-clustering.js
delete mode 100644 public/data/scatter-effect.js
delete mode 100644 public/data/scatter-exponential-regression.js
delete mode 100644 public/data/scatter-label-align-right.js
delete mode 100644 public/data/scatter-label-align-top.js
delete mode 100644 public/data/scatter-large.js
delete mode 100644 public/data/scatter-life-expectancy-timeline.js
delete mode 100644 public/data/scatter-linear-regression.js
delete mode 100644 public/data/scatter-logarithmic-regression.js
delete mode 100644 public/data/scatter-map-brush.js
delete mode 100644 public/data/scatter-map.js
delete mode 100644 public/data/scatter-matrix.js
delete mode 100644 public/data/scatter-nebula.js
delete mode 100644 public/data/scatter-nutrients-matrix.js
delete mode 100644 public/data/scatter-nutrients.js
delete mode 100644 public/data/scatter-painter-choice.js
delete mode 100644 public/data/scatter-polar-punchCard.js
delete mode 100644 public/data/scatter-polynomial-regression.js
delete mode 100644 public/data/scatter-punchCard.js
delete mode 100644 public/data/scatter-simple.js
delete mode 100644 public/data/scatter-single-axis.js
delete mode 100644 public/data/scatter-stream-visual.js
delete mode 100644 public/data/scatter-symbol-morph.js
delete mode 100644 public/data/scatter-weibo.js
delete mode 100644 public/data/scatter-weight.js
delete mode 100644 public/data/scatter-world-population.js
delete mode 100644 public/data/sunburst-book.js
delete mode 100644 public/data/sunburst-borderRadius.js
delete mode 100644 public/data/sunburst-drink.js
delete mode 100644 public/data/sunburst-label-rotate.js
delete mode 100644 public/data/sunburst-monochrome.js
delete mode 100644 public/data/sunburst-simple.js
delete mode 100644 public/data/sunburst-visualMap.js
delete mode 100644 public/data/themeRiver-basic.js
delete mode 100644 public/data/themeRiver-lastfm.js
create mode 100644 public/data/thumb-dark/bar-drilldown.png
create mode 100644 public/data/thumb-dark/bar-drilldown.webp
create mode 100644 public/data/thumb-dark/bar-polar-label-radial.png
create mode 100644 public/data/thumb-dark/bar-polar-label-radial.webp
create mode 100644 public/data/thumb-dark/bar-polar-label-tangential.png
create mode 100644 public/data/thumb-dark/bar-polar-label-tangential.webp
create mode 100644 public/data/thumb-dark/geo-svg-scatter-simple.png
create mode 100644 public/data/thumb-dark/geo-svg-scatter-simple.webp
create mode 100644 public/data/thumb-dark/map-bar-morph.png
create mode 100644 public/data/thumb-dark/map-bar-morph.webp
create mode 100644 public/data/thumb-dark/pictorialBar-bar-transition.png
create mode 100644 public/data/thumb-dark/pictorialBar-bar-transition.webp
create mode 100644 public/data/thumb-dark/pie-parliament-transition.png
create mode 100644 public/data/thumb-dark/pie-parliament-transition.webp
create mode 100644 public/data/thumb-dark/scatter-aggregate-bar.png
create mode 100644 public/data/thumb-dark/scatter-aggregate-bar.webp
create mode 100644 public/data/thumb-dark/scatter-symbol-morph.png
create mode 100644 public/data/thumb-dark/scatter-symbol-morph.webp
create mode 100644 public/data/thumb-dark/treemap-sunburst-transition.png
create mode 100644 public/data/thumb-dark/treemap-sunburst-transition.webp
create mode 100644 public/data/thumb/bar-drilldown.png
create mode 100644 public/data/thumb/bar-drilldown.webp
create mode 100644 public/data/thumb/bar-polar-label-radial.png
create mode 100644 public/data/thumb/bar-polar-label-radial.webp
create mode 100644 public/data/thumb/bar-polar-label-tangential.png
create mode 100644 public/data/thumb/bar-polar-label-tangential.webp
create mode 100644 public/data/thumb/geo-svg-scatter-simple.png
create mode 100644 public/data/thumb/geo-svg-scatter-simple.webp
create mode 100644 public/data/thumb/map-bar-morph.png
create mode 100644 public/data/thumb/map-bar-morph.webp
create mode 100644 public/data/thumb/pictorialBar-bar-transition.png
create mode 100644 public/data/thumb/pictorialBar-bar-transition.webp
create mode 100644 public/data/thumb/pie-parliament-transition.png
create mode 100644 public/data/thumb/pie-parliament-transition.webp
create mode 100644 public/data/thumb/scatter-aggregate-bar.png
create mode 100644 public/data/thumb/scatter-aggregate-bar.webp
create mode 100644 public/data/thumb/scatter-symbol-morph.png
create mode 100644 public/data/thumb/scatter-symbol-morph.webp
create mode 100644 public/data/thumb/treemap-sunburst-transition.png
create mode 100644 public/data/thumb/treemap-sunburst-transition.webp
delete mode 100644 public/data/tree-basic.js
delete mode 100644 public/data/tree-legend.js
delete mode 100644 public/data/tree-orient-bottom-top.js
delete mode 100644 public/data/tree-orient-right-left.js
delete mode 100644 public/data/tree-polyline.js
delete mode 100644 public/data/tree-radial.js
delete mode 100644 public/data/tree-vertical.js
delete mode 100644 public/data/treemap-disk.js
delete mode 100644 public/data/treemap-drill-down.js
delete mode 100644 public/data/treemap-obama.js
delete mode 100644 public/data/treemap-show-parent.js
delete mode 100644 public/data/treemap-simple.js
delete mode 100644 public/data/treemap-sunburst-transition.js
delete mode 100644 public/data/treemap-visual.js
delete mode 100644 public/data/watermark.js
delete mode 100644 public/data/wind-barb.js
create mode 100644 public/examples/ts/README.md
create mode 100644 public/examples/ts/archive/custom-aggregate-scatter-bar.js
rename public/{data => examples/ts}/archive/custom-aggregate-scatter-cluster.js (100%)
create mode 100644 public/examples/ts/archive/custom-aggregate-scatter-pie.js
rename public/{data => examples/ts}/archive/custom-combine-separate-morph.js (100%)
rename public/{data => examples/ts}/archive/custom-one-to-one-morph.js (100%)
rename public/{data => examples/ts}/archive/custom-story-transition.js (100%)
create mode 100644 public/examples/ts/area-basic.ts
create mode 100644 public/examples/ts/area-pieces.ts
create mode 100644 public/examples/ts/area-rainfall.ts
create mode 100644 public/examples/ts/area-simple.ts
create mode 100644 public/examples/ts/area-stack-gradient.ts
create mode 100644 public/examples/ts/area-stack.ts
create mode 100644 public/examples/ts/area-time-axis.ts
create mode 100644 public/examples/ts/bar-animation-delay.ts
create mode 100644 public/examples/ts/bar-background.ts
create mode 100644 public/examples/ts/bar-brush.ts
create mode 100644 public/examples/ts/bar-data-color.ts
create mode 100644 public/examples/ts/bar-drilldown.ts
create mode 100644 public/examples/ts/bar-gradient.ts
create mode 100644 public/examples/ts/bar-histogram.ts
create mode 100644 public/examples/ts/bar-label-rotation.ts
create mode 100644 public/examples/ts/bar-large.ts
create mode 100644 public/examples/ts/bar-negative.ts
create mode 100644 public/examples/ts/bar-negative2.ts
create mode 100644 public/examples/ts/bar-polar-label-radial.ts
create mode 100644 public/examples/ts/bar-polar-label-tangential.ts
create mode 100644 public/examples/ts/bar-polar-real-estate.ts
create mode 100644 public/examples/ts/bar-polar-stack-radial.ts
create mode 100644 public/examples/ts/bar-polar-stack.ts
create mode 100644 public/examples/ts/bar-race-country.ts
create mode 100644 public/examples/ts/bar-race.ts
create mode 100644 public/examples/ts/bar-rich-text.ts
create mode 100644 public/examples/ts/bar-simple.ts
create mode 100644 public/examples/ts/bar-stack.ts
create mode 100644 public/examples/ts/bar-tick-align.ts
create mode 100644 public/examples/ts/bar-waterfall.ts
create mode 100644 public/examples/ts/bar-waterfall2.ts
create mode 100644 public/examples/ts/bar-y-category-stack.ts
create mode 100644 public/examples/ts/bar-y-category.ts
create mode 100644 public/examples/ts/bar1.ts
create mode 100644 public/examples/ts/boxplot-light-velocity.ts
create mode 100644 public/examples/ts/boxplot-light-velocity2.ts
create mode 100644 public/examples/ts/boxplot-multi.ts
create mode 100644 public/examples/ts/bubble-gradient.ts
create mode 100644 public/examples/ts/calendar-charts.ts
create mode 100644 public/examples/ts/calendar-effectscatter.ts
create mode 100644 public/examples/ts/calendar-graph.ts
create mode 100644 public/examples/ts/calendar-heatmap.ts
create mode 100644 public/examples/ts/calendar-horizontal.ts
create mode 100644 public/examples/ts/calendar-lunar.ts
create mode 100644 public/examples/ts/calendar-pie.ts
create mode 100644 public/examples/ts/calendar-simple.ts
create mode 100644 public/examples/ts/calendar-vertical.ts
create mode 100644 public/examples/ts/candlestick-brush.ts
create mode 100644 public/examples/ts/candlestick-large.ts
create mode 100644 public/examples/ts/candlestick-sh-2015.ts
create mode 100644 public/examples/ts/candlestick-sh.ts
create mode 100644 public/examples/ts/candlestick-simple.ts
create mode 100644 public/examples/ts/candlestick-touch.ts
create mode 100644 public/examples/ts/circle-packing-with-d3.js
create mode 100644 public/examples/ts/confidence-band.ts
create mode 100644 public/examples/ts/custom-bar-trend.ts
create mode 100644 public/examples/ts/custom-calendar-icon.ts
create mode 100644 public/examples/ts/custom-cartesian-polygon.ts
create mode 100644 public/examples/ts/custom-error-bar.ts
create mode 100644 public/examples/ts/custom-error-scatter.ts
create mode 100644 public/examples/ts/custom-gantt-flight.js
create mode 100644 public/examples/ts/custom-gauge.js
create mode 100644 public/examples/ts/custom-hexbin.js
create mode 100644 public/examples/ts/custom-ohlc.ts
create mode 100644 public/examples/ts/custom-polar-heatmap.ts
create mode 100644 public/examples/ts/custom-profile.js
create mode 100644 public/examples/ts/custom-profit.ts
create mode 100644 public/examples/ts/custom-spiral-race.js
create mode 100644 public/examples/ts/custom-wind.ts
create mode 100644 public/examples/ts/cycle-plot.js
create mode 100644 public/examples/ts/data-transform-aggregate.js
create mode 100644 public/examples/ts/data-transform-filter.ts
create mode 100644 public/examples/ts/data-transform-multiple-pie.ts
create mode 100644 public/examples/ts/data-transform-sort-bar.ts
create mode 100644 public/examples/ts/dataset-default.ts
create mode 100644 public/examples/ts/dataset-encode0.ts
create mode 100644 public/examples/ts/dataset-encode1.ts
create mode 100644 public/examples/ts/dataset-link.ts
create mode 100644 public/examples/ts/dataset-series-layout-by.ts
create mode 100644 public/examples/ts/dataset-simple0.ts
create mode 100644 public/examples/ts/dataset-simple1.ts
rename public/{data => examples/ts}/doc-example/aria-decal-newspaper.js (100%)
rename public/{data => examples/ts}/doc-example/aria-decal-simple.js (100%)
rename public/{data => examples/ts}/doc-example/aria-decal.js (100%)
rename public/{data => examples/ts}/doc-example/aria-pie.js (100%)
rename public/{data => examples/ts}/doc-example/axisPointer-handle-image.js (100%)
rename public/{data => examples/ts}/doc-example/bar-dataZoom-filterMode.js (100%)
rename public/{data => examples/ts}/doc-example/bar-large.js (100%)
rename public/{data => examples/ts}/doc-example/bar-media-timeline.js (100%)
rename public/{data => examples/ts}/doc-example/barGrid-barGap.js (100%)
rename public/{data => examples/ts}/doc-example/candlestick-axisPointer.js (100%)
rename public/{data => examples/ts}/doc-example/canvas-vs-svg-en.js (100%)
rename public/{data => examples/ts}/doc-example/canvas-vs-svg.js (100%)
rename public/{data => examples/ts}/doc-example/custom-transition-simple.js (100%)
rename public/{data => examples/ts}/doc-example/data-transform-multiple-sort-bar.js (100%)
create mode 100644 public/examples/ts/doc-example/dataset-encode-simple0.js
rename public/{data => examples/ts}/doc-example/geo-svg-label-basic.js (100%)
rename public/{data => examples/ts}/doc-example/geo-svg-layout-basic.js (100%)
rename public/{data => examples/ts}/doc-example/geo-svg-named-basic.js (100%)
rename public/{data => examples/ts}/doc-example/getting-started.js (100%)
rename public/{data => examples/ts}/doc-example/graphic-bounding.js (100%)
rename public/{data => examples/ts}/doc-example/label-position.js (100%)
rename public/{data => examples/ts}/doc-example/line-stack-tiled.js (100%)
rename public/{data => examples/ts}/doc-example/map-example.js (100%)
rename public/{data => examples/ts}/doc-example/map-visualMap-continuous-text.js (100%)
rename public/{data => examples/ts}/doc-example/map-visualMap-continuous.js (100%)
rename public/{data => examples/ts}/doc-example/map-visualMap-pieces.js (100%)
rename public/{data => examples/ts}/doc-example/map-visualMap-piecewise-text.js (100%)
rename public/{data => examples/ts}/doc-example/mix-timeline-all.js (100%)
rename public/{data => examples/ts}/doc-example/parallel-all.js (100%)
rename public/{data => examples/ts}/doc-example/pictorialBar-clip.js (100%)
rename public/{data => examples/ts}/doc-example/pictorialBar-graphicType.js (100%)
rename public/{data => examples/ts}/doc-example/pictorialBar-patternSize.js (100%)
rename public/{data => examples/ts}/doc-example/pictorialBar-position.js (100%)
rename public/{data => examples/ts}/doc-example/pictorialBar-repeat.js (100%)
rename public/{data => examples/ts}/doc-example/pictorialBar-repeatDirection.js (100%)
rename public/{data => examples/ts}/doc-example/pictorialBar-repeatLayout.js (100%)
rename public/{data => examples/ts}/doc-example/pictorialBar-symbolBoundingDataArray.js (100%)
rename public/{data => examples/ts}/doc-example/pictorialBar-symbolSize.js (100%)
rename public/{data => examples/ts}/doc-example/pie-highlight.js (100%)
rename public/{data => examples/ts}/doc-example/pie-label-bleedMargin.js (100%)
rename public/{data => examples/ts}/doc-example/pie-label-distanceToLabelLine.js (100%)
rename public/{data => examples/ts}/doc-example/pie-label-margin.js (100%)
rename public/{data => examples/ts}/doc-example/pie-media.js (100%)
rename public/{data => examples/ts}/doc-example/polar-anticlockwise.js (100%)
rename public/{data => examples/ts}/doc-example/polar-start-angle.js (100%)
rename public/{data => examples/ts}/doc-example/radar.js (100%)
rename public/{data => examples/ts}/doc-example/scatter-dataZoom-all.js (100%)
rename public/{data => examples/ts}/doc-example/scatter-tutorial-dataZoom-1.js (100%)
rename public/{data => examples/ts}/doc-example/scatter-tutorial-dataZoom-2.js (100%)
rename public/{data => examples/ts}/doc-example/scatter-tutorial-dataZoom-3.js (100%)
rename public/{data => examples/ts}/doc-example/scatter-visualMap-categories.js (100%)
rename public/{data => examples/ts}/doc-example/scatter-visualMap-piecewise.js (100%)
create mode 100644 public/examples/ts/doc-example/sunburst-color.js
rename public/{data => examples/ts}/doc-example/sunburst-highlight-ancestor.js (100%)
rename public/{data => examples/ts}/doc-example/sunburst-highlight-descendant.js (100%)
rename public/{data => examples/ts}/doc-example/sunburst-label-align.js (100%)
create mode 100644 public/examples/ts/doc-example/sunburst-simple.js
rename public/{data => examples/ts}/doc-example/text-block-fragment.js (100%)
rename public/{data => examples/ts}/doc-example/text-fregment-align.js (100%)
rename public/{data => examples/ts}/doc-example/text-options.js (100%)
create mode 100644 public/examples/ts/doc-example/timeline-dynamic-series.js
rename public/{data => examples/ts}/doc-example/title-block.js (100%)
rename public/{data => examples/ts}/doc-example/treemap-borderColor.js (100%)
rename public/{data => examples/ts}/doc-example/tutorial-async.js (100%)
rename public/{data => examples/ts}/doc-example/tutorial-dynamic-data.js (100%)
rename public/{data => examples/ts}/doc-example/tutorial-loading.js (100%)
rename public/{data => examples/ts}/doc-example/tutorial-styling-step0.js (100%)
rename public/{data => examples/ts}/doc-example/tutorial-styling-step1.js (100%)
rename public/{data => examples/ts}/doc-example/tutorial-styling-step2.js (100%)
rename public/{data => examples/ts}/doc-example/tutorial-styling-step3.js (100%)
rename public/{data => examples/ts}/doc-example/tutorial-styling-step4.js (100%)
rename public/{data => examples/ts}/doc-example/tutorial-styling-step5.js (100%)
rename public/{data => examples/ts}/doc-example/value-animation-simple.js (100%)
create mode 100644 public/examples/ts/dynamic-data.ts
create mode 100644 public/examples/ts/dynamic-data2.ts
create mode 100644 public/examples/ts/effectScatter-bmap.ts
create mode 100644 public/examples/ts/effectScatter-map.ts
create mode 100644 public/examples/ts/funnel-align.ts
create mode 100644 public/examples/ts/funnel-customize.ts
create mode 100644 public/examples/ts/funnel-mutiple.ts
create mode 100644 public/examples/ts/funnel.ts
create mode 100644 public/examples/ts/gauge-barometer.ts
create mode 100644 public/examples/ts/gauge-car.ts
create mode 100644 public/examples/ts/gauge-clock.ts
create mode 100644 public/examples/ts/gauge-grade.ts
create mode 100644 public/examples/ts/gauge-multi-title.ts
create mode 100644 public/examples/ts/gauge-progress.ts
create mode 100644 public/examples/ts/gauge-ring.ts
create mode 100644 public/examples/ts/gauge-simple.ts
create mode 100644 public/examples/ts/gauge-speed.ts
create mode 100644 public/examples/ts/gauge-stage.ts
create mode 100644 public/examples/ts/gauge-temperature.ts
create mode 100644 public/examples/ts/gauge.ts
create mode 100644 public/examples/ts/geo-beef-cuts.ts
create mode 100644 public/examples/ts/geo-lines.js
create mode 100644 public/examples/ts/geo-map-scatter.js
create mode 100644 public/examples/ts/geo-organ.js
create mode 100644 public/examples/ts/geo-seatmap-flight.ts
create mode 100644 public/examples/ts/geo-svg-lines.ts
create mode 100644 public/examples/ts/geo-svg-map.ts
create mode 100644 public/examples/ts/geo-svg-scatter-simple.ts
create mode 100644 public/examples/ts/geo-svg-traffic.ts
create mode 100644 public/examples/ts/gl/animating-contour-on-globe.js
create mode 100644 public/examples/ts/gl/bar3d-dataset.js
create mode 100644 public/examples/ts/gl/bar3d-global-population.js
create mode 100644 public/examples/ts/gl/bar3d-mapbox-view-change.js
create mode 100644 public/examples/ts/gl/bar3d-music-visualization.js
create mode 100644 public/examples/ts/gl/bar3d-myth.js
create mode 100644 public/examples/ts/gl/bar3d-noise-modified-from-marpi-demo.js
create mode 100644 public/examples/ts/gl/bar3d-on-mapbox.js
create mode 100644 public/examples/ts/gl/bar3d-punch-card.js
create mode 100644 public/examples/ts/gl/bar3d-shanghai.js
create mode 100644 public/examples/ts/gl/bar3d-simplex-noise.js
create mode 100644 public/examples/ts/gl/bar3d-voxelize-image.js
create mode 100644 public/examples/ts/gl/flowGL-noise.js
create mode 100644 public/examples/ts/gl/geo3d-with-different-height.js
create mode 100644 public/examples/ts/gl/geo3d.js
create mode 100644 public/examples/ts/gl/global-population-bar3d-on-globe.js
create mode 100644 public/examples/ts/gl/global-wind-visualization-2.js
create mode 100644 public/examples/ts/gl/global-wind-visualization.js
create mode 100644 public/examples/ts/gl/globe-atmosphere.js
create mode 100644 public/examples/ts/gl/globe-contour-paint.js
create mode 100644 public/examples/ts/gl/globe-country-carousel.js
create mode 100644 public/examples/ts/gl/globe-displacement.js
create mode 100644 public/examples/ts/gl/globe-echarts-gl-hello-world.js
create mode 100644 public/examples/ts/gl/globe-layers.js
create mode 100644 public/examples/ts/gl/globe-moon.js
create mode 100644 public/examples/ts/gl/globe-with-echarts-surface.js
create mode 100644 public/examples/ts/gl/graphgl-gpu-layout.js
create mode 100644 public/examples/ts/gl/graphgl-large-internet.js
create mode 100644 public/examples/ts/gl/graphgl-npm-dep.js
create mode 100644 public/examples/ts/gl/image-surface-sushuang.js
create mode 100644 public/examples/ts/gl/image-to-bar3d.js
create mode 100644 public/examples/ts/gl/iron-globe.js
create mode 100644 public/examples/ts/gl/line3d-orthographic.js
create mode 100644 public/examples/ts/gl/lines3d-airline-on-globe.js
create mode 100644 public/examples/ts/gl/lines3d-flight-path-on-mapbox.js
create mode 100644 public/examples/ts/gl/lines3d-flights-gl.js
create mode 100644 public/examples/ts/gl/lines3d-flights-on-geo3d.js
create mode 100644 public/examples/ts/gl/lines3d-flights.js
create mode 100644 public/examples/ts/gl/lines3d-taxi-chengdu.js
create mode 100644 public/examples/ts/gl/lines3d-taxi-routes-of-cape-town.js
create mode 100644 public/examples/ts/gl/linesGL-ny.js
create mode 100644 public/examples/ts/gl/map3d-alcohol-consumption.js
create mode 100644 public/examples/ts/gl/map3d-buildings-on-mapbox.js
create mode 100644 public/examples/ts/gl/map3d-buildings.js
create mode 100644 public/examples/ts/gl/map3d-colorful-cities.js
create mode 100644 public/examples/ts/gl/map3d-plastic-material-style-buildings-on-mapbox.js
create mode 100644 public/examples/ts/gl/map3d-wood-city.js
create mode 100644 public/examples/ts/gl/map3d-wood-map-on-mapbox.js
create mode 100644 public/examples/ts/gl/map3d-wood-map.js
create mode 100644 public/examples/ts/gl/metal-bar3d.js
create mode 100644 public/examples/ts/gl/metal-surface.js
create mode 100644 public/examples/ts/gl/parametric-surface-rose.js
create mode 100644 public/examples/ts/gl/scatter3D-dataset.js
create mode 100644 public/examples/ts/gl/scatter3d-globe-population.js
create mode 100644 public/examples/ts/gl/scatter3d-orthographic.js
create mode 100644 public/examples/ts/gl/scatter3d-scatter.js
create mode 100644 public/examples/ts/gl/scatter3d-shanghai.js
create mode 100644 public/examples/ts/gl/scatter3d-simplex-noise.js
create mode 100644 public/examples/ts/gl/scatter3d-weibo-checkin-on-mapbox.js
create mode 100644 public/examples/ts/gl/scatter3d.js
create mode 100644 public/examples/ts/gl/scatterGL-gps.js
create mode 100644 public/examples/ts/gl/scattergl-weibo.js
create mode 100644 public/examples/ts/gl/simple-surface.js
create mode 100644 public/examples/ts/gl/sphere-parametric-surface.js
create mode 100644 public/examples/ts/gl/stacked-bar3d.js
create mode 100644 public/examples/ts/gl/surface-breather.js
create mode 100644 public/examples/ts/gl/surface-golden-rose.js
create mode 100644 public/examples/ts/gl/surface-leather.js
create mode 100644 public/examples/ts/gl/surface-mollusc-shell.js
create mode 100644 public/examples/ts/gl/surface-theme-roses.js
create mode 100644 public/examples/ts/gl/surface-wave.js
create mode 100644 public/examples/ts/gl/transparent-bar3d.js
create mode 100644 public/examples/ts/graph-circular-layout.ts
create mode 100644 public/examples/ts/graph-force-dynamic.ts
create mode 100644 public/examples/ts/graph-force.ts
create mode 100644 public/examples/ts/graph-force2.ts
create mode 100644 public/examples/ts/graph-grid.ts
create mode 100644 public/examples/ts/graph-label-overlap.ts
create mode 100644 public/examples/ts/graph-life-expectancy.ts
create mode 100644 public/examples/ts/graph-npm.ts
create mode 100644 public/examples/ts/graph-simple.ts
create mode 100644 public/examples/ts/graph-webkit-dep.ts
create mode 100644 public/examples/ts/graph.ts
create mode 100644 public/examples/ts/grid-multiple.ts
create mode 100644 public/examples/ts/heatmap-bmap.js
create mode 100644 public/examples/ts/heatmap-cartesian.ts
create mode 100644 public/examples/ts/heatmap-large-piecewise.js
create mode 100644 public/examples/ts/heatmap-large.js
create mode 100644 public/examples/ts/heatmap-map.js
create mode 100644 public/examples/ts/line-aqi.ts
create mode 100644 public/examples/ts/line-draggable.ts
create mode 100644 public/examples/ts/line-easing.ts
create mode 100644 public/examples/ts/line-function.ts
create mode 100644 public/examples/ts/line-gradient.ts
create mode 100644 public/examples/ts/line-graphic.ts
create mode 100644 public/examples/ts/line-in-cartesian-coordinate-system.ts
create mode 100644 public/examples/ts/line-log.ts
create mode 100644 public/examples/ts/line-marker.ts
create mode 100644 public/examples/ts/line-markline.ts
create mode 100644 public/examples/ts/line-pen.ts
create mode 100644 public/examples/ts/line-polar.ts
create mode 100644 public/examples/ts/line-polar2.ts
create mode 100644 public/examples/ts/line-race.ts
create mode 100644 public/examples/ts/line-sections.ts
create mode 100644 public/examples/ts/line-simple.ts
create mode 100644 public/examples/ts/line-smooth.ts
create mode 100644 public/examples/ts/line-stack.ts
create mode 100644 public/examples/ts/line-step.ts
create mode 100644 public/examples/ts/line-style.ts
create mode 100644 public/examples/ts/line-tooltip-touch.ts
create mode 100644 public/examples/ts/line-y-category.ts
create mode 100644 public/examples/ts/lines-airline.ts
create mode 100644 public/examples/ts/lines-bmap-bus.ts
create mode 100644 public/examples/ts/lines-bmap-effect.ts
create mode 100644 public/examples/ts/lines-bmap.ts
create mode 100644 public/examples/ts/lines-ny.ts
create mode 100644 public/examples/ts/map-HK.ts
create mode 100644 public/examples/ts/map-bar-morph.ts
create mode 100644 public/examples/ts/map-bin.js
create mode 100644 public/examples/ts/map-china-dataRange.js
create mode 100644 public/examples/ts/map-china.js
create mode 100644 public/examples/ts/map-labels.js
create mode 100644 public/examples/ts/map-locate.js
create mode 100644 public/examples/ts/map-polygon.js
create mode 100644 public/examples/ts/map-province.js
create mode 100644 public/examples/ts/map-usa.ts
create mode 100644 public/examples/ts/map-world-dataRange.js
create mode 100644 public/examples/ts/map-world.js
create mode 100644 public/examples/ts/mix-line-bar.ts
create mode 100644 public/examples/ts/mix-timeline-finance.js
create mode 100644 public/examples/ts/mix-zoom-on-value.ts
create mode 100644 public/examples/ts/multiple-x-axis.ts
create mode 100644 public/examples/ts/multiple-y-axis.ts
create mode 100644 public/examples/ts/parallel-aqi.ts
create mode 100644 public/examples/ts/parallel-nutrients.ts
create mode 100644 public/examples/ts/parallel-simple.ts
create mode 100644 public/examples/ts/pictorialBar-bar-transition.ts
create mode 100644 public/examples/ts/pictorialBar-body-fill.ts
create mode 100644 public/examples/ts/pictorialBar-dotted.ts
create mode 100644 public/examples/ts/pictorialBar-forest.ts
create mode 100644 public/examples/ts/pictorialBar-hill.ts
create mode 100644 public/examples/ts/pictorialBar-spirit.ts
create mode 100644 public/examples/ts/pictorialBar-vehicle.ts
create mode 100644 public/examples/ts/pictorialBar-velocity.ts
create mode 100644 public/examples/ts/pie-alignTo.ts
create mode 100644 public/examples/ts/pie-borderRadius.ts
create mode 100644 public/examples/ts/pie-custom.ts
create mode 100644 public/examples/ts/pie-doughnut.ts
create mode 100644 public/examples/ts/pie-labelLine-adjust.ts
create mode 100644 public/examples/ts/pie-legend.ts
create mode 100644 public/examples/ts/pie-nest.ts
create mode 100644 public/examples/ts/pie-parliament-transition.ts
create mode 100644 public/examples/ts/pie-pattern.ts
create mode 100644 public/examples/ts/pie-rich-text.ts
create mode 100644 public/examples/ts/pie-roseType-simple.ts
create mode 100644 public/examples/ts/pie-roseType.ts
create mode 100644 public/examples/ts/pie-simple.ts
create mode 100644 public/examples/ts/polar-roundCap.ts
create mode 100644 public/examples/ts/radar-aqi.ts
create mode 100644 public/examples/ts/radar-custom.ts
create mode 100644 public/examples/ts/radar-multiple.ts
create mode 100644 public/examples/ts/radar.ts
create mode 100644 public/examples/ts/radar2.ts
create mode 100644 public/examples/ts/sankey-energy.ts
create mode 100644 public/examples/ts/sankey-itemstyle.ts
create mode 100644 public/examples/ts/sankey-levels.ts
create mode 100644 public/examples/ts/sankey-nodeAlign-left.ts
create mode 100644 public/examples/ts/sankey-nodeAlign-right.ts
create mode 100644 public/examples/ts/sankey-simple.ts
create mode 100644 public/examples/ts/sankey-vertical.ts
create mode 100644 public/examples/ts/scatter-aggregate-bar.ts
create mode 100644 public/examples/ts/scatter-anscombe-quartet.ts
create mode 100644 public/examples/ts/scatter-aqi-color.ts
create mode 100644 public/examples/ts/scatter-clustering-process.js
create mode 100644 public/examples/ts/scatter-clustering.ts
create mode 100644 public/examples/ts/scatter-effect.ts
create mode 100644 public/examples/ts/scatter-exponential-regression.ts
create mode 100644 public/examples/ts/scatter-label-align-right.ts
create mode 100644 public/examples/ts/scatter-label-align-top.ts
create mode 100644 public/examples/ts/scatter-large.ts
create mode 100644 public/examples/ts/scatter-life-expectancy-timeline.js
create mode 100644 public/examples/ts/scatter-linear-regression.ts
create mode 100644 public/examples/ts/scatter-logarithmic-regression.ts
create mode 100644 public/examples/ts/scatter-map-brush.ts
create mode 100644 public/examples/ts/scatter-map.js
create mode 100644 public/examples/ts/scatter-matrix.ts
create mode 100644 public/examples/ts/scatter-nebula.ts
create mode 100644 public/examples/ts/scatter-nutrients-matrix.ts
create mode 100644 public/examples/ts/scatter-nutrients.ts
create mode 100644 public/examples/ts/scatter-painter-choice.ts
create mode 100644 public/examples/ts/scatter-polar-punchCard.ts
create mode 100644 public/examples/ts/scatter-polynomial-regression.ts
create mode 100644 public/examples/ts/scatter-punchCard.ts
create mode 100644 public/examples/ts/scatter-simple.ts
create mode 100644 public/examples/ts/scatter-single-axis.ts
create mode 100644 public/examples/ts/scatter-stream-visual.ts
create mode 100644 public/examples/ts/scatter-symbol-morph.ts
create mode 100644 public/examples/ts/scatter-weibo.ts
create mode 100644 public/examples/ts/scatter-weight.ts
create mode 100644 public/examples/ts/scatter-world-population.js
create mode 100644 public/examples/ts/sunburst-book.js
create mode 100644 public/examples/ts/sunburst-borderRadius.ts
create mode 100644 public/examples/ts/sunburst-drink.ts
create mode 100644 public/examples/ts/sunburst-label-rotate.ts
create mode 100644 public/examples/ts/sunburst-monochrome.ts
create mode 100644 public/examples/ts/sunburst-simple.ts
create mode 100644 public/examples/ts/sunburst-visualMap.ts
create mode 100644 public/examples/ts/themeRiver-basic.ts
create mode 100644 public/examples/ts/themeRiver-lastfm.ts
create mode 100644 public/examples/ts/tree-basic.ts
create mode 100644 public/examples/ts/tree-legend.ts
create mode 100644 public/examples/ts/tree-orient-bottom-top.ts
create mode 100644 public/examples/ts/tree-orient-right-left.ts
create mode 100644 public/examples/ts/tree-polyline.ts
create mode 100644 public/examples/ts/tree-radial.ts
create mode 100644 public/examples/ts/tree-vertical.ts
create mode 100644 public/examples/ts/treemap-disk.ts
create mode 100644 public/examples/ts/treemap-drill-down.ts
create mode 100644 public/examples/ts/treemap-obama.ts
create mode 100644 public/examples/ts/treemap-show-parent.ts
create mode 100644 public/examples/ts/treemap-simple.ts
create mode 100644 public/examples/ts/treemap-sunburst-transition.ts
create mode 100644 public/examples/ts/treemap-visual.ts
create mode 100644 public/examples/ts/watermark.ts
create mode 100644 public/examples/ts/wind-barb.ts
create mode 100644 public/examples/tsconfig.json
create mode 100644 public/examples/types/example.d.ts
delete mode 100644 public/types/echarts.d.ts
create mode 100644 src/common/route.js
create mode 100644 tool/compile-example.js
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-examples] 14/15: feat: add doc link in full option tab
Posted by sh...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
commit ecc739d7e8b97a797711de6e00540ba09b4148fa
Author: pissang <bm...@gmail.com>
AuthorDate: Fri Sep 10 10:35:20 2021 +0800
feat: add doc link in full option tab
---
package-lock.json | 9 ++++----
package.json | 2 +-
src/common/i18n.js | 8 +++++--
src/editor/Editor.vue | 47 ++++++++++++++++++++++++++++++++++++++++
src/editor/object-visualizer.css | 2 --
5 files changed, 58 insertions(+), 10 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 215c765..816d08d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1160,9 +1160,9 @@
}
},
"@lang/object-visualizer": {
- "version": "3.1.1",
- "resolved": "https://registry.npmjs.org/@lang/object-visualizer/-/object-visualizer-3.1.1.tgz",
- "integrity": "sha512-1RF04RA8Y7AloIGwKau+ilIoZl0DBf8c1v8V+uG7bUpWobBdQyPTbYTFXtZoBsDVObTHXJIWA/pdURGj/N+usg=="
+ "version": "4.2.0",
+ "resolved": "https://registry.npmjs.org/@lang/object-visualizer/-/object-visualizer-4.2.0.tgz",
+ "integrity": "sha512-3HA0K07owSIyMW+lysthxktvqdHmAcpv60yX92VdsgKWD4bSQ6FeZgGi0tLmw9Mk6bzm4XZGGwJywWXNjaVl4w=="
},
"@nodelib/fs.scandir": {
"version": "2.1.3",
@@ -5520,8 +5520,7 @@
"prettier": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz",
- "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==",
- "dev": true
+ "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ=="
},
"process-nextick-args": {
"version": "2.0.1",
diff --git a/package.json b/package.json
index 90c55fe..e21ff0c 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
"yargs": "^6.6.0"
},
"dependencies": {
- "@lang/object-visualizer": "^3.1.1",
+ "@lang/object-visualizer": "^4.2.0",
"lodash": "^4.17.19",
"resize-detector": "^0.2.2",
"scroll-into-view": "^1.14.2",
diff --git a/src/common/i18n.js b/src/common/i18n.js
index 097aa08..d99e6d6 100644
--- a/src/common/i18n.js
+++ b/src/common/i18n.js
@@ -26,7 +26,9 @@ export default {
tooltip: {
jsMode: 'JavaScript',
tsMode: 'TypeScript. Provides Better Intelligent',
- noTs: 'No Available TypeScript Code'
+ noTs: 'No Available TypeScript Code',
+
+ gotoDoc: 'Go To Documentation'
},
codeChangedConfirm:
@@ -104,7 +106,9 @@ export default {
tooltip: {
jsMode: 'JavaScript 代码编辑',
tsMode: 'TypeScript 代码编辑，提供更好的代码补全和类型检查',
- noTs: '该示例暂无 TypeScript 版本'
+ noTs: '该示例暂无 TypeScript 版本',
+
+ gotoDoc: '查看文档'
},
codeChangedConfirm: '已经修改过的代码将会丢失，是否确认继续？',
diff --git a/src/editor/Editor.vue b/src/editor/Editor.vue
index 91c3e7c..25cd2e3 100644
--- a/src/editor/Editor.vue
+++ b/src/editor/Editor.vue
@@ -280,6 +280,7 @@ export default {
if (!option) {
return;
}
+ const tipTitle = this.$t('editor.tooltip.gotoDoc');
mount(option, this.$el.querySelector('#option-outline'), {
getKeys(object, path) {
return Object.keys(object).filter((key) => {
@@ -289,6 +290,43 @@ export default {
return true;
});
},
+ renderName(name, path) {
+ let obj = option;
+ let hash = [];
+ let isTopLevel = true;
+ for (let i = 0; i < path.length; i++) {
+ let key = path[i];
+ obj = obj[key];
+
+ if (obj == null) {
+ hash.push(key);
+ break;
+ }
+
+ if (Array.isArray(obj) && isTopLevel) {
+ // Get type of component / series.
+ const item = obj[path[i + 1]];
+ const type = item && item.type;
+ if (type) {
+ key += '-' + type;
+ i++;
+ obj = item;
+ }
+ } else if (!isNaN(key)) {
+ // Ignore data[0]
+ continue;
+ }
+ hash.push(key);
+ }
+
+ const isObjOrArray = typeof obj === 'object' && obj != null;
+ const link = `https://echarts.apache.org/zh/option.html#${hash.join(
+ '.'
+ )}`;
+ return !isObjOrArray
+ ? `<a href="${link}" target="_blank" title="${tipTitle}">${name}</a>`
+ : `${name}<a href="${link}" target="_blank" title="${tipTitle}"><i class="el-icon-document"></i></a>`;
+ },
expandOnCreatedAndUpdated(path) {
return (
path.length === 0 || (path[0] === 'series' && path.length <= 1)
@@ -479,6 +517,15 @@ $handler-width: 5px;
font-family: 'Source Code Pro', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas',
monospace;
+
+ .el-icon-document {
+ margin-left: 5px;
+ font-size: 1rem;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
}
#full-code-generate-config {
diff --git a/src/editor/object-visualizer.css b/src/editor/object-visualizer.css
index f135039..fc394e6 100644
--- a/src/editor/object-visualizer.css
+++ b/src/editor/object-visualizer.css
@@ -18,7 +18,6 @@
.key {
/* color: #4078f2; */
color: #111;
- user-select: none;
}
.string > .value {
@@ -38,7 +37,6 @@
.separator {
cursor: pointer;
font-size: 0.8em;
- user-select: none;
color: hsl(0, 0%, 30%);
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-examples] 03/15: format example code
Posted by sh...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
commit 5743f814891088758e986038e655e9207c4c31cf
Author: pissang <bm...@gmail.com>
AuthorDate: Mon Sep 6 14:21:30 2021 +0800
format example code
---
.eslintrc.yaml | 194 ++
.vscode/settings.json | 4 +-
public/examples/ts/area-basic.ts | 30 +-
public/examples/ts/area-pieces.ts | 110 +-
public/examples/ts/area-rainfall.ts | 304 +--
public/examples/ts/area-simple.ts | 126 +-
public/examples/ts/area-stack-gradient.ts | 339 +--
public/examples/ts/area-stack.ts | 182 +-
public/examples/ts/area-time-axis.ts | 100 +-
public/examples/ts/bar-animation-delay.ts | 110 +-
public/examples/ts/bar-background.ts | 34 +-
public/examples/ts/bar-brush.ts | 169 +-
public/examples/ts/bar-data-color.ts | 44 +-
public/examples/ts/bar-drilldown.ts | 167 +-
public/examples/ts/bar-gradient.ts | 143 +-
public/examples/ts/bar-histogram.ts | 247 +-
public/examples/ts/bar-label-rotation.ts | 296 +--
public/examples/ts/bar-large.ts | 150 +-
public/examples/ts/bar-negative.ts | 135 +-
public/examples/ts/bar-negative2.ts | 118 +-
public/examples/ts/bar-polar-label-radial.ts | 58 +-
public/examples/ts/bar-polar-label-tangential.ts | 58 +-
public/examples/ts/bar-polar-real-estate.ts | 184 +-
public/examples/ts/bar-polar-stack-radial.ts | 78 +-
public/examples/ts/bar-polar-stack.ts | 80 +-
public/examples/ts/bar-race-country.ts | 255 +-
public/examples/ts/bar-race.ts | 99 +-
public/examples/ts/bar-rich-text.ts | 265 +-
public/examples/ts/bar-simple.ts | 26 +-
public/examples/ts/bar-stack.ts | 222 +-
public/examples/ts/bar-tick-align.ts | 68 +-
public/examples/ts/bar-waterfall.ts | 108 +-
public/examples/ts/bar-waterfall2.ts | 153 +-
public/examples/ts/bar-y-category-stack.ts | 161 +-
public/examples/ts/bar-y-category.ts | 75 +-
public/examples/ts/bar1.ts | 131 +-
public/examples/ts/boxplot-light-velocity.ts | 151 +-
public/examples/ts/boxplot-light-velocity2.ts | 155 +-
public/examples/ts/boxplot-multi.ts | 182 +-
public/examples/ts/bubble-gradient.ts | 238 +-
public/examples/ts/calendar-charts.ts | 314 ++-
public/examples/ts/calendar-effectscatter.ts | 293 +--
public/examples/ts/calendar-graph.ts | 189 +-
public/examples/ts/calendar-heatmap.ts | 84 +-
public/examples/ts/calendar-horizontal.ts | 107 +-
public/examples/ts/calendar-lunar.ts | 889 ++++---
public/examples/ts/calendar-pie.ts | 178 +-
public/examples/ts/calendar-simple.ts | 52 +-
public/examples/ts/calendar-vertical.ts | 123 +-
public/examples/ts/candlestick-brush.ts | 490 ++--
public/examples/ts/candlestick-large.ts | 361 +--
public/examples/ts/candlestick-sh-2015.ts | 228 +-
public/examples/ts/candlestick-sh.ts | 576 +++--
public/examples/ts/candlestick-simple.ts | 30 +-
public/examples/ts/candlestick-touch.ts | 453 ++--
public/examples/ts/circle-packing-with-d3.ts | 380 +--
public/examples/ts/confidence-band.ts | 152 +-
public/examples/ts/custom-bar-trend.ts | 185 +-
public/examples/ts/custom-calendar-icon.ts | 213 +-
public/examples/ts/custom-cartesian-polygon.js | 96 +-
public/examples/ts/custom-error-bar.js | 197 +-
public/examples/ts/custom-error-scatter.js | 218 +-
public/examples/ts/custom-gantt-flight.js | 969 ++++----
public/examples/ts/custom-gauge.js | 281 +--
public/examples/ts/custom-hexbin.js | 450 ++--
public/examples/ts/custom-ohlc.js | 292 +--
public/examples/ts/custom-polar-heatmap.js | 128 +-
public/examples/ts/custom-profile.js | 193 +-
public/examples/ts/custom-profit.js | 113 +-
public/examples/ts/custom-spiral-race.js | 403 ++--
public/examples/ts/custom-wind.js | 195 +-
public/examples/ts/cycle-plot.js | 203 +-
public/examples/ts/data-transform-aggregate.js | 232 +-
public/examples/ts/data-transform-filter.ts | 147 +-
public/examples/ts/data-transform-multiple-pie.ts | 159 +-
public/examples/ts/data-transform-sort-bar.ts | 60 +-
public/examples/ts/dataset-default.ts | 87 +-
public/examples/ts/dataset-encode0.ts | 80 +-
public/examples/ts/dataset-encode1.ts | 189 +-
public/examples/ts/dataset-link.ts | 140 +-
public/examples/ts/dataset-series-layout-by.ts | 60 +-
public/examples/ts/dataset-simple0.ts | 36 +-
public/examples/ts/dataset-simple1.ts | 36 +-
public/examples/ts/dynamic-data.ts | 246 +-
public/examples/ts/dynamic-data2.ts | 120 +-
public/examples/ts/effectScatter-bmap.ts | 1135 ++++-----
public/examples/ts/effectScatter-map.ts | 974 ++++----
public/examples/ts/funnel-align.ts | 188 +-
public/examples/ts/funnel-customize.ts | 154 +-
public/examples/ts/funnel-mutiple.ts | 184 +-
public/examples/ts/funnel.ts | 118 +-
public/examples/ts/gauge-barometer.ts | 233 +-
public/examples/ts/gauge-car.ts | 1005 ++++----
public/examples/ts/gauge-clock.ts | 414 ++--
public/examples/ts/gauge-grade.ts | 159 +-
public/examples/ts/gauge-multi-title.ts | 125 +-
public/examples/ts/gauge-progress.ts | 169 +-
public/examples/ts/gauge-ring.ts | 161 +-
public/examples/ts/gauge-simple.ts | 42 +-
public/examples/ts/gauge-speed.ts | 98 +-
public/examples/ts/gauge-stage.ts | 118 +-
public/examples/ts/gauge-temperature.ts | 242 +-
public/examples/ts/gauge.ts | 34 +-
public/examples/ts/geo-beef-cuts.ts | 127 +-
public/examples/ts/geo-lines.js | 531 ++--
public/examples/ts/geo-map-scatter.js | 653 +++--
public/examples/ts/geo-organ.js | 133 +-
public/examples/ts/geo-seatmap-flight.ts | 147 +-
public/examples/ts/geo-svg-lines.ts | 149 +-
public/examples/ts/geo-svg-map.ts | 359 +--
public/examples/ts/geo-svg-scatter-simple.ts | 90 +-
public/examples/ts/geo-svg-traffic.ts | 307 +--
public/examples/ts/graph-circular-layout.ts | 100 +-
public/examples/ts/graph-force-dynamic.ts | 76 +-
public/examples/ts/graph-force.ts | 84 +-
public/examples/ts/graph-force2.ts | 86 +-
public/examples/ts/graph-grid.ts | 72 +-
public/examples/ts/graph-label-overlap.ts | 78 +-
public/examples/ts/graph-life-expectancy.ts | 181 +-
public/examples/ts/graph-npm.ts | 84 +-
public/examples/ts/graph-simple.ts | 166 +-
public/examples/ts/graph-webkit-dep.ts | 58 +-
public/examples/ts/graph.ts | 108 +-
public/examples/ts/grid-multiple.ts | 216 +-
public/examples/ts/heatmap-bmap.js | 76 +-
public/examples/ts/heatmap-cartesian.ts | 108 +-
public/examples/ts/heatmap-large-piecewise.js | 418 ++--
public/examples/ts/heatmap-large.js | 402 ++--
public/examples/ts/heatmap-map.js | 862 +++----
public/examples/ts/line-aqi.ts | 194 +-
public/examples/ts/line-draggable.ts | 227 +-
public/examples/ts/line-easing.ts | 467 ++--
public/examples/ts/line-function.ts | 114 +-
public/examples/ts/line-gradient.ts | 129 +-
public/examples/ts/line-graphic.ts | 210 +-
.../ts/line-in-cartesian-coordinate-system.ts | 20 +-
public/examples/ts/line-log.ts | 103 +-
public/examples/ts/line-marker.ts | 149 +-
public/examples/ts/line-markline.ts | 133 +-
public/examples/ts/line-pen.ts | 114 +-
public/examples/ts/line-polar.ts | 59 +-
public/examples/ts/line-polar2.ts | 70 +-
public/examples/ts/line-race.ts | 163 +-
public/examples/ts/line-sections.ts | 168 +-
public/examples/ts/line-simple.ts | 26 +-
public/examples/ts/line-smooth.ts | 28 +-
public/examples/ts/line-stack.ts | 114 +-
public/examples/ts/line-step.ts | 92 +-
public/examples/ts/line-style.ts | 50 +-
public/examples/ts/line-tooltip-touch.ts | 256 +-
public/examples/ts/line-y-category.ts | 88 +-
public/examples/ts/lines-airline.ts | 107 +-
public/examples/ts/lines-bmap-bus.ts | 299 +--
public/examples/ts/lines-bmap-effect.ts | 371 +--
public/examples/ts/lines-bmap.ts | 265 +-
public/examples/ts/lines-ny.ts | 148 +-
public/examples/ts/map-HK.ts | 176 +-
public/examples/ts/map-bar-morph.ts | 260 +-
public/examples/ts/map-bin.js | 395 +--
public/examples/ts/map-china-dataRange.js | 250 +-
public/examples/ts/map-china.js | 36 +-
public/examples/ts/map-labels.js | 294 +--
public/examples/ts/map-locate.js | 76 +-
public/examples/ts/map-polygon.js | 1265 +++++-----
public/examples/ts/map-province.js | 150 +-
public/examples/ts/map-usa.ts | 265 +-
public/examples/ts/map-world-dataRange.js | 459 ++--
public/examples/ts/map-world.js | 404 ++--
public/examples/ts/mix-line-bar.ts | 139 +-
public/examples/ts/mix-timeline-finance.js | 598 ++---
public/examples/ts/mix-zoom-on-value.ts | 166 +-
public/examples/ts/multiple-x-axis.ts | 173 +-
public/examples/ts/multiple-y-axis.ts | 191 +-
public/examples/ts/parallel-aqi.ts | 386 +--
public/examples/ts/parallel-nutrients.ts | 306 ++-
public/examples/ts/parallel-simple.ts | 45 +-
public/examples/ts/pictorialBar-bar-transition.ts | 253 +-
public/examples/ts/pictorialBar-body-fill.ts | 270 ++-
public/examples/ts/pictorialBar-dotted.ts | 178 +-
public/examples/ts/pictorialBar-forest.ts | 170 +-
public/examples/ts/pictorialBar-hill.ts | 214 +-
public/examples/ts/pictorialBar-spirit.ts | 193 +-
public/examples/ts/pictorialBar-vehicle.ts | 200 +-
public/examples/ts/pictorialBar-velocity.ts | 186 +-
public/examples/ts/pie-alignTo.ts | 160 +-
public/examples/ts/pie-borderRadius.ts | 82 +-
public/examples/ts/pie-custom.ts | 118 +-
public/examples/ts/pie-doughnut.ts | 72 +-
public/examples/ts/pie-labelLine-adjust.ts | 162 +-
public/examples/ts/pie-legend.ts | 124 +-
public/examples/ts/pie-nest.ts | 163 +-
public/examples/ts/pie-parliament-transition.ts | 242 +-
public/examples/ts/pie-pattern.ts | 92 +-
public/examples/ts/pie-rich-text.ts | 240 +-
public/examples/ts/pie-roseType-simple.ts | 70 +-
public/examples/ts/pie-roseType.ts | 153 +-
public/examples/ts/pie-simple.ts | 66 +-
public/examples/ts/polar-roundCap.ts | 80 +-
public/examples/ts/radar-aqi.ts | 371 +--
public/examples/ts/radar-custom.ts | 226 +-
public/examples/ts/radar-multiple.ts | 168 +-
public/examples/ts/radar.ts | 66 +-
public/examples/ts/radar2.ts | 128 +-
public/examples/ts/sankey-energy.ts | 52 +-
public/examples/ts/sankey-itemstyle.ts | 2544 ++++++++++----------
public/examples/ts/sankey-levels.ts | 125 +-
public/examples/ts/sankey-nodeAlign-left.ts | 54 +-
public/examples/ts/sankey-nodeAlign-right.ts | 55 +-
public/examples/ts/sankey-simple.ts | 106 +-
public/examples/ts/sankey-vertical.ts | 80 +-
public/examples/ts/scatter-aggregate-bar.ts | 134 +-
public/examples/ts/scatter-anscombe-quartet.ts | 255 +-
public/examples/ts/scatter-aqi-color.ts | 458 ++--
public/examples/ts/scatter-clustering-process.js | 405 ++--
public/examples/ts/scatter-clustering.ts | 221 +-
public/examples/ts/scatter-effect.ts | 40 +-
.../examples/ts/scatter-exponential-regression.ts | 146 +-
public/examples/ts/scatter-label-align-right.ts | 93 +-
public/examples/ts/scatter-label-align-top.ts | 80 +-
public/examples/ts/scatter-large.ts | 114 +-
.../ts/scatter-life-expectancy-timeline.js | 309 +--
public/examples/ts/scatter-linear-regression.ts | 507 ++--
.../examples/ts/scatter-logarithmic-regression.ts | 244 +-
public/examples/ts/scatter-map-brush.ts | 1389 ++++++-----
public/examples/ts/scatter-map.js | 908 +++----
public/examples/ts/scatter-matrix.ts | 528 ++--
public/examples/ts/scatter-nebula.ts | 119 +-
public/examples/ts/scatter-nutrients-matrix.ts | 774 +++---
public/examples/ts/scatter-nutrients.ts | 267 +-
public/examples/ts/scatter-painter-choice.ts | 77 +-
public/examples/ts/scatter-polar-punchCard.ts | 117 +-
.../examples/ts/scatter-polynomial-regression.ts | 141 +-
public/examples/ts/scatter-punchCard.ts | 123 +-
public/examples/ts/scatter-simple.ts | 65 +-
public/examples/ts/scatter-single-axis.ts | 86 +-
public/examples/ts/scatter-stream-visual.ts | 88 +-
public/examples/ts/scatter-symbol-morph.ts | 189 +-
public/examples/ts/scatter-weibo.ts | 119 +-
public/examples/ts/scatter-weight.ts | 511 ++--
public/examples/ts/scatter-world-population.js | 985 ++++----
public/examples/ts/sunburst-book.js | 561 +++--
public/examples/ts/sunburst-borderRadius.ts | 84 +-
public/examples/ts/sunburst-drink.ts | 729 +++---
public/examples/ts/sunburst-label-rotate.ts | 194 +-
public/examples/ts/sunburst-monochrome.ts | 250 +-
public/examples/ts/sunburst-simple.ts | 82 +-
public/examples/ts/sunburst-visualMap.ts | 127 +-
public/examples/ts/themeRiver-basic.ts | 259 +-
public/examples/ts/themeRiver-lastfm.ts | 123 +-
public/examples/ts/tree-basic.ts | 100 +-
public/examples/ts/tree-legend.ts | 429 ++--
public/examples/ts/tree-orient-bottom-top.ts | 81 +-
public/examples/ts/tree-orient-right-left.ts | 86 +-
public/examples/ts/tree-polyline.ts | 310 ++-
public/examples/ts/tree-radial.ts | 50 +-
public/examples/ts/tree-vertical.ts | 92 +-
public/examples/ts/treemap-disk.ts | 127 +-
public/examples/ts/treemap-drill-down.ts | 157 +-
public/examples/ts/treemap-obama.ts | 355 +--
public/examples/ts/treemap-show-parent.ts | 157 +-
public/examples/ts/treemap-simple.ts | 64 +-
public/examples/ts/treemap-sunburst-transition.ts | 80 +-
public/examples/ts/treemap-visual.ts | 204 +-
public/examples/ts/watermark.ts | 390 +--
public/examples/ts/wind-barb.ts | 510 ++--
src/common/config.js | 2 +-
src/editor/CodeMonaco.vue | 1 +
267 files changed, 31570 insertions(+), 28787 deletions(-)
diff --git a/.eslintrc.yaml b/.eslintrc.yaml
new file mode 100644
index 0000000..e4a2cee
--- /dev/null
+++ b/.eslintrc.yaml
@@ -0,0 +1,194 @@
+# Note:
+# If eslint does not work in VSCode, please check:
+# (1) Whether "@typescript-eslint/eslint-plugin" and "@typescript-eslint/parser"
+# are npm installed locally. Should better in the same version.
+# (2) Whether "VSCode ESlint extension" is installed.
+# (3) If the project folder is not the root folder of your working space, please
+# config the "VSCode ESlint extension" in "settings":
+# ```json
+# "eslint.workingDirectories": [{"mode": "auto"}]
+# ```
+# Note that it should be "workingDirectories" rather than "WorkingDirectories".
+
+rules:
+ # Check the rules in: node_modules/@typescript-eslint/eslint-plugin/README.md
+ no-console:
+ - 2
+ -
+ allow:
+ - "warn"
+ - "error"
+ prefer-const: 1
+ no-constant-condition: 0
+ comma-dangle: 2
+ no-debugger: 2
+ no-dupe-keys: 2
+ no-empty-character-class: 2
+ no-ex-assign: 2
+ no-extra-boolean-cast: 0
+ no-func-assign: 2
+ no-inner-declarations: 2
+ no-invalid-regexp: 2
+ no-negated-in-lhs: 2
+ no-obj-calls: 2
+ no-sparse-arrays: 2
+ no-unreachable: 2
+ use-isnan: 2
+ valid-typeof: 2
+ block-scoped-var: 2
+ curly:
+ - 2
+ - "all"
+ eqeqeq:
+ - 2
+ - "allow-null"
+ guard-for-in: 2
+ no-else-return: 0
+ no-labels:
+ - 2
+ -
+ allowLoop: true
+ no-eval: 2
+ no-extend-native: 2
+ no-extra-bind: 0
+ no-implied-eval: 2
+ no-iterator: 2
+ no-irregular-whitespace: 2
+ no-lone-blocks: 2
+ no-loop-func: 2
+ no-multi-str: 2
+ no-native-reassign: 2
+ no-new-wrappers: 2
+ no-octal: 2
+ no-octal-escape: 2
+ no-proto: 2
+ no-redeclare: 2
+ no-self-compare: 2
+ no-unneeded-ternary: 2
+ no-with: 2
+ radix: 2
+ wrap-iife:
+ - 2
+ - "any"
+ no-delete-var: 2
+ no-dupe-args: 2
+ no-duplicate-case: 2
+ no-label-var: 2
+ no-shadow-restricted-names: 2
+ no-undef: 2
+ no-undef-init: 2
+ "no-use-before-define": 0
+ brace-style:
+ - 2
+ - "stroustrup"
+ - {}
+ comma-spacing:
+ - 2
+ -
+ before: false
+ after: true
+ comma-style:
+ - 2
+ - "last"
+ new-parens: 2
+ no-array-constructor: 2
+ no-multi-spaces:
+ - 1
+ -
+ ignoreEOLComments: true
+ exceptions:
+ Property: true
+ no-new-object: 2
+ no-trailing-spaces: 2
+ no-extra-parens:
+ - 2
+ - "functions"
+ no-mixed-spaces-and-tabs: 2
+ one-var:
+ - 2
+ - "never"
+ operator-linebreak:
+ - 2
+ - "before"
+ -
+ overrides:
+ "=": "after"
+ "quotes":
+ - 2
+ - "single"
+ "semi":
+ - 2
+ - "always"
+ semi-spacing: 2
+ keyword-spacing: 2
+ key-spacing:
+ - 2
+ -
+ beforeColon: false
+ afterColon: true
+ "space-before-function-paren":
+ - 2
+ -
+ anonymous: "always"
+ named: "never"
+ space-before-blocks:
+ - 2
+ - "always"
+ computed-property-spacing:
+ - 2
+ - "never"
+ space-in-parens:
+ - 2
+ - "never"
+ space-unary-ops: 2
+ spaced-comment: 0
+
+ max-nested-callbacks:
+ - 1
+ - 5
+ max-depth:
+ - 1
+ - 6
+ max-len:
+ - 2
+ - 120
+ - 4
+ -
+ ignoreUrls: true
+ ignoreComments: true
+ max-params:
+ - 1
+ - 15
+
+ space-infix-ops: 2
+ dot-notation:
+ - 2
+ -
+ allowKeywords: true
+ allowPattern: "^catch$"
+
+ arrow-spacing: 2
+ constructor-super: 2
+ no-confusing-arrow:
+ - 2
+ -
+ allowParens: true
+ no-class-assign: 2
+ no-const-assign: 2
+ # no-dupe-class-members: 2
+ no-this-before-super: 0
+ no-duplicate-imports: 2
+ prefer-rest-params: 0
+ unicode-bom: 2
+ max-statements-per-line: 2
+
+ no-useless-constructor: 0
+ indent: ["warn", 4]
+
+ "func-call-spacing": "error"
+
+ "no-unused-vars":
+ - 1
+ -
+ vars: "local"
+ args: "none"
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 1b6457c..afd540a 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,6 @@
{
"editor.formatOnSave": true,
- "editor.defaultFormatter": "esbenp.prettier-vscode"
+ "editor.defaultFormatter": "esbenp.prettier-vscode",
+ "editor.tabSize": 2,
+ "editor.detectIndentation": false
}
diff --git a/public/examples/ts/area-basic.ts b/public/examples/ts/area-basic.ts
index 13cfbc5..32c848f 100644
--- a/public/examples/ts/area-basic.ts
+++ b/public/examples/ts/area-basic.ts
@@ -6,19 +6,21 @@ 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: {}
- }]
+ 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
+export {};
diff --git a/public/examples/ts/area-pieces.ts b/public/examples/ts/area-pieces.ts
index 70f3ea5..b621430 100644
--- a/public/examples/ts/area-pieces.ts
+++ b/public/examples/ts/area-pieces.ts
@@ -6,62 +6,60 @@ 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]
- ]
- }
+ 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
+export {};
diff --git a/public/examples/ts/area-rainfall.ts b/public/examples/ts/area-rainfall.ts
index a8d833b..7dd5632 100644
--- a/public/examples/ts/area-rainfall.ts
+++ b/public/examples/ts/area-rainfall.ts
@@ -6,185 +6,143 @@ difficulty: 5
*/
option = {
- title: {
- text: 'Rainfall and Flow Relationship',
- left: 'center',
- textAlign: 'right'
+ 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
},
- grid: {
- bottom: 80
+ {
+ type: 'inside',
+ realtime: true,
+ start: 65,
+ end: 85
+ }
+ ],
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ axisLine: { onZero: false },
+ // prettier-ignore
+ 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', '20 [...]
+ ].map(function (str) {
+ return str.replace(' ', '\n');
+ })
+ }
+ ],
+ yAxis: [
+ {
+ name: 'Flow(m^3/s)',
+ type: 'value',
+ max: 500
},
- toolbox: {
- feature: {
- dataZoom: {
- yAxisIndex: 'none'
+ {
+ 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'
},
- restore: {},
- saveAsImage: {}
- }
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross',
- animation: false,
- label: {
- backgroundColor: '#505765'
+ {
+ xAxis: '2009/9/22\n7:00'
}
- }
- },
- legend: {
- data: ['Flow', 'Rainfall'],
- left: 10
+ ]
+ ]
+ },
+ // prettier-ignore
+ 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.94,0.94 [...]
+ ]
},
- 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
},
- {
- name: 'Rainfall',
- type: 'line',
- yAxisIndex: 1,
- areaStyle: {},
- lineStyle: {
- width: 1
- },
- emphasis: {
- focus: 'series'
+ data: [
+ [
+ {
+ xAxis: '2009/9/10\n7:00'
},
- 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 [...]
- ]
- }
- ]
+ {
+ xAxis: '2009/9/20\n7:00'
+ }
+ ]
+ ]
+ },
+ // prettier-ignore
+ 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,0.121,0 [...]
+ ]
+ }
+ ]
};
-
-export {}
\ No newline at end of file
+export {};
diff --git a/public/examples/ts/area-simple.ts b/public/examples/ts/area-simple.ts
index 8ab9c88..892fc05 100644
--- a/public/examples/ts/area-simple.ts
+++ b/public/examples/ts/area-simple.ts
@@ -12,69 +12,75 @@ 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]));
+ 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%'];
- }
+ 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
},
- 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
- }
- ]
+ {
+ 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
+export {};
diff --git a/public/examples/ts/area-stack-gradient.ts b/public/examples/ts/area-stack-gradient.ts
index 8ab69ca..16ac77a 100644
--- a/public/examples/ts/area-stack-gradient.ts
+++ b/public/examples/ts/area-stack-gradient.ts
@@ -6,171 +6,186 @@ difficulty: 2
*/
option = {
- color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
- title: {
- text: 'Gradient Stacked Area Chart'
+ 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]
},
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross',
- label: {
- backgroundColor: '#6a7985'
- }
- }
+ {
+ 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]
},
- legend: {
- data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
+ {
+ 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]
},
- toolbox: {
- feature: {
- saveAsImage: {}
- }
+ {
+ 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]
},
- 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]
- }
- ]
+ {
+ 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
+export {};
diff --git a/public/examples/ts/area-stack.ts b/public/examples/ts/area-stack.ts
index 3b0683c..3cb38b2 100644
--- a/public/examples/ts/area-stack.ts
+++ b/public/examples/ts/area-stack.ts
@@ -6,100 +6,100 @@ difficulty: 2
*/
option = {
- title: {
- text: 'Stacked Area Chart'
+ 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]
},
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross',
- label: {
- backgroundColor: '#6a7985'
- }
- }
+ {
+ name: 'Union Ads',
+ type: 'line',
+ stack: 'Total',
+ areaStyle: {},
+ emphasis: {
+ focus: 'series'
+ },
+ data: [220, 182, 191, 234, 290, 330, 310]
},
- legend: {
- data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+ {
+ name: 'Video Ads',
+ type: 'line',
+ stack: 'Total',
+ areaStyle: {},
+ emphasis: {
+ focus: 'series'
+ },
+ data: [150, 232, 201, 154, 190, 330, 410]
},
- toolbox: {
- feature: {
- saveAsImage: {}
- }
+ {
+ name: 'Direct',
+ type: 'line',
+ stack: 'Total',
+ areaStyle: {},
+ emphasis: {
+ focus: 'series'
+ },
+ data: [320, 332, 301, 334, 390, 330, 320]
},
- 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]
- }
- ]
+ {
+ 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
+export {};
diff --git a/public/examples/ts/area-time-axis.ts b/public/examples/ts/area-time-axis.ts
index 17f2a6e..5d12fd1 100644
--- a/public/examples/ts/area-time-axis.ts
+++ b/public/examples/ts/area-time-axis.ts
@@ -11,59 +11,59 @@ 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])
- ]);
+ 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%'];
- }
+ 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
},
- 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
- }
- ]
+ {
+ start: 0,
+ end: 20
+ }
+ ],
+ series: [
+ {
+ name: 'Fake Data',
+ type: 'line',
+ smooth: true,
+ symbol: 'none',
+ areaStyle: {},
+ data: data
+ }
+ ]
};
-export {}
\ No newline at end of file
+export {};
diff --git a/public/examples/ts/bar-animation-delay.ts b/public/examples/ts/bar-animation-delay.ts
index 3002c03..50f1f01 100644
--- a/public/examples/ts/bar-animation-delay.ts
+++ b/public/examples/ts/bar-animation-delay.ts
@@ -9,62 +9,64 @@ 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);
+ xAxisData.push('A' + 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: {
+ 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;
+ }
},
- 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;
+ {
+ name: 'bar2',
+ type: 'bar',
+ data: data2,
+ emphasis: {
+ focus: 'series'
+ },
+ animationDelay: function (idx) {
+ return idx * 10 + 100;
+ }
}
-};
\ No newline at end of file
+ ],
+ animationEasing: 'elasticOut',
+ animationDelayUpdate: function (idx) {
+ return idx * 5;
+ }
+};
diff --git a/public/examples/ts/bar-background.ts b/public/examples/ts/bar-background.ts
index 3c89094..d9a9efb 100644
--- a/public/examples/ts/bar-background.ts
+++ b/public/examples/ts/bar-background.ts
@@ -6,21 +6,23 @@ 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)'
- }
- }]
+ 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 {}
+export {};
diff --git a/public/examples/ts/bar-brush.ts b/public/examples/ts/bar-brush.ts
index abb4cbd..f09b9dd 100644
--- a/public/examples/ts/bar-brush.ts
+++ b/public/examples/ts/bar-brush.ts
@@ -12,104 +12,103 @@ 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));
+ 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)'
- }
+ 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: {}
- }
+ 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
},
- tooltip: {},
- xAxis: {
- data: xAxisData,
- name: 'X Axis',
- axisLine: {onZero: true},
- splitLine: {show: false},
- splitArea: {show: false}
+ {
+ name: 'bar2',
+ type: 'bar',
+ stack: 'one',
+ emphasis: emphasisStyle,
+ data: data2
},
- yAxis: {},
- grid: {
- bottom: 100
+ {
+ name: 'bar3',
+ type: 'bar',
+ stack: 'two',
+ emphasis: emphasisStyle,
+ data: data3
},
- 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
- }
- ]
+ {
+ name: 'bar4',
+ type: 'bar',
+ stack: 'two',
+ emphasis: emphasisStyle,
+ data: data4
+ }
+ ]
};
myChart.on('brushSelected', function (params: any) {
- var brushed = [];
- var brushComponent = params.batch[0];
+ 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(', '));
- }
+ 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'
- }
- }
- });
+ 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
+export {};
diff --git a/public/examples/ts/bar-data-color.ts b/public/examples/ts/bar-data-color.ts
index b5eccae..6f3f224 100644
--- a/public/examples/ts/bar-data-color.ts
+++ b/public/examples/ts/bar-data-color.ts
@@ -6,22 +6,32 @@ 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'
- }]
+ 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
+export {};
diff --git a/public/examples/ts/bar-drilldown.ts b/public/examples/ts/bar-drilldown.ts
index 864766c..d050e33 100644
--- a/public/examples/ts/bar-drilldown.ts
+++ b/public/examples/ts/bar-drilldown.ts
@@ -5,101 +5,110 @@ titleCN: 柱状图下钻动画
difficulty: 5
*/
-
interface DataItem {
- value: number
- groupId: string
+ 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'
- }
+ 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 = [{
+const drilldownData = [
+ {
dataGroupId: 'animals',
data: [
- ['Cats', 4],
- ['Dogs', 2],
- ['Cows', 1],
- ['Sheep', 2],
- ['Pigs', 1]
+ ['Cats', 4],
+ ['Dogs', 2],
+ ['Cows', 1],
+ ['Sheep', 2],
+ ['Pigs', 1]
]
-}, {
+ },
+ {
dataGroupId: 'fruits',
data: [
- ['Apples', 4],
- ['Oranges', 2]
+ ['Apples', 4],
+ ['Oranges', 2]
]
-}, {
+ },
+ {
dataGroupId: 'cars',
data: [
- ['Toyota', 4],
- ['Opel', 2],
- ['Volkswagen', 2]
+ ['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);
- }
- }]
- });
+ 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
+export {};
diff --git a/public/examples/ts/bar-gradient.ts b/public/examples/ts/bar-gradient.ts
index a22168d..c620388 100644
--- a/public/examples/ts/bar-gradient.ts
+++ b/public/examples/ts/bar-gradient.ts
@@ -5,90 +5,87 @@ 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 = [];
+// prettier-ignore
+let dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
+// prettier-ignore
+let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
+let yMax = 500;
+let dataShadow = [];
-for (var i = 0; i < data.length; i++) {
- dataShadow.push(yMax);
+for (let i = 0; i < data.length; i++) {
+ dataShadow.push(yMax);
}
option = {
- title: {
- text: '特性示例：渐变色 阴影 点击缩放',
- subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
+ title: {
+ text: '特性示例：渐变色 阴影 点击缩放',
+ subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
+ },
+ xAxis: {
+ data: dataAxis,
+ axisLabel: {
+ inside: true,
+ color: '#fff'
},
- xAxis: {
- data: dataAxis,
- axisLabel: {
- inside: true,
- color: '#fff'
- },
- axisTick: {
- show: false
- },
- axisLine: {
- show: false
- },
- z: 10
+ axisTick: {
+ show: false
},
- yAxis: {
- axisLine: {
- show: false
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- color: '#999'
- }
+ axisLine: {
+ show: false
},
- 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
+ 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;
+const 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)]
- });
+ 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
+export {};
diff --git a/public/examples/ts/bar-histogram.ts b/public/examples/ts/bar-histogram.ts
index 424db37..b4536ec 100644
--- a/public/examples/ts/bar-histogram.ts
+++ b/public/examples/ts/bar-histogram.ts
@@ -9,119 +9,138 @@ difficulty: 0
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: {
+ 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]
+ ]
},
- 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
- }]
+ {
+ 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/public/examples/ts/bar-label-rotation.ts b/public/examples/ts/bar-label-rotation.ts
index 9218f49..97bd265 100644
--- a/public/examples/ts/bar-label-rotation.ts
+++ b/public/examples/ts/bar-label-rotation.ts
@@ -6,161 +6,175 @@ difficulty: 3
*/
const posList = [
- 'left', 'right', 'top', 'bottom',
- 'inside',
- 'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
- 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
+ '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
+ 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
- }]
- });
- }
+ 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']>
+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: {}
- }
+ 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'
- }
+ 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]
},
- legend: {
- data: ['Forest', 'Steppe', 'Desert', 'Wetland']
+ {
+ name: 'Steppe',
+ type: 'bar',
+ label: labelOption,
+ emphasis: {
+ focus: 'series'
+ },
+ data: [220, 182, 191, 234, 290]
},
- 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}
- }
+ {
+ name: 'Desert',
+ type: 'bar',
+ label: labelOption,
+ emphasis: {
+ focus: 'series'
+ },
+ data: [150, 232, 201, 154, 190]
},
- 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
+ {
+ name: 'Wetland',
+ type: 'bar',
+ label: labelOption,
+ emphasis: {
+ focus: 'series'
+ },
+ data: [98, 77, 101, 99, 40]
+ }
+ ]
+};
diff --git a/public/examples/ts/bar-large.ts b/public/examples/ts/bar-large.ts
index 03be19a..0a05fe3 100644
--- a/public/examples/ts/bar-large.ts
+++ b/public/examples/ts/bar-large.ts
@@ -5,91 +5,95 @@ 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
- }
+ 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'
},
- yAxis: {
- splitArea: {
- show: false
- }
+ {
+ type: 'slider'
+ }
+ ],
+ xAxis: {
+ data: data.categoryData,
+ silent: false,
+ splitLine: {
+ show: false
},
- series: [{
- type: 'bar',
- data: data.valueData,
- // Set `large` for large data amount
- large: true
- }]
+ 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;
+ 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
- );
- }
+ 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 = [];
+ 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;
- }
+ 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
- };
+ return {
+ categoryData: categoryData,
+ valueData: valueData
+ };
}
-export {}
\ No newline at end of file
+export {};
diff --git a/public/examples/ts/bar-negative.ts b/public/examples/ts/bar-negative.ts
index a1c5aa2..57c3dde 100644
--- a/public/examples/ts/bar-negative.ts
+++ b/public/examples/ts/bar-negative.ts
@@ -6,74 +6,75 @@ difficulty: 4
*/
option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: { // 坐标轴指示器，坐标轴触发有效
- type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
- }
+ 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]
},
- legend: {
- data: ['利润', '支出', '收入']
+ {
+ name: '收入',
+ type: 'bar',
+ stack: 'Total',
+ label: {
+ show: true
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ data: [320, 302, 341, 374, 390, 450, 420]
},
- 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]
- }
- ]
+ {
+ 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
+export {};
diff --git a/public/examples/ts/bar-negative2.ts b/public/examples/ts/bar-negative2.ts
index 2d4884d..faf21e0 100644
--- a/public/examples/ts/bar-negative2.ts
+++ b/public/examples/ts/bar-negative2.ts
@@ -6,62 +6,74 @@ difficulty: 2
*/
const labelRight = {
- position: 'right'
+ 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
- ]
- }
+ 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
+export {};
diff --git a/public/examples/ts/bar-polar-label-radial.ts b/public/examples/ts/bar-polar-label-radial.ts
index 9ab4b01..c42a96e 100644
--- a/public/examples/ts/bar-polar-label-radial.ts
+++ b/public/examples/ts/bar-polar-label-radial.ts
@@ -6,33 +6,35 @@ 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
+ 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
+export {};
diff --git a/public/examples/ts/bar-polar-label-tangential.ts b/public/examples/ts/bar-polar-label-tangential.ts
index 9fcd728..aa69c37 100644
--- a/public/examples/ts/bar-polar-label-tangential.ts
+++ b/public/examples/ts/bar-polar-label-tangential.ts
@@ -5,33 +5,35 @@ 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
+ 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
+export {};
diff --git a/public/examples/ts/bar-polar-real-estate.ts b/public/examples/ts/bar-polar-real-estate.ts
index 42d60b2..87ea60d 100644
--- a/public/examples/ts/bar-polar-real-estate.ts
+++ b/public/examples/ts/bar-polar-real-estate.ts
@@ -6,99 +6,111 @@ 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]
+ [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]
];
+// prettier-ignore
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'
+ 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
},
- legend: {
- show: true,
- top: 'bottom',
- data: ['Range', 'Average']
+ {
+ type: 'bar',
+ data: data.map(function (d) {
+ return d[1] - d[0];
+ }),
+ coordinateSystem: 'polar',
+ name: 'Range',
+ stack: 'Min Max'
},
- grid: {
- top: 100
+ {
+ type: 'bar',
+ itemStyle: {
+ color: 'transparent'
+ },
+ data: data.map(function (d) {
+ return d[2] - barHeight;
+ }),
+ coordinateSystem: 'polar',
+ stack: 'Average',
+ silent: true,
+ z: 10
},
- 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
- }]
+ {
+ 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
+export {};
diff --git a/public/examples/ts/bar-polar-stack-radial.ts b/public/examples/ts/bar-polar-stack-radial.ts
index 34a01e4..08519cf 100644
--- a/public/examples/ts/bar-polar-stack-radial.ts
+++ b/public/examples/ts/bar-polar-stack-radial.ts
@@ -6,46 +6,48 @@ difficulty: 7
*/
option = {
- angleAxis: {
- type: 'category',
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ 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'
+ }
},
- radiusAxis: {
+ {
+ type: 'bar',
+ data: [2, 4, 6, 1, 3, 2, 1],
+ coordinateSystem: 'polar',
+ name: 'B',
+ stack: 'a',
+ emphasis: {
+ focus: 'series'
+ }
},
- 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']
+ {
+ 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
+export {};
diff --git a/public/examples/ts/bar-polar-stack.ts b/public/examples/ts/bar-polar-stack.ts
index b81466b..14f4bc4 100644
--- a/public/examples/ts/bar-polar-stack.ts
+++ b/public/examples/ts/bar-polar-stack.ts
@@ -6,47 +6,49 @@ difficulty: 7
*/
option = {
- angleAxis: {
+ 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'
+ }
},
- radiusAxis: {
- type: 'category',
- data: ['Mon', 'Tue', 'Wed', 'Thu'],
- z: 10
+ {
+ type: 'bar',
+ data: [2, 4, 6, 8],
+ coordinateSystem: 'polar',
+ name: 'B',
+ stack: 'a',
+ emphasis: {
+ focus: 'series'
+ }
},
- 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']
+ {
+ 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
+export {};
diff --git a/public/examples/ts/bar-race-country.ts b/public/examples/ts/bar-race-country.ts
index ee402de..15d623d 100644
--- a/public/examples/ts/bar-race-country.ts
+++ b/public/examples/ts/bar-race-country.ts
@@ -7,136 +7,161 @@ 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"};
+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')
+ $.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]);
- }
+ const flags = res0[0];
+ const data = res1[0];
+ const years: string[] = [];
+ for (let 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;
+ function getFlag(countryName: string) {
+ if (!countryName) {
+ return '';
}
- var startIndex = 10;
- var startYear = years[startIndex];
+ return (
+ flags.find(function (item) {
+ return item.name === countryName;
+ }) || {}
+ ).emoji;
+ }
+ let startIndex = 10;
+ let 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) + '';
- }
- }
+ 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) + '}';
},
- dataset: {
- source: data.slice(1).filter(function (d) {
- return d[4] === startYear;
- })
+ 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';
+ }
},
- 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
+ encode: {
+ x: dimension,
+ y: 3
},
- 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
- }]
+ 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);
+ // 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);
- }
+ for (let 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);
- }
-})
+ function updateYear(year: string) {
+ let 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
+export {};
diff --git a/public/examples/ts/bar-race.ts b/public/examples/ts/bar-race.ts
index bc4de3d..a9ff049 100644
--- a/public/examples/ts/bar-race.ts
+++ b/public/examples/ts/bar-race.ts
@@ -9,63 +9,66 @@ videoEnd: 6000
const data: number[] = [];
for (let i = 0; i < 5; ++i) {
- data.push(Math.round(Math.random() * 200));
+ 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'
+ 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);
- }
+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
- }]
- });
+ }
+ myChart.setOption<echarts.EChartsOption>({
+ series: [
+ {
+ type: 'bar',
+ data
+ }
+ ]
+ });
}
-setTimeout(function() {
- run();
+setTimeout(function () {
+ run();
}, 0);
setInterval(function () {
- run();
+ run();
}, 3000);
-export {}
\ No newline at end of file
+export {};
diff --git a/public/examples/ts/bar-rich-text.ts b/public/examples/ts/bar-rich-text.ts
index a4545d3..76fc0e7 100644
--- a/public/examples/ts/bar-rich-text.ts
+++ b/public/examples/ts/bar-rich-text.ts
@@ -5,149 +5,148 @@ 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'
+ 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
+ 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}'
+ 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
+ }
}
- },
- yAxis: {
- type: 'category',
- inverse: true,
- data: ['Sunny', 'Cloudy', 'Showers'],
- axisLabel: {
- formatter: function (value) {
- return '{' + value + '| }\n{value|' + value + '}';
+ }
+ }
+ },
+ 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
},
- 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: '}
- ]
+ b: {
+ color: '#333'
+ },
+ c: {
+ color: '#ff8811',
+ textBorderColor: '#000',
+ textBorderWidth: 1,
+ fontSize: 22
}
+ }
},
- {
- name: 'City Beta',
- type: 'bar',
- label: seriesLabel,
- data: [150, 105, 110]
- },
- {
- name: 'City Gamma',
- type: 'bar',
- label: seriesLabel,
- data: [220, 82, 63]
- }
- ]
+ 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
+export {};
diff --git a/public/examples/ts/bar-simple.ts b/public/examples/ts/bar-simple.ts
index f1221bb..85dd6a5 100644
--- a/public/examples/ts/bar-simple.ts
+++ b/public/examples/ts/bar-simple.ts
@@ -6,17 +6,19 @@ 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'
- }]
+ 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
+export {};
diff --git a/public/examples/ts/bar-stack.ts b/public/examples/ts/bar-stack.ts
index eeb8721..f93d9ca 100644
--- a/public/examples/ts/bar-stack.ts
+++ b/public/examples/ts/bar-stack.ts
@@ -6,122 +6,118 @@ difficulty: 3
*/
option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: {},
+ 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]
},
- legend: {
- data: ['Direct', 'Email', 'Union Ads', 'Video Ads', 'Search Engine', '百度', '谷歌', '必应', '其他']
+ {
+ name: 'Email',
+ type: 'bar',
+ stack: 'Ad',
+ emphasis: {
+ focus: 'series'
+ },
+ data: [120, 132, 101, 134, 90, 230, 210]
},
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
+ {
+ name: 'Union Ads',
+ type: 'bar',
+ stack: 'Ad',
+ emphasis: {
+ focus: 'series'
+ },
+ data: [220, 182, 191, 234, 290, 330, 310]
},
- 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: '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'
},
- {
- name: 'Others',
- type: 'bar',
- stack: 'Search Engine',
- emphasis: {
- focus: 'series'
- },
- data: [62, 82, 91, 84, 109, 110, 120]
- }
- ]
+ 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
+export {};
diff --git a/public/examples/ts/bar-tick-align.ts b/public/examples/ts/bar-tick-align.ts
index 2c96c16..43ca58c 100644
--- a/public/examples/ts/bar-tick-align.ts
+++ b/public/examples/ts/bar-tick-align.ts
@@ -6,38 +6,38 @@ 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]
- }
- ]
+ 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/public/examples/ts/bar-waterfall.ts b/public/examples/ts/bar-waterfall.ts
index ba0daef..e45c676 100644
--- a/public/examples/ts/bar-waterfall.ts
+++ b/public/examples/ts/bar-waterfall.ts
@@ -6,62 +6,62 @@ difficulty: 1
*/
option = {
- title: {
- text: 'Waterfall Chart',
- subtext: 'Living Expenses in Shenzhen'
+ title: {
+ text: 'Waterfall Chart',
+ subtext: 'Living Expenses in Shenzhen'
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
},
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- },
- formatter: function (params) {
- var tar = params[1];
- return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
+ formatter: function (params: any) {
+ 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]
},
- 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]
- }
- ]
+ {
+ 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
+export {};
diff --git a/public/examples/ts/bar-waterfall2.ts b/public/examples/ts/bar-waterfall2.ts
index ea1465e..ff61a99 100644
--- a/public/examples/ts/bar-waterfall2.ts
+++ b/public/examples/ts/bar-waterfall2.ts
@@ -6,86 +6,85 @@ difficulty: 3
*/
option = {
- title: {
- text: 'Accumulated Waterfall Chart'
+ title: {
+ text: 'Accumulated Waterfall Chart'
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
},
- 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;
+ formatter: function (params: any) {
+ 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]
},
- legend: {
- data: ['支出', '收入']
+ {
+ name: '收入',
+ type: 'bar',
+ stack: 'Total',
+ label: {
+ show: true,
+ position: 'top'
+ },
+ data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-']
},
- 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]
- }
- ]
+ {
+ name: '支出',
+ type: 'bar',
+ stack: 'Total',
+ label: {
+ show: true,
+ position: 'bottom'
+ },
+ data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203]
+ }
+ ]
};
-export {}
\ No newline at end of file
+export {};
diff --git a/public/examples/ts/bar-y-category-stack.ts b/public/examples/ts/bar-y-category-stack.ts
index fa2c1b3..3d85803 100644
--- a/public/examples/ts/bar-y-category-stack.ts
+++ b/public/examples/ts/bar-y-category-stack.ts
@@ -5,90 +5,89 @@ 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'
- }
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ // Use axis to trigger tooltip
+ type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+ }
+ },
+ legend: {},
+ 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]
},
- legend: {
- data: ['Direct', 'Mail Ad', 'Affiliate Ad', 'Video Ad', 'Search Engine']
+ {
+ name: 'Mail Ad',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ data: [120, 132, 101, 134, 90, 230, 210]
},
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
+ {
+ name: 'Affiliate Ad',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ data: [220, 182, 191, 234, 290, 330, 310]
},
- xAxis: {
- type: 'value'
+ {
+ name: 'Video Ad',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ data: [150, 212, 201, 154, 190, 330, 410]
},
- 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]
- }
- ]
+ {
+ 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
+export {};
diff --git a/public/examples/ts/bar-y-category.ts b/public/examples/ts/bar-y-category.ts
index 36d8272..dd81014 100644
--- a/public/examples/ts/bar-y-category.ts
+++ b/public/examples/ts/bar-y-category.ts
@@ -6,45 +6,42 @@ difficulty: 2
*/
option = {
- title: {
- text: 'World Population'
+ title: {
+ text: 'World Population'
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: {},
+ 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]
},
- 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]
- }
- ]
+ {
+ name: '2012',
+ type: 'bar',
+ data: [19325, 23438, 31000, 121594, 134141, 681807]
+ }
+ ]
};
-
-export {}
\ No newline at end of file
+export {};
diff --git a/public/examples/ts/bar1.ts b/public/examples/ts/bar1.ts
index e37585b..6ff1d14 100644
--- a/public/examples/ts/bar1.ts
+++ b/public/examples/ts/bar1.ts
@@ -6,71 +6,72 @@ difficulty: 4
*/
option = {
- title: {
- text: 'Rainfall and Evaporation',
- subtext: 'Fake Data'
+ title: {
+ text: 'Rainfall vs 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',
+ // prettier-ignore
+ 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' }]
+ }
},
- 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'}
- ]
- }
- }
- ]
+ {
+ 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: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
+ { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
+ ]
+ },
+ markLine: {
+ data: [{ type: 'average', name: 'Avg' }]
+ }
+ }
+ ]
};
-export {}
\ No newline at end of file
+export {};
diff --git a/public/examples/ts/boxplot-light-velocity.ts b/public/examples/ts/boxplot-light-velocity.ts
index 5e6f8b9..3d73509 100644
--- a/public/examples/ts/boxplot-light-velocity.ts
+++ b/public/examples/ts/boxplot-light-velocity.ts
@@ -5,82 +5,87 @@ 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'
- }
+ title: [
+ {
+ text: 'Michelson-Morley Experiment',
+ left: 'center'
},
- grid: {
- left: '10%',
- right: '10%',
- bottom: '15%'
+ {
+ 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: [
+ {
+ // prettier-ignore
+ 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]
+ ]
},
- xAxis: {
- type: 'category',
- boundaryGap: true,
- nameGap: 30,
- splitArea: {
- show: false
- },
- splitLine: {
- show: false
- }
+ {
+ transform: {
+ type: 'boxplot',
+ config: { itemNameFormatter: 'expr {value}' }
+ }
},
- yAxis: {
- type: 'value',
- name: 'km/s minus 299,000',
- splitArea: {
- show: true
- }
+ {
+ 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
},
- series: [
- {
- name: 'boxplot',
- type: 'boxplot',
- datasetIndex: 1
- },
- {
- name: 'outlier',
- type: 'scatter',
- datasetIndex: 2
- }
- ]
+ 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
+export {};
diff --git a/public/examples/ts/boxplot-light-velocity2.ts b/public/examples/ts/boxplot-light-velocity2.ts
index 14452ec..91e44af 100644
--- a/public/examples/ts/boxplot-light-velocity2.ts
+++ b/public/examples/ts/boxplot-light-velocity2.ts
@@ -5,85 +5,90 @@ 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'
- }
+ title: [
+ {
+ text: 'Michelson-Morley Experiment',
+ left: 'center'
},
- grid: {
- left: '10%',
- right: '10%',
- bottom: '15%'
+ {
+ text: 'upper: Q3 + 1.5 * IRQ \nlower: Q1 - 1.5 * IRQ',
+ borderColor: '#999',
+ borderWidth: 1,
+ textStyle: {
+ fontSize: 14
+ },
+ left: '10%',
+ top: '90%'
+ }
+ ],
+ dataset: [
+ {
+ // prettier-ignore
+ 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]
+ ]
},
- yAxis: {
- type: 'category',
- boundaryGap: true,
- nameGap: 30,
- splitArea: {
- show: false
- },
- splitLine: {
- show: false
+ {
+ transform: {
+ type: 'boxplot',
+ config: {
+ itemNameFormatter: function (params: any) {
+ return 'expr ' + params.value;
+ }
}
+ }
},
- xAxis: {
- type: 'value',
- name: 'km/s minus 299,000',
- splitArea: {
- show: true
- }
+ {
+ 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
},
- series: [
- {
- name: 'boxplot',
- type: 'boxplot',
- datasetIndex: 1
- },
- {
- name: 'outlier',
- type: 'scatter',
- encode: { x: 1, y: 0 },
- datasetIndex: 2
- }
- ]
+ 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
+export {};
diff --git a/public/examples/ts/boxplot-multi.ts b/public/examples/ts/boxplot-multi.ts
index f877282..9c7e31c 100644
--- a/public/examples/ts/boxplot-multi.ts
+++ b/public/examples/ts/boxplot-multi.ts
@@ -4,105 +4,117 @@ 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);
+ let data = [];
+ for (let i = 0; i < 18; i++) {
+ let cate = [];
+ for (let j = 0; j < 100; j++) {
+ cate.push(Math.random() * 200);
}
- return data;
+ data.push(cate);
+ }
+ return data;
}
const data0 = makeData();
const data1 = makeData();
const data2 = makeData();
-
option = {
- title: {
- text: 'Multiple Categories',
- left: 'center'
+ title: {
+ text: 'Multiple Categories',
+ left: 'center'
+ },
+ dataset: [
+ {
+ source: data0
},
- 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%'
+ {
+ source: data1
},
- tooltip: {
- trigger: 'item',
- axisPointer: {
- type: 'shadow'
- }
+ {
+ source: data2
},
- grid: {
- left: '10%',
- top: '20%',
- right: '10%',
- bottom: '15%'
+ {
+ fromDatasetIndex: 0,
+ transform: { type: 'boxplot' }
},
- xAxis: {
- type: 'category',
- boundaryGap: true,
- nameGap: 30,
- splitArea: {
- show: true
- },
- splitLine: {
- show: false
- }
+ {
+ fromDatasetIndex: 1,
+ transform: { type: 'boxplot' }
},
- yAxis: {
- type: 'value',
- name: 'Value',
- min: -400,
- max: 600,
- splitArea: {
- show: false
- }
+ {
+ 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
},
- 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
- }]
+ 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
+export {};
diff --git a/public/examples/ts/bubble-gradient.ts b/public/examples/ts/bubble-gradient.ts
index 42ec11d..fe3294f 100644
--- a/public/examples/ts/bubble-gradient.ts
+++ b/public/examples/ts/bubble-gradient.ts
@@ -6,106 +6,158 @@ 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 [...]
+ [
+ [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, 4240375, 'Norway', 1990],
+ [10088, 70.8, 38195258, 'Poland', 1990],
+ [19349, 69.6, 147568552, 'Russia', 1990],
+ [10670, 67.3, 53994605, 'Turkey', 1990],
+ [26424, 75.7, 57110117, 'United Kingdom', 1990],
+ [37062, 75.4, 252847810, 'United States', 1990]
+ ],
+ [
+ [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],
+ [64304, 81.6, 5210967, 'Norway', 2015],
+ [24787, 77.3, 38611794, 'Poland', 2015],
+ [23038, 73.13, 143456918, 'Russia', 2015],
+ [19360, 76.5, 78665830, 'Turkey', 2015],
+ [38225, 81.4, 64715810, 'United Kingdom', 2015],
+ [53354, 79.1, 321773631, 'United States', 2015]
+ ]
];
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%'
+ backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
+ {
+ offset: 0,
+ color: '#f7f8fa'
},
- legend: {
- right: '10%',
- top: '3%',
- data: ['1990', '2015']
+ {
+ 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'
+ }
},
- grid: {
- left: '8%',
- top: '10%'
- },
- xAxis: {
- 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: any) {
+ 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)'
+ }
+ ])
+ }
},
- 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)'
- }])
+ {
+ 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
+export {};
diff --git a/public/examples/ts/calendar-charts.ts b/public/examples/ts/calendar-charts.ts
index 5418331..508ac34 100644
--- a/public/examples/ts/calendar-charts.ts
+++ b/public/examples/ts/calendar-charts.ts
@@ -7,189 +7,177 @@ difficulty: 11
*/
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 = [];
- for (let time = date; time < end; time += dayTime) {
- data.push([
- echarts.format.formatTime('yyyy-MM-dd', time),
- Math.floor(Math.random() * 1000)
- ]);
- }
- console.log(data[data.length - 1]);
- return data;
+ 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 = [];
+ for (let time = date; time < end; time += dayTime) {
+ data.push([
+ echarts.format.formatTime('yyyy-MM-dd', time),
+ Math.floor(Math.random() * 1000)
+ ]);
+ }
+ console.log(data[data.length - 1]);
+ return data;
}
-
-
const graphData = [
- [
- '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-02-27',
- 985
- ]
+ ['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-02-27', 985]
];
const links = graphData.map(function (item, idx) {
- return {
- source: idx,
- target: idx + 1
- };
+ return {
+ source: idx,
+ target: idx + 1
+ };
});
links.pop();
option = {
- tooltip: {
- position: 'top'
- },
+ tooltip: {
+ position: 'top'
+ },
- visualMap: [{
- min: 0,
- max: 1000,
- calculable: true,
- seriesIndex: [2, 3, 4],
- orient: 'horizontal',
- left: '55%',
- bottom: 20
- }, {
- min: 0,
- max: 1000,
+ visualMap: [
+ {
+ min: 0,
+ max: 1000,
+ calculable: true,
+ seriesIndex: [2, 3, 4],
+ orient: 'horizontal',
+ left: '55%',
+ bottom: 20
+ },
+ {
+ min: 0,
+ max: 1000,
+ inRange: {
+ color: ['grey'],
+ opacity: [0, 0.3]
+ },
+ controller: {
inRange: {
- color: ['grey'],
- opacity: [0, 0.3]
+ opacity: [0.3, 0.6]
},
- controller: {
- inRange: {
- opacity: [0.3, 0.6]
- },
- outOfRange: {
- color: '#ccc'
- }
- },
- seriesIndex: [1],
- orient: 'horizontal',
- left: '10%',
- bottom: 20
- }],
+ outOfRange: {
+ color: '#ccc'
+ }
+ },
+ seriesIndex: [1],
+ orient: 'horizontal',
+ left: '10%',
+ bottom: 20
+ }
+ ],
- calendar: [{
- orient: 'vertical',
- yearLabel: {
- margin: 40
- },
- monthLabel: {
- nameMap: 'cn',
- margin: 20
- },
- dayLabel: {
- firstDay: 1,
- nameMap: 'cn'
- },
- cellSize: 40,
- range: '2017-02'
+ calendar: [
+ {
+ orient: 'vertical',
+ yearLabel: {
+ margin: 40
+ },
+ monthLabel: {
+ nameMap: 'cn',
+ margin: 20
+ },
+ dayLabel: {
+ firstDay: 1,
+ nameMap: 'cn'
+ },
+ cellSize: 40,
+ range: '2017-02'
},
{
- orient: 'vertical',
- yearLabel: {
- margin: 40
- },
- monthLabel: {
- margin: 20
- },
- cellSize: 40,
- left: 460,
- range: '2017-01'
+ orient: 'vertical',
+ yearLabel: {
+ margin: 40
+ },
+ monthLabel: {
+ margin: 20
+ },
+ cellSize: 40,
+ left: 460,
+ range: '2017-01'
},
{
- orient: 'vertical',
- yearLabel: {
- margin: 40
- },
- monthLabel: {
- margin: 20
- },
- cellSize: 40,
- top: 350,
- range: '2017-03'
+ orient: 'vertical',
+ yearLabel: {
+ margin: 40
+ },
+ monthLabel: {
+ margin: 20
+ },
+ cellSize: 40,
+ top: 350,
+ range: '2017-03'
},
{
- orient: 'vertical',
- yearLabel: {
- margin: 40
- },
- dayLabel: {
- firstDay: 1,
- nameMap: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
- },
- monthLabel: {
- nameMap: 'cn',
- margin: 20
- },
- cellSize: 40,
- top: 350,
- left: 460,
- range: '2017-04'
- }],
+ orient: 'vertical',
+ yearLabel: {
+ margin: 40
+ },
+ dayLabel: {
+ firstDay: 1,
+ nameMap: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+ },
+ monthLabel: {
+ nameMap: 'cn',
+ margin: 20
+ },
+ cellSize: 40,
+ top: 350,
+ left: 460,
+ range: '2017-04'
+ }
+ ],
- series: [{
- type: 'graph',
- edgeSymbol: ['none', 'arrow'],
- coordinateSystem: 'calendar',
- links: links,
- symbolSize: 10,
- calendarIndex: 0,
- data: graphData
- }, {
- type: 'heatmap',
- coordinateSystem: 'calendar',
- data: getVirtulData('2017')
- }, {
- type: 'effectScatter',
- coordinateSystem: 'calendar',
- calendarIndex: 1,
- symbolSize: function (val) {
- return val[1] / 40;
- },
- data: getVirtulData('2017')
- }, {
- type: 'scatter',
- coordinateSystem: 'calendar',
- calendarIndex: 2,
- symbolSize: function (val) {
- return val[1] / 60;
- },
- data: getVirtulData('2017')
- }, {
- type: 'heatmap',
- coordinateSystem: 'calendar',
- calendarIndex: 3,
- data: getVirtulData('2017')
- }]
+ series: [
+ {
+ type: 'graph',
+ edgeSymbol: ['none', 'arrow'],
+ coordinateSystem: 'calendar',
+ links: links,
+ symbolSize: 10,
+ calendarIndex: 0,
+ data: graphData
+ },
+ {
+ type: 'heatmap',
+ coordinateSystem: 'calendar',
+ data: getVirtulData('2017')
+ },
+ {
+ type: 'effectScatter',
+ coordinateSystem: 'calendar',
+ calendarIndex: 1,
+ symbolSize: function (val) {
+ return val[1] / 40;
+ },
+ data: getVirtulData('2017')
+ },
+ {
+ type: 'scatter',
+ coordinateSystem: 'calendar',
+ calendarIndex: 2,
+ symbolSize: function (val) {
+ return val[1] / 60;
+ },
+ data: getVirtulData('2017')
+ },
+ {
+ type: 'heatmap',
+ coordinateSystem: 'calendar',
+ calendarIndex: 3,
+ data: getVirtulData('2017')
+ }
+ ]
};
-export {}
\ No newline at end of file
+export {};
diff --git a/public/examples/ts/calendar-effectscatter.ts b/public/examples/ts/calendar-effectscatter.ts
index 131d57c..32f4b5c 100644
--- a/public/examples/ts/calendar-effectscatter.ts
+++ b/public/examples/ts/calendar-effectscatter.ts
@@ -6,158 +6,165 @@ 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;
+ 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',
+ backgroundColor: '#404a59',
- title: {
- top: 30,
- text: 'Daily Step Count in 2016',
- subtext: 'Fake Data',
- left: 'center',
- textStyle: {
- color: '#fff'
+ 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'
+ }
},
- tooltip: {
- trigger: 'item'
- },
- legend: {
- top: '30',
- left: '100',
- data: ['Steps', 'Top 12'],
- textStyle: {
- color: '#fff'
+ {
+ 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'
+ }
},
- 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
- }
- ]
+ {
+ 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
+export {};
diff --git a/public/examples/ts/calendar-graph.ts b/public/examples/ts/calendar-graph.ts
index 63c6251..152222d 100644
--- a/public/examples/ts/calendar-graph.ts
+++ b/public/examples/ts/calendar-graph.ts
@@ -6,121 +6,102 @@ 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
- ]
+ ['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
- };
+ 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;
+ 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']
+ tooltip: {},
+ calendar: {
+ top: 'middle',
+ left: 'center',
+ orient: 'vertical',
+ cellSize: 40,
+ yearLabel: {
+ margin: 50,
+ fontSize: 30
+ },
+ dayLabel: {
+ firstDay: 1,
+ nameMap: 'cn'
},
- visualMap: {
- min: 0,
- max: 1000,
- type: 'piecewise',
- left: 'center',
- bottom: 20,
- inRange: {
- color: ['#5291FF', '#C7DBFF']
- },
- seriesIndex: [1],
- orient: 'horizontal'
+ monthLabel: {
+ nameMap: 'cn',
+ margin: 15,
+ fontSize: 20,
+ color: '#999'
},
- 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')
- }]
+ 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
+export {};
diff --git a/public/examples/ts/calendar-heatmap.ts b/public/examples/ts/calendar-heatmap.ts
index 389c667..c4ee50f 100644
--- a/public/examples/ts/calendar-heatmap.ts
+++ b/public/examples/ts/calendar-heatmap.ts
@@ -6,51 +6,51 @@ 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;
+ 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'
+ 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
},
- 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')
- }
+ yearLabel: { show: false }
+ },
+ series: {
+ type: 'heatmap',
+ coordinateSystem: 'calendar',
+ data: getVirtulData('2016')
+ }
};
-export {}
\ No newline at end of file
+export {};
diff --git a/public/examples/ts/calendar-horizontal.ts b/public/examples/ts/calendar-horizontal.ts
index c764b97..c0c8f13 100644
--- a/public/examples/ts/calendar-horizontal.ts
+++ b/public/examples/ts/calendar-horizontal.ts
@@ -7,66 +7,69 @@ difficulty: 2
*/
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() * 1000)
- ]);
- }
- return data;
+ 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() * 1000)
+ ]);
+ }
+ return data;
}
-
-
option = {
- tooltip: {
- position: 'top'
+ tooltip: {
+ position: 'top'
+ },
+ visualMap: {
+ min: 0,
+ max: 1000,
+ calculable: true,
+ orient: 'horizontal',
+ left: 'center',
+ top: 'top'
+ },
+
+ calendar: [
+ {
+ range: '2017',
+ cellSize: ['auto', 20]
},
- visualMap: {
- min: 0,
- max: 1000,
- calculable: true,
- orient: 'horizontal',
- left: 'center',
- top: 'top'
+ {
+ top: 260,
+ range: '2016',
+ cellSize: ['auto', 20]
},
+ {
+ top: 450,
+ range: '2015',
+ cellSize: ['auto', 20],
+ right: 5
+ }
+ ],
- calendar: [{
- range: '2017',
- cellSize: ['auto', 20]
+ series: [
+ {
+ type: 'heatmap',
+ coordinateSystem: 'calendar',
+ calendarIndex: 0,
+ data: getVirtulData('2017')
},
{
- top: 260,
- range: '2016',
- cellSize: ['auto', 20]
+ type: 'heatmap',
+ coordinateSystem: 'calendar',
+ calendarIndex: 1,
+ data: getVirtulData('2016')
},
{
- top: 450,
- range: '2015',
- cellSize: ['auto', 20],
- right: 5
- }],
-
- series: [{
- type: 'heatmap',
- coordinateSystem: 'calendar',
- calendarIndex: 0,
- data: getVirtulData(2017)
- }, {
- type: 'heatmap',
- coordinateSystem: 'calendar',
- calendarIndex: 1,
- data: getVirtulData(2016)
- }, {
- type: 'heatmap',
- coordinateSystem: 'calendar',
- calendarIndex: 2,
- data: getVirtulData(2015)
- }]
-
+ type: 'heatmap',
+ coordinateSystem: 'calendar',
+ calendarIndex: 2,
+ data: getVirtulData('2015')
+ }
+ ]
};
diff --git a/public/examples/ts/calendar-lunar.ts b/public/examples/ts/calendar-lunar.ts
index ea41f54..7db582a 100644
--- a/public/examples/ts/calendar-lunar.ts
+++ b/public/examples/ts/calendar-lunar.ts
@@ -6,465 +6,462 @@ 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', '十四']
+ ['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]
- ]);
+ 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);
- }
- },
+ tooltip: {
+ formatter: function (params: any) {
+ 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
- }
- }
+ 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'
- }],
+ 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'
+ series: [
+ {
+ type: 'scatter',
+ coordinateSystem: 'calendar',
+ symbolSize: 1,
+ label: {
+ show: true,
+ formatter: function (params: any) {
+ var d = echarts.number.parseDate(params.value[0]);
+ return d.getDate() + '\n\n' + params.value[2] + '\n\n';
},
- 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'
+ color: '#000'
+ },
+ data: lunarData
+ },
+ {
+ type: 'scatter',
+ coordinateSystem: 'calendar',
+ symbolSize: 1,
+ label: {
+ show: true,
+ formatter: function (params: any) {
+ return '\n\n\n' + (params.value[3] || '');
},
- data: lunarData
- }, {
- name: '降雨量',
- type: 'heatmap',
- coordinateSystem: 'calendar',
- data: heatmapData
- }]
+ fontSize: 14,
+ fontWeight: 700,
+ color: '#a00'
+ },
+ data: lunarData
+ },
+ {
+ name: '降雨量',
+ type: 'heatmap',
+ coordinateSystem: 'calendar',
+ data: heatmapData
+ }
+ ]
};
-export {}
\ No newline at end of file
+export {};
diff --git a/public/examples/ts/calendar-pie.ts b/public/examples/ts/calendar-pie.ts
index fef76b3..02458bb 100644
--- a/public/examples/ts/calendar-pie.ts
+++ b/public/examples/ts/calendar-pie.ts
@@ -11,110 +11,116 @@ 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;
+ 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 getPieSeries(
+ scatterData: DataItem[],
+ chart: echarts.ECharts
+): echarts.PieSeriesOption[] {
+ return scatterData.map(function (item, index) {
+ var center = chart.convertToPixel('calendar', item);
+ return {
+ id: index + 'pie',
+ type: 'pie',
+ center: center,
+ label: {
+ 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
- };
- });
+function getPieSeriesUpdate(
+ scatterData: DataItem[],
+ chart: echarts.ECharts
+): echarts.PieSeriesOption[] {
+ 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
+ tooltip: {},
+ legend: {
+ data: ['Work', 'Entertainment', 'Sleep'],
+ bottom: 20
+ },
+ calendar: {
+ top: 'middle',
+ left: 'center',
+ orient: 'vertical',
+ cellSize: cellSize,
+ yearLabel: {
+ show: false,
+ fontSize: 30
},
- 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']
+ dayLabel: {
+ margin: 20,
+ firstDay: 1,
+ nameMap: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ monthLabel: {
+ show: false
},
- 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
+ range: ['2017-02']
+ },
+ series: [
+ {
+ id: 'label',
+ type: 'scatter',
+ coordinateSystem: 'calendar',
+ symbolSize: 1,
+ label: {
+ show: true,
+ formatter: function (params: any) {
+ return echarts.format.formatTime('dd', params.value[0]);
},
- data: scatterData
- }]
+ 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)
- });
+ pieInitialized = true;
+ myChart.setOption<echarts.EChartsOption>({
+ series: getPieSeries(scatterData, myChart)
+ });
}, 10);
app.onresize = function () {
- if (pieInitialized) {
- myChart.setOption<echarts.EChartsOption>({
- series: getPieSeriesUpdate(scatterData, myChart)
- });
- }
+ if (pieInitialized) {
+ myChart.setOption<echarts.EChartsOption>({
+ series: getPieSeriesUpdate(scatterData, myChart)
+ });
+ }
};
-export {}
\ No newline at end of file
+export {};
diff --git a/public/examples/ts/calendar-simple.ts b/public/examples/ts/calendar-simple.ts
index 607da8c..d2ae4aa 100644
--- a/public/examples/ts/calendar-simple.ts
+++ b/public/examples/ts/calendar-simple.ts
@@ -6,34 +6,34 @@ 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;
+ 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')
- }
+ 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
+export {};
diff --git a/public/examples/ts/calendar-vertical.ts b/public/examples/ts/calendar-vertical.ts
index 212c3d0..39c0cb2 100644
--- a/public/examples/ts/calendar-vertical.ts
+++ b/public/examples/ts/calendar-vertical.ts
@@ -7,74 +7,79 @@ 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 = [];
- for (var time = date; time < end; time += dayTime) {
- data.push([
- echarts.format.formatTime('yyyy-MM-dd', time),
- Math.floor(Math.random() * 1000)
- ]);
- }
- return data;
+ 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: {
- position: 'top',
- formatter: function (p) {
- var format = echarts.format.formatTime('yyyy-MM-dd', p.data[0]);
- return format + ': ' + p.data[1];
- }
+ tooltip: {
+ position: 'top',
+ formatter: function (p: any) {
+ var format = echarts.format.formatTime('yyyy-MM-dd', p.data[0]);
+ return format + ': ' + p.data[1];
+ }
+ },
+ visualMap: {
+ min: 0,
+ max: 1000,
+ calculable: true,
+ orient: 'vertical',
+ left: '670',
+ top: 'center'
+ },
+
+ calendar: [
+ {
+ orient: 'vertical',
+ range: '2015'
},
- visualMap: {
- min: 0,
- max: 1000,
- calculable: true,
- orient: 'vertical',
- left: '670',
- top: 'center'
+ {
+ left: 300,
+ orient: 'vertical',
+ range: '2016'
},
+ {
+ left: 520,
+ cellSize: [20, 'auto'],
+ bottom: 10,
+ orient: 'vertical',
+ range: '2017',
+ dayLabel: {
+ margin: 5
+ }
+ }
+ ],
- calendar: [{
- orient: 'vertical',
- range: '2015'
+ series: [
+ {
+ type: 'heatmap',
+ coordinateSystem: 'calendar',
+ calendarIndex: 0,
+ data: getVirtulData('2015')
},
{
- left: 300,
- orient: 'vertical',
- range: '2016'
+ type: 'heatmap',
+ coordinateSystem: 'calendar',
+ calendarIndex: 1,
+ data: getVirtulData('2016')
},
{
- left: 520,
- cellSize: [20, 'auto'],
- bottom: 10,
- orient: 'vertical',
- range: '2017',
- dayLabel: {
- margin: 5
- }
- }],
-
- series: [{
- type: 'heatmap',
- coordinateSystem: 'calendar',
- calendarIndex: 0,
- data: getVirtulData('2015')
- }, {
- type: 'heatmap',
- coordinateSystem: 'calendar',
- calendarIndex: 1,
- data: getVirtulData('2016')
- }, {
- type: 'heatmap',
- coordinateSystem: 'calendar',
- calendarIndex: 2,
- data: getVirtulData('2017')
- }]
+ type: 'heatmap',
+ coordinateSystem: 'calendar',
+ calendarIndex: 2,
+ data: getVirtulData('2017')
+ }
+ ]
};
-export {}
\ No newline at end of file
+export {};
diff --git a/public/examples/ts/candlestick-brush.ts b/public/examples/ts/candlestick-brush.ts
index d5ce863..ce07c41 100644
--- a/public/examples/ts/candlestick-brush.ts
+++ b/public/examples/ts/candlestick-brush.ts
@@ -7,264 +7,270 @@ titleCN: K 线图刷选
const upColor = '#00da3c';
const downColor = '#ec0000';
-
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]);
- }
+ 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]);
+ }
- return {
- categoryData: categoryData,
- values: values,
- volumes: volumes
- };
+ return {
+ categoryData: categoryData,
+ values: values,
+ volumes: volumes
+ };
}
-function calculateMA(dayCount: number, data: { values: number[][]}) {
- var result = [];
- for (var i = 0, len = data.values.length; i < len; i++) {
- if (i < dayCount) {
- result.push('-');
- continue;
- }
- var sum = 0;
- for (var j = 0; j < dayCount; j++) {
- sum += data.values[i - j][1];
- }
- result.push(+(sum / dayCount).toFixed(3));
+function calculateMA(dayCount: number, data: { values: number[][] }) {
+ var result = [];
+ for (var i = 0, len = data.values.length; i < len; i++) {
+ if (i < dayCount) {
+ result.push('-');
+ continue;
+ }
+ var sum = 0;
+ for (var j = 0; j < dayCount; j++) {
+ sum += data.values[i - j][1];
}
- return result;
+ result.push(+(sum / dayCount).toFixed(3));
+ }
+ return result;
}
$.get(ROOT_PATH + '/data/asset/data/stock-DJI.json', function (rawData) {
+ var data = splitData(rawData);
- var data = splitData(rawData);
-
- myChart.setOption<echarts.EChartsOption>(option = {
- animation: false,
- legend: {
- bottom: 10,
- left: 'center',
- data: ['Dow-Jones index', 'MA5', 'MA10', 'MA20', 'MA30']
+ myChart.setOption<echarts.EChartsOption>(
+ (option = {
+ animation: false,
+ legend: {
+ bottom: 10,
+ left: 'center',
+ data: ['Dow-Jones index', 'MA5', 'MA10', 'MA20', 'MA30']
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross'
},
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross'
- },
- borderWidth: 1,
- borderColor: '#ccc',
- padding: 10,
- textStyle: {
- color: '#000'
- },
- position: function (pos, params, el, elRect, size) {
- const obj: Record<string, number> = {
- top: 10
- };
- obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
- return obj;
- }
- // extraCssText: 'width: 170px'
+ borderWidth: 1,
+ borderColor: '#ccc',
+ padding: 10,
+ textStyle: {
+ color: '#000'
},
- axisPointer: {
- link: [{
- xAxisIndex: 'all'
- }],
- label: {
- backgroundColor: '#777'
- }
+ position: function (pos, params, el, elRect, size) {
+ 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'
+ }
+ ],
+ label: {
+ backgroundColor: '#777'
+ }
+ },
+ toolbox: {
+ feature: {
+ dataZoom: {
+ yAxisIndex: false
+ },
+ brush: {
+ type: ['lineX', 'clear']
+ }
+ }
+ },
+ brush: {
+ xAxisIndex: 'all',
+ brushLink: 'all',
+ outOfBrush: {
+ colorAlpha: 0.1
+ }
+ },
+ visualMap: {
+ show: false,
+ seriesIndex: 5,
+ dimension: 2,
+ pieces: [
+ {
+ value: 1,
+ color: downColor
+ },
+ {
+ value: -1,
+ color: upColor
+ }
+ ]
+ },
+ grid: [
+ {
+ left: '10%',
+ right: '8%',
+ height: '50%'
},
- toolbox: {
- feature: {
- dataZoom: {
- yAxisIndex: false
- },
- brush: {
- type: ['lineX', 'clear']
- }
- }
+ {
+ left: '10%',
+ right: '8%',
+ top: '63%',
+ height: '16%'
+ }
+ ],
+ xAxis: [
+ {
+ type: 'category',
+ data: data.categoryData,
+ scale: true,
+ boundaryGap: false,
+ axisLine: { onZero: false },
+ splitLine: { show: false },
+ splitNumber: 20,
+ min: 'dataMin',
+ max: 'dataMax',
+ axisPointer: {
+ z: 100
+ }
},
- brush: {
- xAxisIndex: 'all',
- brushLink: 'all',
- outOfBrush: {
- colorAlpha: 0.1
- }
+ {
+ type: 'category',
+ gridIndex: 1,
+ data: data.categoryData,
+ 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
+ }
},
- visualMap: {
- show: false,
- seriesIndex: 5,
- dimension: 2,
- pieces: [{
- value: 1,
- color: downColor
- }, {
- value: -1,
- color: upColor
- }]
+ {
+ 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: 98,
+ end: 100
},
- grid: [
- {
- left: '10%',
- right: '8%',
- height: '50%'
- },
- {
- left: '10%',
- right: '8%',
- top: '63%',
- height: '16%'
- }
- ],
- xAxis: [
- {
- type: 'category',
- data: data.categoryData,
- scale: true,
- boundaryGap: false,
- axisLine: {onZero: false},
- splitLine: {show: false},
- splitNumber: 20,
- min: 'dataMin',
- max: 'dataMax',
- axisPointer: {
- z: 100
- }
- },
- {
- type: 'category',
- gridIndex: 1,
- data: data.categoryData,
- 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: 98,
- end: 100
- },
- {
- show: true,
- xAxisIndex: [0, 1],
- type: 'slider',
- top: '85%',
- start: 98,
- end: 100
- }
- ],
- series: [
- {
- name: 'Dow-Jones index',
- type: 'candlestick',
- data: data.values,
- itemStyle: {
- color: upColor,
- color0: downColor,
- borderColor: undefined,
- borderColor0: undefined
- },
- tooltip: {
- formatter: function (param) {
- param = param[0];
- return [
- 'Date: ' + param.name + '<hr size=1 style="margin: 3px 0">',
- 'Open: ' + param.data[0] + '<br/>',
- 'Close: ' + param.data[1] + '<br/>',
- 'Lowest: ' + param.data[2] + '<br/>',
- 'Highest: ' + param.data[3] + '<br/>'
- ].join('');
- }
- }
- },
- {
- name: 'MA5',
- type: 'line',
- data: calculateMA(5, data),
- smooth: true,
- lineStyle: {
- opacity: 0.5
- }
- },
- {
- name: 'MA10',
- type: 'line',
- data: calculateMA(10, data),
- smooth: true,
- lineStyle: {
- opacity: 0.5
- }
- },
- {
- name: 'MA20',
- type: 'line',
- data: calculateMA(20, data),
- smooth: true,
- lineStyle: {
- opacity: 0.5
- }
- },
- {
- name: 'MA30',
- type: 'line',
- data: calculateMA(30, data),
- smooth: true,
- lineStyle: {
- opacity: 0.5
- }
- },
- {
- name: 'Volume',
- type: 'bar',
- xAxisIndex: 1,
- yAxisIndex: 1,
- data: data.volumes
+ {
+ show: true,
+ xAxisIndex: [0, 1],
+ type: 'slider',
+ top: '85%',
+ start: 98,
+ end: 100
+ }
+ ],
+ series: [
+ {
+ name: 'Dow-Jones index',
+ type: 'candlestick',
+ data: data.values,
+ itemStyle: {
+ color: upColor,
+ color0: downColor,
+ borderColor: undefined,
+ borderColor0: undefined
+ },
+ tooltip: {
+ formatter: function (param: any) {
+ param = param[0];
+ return [
+ 'Date: ' + param.name + '<hr size=1 style="margin: 3px 0">',
+ 'Open: ' + param.data[0] + '<br/>',
+ 'Close: ' + param.data[1] + '<br/>',
+ 'Lowest: ' + param.data[2] + '<br/>',
+ 'Highest: ' + param.data[3] + '<br/>'
+ ].join('');
}
- ]
- }, true);
+ }
+ },
+ {
+ name: 'MA5',
+ type: 'line',
+ data: calculateMA(5, data),
+ smooth: true,
+ lineStyle: {
+ opacity: 0.5
+ }
+ },
+ {
+ name: 'MA10',
+ type: 'line',
+ data: calculateMA(10, data),
+ smooth: true,
+ lineStyle: {
+ opacity: 0.5
+ }
+ },
+ {
+ name: 'MA20',
+ type: 'line',
+ data: calculateMA(20, data),
+ smooth: true,
+ lineStyle: {
+ opacity: 0.5
+ }
+ },
+ {
+ name: 'MA30',
+ type: 'line',
+ data: calculateMA(30, data),
+ smooth: true,
+ lineStyle: {
+ opacity: 0.5
+ }
+ },
+ {
+ name: 'Volume',
+ type: 'bar',
+ xAxisIndex: 1,
+ yAxisIndex: 1,
+ data: data.volumes
+ }
+ ]
+ }),
+ true
+ );
- myChart.dispatchAction({
- type: 'brush',
- areas: [
- {
- brushType: 'lineX',
- coordRange: ['2016-06-02', '2016-06-20'],
- xAxisIndex: 0
- }
- ]
- });
+ myChart.dispatchAction({
+ type: 'brush',
+ areas: [
+ {
+ brushType: 'lineX',
+ coordRange: ['2016-06-02', '2016-06-20'],
+ xAxisIndex: 0
+ }
+ ]
+ });
});
-export {}
\ No newline at end of file
+export {};
diff --git a/public/examples/ts/candlestick-large.ts b/public/examples/ts/candlestick-large.ts
index b86038e..c36bd0f 100644
--- a/public/examples/ts/candlestick-large.ts
+++ b/public/examples/ts/candlestick-large.ts
@@ -14,200 +14,209 @@ const dataCount = 2e5;
const data = generateOHLC(dataCount);
option = {
- dataset: {
- source: data
- },
- title: {
- text: 'Data Amount: ' + echarts.format.addCommas(dataCount)
+ 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
},
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'line'
- }
+ {
+ 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'
},
- toolbox: {
- feature: {
- dataZoom: {
- yAxisIndex: false
- },
- }
+ {
+ 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
+ }
},
- 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
- }]
+ {
+ 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
},
- 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
- }
- }
+ {
+ 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;
+ let data: DataItem[] = [];
- for (let i = 0; i < count; i++) {
- baseValue = baseValue + Math.random() * 20 - 10;
+ 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 j = 0; j < 4; j++) {
- boxVals[j] = (Math.random() - 0.5) * dayRange + baseValue;
- }
- boxVals.sort();
+ for (let i = 0; i < count; i++) {
+ baseValue = baseValue + Math.random() * 20 - 10;
- 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);
+ for (let j = 0; j < 4; j++) {
+ boxVals[j] = (Math.random() - 0.5) * dayRange + baseValue;
+ }
+ boxVals.sort();
- // ['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
- ];
+ 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);
- return data;
+ // ['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
+ ];
+ }
- 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 data;
- return sign;
+ 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
+export {};
diff --git a/public/examples/ts/candlestick-sh-2015.ts b/public/examples/ts/candlestick-sh-2015.ts
index 7d24525..fc5a5e0 100644
--- a/public/examples/ts/candlestick-sh-2015.ts
+++ b/public/examples/ts/candlestick-sh-2015.ts
@@ -4,134 +4,138 @@ category: candlestick
... 57066 lines suppressed ...
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-examples] 11/15: fix example type errors
Posted by sh...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
commit 0323de64f2b06fcfad05d5c30b858833c7bf5e3f
Author: pissang <bm...@gmail.com>
AuthorDate: Thu Sep 9 11:17:40 2021 +0800
fix example type errors
---
.vscode/settings.json | 3 +-
public/examples/ts/bar-label-rotation.ts | 19 ++++-----
public/examples/ts/bar-race-country.ts | 20 ++++++----
public/examples/ts/bar-rich-text.ts | 2 +-
public/examples/ts/bubble-gradient.ts | 2 +-
public/examples/ts/candlestick-brush.ts | 4 +-
public/examples/ts/candlestick-large.ts | 2 -
public/examples/ts/candlestick-sh.ts | 1 -
public/examples/ts/candlestick-touch.ts | 3 +-
...acking-with-d3.ts => circle-packing-with-d3.js} | 46 ++++++++--------------
public/examples/ts/confidence-band.ts | 2 +-
public/examples/ts/gauge-car.ts | 19 ++++-----
public/examples/ts/geo-seatmap-flight.ts | 2 +-
public/examples/ts/geo-svg-lines.ts | 2 +-
public/examples/ts/graph-label-overlap.ts | 2 +-
public/examples/ts/line-pen.ts | 6 +--
public/examples/ts/lines-ny.ts | 2 +-
public/examples/ts/pictorialBar-bar-transition.ts | 8 ++--
public/examples/ts/sunburst-book.js | 13 +++++-
public/examples/ts/sunburst-drink.ts | 2 +-
public/examples/ts/tree-basic.ts | 5 ++-
public/examples/ts/tree-orient-right-left.ts | 5 ++-
public/examples/types/example.d.ts | 1 +
src/editor/CodeMonaco.vue | 1 +
src/explore/ExampleCard.vue | 4 +-
25 files changed, 87 insertions(+), 89 deletions(-)
diff --git a/.vscode/settings.json b/.vscode/settings.json
index afd540a..41f8b3e 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,5 +2,6 @@
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2,
- "editor.detectIndentation": false
+ "editor.detectIndentation": false,
+ "typescript.tsdk": "node_modules/typescript/lib"
}
diff --git a/public/examples/ts/bar-label-rotation.ts b/public/examples/ts/bar-label-rotation.ts
index 97bd265..e236fca 100644
--- a/public/examples/ts/bar-label-rotation.ts
+++ b/public/examples/ts/bar-label-rotation.ts
@@ -59,14 +59,13 @@ app.config = {
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
- }
+ const labelOption: BarLabelOption = {
+ rotate: app.config.rotate as BarLabelOption['rotate'],
+ align: app.config.align as BarLabelOption['align'],
+ verticalAlign: app.config
+ .verticalAlign as BarLabelOption['verticalAlign'],
+ position: app.config.position as BarLabelOption['position'],
+ distance: app.config.distance as BarLabelOption['distance']
};
myChart.setOption<echarts.EChartsOption>({
series: [
@@ -89,7 +88,7 @@ app.config = {
type BarLabelOption = NonNullable<echarts.BarSeriesOption['label']>;
-const labelOption = {
+const labelOption: BarLabelOption = {
show: true,
position: app.config.position as BarLabelOption['position'],
distance: app.config.distance as BarLabelOption['distance'],
@@ -178,3 +177,5 @@ option = {
}
]
};
+
+export {};
diff --git a/public/examples/ts/bar-race-country.ts b/public/examples/ts/bar-race-country.ts
index 15d623d..bd9781a 100644
--- a/public/examples/ts/bar-race-country.ts
+++ b/public/examples/ts/bar-race-country.ts
@@ -36,7 +36,11 @@ $.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];
+ interface Flag {
+ name: string;
+ emoji: string;
+ }
+ const flags: Flag[] = res0[0];
const data = res1[0];
const years: string[] = [];
for (let i = 0; i < data.length; ++i) {
@@ -74,7 +78,7 @@ $.when(
}
},
dataset: {
- source: data.slice(1).filter(function (d) {
+ source: data.slice(1).filter(function (d: string[]) {
return d[4] === startYear;
})
},
@@ -85,7 +89,7 @@ $.when(
axisLabel: {
show: true,
fontSize: 14,
- formatter: function (value: string) {
+ formatter: function (value: any) {
return value + '{flag|' + getFlag(value) + '}';
},
rich: {
@@ -104,8 +108,8 @@ $.when(
seriesLayoutBy: 'column',
type: 'bar',
itemStyle: {
- color: function (param: any) {
- return countryColors[param.value[3]] || '#5470c6';
+ color: function (param) {
+ return countryColors[(param.value as number[])[3]] || '#5470c6';
}
},
encode: {
@@ -155,11 +159,11 @@ $.when(
}
function updateYear(year: string) {
- let source = data.slice(1).filter(function (d) {
+ let source = data.slice(1).filter(function (d: string[]) {
return d[4] === year;
});
- option.series[0].data = source;
- option.graphic.elements[0].style.text = year;
+ (option as any).series[0].data = source;
+ (option as any).graphic.elements[0].style.text = year;
myChart.setOption<echarts.EChartsOption>(option);
}
});
diff --git a/public/examples/ts/bar-rich-text.ts b/public/examples/ts/bar-rich-text.ts
index 76fc0e7..5510dab 100644
--- a/public/examples/ts/bar-rich-text.ts
+++ b/public/examples/ts/bar-rich-text.ts
@@ -49,7 +49,7 @@ option = {
inverse: true,
data: ['Sunny', 'Cloudy', 'Showers'],
axisLabel: {
- formatter: function (value) {
+ formatter: function (value: string) {
return '{' + value + '| }\n{value|' + value + '}';
},
margin: 20,
diff --git a/public/examples/ts/bubble-gradient.ts b/public/examples/ts/bubble-gradient.ts
index fe3294f..704ba51 100644
--- a/public/examples/ts/bubble-gradient.ts
+++ b/public/examples/ts/bubble-gradient.ts
@@ -135,7 +135,7 @@ option = {
focus: 'series',
label: {
show: true,
- formatter: function (param) {
+ formatter: function (param: any) {
return param.data[3];
},
position: 'top'
diff --git a/public/examples/ts/candlestick-brush.ts b/public/examples/ts/candlestick-brush.ts
index ce07c41..1c5bf64 100644
--- a/public/examples/ts/candlestick-brush.ts
+++ b/public/examples/ts/candlestick-brush.ts
@@ -43,7 +43,7 @@ function calculateMA(dayCount: number, data: { values: number[][] }) {
$.get(ROOT_PATH + '/data/asset/data/stock-DJI.json', function (rawData) {
var data = splitData(rawData);
- myChart.setOption<echarts.EChartsOption>(
+ myChart.setOption(
(option = {
animation: false,
legend: {
@@ -134,7 +134,6 @@ $.get(ROOT_PATH + '/data/asset/data/stock-DJI.json', function (rawData) {
boundaryGap: false,
axisLine: { onZero: false },
splitLine: { show: false },
- splitNumber: 20,
min: 'dataMin',
max: 'dataMax',
axisPointer: {
@@ -151,7 +150,6 @@ $.get(ROOT_PATH + '/data/asset/data/stock-DJI.json', function (rawData) {
axisTick: { show: false },
splitLine: { show: false },
axisLabel: { show: false },
- splitNumber: 20,
min: 'dataMin',
max: 'dataMax'
}
diff --git a/public/examples/ts/candlestick-large.ts b/public/examples/ts/candlestick-large.ts
index c36bd0f..97b2800 100644
--- a/public/examples/ts/candlestick-large.ts
+++ b/public/examples/ts/candlestick-large.ts
@@ -54,7 +54,6 @@ option = {
// inverse: true,
axisLine: { onZero: false },
splitLine: { show: false },
- splitNumber: 20,
min: 'dataMin',
max: 'dataMax'
},
@@ -67,7 +66,6 @@ option = {
axisTick: { show: false },
splitLine: { show: false },
axisLabel: { show: false },
- splitNumber: 20,
min: 'dataMin',
max: 'dataMax'
}
diff --git a/public/examples/ts/candlestick-sh.ts b/public/examples/ts/candlestick-sh.ts
index 70ca635..09589c5 100644
--- a/public/examples/ts/candlestick-sh.ts
+++ b/public/examples/ts/candlestick-sh.ts
@@ -157,7 +157,6 @@ option = {
boundaryGap: false,
axisLine: { onZero: false },
splitLine: { show: false },
- splitNumber: 20,
min: 'dataMin',
max: 'dataMax'
},
diff --git a/public/examples/ts/candlestick-touch.ts b/public/examples/ts/candlestick-touch.ts
index fc374d5..d718039 100644
--- a/public/examples/ts/candlestick-touch.ts
+++ b/public/examples/ts/candlestick-touch.ts
@@ -107,7 +107,7 @@ option = {
boundaryGap: false,
axisLine: { lineStyle: { color: '#777' } },
axisLabel: {
- formatter: function (value) {
+ formatter: function (value: any) {
return echarts.format.formatTime('MM-dd', value);
}
},
@@ -127,7 +127,6 @@ option = {
axisLabel: { show: false },
axisTick: { show: false },
axisLine: { lineStyle: { color: '#777' } },
- splitNumber: 20,
min: 'dataMin',
max: 'dataMax',
axisPointer: {
diff --git a/public/examples/ts/circle-packing-with-d3.ts b/public/examples/ts/circle-packing-with-d3.js
similarity index 85%
rename from public/examples/ts/circle-packing-with-d3.ts
rename to public/examples/ts/circle-packing-with-d3.js
index 2233550..145d582 100644
--- a/public/examples/ts/circle-packing-with-d3.ts
+++ b/public/examples/ts/circle-packing-with-d3.js
@@ -14,29 +14,16 @@ $.when(
run(res[0]);
});
-function run(rawData: RawDataNode) {
+function run(rawData) {
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[] = [];
+function prepareData(rawData) {
+ const seriesData = [];
let maxDepth = 0;
- function convert(source: RawDataNode, basePath: string, depth: number) {
+ function convert(source, basePath, depth) {
if (source == null) {
return;
}
@@ -68,7 +55,7 @@ function prepareData(rawData: RawDataNode) {
};
}
-function initChart(seriesData: DataItem[], maxDepth: number) {
+function initChart(seriesData, maxDepth) {
var displayRoot = stratify();
function stratify() {
@@ -98,10 +85,7 @@ function initChart(seriesData: DataItem[], maxDepth: number) {
});
}
- const renderItem: echarts.CustomSeriesOption['renderItem'] = function (
- params,
- api
- ) {
+ function renderItem(params, api) {
var context = params.context;
// Only do that layout once in each time `setOption` called.
@@ -179,7 +163,7 @@ function initChart(seriesData: DataItem[], maxDepth: number) {
}
}
};
- };
+ }
option = {
dataset: {
@@ -210,13 +194,13 @@ function initChart(seriesData: DataItem[], maxDepth: number) {
}
};
- myChart.setOption<echarts.EChartsOption>(option);
+ myChart.setOption < echarts.EChartsOption > option;
myChart.on('click', { seriesIndex: 0 }, function (params) {
drillDown(params.data.id);
});
- function drillDown(targetNodeId?: string) {
+ function drillDown(targetNodeId) {
displayRoot = stratify();
if (targetNodeId != null) {
displayRoot = displayRoot.descendants().find(function (node) {
@@ -226,11 +210,13 @@ function initChart(seriesData: DataItem[], maxDepth: number) {
// A trick to prevent d3-hierarchy from visiting parents in this algorithm.
displayRoot.parent = null;
- myChart.setOption<echarts.EChartsOption>({
- dataset: {
- source: seriesData
- }
- });
+ myChart.setOption <
+ echarts.EChartsOption >
+ {
+ dataset: {
+ source: seriesData
+ }
+ };
}
// Reset: click on the blank area.
diff --git a/public/examples/ts/confidence-band.ts b/public/examples/ts/confidence-band.ts
index a4bfdbe..0a90b15 100644
--- a/public/examples/ts/confidence-band.ts
+++ b/public/examples/ts/confidence-band.ts
@@ -65,7 +65,7 @@ $.get(
return item.date;
}),
axisLabel: {
- formatter: function (value, idx) {
+ formatter: function (value: any, idx: number) {
var date = new Date(value);
return idx === 0
? value
diff --git a/public/examples/ts/gauge-car.ts b/public/examples/ts/gauge-car.ts
index caf5320..52bbe61 100644
--- a/public/examples/ts/gauge-car.ts
+++ b/public/examples/ts/gauge-car.ts
@@ -110,8 +110,7 @@ option = {
},
anchor: {},
pointer: {
- icon:
- 'path://M-36.5,23.9L-41,4.4c-0.1-0.4-0.4-0.7-0.7-0.7c-0.5-0.1-1.1,0.2-1.2,0.7l-4.5,19.5c0,0.1,0,0.1,0,0.2v92.3c0,0.6,0.4,1,1,1h9c0.6,0,1-0.4,1-1V24.1C-36.5,24-36.5,23.9-36.5,23.9z M-39.5,114.6h-5v-85h5V114.6z',
+ icon: 'path://M-36.5,23.9L-41,4.4c-0.1-0.4-0.4-0.7-0.7-0.7c-0.5-0.1-1.1,0.2-1.2,0.7l-4.5,19.5c0,0.1,0,0.1,0,0.2v92.3c0,0.6,0.4,1,1,1h9c0.6,0,1-0.4,1-1V24.1C-36.5,24-36.5,23.9-36.5,23.9z M-39.5,114.6h-5v-85h5V114.6z',
width: 5,
length: '40%',
offsetCenter: [0, '-58%'],
@@ -192,8 +191,7 @@ option = {
},
anchor: {},
pointer: {
- icon:
- 'path://M-36.5,23.9L-41,4.4c-0.1-0.4-0.4-0.7-0.7-0.7c-0.5-0.1-1.1,0.2-1.2,0.7l-4.5,19.5c0,0.1,0,0.1,0,0.2v92.3c0,0.6,0.4,1,1,1h9c0.6,0,1-0.4,1-1V24.1C-36.5,24-36.5,23.9-36.5,23.9z M-39.5,114.6h-5v-85h5V114.6z',
+ icon: 'path://M-36.5,23.9L-41,4.4c-0.1-0.4-0.4-0.7-0.7-0.7c-0.5-0.1-1.1,0.2-1.2,0.7l-4.5,19.5c0,0.1,0,0.1,0,0.2v92.3c0,0.6,0.4,1,1,1h9c0.6,0,1-0.4,1-1V24.1C-36.5,24-36.5,23.9-36.5,23.9z M-39.5,114.6h-5v-85h5V114.6z',
width: 10,
offsetCenter: [0, '-10%'],
length: '75%',
@@ -399,7 +397,7 @@ option = {
if (value === 1) {
return '4/4';
}
- return value;
+ return value + '';
}
},
progress: {
@@ -414,8 +412,7 @@ option = {
itemStyle: {},
offsetCenter: ['-22%', '-57%'],
size: 18,
- icon:
- 'path://M1.11979167,1.11111112 C1.11979167,0.497461393 1.61725306,0 2.23090279,0 L12.2309028,0 C12.8445525,1.43824153e-08 13.3420139,0.497461403 13.3420139,1.11111112 L13.3420139,10 L15.5642361,10 C16.7915356,10 17.7864583,10.9949228 17.7864583,12.2222222 L17.7864583,16.6666667 C17.7865523,17.28025 18.2839861,17.7776077 18.8975694,17.7776077 C19.5111527,17.7776077 20.0085866,17.28025 20.0086805,16.6666667 L20.0086805,8.88888888 L17.7864583,8.88888888 C17.1728086,8.88888888 16.6 [...]
+ icon: 'path://M1.11979167,1.11111112 C1.11979167,0.497461393 1.61725306,0 2.23090279,0 L12.2309028,0 C12.8445525,1.43824153e-08 13.3420139,0.497461403 13.3420139,1.11111112 L13.3420139,10 L15.5642361,10 C16.7915356,10 17.7864583,10.9949228 17.7864583,12.2222222 L17.7864583,16.6666667 C17.7865523,17.28025 18.2839861,17.7776077 18.8975694,17.7776077 C19.5111527,17.7776077 20.0085866,17.28025 20.0086805,16.6666667 L20.0086805,8.88888888 L17.7864583,8.88888888 C17.1728086,8.88888888 [...]
},
pointer: {
show: false
@@ -488,7 +485,7 @@ option = {
fontFamily: 'Arial',
color: '#fff',
formatter: function (value) {
- return -value;
+ return -value + '';
}
},
anchor: {
@@ -496,12 +493,10 @@ option = {
itemStyle: {},
offsetCenter: [0, '55%'],
size: 20,
- icon:
- 'path://M-34.1-1.1L-34.1-1.1c0-0.3-0.3-0.6-0.6-0.6h-3.6v-1.5c0-0.5-0.2-0.9-0.6-1.1s-0.9-0.2-1.3,0c-0.4,0.2-0.6,0.7-0.6,1.1V7.9c0,0,0,0.1,0,0.1c-0.8,0.5-1.2,1.5-0.9,2.5c0.3,0.9,1.1,1.6,2.1,1.6c1,0,1.8-0.6,2.1-1.5c0.3-0.9,0-1.9-0.8-2.5V6.3h3.5c0.4,0,0.7-0.3,0.7-0.7l0,0c0-0.4-0.3-0.7-0.7-0.7h-3.5V2.9h3.5c0.4,0,0.7-0.3,0.7-0.7l0,0c0-0.4-0.3-0.7-0.7-0.7h-3.5v-2.1h3.6C-34.4-0.5-34.1-0.8-34.1-1.1z M-44.9,11.6c-0.7,0-1.4-0.2-2-0.6c-0.4-0.3-0.9-0.4-1.4-0.4c-0.4,0-0.9,0.2-1.2,0.4c-0.4,0. [...]
+ icon: 'path://M-34.1-1.1L-34.1-1.1c0-0.3-0.3-0.6-0.6-0.6h-3.6v-1.5c0-0.5-0.2-0.9-0.6-1.1s-0.9-0.2-1.3,0c-0.4,0.2-0.6,0.7-0.6,1.1V7.9c0,0,0,0.1,0,0.1c-0.8,0.5-1.2,1.5-0.9,2.5c0.3,0.9,1.1,1.6,2.1,1.6c1,0,1.8-0.6,2.1-1.5c0.3-0.9,0-1.9-0.8-2.5V6.3h3.5c0.4,0,0.7-0.3,0.7-0.7l0,0c0-0.4-0.3-0.7-0.7-0.7h-3.5V2.9h3.5c0.4,0,0.7-0.3,0.7-0.7l0,0c0-0.4-0.3-0.7-0.7-0.7h-3.5v-2.1h3.6C-34.4-0.5-34.1-0.8-34.1-1.1z M-44.9,11.6c-0.7,0-1.4-0.2-2-0.6c-0.4-0.3-0.9-0.4-1.4-0.4c-0.4,0-0.9,0.2-1.2,0.4c-0. [...]
},
pointer: {
- icon:
- 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
+ icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
width: 15,
length: '4',
offsetCenter: [0, '-90%'],
diff --git a/public/examples/ts/geo-seatmap-flight.ts b/public/examples/ts/geo-seatmap-flight.ts
index ace9be3..681279e 100644
--- a/public/examples/ts/geo-seatmap-flight.ts
+++ b/public/examples/ts/geo-seatmap-flight.ts
@@ -25,7 +25,7 @@ $.get(ROOT_PATH + '/data/asset/geo/flight-seats.svg', function (svg) {
},
emphasis: {
itemStyle: {
- color: null,
+ color: undefined,
borderColor: 'green',
borderWidth: 2
},
diff --git a/public/examples/ts/geo-svg-lines.ts b/public/examples/ts/geo-svg-lines.ts
index 3b4d8fa..5fbe7b0 100644
--- a/public/examples/ts/geo-svg-lines.ts
+++ b/public/examples/ts/geo-svg-lines.ts
@@ -21,7 +21,7 @@ $.get(
roam: true,
emphasis: {
itemStyle: {
- color: null
+ color: undefined
},
label: {
show: false
diff --git a/public/examples/ts/graph-label-overlap.ts b/public/examples/ts/graph-label-overlap.ts
index 594238b..5ea835c 100644
--- a/public/examples/ts/graph-label-overlap.ts
+++ b/public/examples/ts/graph-label-overlap.ts
@@ -13,7 +13,7 @@ $.getJSON(ROOT_PATH + '/data/asset/data/les-miserables.json', function (graph) {
tooltip: {},
legend: [
{
- data: graph.categories.map(function (a) {
+ data: graph.categories.map(function (a: { name: string }) {
return a.name;
})
}
diff --git a/public/examples/ts/line-pen.ts b/public/examples/ts/line-pen.ts
index 5c13995..8c7cb51 100644
--- a/public/examples/ts/line-pen.ts
+++ b/public/examples/ts/line-pen.ts
@@ -19,7 +19,7 @@ option = {
text: 'Click to Add Points'
},
tooltip: {
- formatter: function (params) {
+ formatter: function (params: any) {
var data = params.data || [0, 0];
return data[0].toFixed(2) + ', ' + data[1].toFixed(2);
}
@@ -55,7 +55,7 @@ option = {
var zr = myChart.getZr();
-zr.on('click', function (params) {
+zr.on('click', function (params: any) {
var pointInPixel = [params.offsetX, params.offsetY];
var pointInGrid = myChart.convertFromPixel('grid', pointInPixel);
@@ -73,7 +73,7 @@ zr.on('click', function (params) {
}
});
-zr.on('mousemove', function (params) {
+zr.on('mousemove', function (params: any) {
var pointInPixel = [params.offsetX, params.offsetY];
zr.setCursorStyle(
myChart.containPixel('grid', pointInPixel) ? 'copy' : 'default'
diff --git a/public/examples/ts/lines-ny.ts b/public/examples/ts/lines-ny.ts
index 501767c..06a9d39 100644
--- a/public/examples/ts/lines-ny.ts
+++ b/public/examples/ts/lines-ny.ts
@@ -9,7 +9,7 @@ var CHUNK_COUNT = 32;
var dataCount = 0;
-function fetchData(idx) {
+function fetchData(idx: number) {
if (idx >= CHUNK_COUNT) {
return;
}
diff --git a/public/examples/ts/pictorialBar-bar-transition.ts b/public/examples/ts/pictorialBar-bar-transition.ts
index b56d2e6..6c36f11 100644
--- a/public/examples/ts/pictorialBar-bar-transition.ts
+++ b/public/examples/ts/pictorialBar-bar-transition.ts
@@ -18,7 +18,7 @@ const pathSymbols = {
car: 'path://M49.592,40.883c-0.053,0.354-0.139,0.697-0.268,0.963c-0.232,0.475-0.455,0.519-1.334,0.475 c-1.135-0.053-2.764,0-4.484,0.068c0,0.476,0.018,0.697,0.018,0.697c0.111,1.299,0.697,1.342,0.931,1.342h3.7 c0.326,0,0.628,0,0.861-0.154c0.301-0.196,0.43-0.772,0.543-1.78c0.017-0.146,0.025-0.336,0.033-0.56v-0.01 c0-0.068,0.008-0.154,0.008-0.25V41.58l0,0C49.6,41.348,49.6,41.09,49.592,40.883L49.592,40.883z M6.057,40.883 c0.053,0.354,0.137,0.697,0.268,0.963c0.23,0.475,0.455,0.519,1.334,0.47 [...]
};
-const labelSetting: echarts.BarSeriesOption['label'] = {
+const labelSetting: echarts.PictorialBarSeriesOption['label'] = {
show: true,
position: 'right',
offset: [10, 0],
@@ -73,14 +73,14 @@ function makeOption(
{
name: '2015',
id: 'bar1',
- type: type,
+ type: type as 'pictorialBar',
label: labelSetting,
symbolRepeat: true,
symbolSize: ['80%', '60%'],
barCategoryGap: '40%',
universalTransition: {
enabled: true,
- delay: function (idx, total) {
+ delay: function (idx: number, total: number) {
return (idx / total) * 1000;
}
},
@@ -110,7 +110,7 @@ function makeOption(
{
name: '2016',
id: 'bar2',
- type: type,
+ type: type as 'pictorialBar',
barGap: '10%',
label: labelSetting,
symbolRepeat: true,
diff --git a/public/examples/ts/sunburst-book.js b/public/examples/ts/sunburst-book.js
index f66a4e1..ecb24d5 100644
--- a/public/examples/ts/sunburst-book.js
+++ b/public/examples/ts/sunburst-book.js
@@ -396,12 +396,19 @@ option = {
levels: [
{},
{
+ r0: 0,
+ r: 40,
label: {
rotate: 0
}
},
- {},
{
+ r0: 40,
+ r: 105
+ },
+ {
+ r0: 115,
+ r: 140,
itemStyle: {
shadowBlur: 2,
shadowColor: colors[2],
@@ -414,6 +421,8 @@ option = {
}
},
{
+ r0: 140,
+ r: 145,
itemStyle: {
shadowBlur: 80,
shadowColor: colors[0]
@@ -423,7 +432,7 @@ option = {
textShadowBlur: 5,
textShadowColor: '#333'
},
- blur: {
+ downplay: {
label: {
opacity: 0.5
}
diff --git a/public/examples/ts/sunburst-drink.ts b/public/examples/ts/sunburst-drink.ts
index 75e44c9..c92676a 100644
--- a/public/examples/ts/sunburst-drink.ts
+++ b/public/examples/ts/sunburst-drink.ts
@@ -822,7 +822,7 @@ option = {
data: data,
radius: [0, '95%'],
- sort: null,
+ sort: undefined,
emphasis: {
focus: 'ancestor'
diff --git a/public/examples/ts/tree-basic.ts b/public/examples/ts/tree-basic.ts
index bbc3b03..3843067 100644
--- a/public/examples/ts/tree-basic.ts
+++ b/public/examples/ts/tree-basic.ts
@@ -8,7 +8,10 @@ myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/data/flare.json', function (data) {
myChart.hideLoading();
- data.children.forEach(function (datum, index) {
+ data.children.forEach(function (
+ datum: { collapsed: boolean },
+ index: number
+ ) {
index % 2 === 0 && (datum.collapsed = true);
});
diff --git a/public/examples/ts/tree-orient-right-left.ts b/public/examples/ts/tree-orient-right-left.ts
index 1bfe37e..2ab6eb4 100644
--- a/public/examples/ts/tree-orient-right-left.ts
+++ b/public/examples/ts/tree-orient-right-left.ts
@@ -8,7 +8,10 @@ myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/data/flare.json', function (data) {
myChart.hideLoading();
- data.children.forEach(function (datum, index) {
+ data.children.forEach(function (
+ datum: { collapsed: boolean },
+ index: number
+ ) {
index % 2 === 0 && (datum.collapsed = true);
});
diff --git a/public/examples/types/example.d.ts b/public/examples/types/example.d.ts
index d08ff9a..efd4109 100644
--- a/public/examples/types/example.d.ts
+++ b/public/examples/types/example.d.ts
@@ -23,6 +23,7 @@ declare global {
};
const ecStat: any;
+ const d3: any;
const myChart: echarts.ECharts;
let option: echarts.EChartsOption;
diff --git a/src/editor/CodeMonaco.vue b/src/editor/CodeMonaco.vue
index 85224a7..7b5a003 100644
--- a/src/editor/CodeMonaco.vue
+++ b/src/editor/CodeMonaco.vue
@@ -73,6 +73,7 @@ declare global {
};
const ecStat: any;
+ const d3: any;
const myChart: echarts.ECharts
let option: echarts.EChartsOption
diff --git a/src/explore/ExampleCard.vue b/src/explore/ExampleCard.vue
index 254adc4..ba6de53 100644
--- a/src/explore/ExampleCard.vue
+++ b/src/explore/ExampleCard.vue
@@ -8,7 +8,7 @@
/>
</a>
<div>
- <div class="example-tags">
+ <div class="example-langs">
<a class="js" :href="exampleLink" target="_blank">JS</a>
<a class="ts" :href="exampleLink + '&lang=ts'" target="_blank">TS</a>
</div>
@@ -133,7 +133,7 @@ export default {
padding-left: 10px;
}
- .example-tags {
+ .example-langs {
margin-top: 10px;
float: right;
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-examples] 10/15: optimize explore page
Posted by sh...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
commit e1814a8918e2a5f3b2c21bf7f3bd53f3590740e7
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Sep 7 20:31:57 2021 +0800
optimize explore page
---
src/explore/ExampleCard.vue | 45 ++++++++++++++++++++++++---------------------
1 file changed, 24 insertions(+), 21 deletions(-)
diff --git a/src/explore/ExampleCard.vue b/src/explore/ExampleCard.vue
index bc9f352..254adc4 100644
--- a/src/explore/ExampleCard.vue
+++ b/src/explore/ExampleCard.vue
@@ -7,19 +7,15 @@
:data-src="screenshotURL"
/>
</a>
- <div class="example-title">{{ title }}</div>
- <div class="example-subtitle" v-if="showSubtitle">{{ subtitle }}</div>
- <div class="example-tags">
- <el-tooltip :content="$t('editor.tooltip.jsMode')" placement="bottom">
+ <div>
+ <div class="example-tags">
<a class="js" :href="exampleLink" target="_blank">JS</a>
- </el-tooltip>
- <el-tooltip
- :content="$t('editor.tooltip.tsMode')"
- placement="bottom"
- v-if="example.ts"
- >
<a class="ts" :href="exampleLink + '&lang=ts'" target="_blank">TS</a>
- </el-tooltip>
+ </div>
+ <div>
+ <div class="example-title">{{ title }}</div>
+ <div class="example-subtitle" v-if="showSubtitle">{{ subtitle }}</div>
+ </div>
</div>
</div>
</template>
@@ -90,17 +86,25 @@ export default {
width: 100%;
max-width: 350px;
margin-bottom: 30px;
-
- border-radius: 2px;
position: relative;
+ .example-link {
+ margin-top: 10px;
+ border-radius: 5px;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
+ overflow: hidden;
+ display: block;
+ }
+
.chart-area {
width: 100%;
height: 100%;
- border-radius: 5px;
- box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
- margin-top: 10px;
cursor: pointer;
+ transition: 0.3s ease-in-out;
+
+ &:hover {
+ transform: scale(1.2);
+ }
}
.example-title {
@@ -130,9 +134,8 @@ export default {
}
.example-tags {
- position: absolute;
- right: 10px;
- bottom: 20px;
+ margin-top: 10px;
+ float: right;
& > * {
display: inline-block;
@@ -140,8 +143,8 @@ export default {
margin-left: 5px;
vertical-align: middle;
border-radius: 3px;
- font-size: 12px;
- font-weight: bold;
+ font-size: 10px;
+ // font-weight: bold;
opacity: 0.8;
&:hover {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-examples] 09/15: add js and ts tag in explore page
Posted by sh...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
commit 4bed1e1a908b1dafd4cfc8ba2769ea47cf9bf583
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Sep 7 16:51:28 2021 +0800
add js and ts tag in explore page
---
src/common/store.js | 4 +-
src/explore/ExampleCard.vue | 103 +++++++++++++++++++++++++++++++-------------
src/explore/Explore.vue | 1 -
3 files changed, 75 insertions(+), 33 deletions(-)
diff --git a/src/common/store.js b/src/common/store.js
index 6dbb3ee..a73ec0d 100644
--- a/src/common/store.js
+++ b/src/common/store.js
@@ -13,7 +13,9 @@ export const store = {
renderer: URL_PARAMS.renderer || 'canvas',
typeCheck:
- getExampleConfig().ts && (URL_PARAMS.lang || '').toLowerCase() === 'ts',
+ getExampleConfig() &&
+ getExampleConfig().ts &&
+ (URL_PARAMS.lang || '').toLowerCase() === 'ts',
useDirtyRect: 'useDirtyRect' in URL_PARAMS,
runCode: '',
diff --git a/src/explore/ExampleCard.vue b/src/explore/ExampleCard.vue
index 17d6959..bc9f352 100644
--- a/src/explore/ExampleCard.vue
+++ b/src/explore/ExampleCard.vue
@@ -6,9 +6,21 @@
src="../asset/placeholder.jpg"
:data-src="screenshotURL"
/>
- <h4 class="example-title">{{ title }}</h4>
- <h5 class="example-subtitle" v-if="showSubtitle">{{ subtitle }}</h5>
</a>
+ <div class="example-title">{{ title }}</div>
+ <div class="example-subtitle" v-if="showSubtitle">{{ subtitle }}</div>
+ <div class="example-tags">
+ <el-tooltip :content="$t('editor.tooltip.jsMode')" placement="bottom">
+ <a class="js" :href="exampleLink" target="_blank">JS</a>
+ </el-tooltip>
+ <el-tooltip
+ :content="$t('editor.tooltip.tsMode')"
+ placement="bottom"
+ v-if="example.ts"
+ >
+ <a class="ts" :href="exampleLink + '&lang=ts'" target="_blank">TS</a>
+ </el-tooltip>
+ </div>
</div>
</template>
@@ -80,42 +92,71 @@ export default {
margin-bottom: 30px;
border-radius: 2px;
+ position: relative;
+
+ .chart-area {
+ width: 100%;
+ height: 100%;
+ border-radius: 5px;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
+ margin-top: 10px;
+ cursor: pointer;
+ }
+
+ .example-title {
+ color: $clr-primary;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+
+ padding: 10px 10px 2px 10px;
+ margin: 0;
+ display: block;
+ font-size: 14px;
+ text-align: left;
+ }
- .example-link {
- position: relative;
+ .example-subtitle {
+ font-size: 12px;
+ text-align: left;
+ color: #aaa;
display: block;
+ // font-weight: 200;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ margin: 3px 0 0 0;
+ padding-left: 10px;
+ }
+
+ .example-tags {
+ position: absolute;
+ right: 10px;
+ bottom: 20px;
+
+ & > * {
+ display: inline-block;
+ padding: 1px 6px;
+ margin-left: 5px;
+ vertical-align: middle;
+ border-radius: 3px;
+ font-size: 12px;
+ font-weight: bold;
+ opacity: 0.8;
- .chart-area {
- width: 100%;
- height: 100%;
- border-radius: 5px;
- box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
- margin-top: 10px;
+ &:hover {
+ opacity: 1;
+ }
}
- .example-title {
- color: $clr-primary;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-
- padding: 10px 10px 2px 10px;
- margin: 0;
- font-weight: normal;
- font-size: 14px;
- text-align: center;
+ .js {
+ background: #f7df1e;
+ color: #444;
}
- .example-subtitle {
- font-size: 12px;
- text-align: center;
- color: #aaa;
- font-weight: normal;
- // font-weight: 200;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- margin: 3px 0 0 0;
+ .ts {
+ background: #3178c6;
+ color: #eee;
}
}
diff --git a/src/explore/Explore.vue b/src/explore/Explore.vue
index cd81d4c..945c60d 100644
--- a/src/explore/Explore.vue
+++ b/src/explore/Explore.vue
@@ -375,7 +375,6 @@ $pd-lg: 20px;
li {
// transition: background-color 0.5s;
- cursor: pointer;
a {
height: 45px;
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-examples] 12/15: update more ts examples
Posted by sh...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
commit 99f366e1df407228cde20900a3e05a5df33674ae
Author: pissang <bm...@gmail.com>
AuthorDate: Thu Sep 9 13:31:39 2021 +0800
update more ts examples
---
public/examples/ts/custom-calendar-icon.ts | 12 +-
public/examples/ts/custom-cartesian-polygon.js | 70 -----------
public/examples/ts/custom-cartesian-polygon.ts | 69 +++++++++++
public/examples/ts/custom-error-bar.js | 128 ---------------------
public/examples/ts/custom-error-bar.ts | 126 ++++++++++++++++++++
...om-error-scatter.js => custom-error-scatter.ts} | 55 +++++----
.../examples/ts/{custom-ohlc.js => custom-ohlc.ts} | 22 ++--
public/examples/ts/custom-polar-heatmap.js | 84 --------------
public/examples/ts/custom-polar-heatmap.ts | 84 ++++++++++++++
.../ts/{custom-profit.js => custom-profit.ts} | 60 +++++-----
.../examples/ts/{custom-wind.js => custom-wind.ts} | 16 +--
public/examples/ts/geo-svg-map.ts | 2 +-
public/examples/ts/wind-barb.ts | 10 +-
src/data/chart-list-data.js | 16 +--
14 files changed, 385 insertions(+), 369 deletions(-)
diff --git a/public/examples/ts/custom-calendar-icon.ts b/public/examples/ts/custom-calendar-icon.ts
index 1dec260..a69fd16 100644
--- a/public/examples/ts/custom-calendar-icon.ts
+++ b/public/examples/ts/custom-calendar-icon.ts
@@ -73,8 +73,8 @@ option = {
coordinateSystem: 'calendar',
renderItem: function (params, api) {
const cellPoint = api.coord(api.value(0));
- const cellWidth = params.coordSys.cellWidth;
- const cellHeight = params.coordSys.cellHeight;
+ const cellWidth: number = (params.coordSys as any).cellWidth;
+ const cellHeight: number = (params.coordSys as any).cellHeight;
const value = api.value(1) as string;
const events = value && value.split('|');
@@ -83,7 +83,7 @@ option = {
return;
}
- const group = {
+ const group: echarts.CustomSeriesRenderItemReturn = {
type: 'group',
children:
(layouts[events.length - 1] || []).map(function (
@@ -93,7 +93,7 @@ option = {
return {
type: 'path',
shape: {
- pathData: pathes[events[index]],
+ pathData: pathes[+events[index]],
x: -8,
y: -8,
width: 16,
@@ -114,7 +114,7 @@ option = {
)
],
style: api.style({
- fill: colors[events[index]]
+ fill: colors[+events[index]]
})
};
}) || []
@@ -133,7 +133,7 @@ option = {
return group;
},
- dimensions: [null, { type: 'ordinal' }],
+ dimensions: [undefined, { type: 'ordinal' }],
data: getVirtulData('2017')
}
]
diff --git a/public/examples/ts/custom-cartesian-polygon.js b/public/examples/ts/custom-cartesian-polygon.js
deleted file mode 100644
index 72180d3..0000000
--- a/public/examples/ts/custom-cartesian-polygon.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/*
-title: Custom Cartesian Polygon
-titleCN: 自定义多边形图
-category: custom
-difficulty: 3
-*/
-
-var data = [];
-var dataCount = 7;
-for (var i = 0; i < dataCount; i++) {
- var val = Math.random() * 1000;
- data.push([
- echarts.number.round(Math.random() * 100),
- echarts.number.round(Math.random() * 400)
- ]);
-}
-
-function renderItem(params, api) {
- if (params.context.rendered) {
- return;
- }
- params.context.rendered = true;
-
- var points = [];
- for (var i = 0; i < data.length; i++) {
- points.push(api.coord(data[i]));
- }
- var color = api.visual('color');
-
- return {
- type: 'polygon',
- transition: ['shape'],
- shape: {
- points: points
- },
- style: api.style({
- fill: color,
- stroke: echarts.color.lift(color)
- })
- };
-}
-
-option = {
- tooltip: {
- trigger: 'axis'
- },
- legend: {
- data: ['bar', 'error']
- },
- dataZoom: [
- {
- type: 'slider',
- filterMode: 'none'
- },
- {
- type: 'inside',
- filterMode: 'none'
- }
- ],
- xAxis: {},
- yAxis: {},
- series: [
- {
- type: 'custom',
- renderItem: renderItem,
- clip: true,
- data: data
- }
- ]
-};
diff --git a/public/examples/ts/custom-cartesian-polygon.ts b/public/examples/ts/custom-cartesian-polygon.ts
new file mode 100644
index 0000000..4f5a468
--- /dev/null
+++ b/public/examples/ts/custom-cartesian-polygon.ts
@@ -0,0 +1,69 @@
+/*
+title: Custom Cartesian Polygon
+titleCN: 自定义多边形图
+category: custom
+difficulty: 3
+*/
+
+const data: number[][] = [];
+const dataCount = 7;
+for (let i = 0; i < dataCount; i++) {
+ data.push([
+ echarts.number.round(Math.random() * 100),
+ echarts.number.round(Math.random() * 400)
+ ]);
+}
+
+option = {
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['bar', 'error']
+ },
+ dataZoom: [
+ {
+ type: 'slider',
+ filterMode: 'none'
+ },
+ {
+ type: 'inside',
+ filterMode: 'none'
+ }
+ ],
+ xAxis: {},
+ yAxis: {},
+ series: [
+ {
+ type: 'custom',
+ renderItem: function (params, api) {
+ if (params.context.rendered) {
+ return;
+ }
+ params.context.rendered = true;
+
+ let points: number[][] = [];
+ for (let i = 0; i < data.length; i++) {
+ points.push(api.coord(data[i]));
+ }
+ let color = api.visual('color') as string;
+
+ return {
+ type: 'polygon',
+ transition: ['shape'],
+ shape: {
+ points: points
+ },
+ style: api.style({
+ fill: color,
+ stroke: echarts.color.lift(color, 0.1)
+ })
+ };
+ },
+ clip: true,
+ data: data
+ }
+ ]
+};
+
+export {};
diff --git a/public/examples/ts/custom-error-bar.js b/public/examples/ts/custom-error-bar.js
deleted file mode 100644
index 16f706c..0000000
--- a/public/examples/ts/custom-error-bar.js
+++ /dev/null
@@ -1,128 +0,0 @@
-/*
-title: Error Bar on Catesian
-category: custom
-titleCN: 使用自定系列给柱状图添加误差范围
-difficulty: 3
-*/
-
-var categoryData = [];
-var errorData = [];
-var barData = [];
-var dataCount = 100;
-for (var i = 0; i < dataCount; i++) {
- var val = Math.random() * 1000;
- categoryData.push('category' + i);
- errorData.push([
- i,
- echarts.number.round(Math.max(0, val - Math.random() * 100)),
- echarts.number.round(val + Math.random() * 80)
- ]);
- barData.push(echarts.number.round(val, 2));
-}
-
-function renderItem(params, api) {
- var xValue = api.value(0);
- var highPoint = api.coord([xValue, api.value(1)]);
- var lowPoint = api.coord([xValue, api.value(2)]);
- var halfWidth = api.size([1, 0])[0] * 0.1;
- var style = api.style({
- stroke: api.visual('color'),
- fill: null
- });
-
- return {
- type: 'group',
- children: [
- {
- type: 'line',
- transition: ['shape'],
- shape: {
- x1: highPoint[0] - halfWidth,
- y1: highPoint[1],
- x2: highPoint[0] + halfWidth,
- y2: highPoint[1]
- },
- style: style
- },
- {
- type: 'line',
- transition: ['shape'],
- shape: {
- x1: highPoint[0],
- y1: highPoint[1],
- x2: lowPoint[0],
- y2: lowPoint[1]
- },
- style: style
- },
- {
- type: 'line',
- transition: ['shape'],
- shape: {
- x1: lowPoint[0] - halfWidth,
- y1: lowPoint[1],
- x2: lowPoint[0] + halfWidth,
- y2: lowPoint[1]
- },
- style: style
- }
- ]
- };
-}
-
-option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- title: {
- text: 'Error bar chart'
- },
- legend: {
- data: ['bar', 'error']
- },
- dataZoom: [
- {
- type: 'slider',
- start: 50,
- end: 70
- },
- {
- type: 'inside',
- start: 50,
- end: 70
- }
- ],
- xAxis: {
- data: categoryData
- },
- yAxis: {},
- series: [
- {
- type: 'bar',
- name: 'bar',
- data: barData,
- itemStyle: {
- color: '#77bef7'
- }
- },
- {
- type: 'custom',
- name: 'error',
- itemStyle: {
- normal: {
- borderWidth: 1.5
- }
- },
- renderItem: renderItem,
- encode: {
- x: 0,
- y: [1, 2]
- },
- data: errorData,
- z: 100
- }
- ]
-};
diff --git a/public/examples/ts/custom-error-bar.ts b/public/examples/ts/custom-error-bar.ts
new file mode 100644
index 0000000..78acb07
--- /dev/null
+++ b/public/examples/ts/custom-error-bar.ts
@@ -0,0 +1,126 @@
+/*
+title: Error Bar on Catesian
+category: custom
+titleCN: 使用自定系列给柱状图添加误差范围
+difficulty: 3
+*/
+
+var categoryData = [];
+var errorData = [];
+var barData = [];
+var dataCount = 100;
+for (var i = 0; i < dataCount; i++) {
+ var val = Math.random() * 1000;
+ categoryData.push('category' + i);
+ errorData.push([
+ i,
+ echarts.number.round(Math.max(0, val - Math.random() * 100)),
+ echarts.number.round(val + Math.random() * 80)
+ ]);
+ barData.push(echarts.number.round(val, 2));
+}
+
+option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ title: {
+ text: 'Error bar chart'
+ },
+ legend: {
+ data: ['bar', 'error']
+ },
+ dataZoom: [
+ {
+ type: 'slider',
+ start: 50,
+ end: 70
+ },
+ {
+ type: 'inside',
+ start: 50,
+ end: 70
+ }
+ ],
+ xAxis: {
+ data: categoryData
+ },
+ yAxis: {},
+ series: [
+ {
+ type: 'bar',
+ name: 'bar',
+ data: barData,
+ itemStyle: {
+ color: '#77bef7'
+ }
+ },
+ {
+ type: 'custom',
+ name: 'error',
+ itemStyle: {
+ borderWidth: 1.5
+ },
+ renderItem: function (params, api) {
+ var xValue = api.value(0);
+ var highPoint = api.coord([xValue, api.value(1)]);
+ var lowPoint = api.coord([xValue, api.value(2)]);
+ var halfWidth = (api.size!([1, 0]) as number[])[0] * 0.1;
+ var style = api.style({
+ stroke: api.visual('color') as string,
+ fill: undefined
+ });
+
+ return {
+ type: 'group',
+ children: [
+ {
+ type: 'line',
+ transition: ['shape'],
+ shape: {
+ x1: highPoint[0] - halfWidth,
+ y1: highPoint[1],
+ x2: highPoint[0] + halfWidth,
+ y2: highPoint[1]
+ },
+ style: style
+ },
+ {
+ type: 'line',
+ transition: ['shape'],
+ shape: {
+ x1: highPoint[0],
+ y1: highPoint[1],
+ x2: lowPoint[0],
+ y2: lowPoint[1]
+ },
+ style: style
+ },
+ {
+ type: 'line',
+ transition: ['shape'],
+ shape: {
+ x1: lowPoint[0] - halfWidth,
+ y1: lowPoint[1],
+ x2: lowPoint[0] + halfWidth,
+ y2: lowPoint[1]
+ },
+ style: style
+ }
+ ]
+ };
+ },
+ encode: {
+ x: 0,
+ y: [1, 2]
+ },
+ data: errorData,
+ z: 100
+ }
+ ]
+};
+
+export {};
diff --git a/public/examples/ts/custom-error-scatter.js b/public/examples/ts/custom-error-scatter.ts
similarity index 81%
rename from public/examples/ts/custom-error-scatter.js
rename to public/examples/ts/custom-error-scatter.ts
index c74cf16..79bea15 100644
--- a/public/examples/ts/custom-error-scatter.js
+++ b/public/examples/ts/custom-error-scatter.ts
@@ -9,11 +9,11 @@ difficulty: 2
// Data from https://playground.anychart.com/gallery/7.12.0/Error_Charts/Marker_Chart
// prettier-ignore
-var dimensions = [
+const dimensions = [
'name', 'Price', 'Prime cost', 'Prime cost min', 'Prime cost max', 'Price min', 'Price max'
];
// prettier-ignore
-var data = [
+const data = [
['Blouse "Blue Viola"', 101.88, 99.75, 76.75, 116.75, 69.88, 119.88],
['Dress "Daisy"', 155.8, 144.03, 126.03, 156.03, 129.8, 188.8],
['Trousers "Cutesy Classic"', 203.25, 173.56, 151.56, 187.56, 183.25, 249.25],
@@ -33,28 +33,34 @@ var data = [
['Sweater "Fluffy Comfort"', 790.34, 678.34, 660.34, 690.34, 762.34, 824.34]
];
-function renderItem(params, api) {
- var children = [];
- var coordDims = ['x', 'y'];
+function renderItem(
+ params: echarts.CustomSeriesRenderItemParams,
+ api: echarts.CustomSeriesRenderItemAPI
+): echarts.CustomSeriesRenderItemReturn {
+ const group: echarts.CustomSeriesRenderItemReturn = {
+ type: 'group',
+ children: []
+ };
+ let coordDims = ['x', 'y'];
- for (var baseDimIdx = 0; baseDimIdx < 2; baseDimIdx++) {
- var otherDimIdx = 1 - baseDimIdx;
- var encode = params.encode;
- var baseValue = api.value(encode[coordDims[baseDimIdx]][0]);
- var param = [];
+ for (let baseDimIdx = 0; baseDimIdx < 2; baseDimIdx++) {
+ let otherDimIdx = 1 - baseDimIdx;
+ let encode = params.encode;
+ let baseValue = api.value(encode[coordDims[baseDimIdx]][0]);
+ let param = [];
param[baseDimIdx] = baseValue;
param[otherDimIdx] = api.value(encode[coordDims[otherDimIdx]][1]);
- var highPoint = api.coord(param);
+ let highPoint = api.coord(param);
param[otherDimIdx] = api.value(encode[coordDims[otherDimIdx]][2]);
- var lowPoint = api.coord(param);
- var halfWidth = 5;
+ let lowPoint = api.coord(param);
+ let halfWidth = 5;
var style = api.style({
- stroke: api.visual('color'),
- fill: null
+ stroke: api.visual('color') as string,
+ fill: undefined
});
- children.push(
+ group.children.push(
{
type: 'line',
transition: ['shape'],
@@ -94,8 +100,14 @@ function renderItem(params, api) {
);
}
- function makeShape(baseDimIdx, base1, value1, base2, value2) {
- var shape = {};
+ function makeShape(
+ baseDimIdx: number,
+ base1: number,
+ value1: number,
+ base2: number,
+ value2: number
+ ) {
+ var shape: Record<string, number> = {};
shape[coordDims[baseDimIdx] + '1'] = base1;
shape[coordDims[1 - baseDimIdx] + '1'] = value1;
shape[coordDims[baseDimIdx] + '2'] = base2;
@@ -103,10 +115,7 @@ function renderItem(params, api) {
return shape;
}
- return {
- type: 'group',
- children: children
- };
+ return group;
}
option = {
@@ -159,3 +168,5 @@ option = {
}
]
};
+
+export {};
diff --git a/public/examples/ts/custom-ohlc.js b/public/examples/ts/custom-ohlc.ts
similarity index 87%
rename from public/examples/ts/custom-ohlc.js
rename to public/examples/ts/custom-ohlc.ts
index f1e4e6f..d1eea1e 100644
--- a/public/examples/ts/custom-ohlc.js
+++ b/public/examples/ts/custom-ohlc.ts
@@ -5,9 +5,9 @@ titleCN: OHLC 图（使用自定义系列）
difficulty: 1
*/
-function splitData(rawData) {
- var categoryData = [];
- var values = [];
+function splitData(rawData: number[][]) {
+ const categoryData = [];
+ const values = [];
for (var i = 0; i < rawData.length; i++) {
categoryData.push(rawData[i][0]);
rawData[i][0] = i;
@@ -19,13 +19,16 @@ function splitData(rawData) {
};
}
-function renderItem(params, api) {
+function renderItem(
+ params: echarts.CustomSeriesRenderItemParams,
+ api: echarts.CustomSeriesRenderItemAPI
+): echarts.CustomSeriesRenderItemReturn {
var xValue = api.value(0);
var openPoint = api.coord([xValue, api.value(1)]);
var closePoint = api.coord([xValue, api.value(2)]);
var lowPoint = api.coord([xValue, api.value(3)]);
var highPoint = api.coord([xValue, api.value(4)]);
- var halfWidth = api.size([1, 0])[0] * 0.35;
+ var halfWidth = (api.size!([1, 0]) as number[])[0] * 0.35;
var style = api.style({
stroke: api.visual('color')
});
@@ -84,13 +87,13 @@ $.get(ROOT_PATH + '/data/asset/data/stock-DJI.json', function (rawData) {
type: 'cross'
},
position: function (pos, params, el, elRect, size) {
- var obj = { top: 10 };
+ var obj: Record<string, number> = { top: 10 };
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
return obj;
}
},
axisPointer: {
- link: { xAxisIndex: 'all' }
+ link: [{ xAxisIndex: 'all' }]
},
toolbox: {
feature: {
@@ -117,7 +120,6 @@ $.get(ROOT_PATH + '/data/asset/data/stock-DJI.json', function (rawData) {
boundaryGap: false,
axisLine: { onZero: false },
splitLine: { show: false },
- splitNumber: 20,
min: 'dataMin',
max: 'dataMax',
axisPointer: {
@@ -154,7 +156,7 @@ $.get(ROOT_PATH + '/data/asset/data/stock-DJI.json', function (rawData) {
name: 'Dow-Jones index',
type: 'custom',
renderItem: renderItem,
- dimensions: [null, 'open', 'close', 'lowest', 'highest'],
+ dimensions: ['-', 'open', 'close', 'lowest', 'highest'],
encode: {
x: 0,
y: [1, 2, 3, 4],
@@ -167,3 +169,5 @@ $.get(ROOT_PATH + '/data/asset/data/stock-DJI.json', function (rawData) {
true
);
});
+
+export {};
diff --git a/public/examples/ts/custom-polar-heatmap.js b/public/examples/ts/custom-polar-heatmap.js
deleted file mode 100644
index 624c5d9..0000000
--- a/public/examples/ts/custom-polar-heatmap.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/*
-title: Polar Heatmap
-category: custom
-titleCN: 极坐标热力图（自定义系列）
-difficulty: 4
-*/
-
-function renderItem(params, api) {
- var values = [api.value(0), api.value(1)];
- var coord = api.coord(values);
- var size = api.size([1, 1], values);
- return {
- type: 'sector',
- shape: {
- cx: params.coordSys.cx,
- cy: params.coordSys.cy,
- r0: coord[2] - size[0] / 2,
- r: coord[2] + size[0] / 2,
- startAngle: -(coord[3] + size[1] / 2),
- endAngle: -(coord[3] - size[1] / 2)
- },
- style: api.style({
- fill: api.visual('color')
- })
- };
-}
-
-// prettier-ignore
-var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a', '10a', '11a', '12p', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p', '9p', '10p', '11p'];
-// prettier-ignore
-var days = ['Saturday', 'Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
-// prettier-ignore
-var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2 [...]
-var maxValue = data.reduce(function (max, item) {
- return Math.max(max, item[2]);
-}, -Infinity);
-
-option = {
- legend: {
- data: ['Punch Card']
- },
- polar: {},
- tooltip: {},
- visualMap: {
- type: 'continuous',
- min: 0,
- max: maxValue,
- top: 'middle',
- dimension: 2,
- calculable: true
- },
- angleAxis: {
- type: 'category',
- data: hours,
- boundaryGap: false,
- splitLine: {
- show: true,
- lineStyle: {
- color: '#ddd',
- type: 'dashed'
- }
- },
- axisLine: {
- show: false
- }
- },
- radiusAxis: {
- type: 'category',
- data: days,
- z: 100
- },
- series: [
- {
- name: 'Punch Card',
- type: 'custom',
- coordinateSystem: 'polar',
- itemStyle: {
- color: '#d14a61'
- },
- renderItem: renderItem,
- data: data
- }
- ]
-};
diff --git a/public/examples/ts/custom-polar-heatmap.ts b/public/examples/ts/custom-polar-heatmap.ts
new file mode 100644
index 0000000..5f665ce
--- /dev/null
+++ b/public/examples/ts/custom-polar-heatmap.ts
@@ -0,0 +1,84 @@
+/*
+title: Polar Heatmap
+category: custom
+titleCN: 极坐标热力图（自定义系列）
+difficulty: 4
+*/
+
+// prettier-ignore
+const hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a', '10a', '11a', '12p', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p', '9p', '10p', '11p'];
+// prettier-ignore
+const days = ['Saturday', 'Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
+// prettier-ignore
+const data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0], [...]
+const maxValue = data.reduce(function (max, item) {
+ return Math.max(max, item[2]);
+}, -Infinity);
+
+option = {
+ legend: {
+ data: ['Punch Card']
+ },
+ polar: {},
+ tooltip: {},
+ visualMap: {
+ type: 'continuous',
+ min: 0,
+ max: maxValue,
+ top: 'middle',
+ dimension: 2,
+ calculable: true
+ },
+ angleAxis: {
+ type: 'category',
+ data: hours,
+ boundaryGap: false,
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#ddd',
+ type: 'dashed'
+ }
+ },
+ axisLine: {
+ show: false
+ }
+ },
+ radiusAxis: {
+ type: 'category',
+ data: days,
+ z: 100
+ },
+ series: [
+ {
+ name: 'Punch Card',
+ type: 'custom',
+ coordinateSystem: 'polar',
+ itemStyle: {
+ color: '#d14a61'
+ },
+ renderItem: function (params, api) {
+ var values = [api.value(0), api.value(1)];
+ var coord = api.coord(values);
+ var size = api.size!([1, 1], values) as number[];
+ return {
+ type: 'sector',
+ shape: {
+ cx: (params.coordSys as any).cx,
+ cy: (params.coordSys as any).cy,
+ r0: coord[2] - size[0] / 2,
+ r: coord[2] + size[0] / 2,
+ startAngle: -(coord[3] + size[1] / 2),
+ endAngle: -(coord[3] - size[1] / 2)
+ },
+ style: api.style({
+ fill: api.visual('color')
+ })
+ };
+ },
+ data: data
+ }
+ ]
+};
+
+export {};
diff --git a/public/examples/ts/custom-profit.js b/public/examples/ts/custom-profit.ts
similarity index 56%
rename from public/examples/ts/custom-profit.js
rename to public/examples/ts/custom-profit.ts
index 0e100ab..93f9ca2 100644
--- a/public/examples/ts/custom-profit.js
+++ b/public/examples/ts/custom-profit.ts
@@ -5,15 +5,7 @@ titleCN: 利润分布直方图
difficulty: 1
*/
-var data = [
- [10, 16, 3, 'A'],
- [16, 18, 15, 'B'],
- [18, 26, 12, 'C'],
- [26, 32, 22, 'D'],
- [32, 56, 7, 'E'],
- [56, 62, 17, 'F']
-];
-var colorList = [
+const colorList = [
'#4f81bd',
'#c0504d',
'#9bbb59',
@@ -22,7 +14,14 @@ var colorList = [
'#e46c0b'
];
-data = data.map(function (item, index) {
+const data = [
+ [10, 16, 3, 'A'],
+ [16, 18, 15, 'B'],
+ [18, 26, 12, 'C'],
+ [26, 32, 22, 'D'],
+ [32, 56, 7, 'E'],
+ [56, 62, 17, 'F']
+].map(function (item, index) {
return {
value: item,
itemStyle: {
@@ -31,24 +30,6 @@ data = data.map(function (item, index) {
};
});
-function renderItem(params, api) {
- var yValue = api.value(2);
- var start = api.coord([api.value(0), yValue]);
- var size = api.size([api.value(1) - api.value(0), yValue]);
- var style = api.style();
-
- return {
- type: 'rect',
- shape: {
- x: start[0],
- y: start[1],
- width: size[0],
- height: size[1]
- },
- style: style
- };
-}
-
option = {
title: {
text: 'Profit',
@@ -62,7 +43,26 @@ option = {
series: [
{
type: 'custom',
- renderItem: renderItem,
+ renderItem: function (params, api) {
+ var yValue = api.value(2);
+ var start = api.coord([api.value(0), yValue]);
+ var size = api.size!([
+ (api.value(1) as number) - (api.value(0) as number),
+ yValue
+ ]) as number[];
+ var style = api.style();
+
+ return {
+ type: 'rect',
+ shape: {
+ x: start[0],
+ y: start[1],
+ width: size[0],
+ height: size[1]
+ },
+ style: style
+ };
+ },
label: {
show: true,
position: 'top'
@@ -78,3 +78,5 @@ option = {
}
]
};
+
+export {};
diff --git a/public/examples/ts/custom-wind.js b/public/examples/ts/custom-wind.ts
similarity index 90%
rename from public/examples/ts/custom-wind.js
rename to public/examples/ts/custom-wind.ts
index b01eff9..a0f3d62 100644
--- a/public/examples/ts/custom-wind.js
+++ b/public/examples/ts/custom-wind.ts
@@ -5,7 +5,7 @@ category: custom
difficulty: 7
*/
-function shuffle(array) {
+function shuffle(array: any[]) {
// https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
var currentIndex = array.length;
var temporaryValue;
@@ -91,15 +91,15 @@ $.getJSON(ROOT_PATH + '/data-gl/asset/data/winds.json', function (windData) {
y: 0
},
renderItem: function (params, api) {
- var x = api.value(0),
- y = api.value(1),
- dx = api.value(2),
- dy = api.value(3);
- var start = api.coord([
+ const x = api.value(0) as number;
+ const y = api.value(1) as number;
+ const dx = api.value(2) as number;
+ const dy = api.value(3) as number;
+ const start = api.coord([
Math.max(x - dx / 5, -180),
Math.max(y - dy / 5, -90)
]);
- var end = api.coord([
+ const end = api.coord([
Math.min(x + dx / 5, 180),
Math.min(y + dy / 5, 90)
]);
@@ -122,3 +122,5 @@ $.getJSON(ROOT_PATH + '/data-gl/asset/data/winds.json', function (windData) {
})
);
});
+
+export {};
diff --git a/public/examples/ts/geo-svg-map.ts b/public/examples/ts/geo-svg-map.ts
index 6dbf4df..55f8f11 100644
--- a/public/examples/ts/geo-svg-map.ts
+++ b/public/examples/ts/geo-svg-map.ts
@@ -31,7 +31,7 @@ $.get(
tooltip: {
show: true,
confine: true,
- formatter: function (params) {
+ formatter: function (params: any) {
return [
'This is the introduction:',
'xxxxxxxxxxxxxxxxxxxxx',
diff --git a/public/examples/ts/wind-barb.ts b/public/examples/ts/wind-barb.ts
index d409fab..ecabef0 100644
--- a/public/examples/ts/wind-barb.ts
+++ b/public/examples/ts/wind-barb.ts
@@ -75,9 +75,9 @@ $.getJSON(
};
};
- const renderWeather: echarts.CustomSeriesOption['renderItem'] = function (
- param,
- api
+ const renderWeather = function (
+ param: echarts.CustomSeriesRenderItemParams,
+ api: echarts.CustomSeriesRenderItemAPI
) {
const point = api.coord([
(api.value(dims.time) as number) + (3600 * 24 * 1000) / 2,
@@ -90,7 +90,7 @@ $.getJSON(
{
type: 'image',
style: {
- image: api.value(dims.weatherIcon),
+ image: api.value(dims.weatherIcon) as string,
x: -weatherIconSize / 2,
y: -weatherIconSize / 2,
width: weatherIconSize,
@@ -110,7 +110,7 @@ $.getJSON(
position: [point[0], 80]
}
]
- };
+ } as echarts.CustomSeriesRenderItemReturn;
};
option = {
diff --git a/src/data/chart-list-data.js b/src/data/chart-list-data.js
index 3581bc4..0bcbda6 100644
--- a/src/data/chart-list-data.js
+++ b/src/data/chart-list-data.js
@@ -220,7 +220,7 @@ export default [
"candlestick"
],
"id": "custom-ohlc",
- "ts": false,
+ "ts": true,
"tags": [],
"title": "OHLC Chart",
"titleCN": "OHLC 图（使用自定义系列）",
@@ -231,7 +231,7 @@ export default [
"custom"
],
"id": "custom-profit",
- "ts": false,
+ "ts": true,
"tags": [],
"title": "Profit",
"titleCN": "利润分布直方图",
@@ -497,7 +497,7 @@ export default [
"dataZoom"
],
"id": "custom-error-scatter",
- "ts": false,
+ "ts": true,
"tags": [],
"title": "Error Scatter on Catesian",
"titleCN": "使用自定系列给散点图添加误差范围",
@@ -817,7 +817,7 @@ export default [
"custom"
],
"id": "custom-cartesian-polygon",
- "ts": false,
+ "ts": true,
"tags": [],
"title": "Custom Cartesian Polygon",
"titleCN": "自定义多边形图",
@@ -828,7 +828,7 @@ export default [
"custom"
],
"id": "custom-error-bar",
- "ts": false,
+ "ts": true,
"tags": [],
"title": "Error Bar on Catesian",
"titleCN": "使用自定系列给柱状图添加误差范围",
@@ -1211,7 +1211,7 @@ export default [
"custom"
],
"id": "custom-polar-heatmap",
- "ts": false,
+ "ts": true,
"tags": [],
"title": "Polar Heatmap",
"titleCN": "极坐标热力图（自定义系列）",
@@ -1884,7 +1884,7 @@ export default [
"custom"
],
"id": "custom-wind",
- "ts": false,
+ "ts": true,
"tags": [],
"title": "Use custom series to draw wind vectors",
"titleCN": "使用自定义系列绘制风场",
@@ -2916,7 +2916,7 @@ export default [
"custom"
],
"id": "circle-packing-with-d3",
- "ts": true,
+ "ts": false,
"tags": [],
"title": "Circle Packing with d3",
"titleCN": "Circle Packing with d3",
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-examples] 04/15: add ts mode. update gl codes
Posted by sh...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
commit a6bbe0c6a6fc66b4015bd4201d397a44d3094f51
Author: pissang <bm...@gmail.com>
AuthorDate: Mon Sep 6 20:05:39 2021 +0800
add ts mode. update gl codes
---
.prettierignore | 1 -
common/buildCode.js | 6 +-
package.json | 2 +-
public/data-gl/animating-contour-on-globe.js | 179 ----
public/data-gl/bar3d-dataset.js | 48 -
public/data-gl/bar3d-global-population.js | 96 --
public/data-gl/bar3d-mapbox-view-change.js | 104 --
public/data-gl/bar3d-music-visualization.js | 156 ---
public/data-gl/bar3d-myth.js | 104 --
.../bar3d-noise-modified-from-marpi-demo.js | 210 ----
public/data-gl/bar3d-on-mapbox.js | 71 --
public/data-gl/bar3d-shanghai.js | 71 --
public/data-gl/bar3d-simplex-noise.js | 79 --
public/data-gl/bar3d-voxelize-image.js | 171 ----
public/data-gl/flowGL-noise.js | 106 --
public/data-gl/geo3d-with-different-height.js | 72 --
public/data-gl/geo3d.js | 50 -
public/data-gl/global-population-bar3d-on-globe.js | 64 --
public/data-gl/global-wind-visualization-2.js | 248 -----
public/data-gl/global-wind-visualization.js | 196 ----
public/data-gl/globe-atmosphere.js | 30 -
public/data-gl/globe-contour-paint.js | 178 ----
public/data-gl/globe-country-carousel.js | 107 --
public/data-gl/globe-displacement.js | 56 -
public/data-gl/globe-echarts-gl-hello-world.js | 35 -
public/data-gl/globe-layers.js | 42 -
public/data-gl/globe-moon.js | 54 -
public/data-gl/globe-with-echarts-surface.js | 239 -----
public/data-gl/graphgl-gpu-layout.js | 70 --
public/data-gl/graphgl-large-internet.js | 64 --
public/data-gl/graphgl-npm-dep.js | 104 --
public/data-gl/image-surface-sushuang.js | 86 --
public/data-gl/image-to-bar3d.js | 89 --
public/data-gl/iron-globe.js | 40 -
public/data-gl/line3d-orthographic.js | 50 -
public/data-gl/lines3d-airline-on-globe.js | 57 --
public/data-gl/lines3d-flight-path-on-mapbox.js | 183 ----
public/data-gl/lines3d-flights-gl.js | 96 --
public/data-gl/lines3d-flights-on-geo3d.js | 77 --
public/data-gl/lines3d-flights.js | 148 ---
public/data-gl/lines3d-taxi-chengdu.js | 492 ---------
public/data-gl/lines3d-taxi-routes-of-cape-town.js | 169 ---
public/data-gl/linesGL-ny.js | 91 --
public/data-gl/map3d-alcohol-consumption.js | 72 --
public/data-gl/map3d-buildings-on-mapbox.js | 77 --
public/data-gl/map3d-buildings.js | 110 --
public/data-gl/map3d-colorful-cities.js | 93 --
...d-plastic-material-style-buildings-on-mapbox.js | 85 --
public/data-gl/map3d-wood-city.js | 94 --
public/data-gl/map3d-wood-map-on-mapbox.js | 68 --
public/data-gl/map3d-wood-map.js | 72 --
public/data-gl/metal-bar3d.js | 99 --
public/data-gl/metal-surface.js | 101 --
public/data-gl/parametric-surface-rose.js | 149 ---
public/data-gl/scatter3D-dataset.js | 41 -
public/data-gl/scatter3d-globe-population.js | 89 --
public/data-gl/scatter3d-orthographic.js | 68 --
public/data-gl/scatter3d-scatter.js | 108 --
public/data-gl/scatter3d-shanghai.js | 50 -
public/data-gl/scatter3d-simplex-noise.js | 68 --
.../data-gl/scatter3d-weibo-checkin-on-mapbox.js | 87 --
public/data-gl/scatter3d.js | 208 ----
public/data-gl/scatterGL-gps.js | 89 --
public/data-gl/scattergl-weibo.js | 100 --
public/data-gl/simple-surface.js | 53 -
public/data-gl/sphere-parametric-surface.js | 48 -
public/data-gl/stacked-bar3d.js | 62 --
public/data-gl/surface-breather.js | 119 ---
public/data-gl/surface-golden-rose.js | 159 ---
public/data-gl/surface-leather.js | 137 ---
public/data-gl/surface-mollusc-shell.js | 78 --
public/data-gl/surface-theme-roses.js | 154 ---
public/data-gl/surface-wave.js | 58 --
.../examples/ts/gl/animating-contour-on-globe.js | 182 ++++
public/examples/ts/gl/bar3d-dataset.js | 51 +
public/examples/ts/gl/bar3d-global-population.js | 109 ++
public/examples/ts/gl/bar3d-mapbox-view-change.js | 118 +++
public/examples/ts/gl/bar3d-music-visualization.js | 161 +++
public/examples/ts/gl/bar3d-myth.js | 107 ++
.../ts/gl/bar3d-noise-modified-from-marpi-demo.js | 216 ++++
public/examples/ts/gl/bar3d-on-mapbox.js | 86 ++
.../ts/gl}/bar3d-punch-card.js | 127 ++-
public/examples/ts/gl/bar3d-shanghai.js | 84 ++
public/examples/ts/gl/bar3d-simplex-noise.js | 94 ++
public/examples/ts/gl/bar3d-voxelize-image.js | 175 ++++
public/examples/ts/gl/flowGL-noise.js | 125 +++
.../examples/ts/gl/geo3d-with-different-height.js | 74 ++
public/examples/ts/gl/geo3d.js | 49 +
.../ts/gl/global-population-bar3d-on-globe.js | 67 ++
.../examples/ts/gl/global-wind-visualization-2.js | 277 +++++
public/examples/ts/gl/global-wind-visualization.js | 211 ++++
public/examples/ts/gl/globe-atmosphere.js | 30 +
public/examples/ts/gl/globe-contour-paint.js | 177 ++++
public/examples/ts/gl/globe-country-carousel.js | 112 ++
public/examples/ts/gl/globe-displacement.js | 57 ++
.../examples/ts/gl/globe-echarts-gl-hello-world.js | 35 +
public/examples/ts/gl/globe-layers.js | 45 +
public/examples/ts/gl/globe-moon.js | 54 +
.../examples/ts/gl/globe-with-echarts-surface.js | 254 +++++
public/examples/ts/gl/graphgl-gpu-layout.js | 71 ++
public/examples/ts/gl/graphgl-large-internet.js | 101 ++
public/examples/ts/gl/graphgl-npm-dep.js | 140 +++
public/examples/ts/gl/image-surface-sushuang.js | 90 ++
public/examples/ts/gl/image-to-bar3d.js | 93 ++
public/examples/ts/gl/iron-globe.js | 39 +
public/examples/ts/gl/line3d-orthographic.js | 64 ++
public/examples/ts/gl/lines3d-airline-on-globe.js | 53 +
.../ts/gl/lines3d-flight-path-on-mapbox.js | 190 ++++
public/examples/ts/gl/lines3d-flights-gl.js | 94 ++
public/examples/ts/gl/lines3d-flights-on-geo3d.js | 76 ++
public/examples/ts/gl/lines3d-flights.js | 149 +++
public/examples/ts/gl/lines3d-taxi-chengdu.js | 1073 ++++++++++++++++++++
.../ts/gl/lines3d-taxi-routes-of-cape-town.js | 176 ++++
public/examples/ts/gl/linesGL-ny.js | 93 ++
public/examples/ts/gl/map3d-alcohol-consumption.js | 85 ++
public/examples/ts/gl/map3d-buildings-on-mapbox.js | 78 ++
public/examples/ts/gl/map3d-buildings.js | 123 +++
public/examples/ts/gl/map3d-colorful-cities.js | 108 ++
...d-plastic-material-style-buildings-on-mapbox.js | 88 ++
public/examples/ts/gl/map3d-wood-city.js | 95 ++
public/examples/ts/gl/map3d-wood-map-on-mapbox.js | 73 ++
public/examples/ts/gl/map3d-wood-map.js | 74 ++
public/examples/ts/gl/metal-bar3d.js | 101 ++
public/examples/ts/gl/metal-surface.js | 126 +++
public/examples/ts/gl/parametric-surface-rose.js | 168 +++
public/examples/ts/gl/scatter3D-dataset.js | 44 +
.../examples/ts/gl/scatter3d-globe-population.js | 89 ++
public/examples/ts/gl/scatter3d-orthographic.js | 83 ++
public/examples/ts/gl/scatter3d-scatter.js | 131 +++
public/examples/ts/gl/scatter3d-shanghai.js | 63 ++
public/examples/ts/gl/scatter3d-simplex-noise.js | 83 ++
.../ts/gl/scatter3d-weibo-checkin-on-mapbox.js | 91 ++
public/examples/ts/gl/scatter3d.js | 225 ++++
public/examples/ts/gl/scatterGL-gps.js | 90 ++
public/examples/ts/gl/scattergl-weibo.js | 104 ++
public/examples/ts/gl/simple-surface.js | 67 ++
public/examples/ts/gl/sphere-parametric-surface.js | 62 ++
public/examples/ts/gl/stacked-bar3d.js | 61 ++
public/examples/ts/gl/surface-breather.js | 145 +++
public/examples/ts/gl/surface-golden-rose.js | 175 ++++
public/examples/ts/gl/surface-leather.js | 140 +++
public/examples/ts/gl/surface-mollusc-shell.js | 92 ++
public/examples/ts/gl/surface-theme-roses.js | 170 ++++
public/examples/ts/gl/surface-wave.js | 72 ++
.../ts/gl}/transparent-bar3d.js | 129 ++-
src/common/store.js | 9 +-
src/editor/CodeAce.vue | 1 +
src/editor/Editor.vue | 53 +-
src/editor/FullCodePreview.vue | 6 +-
src/editor/Preview.vue | 47 +-
150 files changed, 8766 insertions(+), 7551 deletions(-)
diff --git a/.prettierignore b/.prettierignore
index 84fc23f..a51b10a 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -22,7 +22,6 @@ public/vendors/echarts/map/raw
/public/asset
/public/data/option
/public/data-gl/option
-/public/examples/js
/e2e/package-lock.json
tmp
\ No newline at end of file
diff --git a/common/buildCode.js b/common/buildCode.js
index 64e4204..88db799 100644
--- a/common/buildCode.js
+++ b/common/buildCode.js
@@ -230,7 +230,7 @@ function buildMinimalBundleCode(deps, includeType) {
];
const ECOptionTypeCode = `
-type ECOption = echarts.ComposeOption<
+type EChartsOption = echarts.ComposeOption<
${allImports.filter((a) => a.endsWith('Option')).join(' | ')}
>`;
const importsCodes = [
@@ -383,7 +383,7 @@ ${
const ENV_CODE = [
usedRootPath ? `var ROOT_PATH = '${ROOT_PATH}';` : '',
usedApp ? `var app${ts ? ': any' : ''} = {};` : '',
- ts && !minimal ? 'type ECOption = echarts.EChartsOption' : ''
+ ts && !minimal ? 'type EChartsOption = echarts.EChartsOption' : ''
]
.filter((a) => !!a)
.join('\n');
@@ -396,7 +396,7 @@ ${
var chartDom = document.getElementById('main')${ts ? '!' : ''};
var myChart = echarts.init(chartDom${theme ? `, '${theme}'` : ''});
-var option${ts ? ': ECOption' : ''};
+var option${ts ? ': EChartsOption' : ''};
${jsCode.trim()}
diff --git a/package.json b/package.json
index 8fe1fee..26fe6df 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
"release": "npm run build && node build/copyResource.js --env asf",
"dev": "npx concurrently --kill-others \"npm:watch\" \"npm:server\"",
"build:example": "node tool/build-example.js && node tool/build-example.js --source data-gl",
- "compile:example": "tsc --project public/examples/tsconfig.json",
+ "compile:example": "tsc --project public/examples/tsconfig.json || prettier --write public/examples/js",
"test:e2e": "node e2e/main.js --bundler webpack -m",
"test:e2e:local": "node e2e/main.js --bundler webpack -m --local",
"test:e2e:esbuild": "node e2e/main.js --bundler esbuild -m",
diff --git a/public/data-gl/animating-contour-on-globe.js b/public/data-gl/animating-contour-on-globe.js
deleted file mode 100644
index aa2202f..0000000
--- a/public/data-gl/animating-contour-on-globe.js
+++ /dev/null
@@ -1,179 +0,0 @@
-/*
-title: Animating Contour on Globe
-category: globe
-titleCN: Animating Contour on Globe
-videoStart: 2000
-videoEnd: 6000
-*/
-
-
-var config = {
- color: '#c0101a',
- levels: 1,
- intensity: 4,
- threshold: 0.01
-}
-
-var canvas = document.createElement('canvas');
-canvas.width = 4096;
-canvas.height = 2048;
-context = canvas.getContext("2d");
-
-context.lineWidth = 0.5;
-context.strokeStyle = config.color;
-context.fillStyle = config.color;
-context.shadowColor = config.color;
-
-$.when(
- $.getScript('https://cdn.jsdelivr.net/npm/d3-array@2.8.0/dist/d3-array.js'),
- $.getScript('https://cdn.jsdelivr.net/npm/d3-contour@2.0.0/dist/d3-contour.js'),
- $.getScript('https://cdn.jsdelivr.net/npm/d3-geo@2.0.1/dist/d3-geo.js'),
- $.getScript('https://cdn.jsdelivr.net/npm/d3-timer@2.0.0/dist/d3-timer.js')
-).done(function () {
-
- image(ROOT_PATH + '/data-gl/asset/bathymetry_bw_composite_4k.jpg').then(function(image) {
- var m = image.height,
- n = image.width,
- values = new Array(n * m),
- contours = d3.contours().size([n, m]).smooth(true),
- projection = d3.geoIdentity().scale(canvas.width / n),
- path = d3.geoPath(projection, context);
-
- // StackBlur.R(image, 5);
-
- for (var j = 0, k = 0; j < m; ++j) {
- for (var i = 0; i < n; ++i, ++k) {
- values[k] = image.data[(k << 2)] / 255;
- }
- }
-
- var opt = {
- image: canvas
- };
-
- var results = [];
- function update(threshold, levels) {
- context.clearRect(0, 0, canvas.width, canvas.height);
- var thresholds = [];
- for (var i = 0; i < levels; i++) {
- thresholds.push((threshold + 1 / levels * i) % 1);
- }
- results = contours.thresholds(thresholds)(values);
- redraw();
- }
-
- function redraw() {
- results.forEach(function (d, idx) {
- context.beginPath();
- path(d);
- context.globalAlpha = 1;
- context.stroke();
- if (idx > config.levels / 5 * 3) {
- context.globalAlpha = 0.01;
- context.fill();
- }
- });
- opt.onupdate();
- }
- d3.timer(function(t) {
- var threshold = (t % 10000) / 10000;
- update(threshold, 1);
- });
-
- initCharts(opt);
-
- update(config.threshold, config.levels);
-
- });
-
- function image(url) {
- return new Promise(function(resolve) {
- var image = new Image();
- image.src = url;
- image.crossOrigin = 'Anonymous';
- image.onload = function() {
- var canvas = document.createElement('canvas');
- canvas.width = image.width / 8;
- canvas.height = image.height / 8;
- var context = canvas.getContext('2d');
- context.drawImage(image, 0, 0, canvas.width, canvas.height);
- resolve(context.getImageData(0, 0, canvas.width, canvas.height));
- };
- });
- }
-
- function initCharts(opt) {
- var contourChart = echarts.init(document.createElement('canvas'), null, {
- width: 4096,
- height: 2048
- });
-
- var img = new echarts.graphic.Image({
- style: {
- image: opt.image,
- x: -1,
- y: -1,
- width: opt.image.width + 2,
- height: opt.image.height + 2
- }
- });
- contourChart.getZr().add(img);
-
- opt.onupdate = function () {
- img.dirty();
- };
-
- myChart.setOption({
- backgroundColor: '#000',
- globe: {
-
- environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
-
- heightTexture: ROOT_PATH + '/data-gl/asset/bathymetry_bw_composite_4k.jpg',
-
- displacementScale: 0.05,
- displacementQuality: 'high',
-
- baseColor: '#000',
-
- shading: 'realistic',
- realisticMaterial: {
- roughness: 0.2,
- metalness: 0
- },
-
- postEffect: {
- enable: true,
- depthOfField: {
- // enable: true
- }
- },
- light: {
- ambient: {
- intensity: 0
- },
- main: {
- intensity: 0.1,
- shadow: false
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/lake.hdr',
- exposure: 1,
- diffuseIntensity: 0.5,
- specularIntensity: 2
- }
- },
- viewControl: {
- autoRotate: false
- },
-
- layers: [{
- type: 'blend',
- blendTo: 'emission',
- texture: contourChart,
- intensity: config.intensity
- }]
- }
- });
- }
-});
diff --git a/public/data-gl/bar3d-dataset.js b/public/data-gl/bar3d-dataset.js
deleted file mode 100644
index e37a4a3..0000000
--- a/public/data-gl/bar3d-dataset.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/*
-title: 3D Bar with Dataset
-category: bar3D
-titleCN: 使用 dataset 为三维柱状图设置数据
-*/
-
-$.get(ROOT_PATH + '/data/asset/data/life-expectancy-table.json', function (data) {
- option = {
- grid3D: {},
- tooltip: {},
- xAxis3D: {
- type: 'category'
- },
- yAxis3D: {
- type: 'category'
- },
- zAxis3D: {},
- visualMap: {
- max: 1e8,
- dimension: 'Population'
- },
- dataset: {
- dimensions: [
- 'Income',
- 'Life Expectancy',
- 'Population',
- 'Country',
- {name: 'Year', type: 'ordinal'}
- ],
- source: data
- },
- series: [
- {
- type: 'bar3D',
- // symbolSize: symbolSize,
- shading: 'lambert',
- encode: {
- x: 'Year',
- y: 'Country',
- z: 'Life Expectancy',
- tooltip: [0, 1, 2, 3, 4]
- }
- }
- ]
- };
-
- myChart.setOption(option);
-});
\ No newline at end of file
diff --git a/public/data-gl/bar3d-global-population.js b/public/data-gl/bar3d-global-population.js
deleted file mode 100644
index 2411ead..0000000
--- a/public/data-gl/bar3d-global-population.js
+++ /dev/null
@@ -1,96 +0,0 @@
-/*
-title: Bar3D - Global Population
-category: bar3D
-titleCN: Bar3D - Global Population
-*/
-
-
-$.getJSON(ROOT_PATH + '/data-gl/asset/data/population.json', function (data) {
-
- data = data.filter(function (dataItem) {
- return dataItem[2] > 0;
- }).map(function (dataItem) {
- return [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])];
- });
-
- myChart.setOption({
- backgroundColor: '#cdcfd5',
- geo3D: {
- map: 'world',
- shading: 'lambert',
- light: {
- main: {
- intensity: 5,
- shadow: true,
- shadowQuality: 'high',
- alpha: 30
- },
- ambient: {
- intensity: 0
- },
- ambientCubemap: {
- texture: 'data-gl/asset/canyon.hdr',
- exposure: 1,
- diffuseIntensity: 0.5
- }
- },
- viewControl: {
- distance: 50,
- panMouseButton: 'left',
- rotateMouseButton: 'right'
- },
- groundPlane: {
- show: true,
- color: '#999'
- },
- postEffect: {
- enable: true,
- bloom: {
- enable: false
- },
- SSAO: {
- radius: 1,
- intensity: 1,
- enable: true
- },
- depthOfField: {
- enable: false,
- focalRange: 10,
- blurRadius: 10,
- fstop: 1
- }
- },
- temporalSuperSampling: {
- enable: true
- },
- itemStyle: {
- },
-
- regionHeight: 2
- },
- visualMap: {
- max: 40,
- calculable: true,
- realtime: false,
- inRange: {
- color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
- },
- outOfRange: {
- colorAlpha: 0
- }
- },
- series: [{
- type: 'bar3D',
- coordinateSystem: 'geo3D',
- shading: 'lambert',
- data: data,
- barSize: 0.1,
- minHeight: 0.2,
- silent: true,
- itemStyle: {
- color: 'orange'
- // opacity: 0.8
- }
- }]
- });
-});
\ No newline at end of file
diff --git a/public/data-gl/bar3d-mapbox-view-change.js b/public/data-gl/bar3d-mapbox-view-change.js
deleted file mode 100644
index e64dd8f..0000000
--- a/public/data-gl/bar3d-mapbox-view-change.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/*
-title: Mapbox 视角切换
-category: bar3D
-titleCN: Mapbox 视角切换
-*/
-
-mapboxgl.accessToken = mapboxglToken;
-
-
-$.getJSON(ROOT_PATH + '/data-gl/asset/data/population.json', function (data) {
-
- data = data.filter(function (dataItem) {
- return dataItem[2] > 0;
- }).map(function (dataItem) {
- return [dataItem[0], dataItem[1], dataItem[2]];
- });
-
- myChart.setOption({
- title: {
- text: '空格键切换视角',
- left: 'center'
- },
- visualMap: {
- show: false,
- max: 1000,
- calculable: true,
- realtime: false,
- inRange: {
- color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
- },
- outOfRange: {
- colorAlpha: 0
- }
- },
- mapbox: {
- center: [104.114129, 37.550339],
- zoom: 3,
- pitch: 50,
- bearing: -10,
- style: 'mapbox://styles/mapbox/light-v9',
- boxHeight: 20,
- // altitudeScale: 3e2,
- postEffect: {
- enable: true,
- SSAO: {
- enable: true,
- radius: 2
- }
- },
- light: {
- main: {
- intensity: 2,
- shadow: true,
- shadowQuality: 'high'
- },
- ambient: {
- intensity: 0.
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/canyon.hdr',
- exposure: 2,
- diffuseIntensity: 0.5
- }
- }
- },
- series: [{
- type: 'bar3D',
- coordinateSystem: 'mapbox',
- shading: 'lambert',
- minHeight: 0.1,
- barSize: 0.3,
- data: data,
- silent: true
- }]
- });
-
- function top() {
- myChart.setOption({
- mapbox: {
- pitch: 0,
- bearing: 0,
- boxHeight: 0
- }
- });
- }
-
- function perspective() {
- myChart.setOption({
- mapbox: {
- pitch: 50,
- bearing: -10,
- boxHeight: 20,
- }
- });
- }
-
- var isPerspective = true;
- window.addEventListener('keydown', function (e) {
- if (e.keyCode === 32) {
- isPerspective ? top() : perspective();
- isPerspective = !isPerspective;
- }
- })
-});
\ No newline at end of file
diff --git a/public/data-gl/bar3d-music-visualization.js b/public/data-gl/bar3d-music-visualization.js
deleted file mode 100644
index 17c1548..0000000
--- a/public/data-gl/bar3d-music-visualization.js
+++ /dev/null
@@ -1,156 +0,0 @@
-/*
-title: Music Visualization
-category: bar3D
-titleCN: Music Visualization
-*/
-
-var UPDATE_DURATION = 100;
-
-window.AudioContext = window.AudioContext || window.webkitAudioContext;
-
-var audioContext = new AudioContext();
-
-var oReq = new XMLHttpRequest();
-oReq.open('GET', ROOT_PATH + '/data/asset/sound/roll-it-up.mp3', true);
-oReq.responseType = 'arraybuffer';
-
-oReq.onload = function(e) {
- audioContext.decodeAudioData(oReq.response, initVisualizer);
-};
-oReq.send();
-
-function initVisualizer(audioBuffer) {
- inited = true;
-
- var source = audioContext.createBufferSource();
- source.buffer = audioBuffer;
-
- // Must invoked right after click event
- if (source.noteOn) {
- source.noteOn(0);
- }
- else {
- source.start(0);
- }
-
- var analyzer = audioContext.createAnalyser();
- var gainNode = audioContext.createGain();
- analyzer.fftSize = 4096;
-
- gainNode.gain.value = 1;
- source.connect(gainNode);
- gainNode.connect(analyzer);
- analyzer.connect(audioContext.destination);
-
- var frequencyBinCount = analyzer.frequencyBinCount;
- var dataArray = new Uint8Array(frequencyBinCount);
-
-
- var beta = 0;
- function update() {
- analyzer.getByteFrequencyData(dataArray);
-
- var item = [];
- var size = 50;
- var dataProvider = [];
-
- for (var i = 0; i < size * size; i++) {
- var x = i % size;
- var y = Math.floor(i / size);
- var dx = x - size / 2;
- var dy = y - size / 2;
-
- var angle = Math.atan2(dy, dx);
- if (angle < 0) {
- angle = Math.PI * 2 + angle;
- }
- var dist = Math.sqrt(dx * dx + dy * dy);
- var idx = Math.min(
- frequencyBinCount - 1, Math.round(angle / Math.PI / 2 * 60 + dist * 60) + 100
- );
-
- var val = Math.pow(dataArray[idx] / 100, 3);
- dataProvider.push([x, y, Math.max(val, 0.1)]);
- }
-
- myChart.setOption({
- grid3D: {
- viewControl: {
- beta: beta,
- alpha: Math.sin(beta / 10 + 40) * (beta % 10 + 5) / 15 * 30 + 30,
- distance: Math.cos(beta / 50 + 20) * (beta % 10 + 5) / 15 * 50 + 80,
- animationDurationUpdate: UPDATE_DURATION,
- animationEasingUpdate: 'linear'
- }
- },
- series: [{
- data: dataProvider
- }]
- });
- beta += 2;
-
- setTimeout(update, UPDATE_DURATION);
- };
-
- update();
-}
-
-option = {
- tooltip: {},
- visualMap: {
- show: false,
- min: 0.1,
- max: 4,
- inRange: {
- color: ['#010103', '#2f490c', '#b0b70f', '#fdff44', '#fff']
- }
- },
- xAxis3D: {
- type: 'value'
- },
- yAxis3D: {
- type: 'value'
- },
- zAxis3D: {
- type: 'value',
- min: -6,
- max: 6
- },
- grid3D: {
- show: false,
- environment: '#000',
- viewControl: {
- distance: 100
- },
- postEffect: {
- enable: true,
- FXAA: {
- enable: true
- }
- },
- light: {
- main: {
- shadow: true,
- intensity: 10,
- quality: 'high'
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/canyon.hdr',
- exposure: 0,
- diffuseIntensity: 0.2
- }
- }
- },
- series: [{
- type: 'bar3D',
- silent: true,
- shading: 'lambert',
- data: [],
- barSize: 1,
- lineStyle: {
- width: 4
- },
- // animation: false,
- animationDurationUpdate: UPDATE_DURATION
- }]
-}
\ No newline at end of file
diff --git a/public/data-gl/bar3d-myth.js b/public/data-gl/bar3d-myth.js
deleted file mode 100644
index c143078..0000000
--- a/public/data-gl/bar3d-myth.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/*
-title: 星云
-category: bar3D
-titleCN: 星云
-*/
-
-var img = new Image();
-var canvas = document.createElement('canvas');
-var ctx = canvas.getContext('2d');
-
-img.onload = function () {
- var width = canvas.width = img.width;
- var height = canvas.height = img.height;
- ctx.drawImage(img, 0, 0, width, height);
- var imgData = ctx.getImageData(0, 0, width, height);
-
- var data = new Float32Array(imgData.data.length / 4 * 3);
- var off = 0;
- for (var i = 0; i < imgData.data.length / 4; i++) {
- var r = imgData.data[i * 4];
- var g = imgData.data[i * 4 + 1];
- var b = imgData.data[i * 4 + 2];
-
- var lum = (0.2125 * r + 0.7154 * g + 0.0721 * b);
- lum = (lum - 125) / 4 + 50;
-
- data[off++] = i % width;
- data[off++] = height - Math.floor(i / width);
- data[off++] = lum;
- }
-
-
- myChart.setOption(option = {
- tooltip: {},
- backgroundColor: '#fff',
- xAxis3D: {
- type: 'value'
- },
- yAxis3D: {
- type: 'value'
- },
- zAxis3D: {
- type: 'value',
- min: 0,
- max: 100
- },
- grid3D: {
- show: false,
- viewControl: {
- alpha: 70,
- beta: 0
- },
- postEffect: {
- enable: true,
- depthOfField: {
- enable: true,
- blurRadius: 4,
- fstop: 10
- }
- // SSAO: {
- // enable: true
- // }
- },
- boxDepth: 100,
- boxHeight: 20,
- environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
- light: {
- main: {
- shadow: true,
- intensity: 2
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/canyon.hdr',
- exposure: 2,
- diffuseIntensity: 0.2
- }
- }
- },
- series: [{
- type: 'bar3D',
- shading: 'lambert',
- barSize: 0.8,
- silent: true,
- dimensions: ['x', 'y', 'z'],
- itemStyle: {
- color: function (params) {
- var i = params.dataIndex;
- var r = imgData.data[i * 4] / 255;
- var g = imgData.data[i * 4 + 1] / 255;
- var b = imgData.data[i * 4 + 2] / 255;
- var lum = (0.2125 * r + 0.7154 * g + 0.0721 * b);
- r *= lum * 2;
- g *= lum * 2;
- b *= lum * 2;
- return [r, g, b, 1];
- }
- },
- data: data
- }]
- });
-}
-
-img.src = ROOT_PATH + '/data-gl/asset/sample.jpg';
-img.crossOrigin = 'Anonymous';
diff --git a/public/data-gl/bar3d-noise-modified-from-marpi-demo.js b/public/data-gl/bar3d-noise-modified-from-marpi-demo.js
deleted file mode 100644
index be0a4d5..0000000
--- a/public/data-gl/bar3d-noise-modified-from-marpi-demo.js
+++ /dev/null
@@ -1,210 +0,0 @@
-/*
-title: Noise modified from marpi's demo
-category: bar3D
-titleCN: Noise modified from marpi's demo
-*/
-
-$.getScript('https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js').done(function () {
-
-
-var simplex = new SimplexNoise();
-
-window.onresize = myChart.resize;
-
-var UPDATE_DURATION = 1000;
-
-function initVisualizer() {
-
- var config = {
- numWaves: 2,
- randomize: randomize,
- color1: '#000',
- color2: "#300",
- color3: "#fff",
- size: 150,
- roughness: 0.5,
- metalness: 0.
- };
-
- //gui.add(config, "numWaves", 1, 3).name("Waves number").onChange(update).listen();
- for (var i = 0; i < 2; i++) {
- config["wave" + i + "axis" + "x"] = Math.random();
- config["wave" + i + "axis" + "y"] = Math.random();
- config["wave" + i + "rounding"] = Math.random();
- config["wave" + i + "square"] = Math.random();
- }
-
- function randomize() {
- //config.numWaves = Math.floor(Math.random() * 3) + 1;
- for (var i = 0; i < 2; i++) {
- config["wave" + i + "axis" + "x"] = Math.random();
- config["wave" + i + "axis" + "y"] = Math.random();
- config["wave" + i + "rounding"] = Math.random();
- config["wave" + i + "square"] = Math.random();
- }
-
- // Iterate over all controllers
- for (var i in gui.__controllers) {
- gui.__controllers[i].updateDisplay();
- }
- update();
- }
-
- function update() {
- var item = [];
- var dataProvider = [];
-
- var mod = .1
-
- //config.numWaves = Math.round(config.numWaves)
-
- //var occurenceR = Math.random() * .02
- //var r = 0//Math.random()
- for (var s = 0; s < config.size * config.size; s++) {
- var x = s % config.size;
- var y = Math.floor(s / config.size);
-
- //if (Math.random() < occurenceR)
- // r = Math.random()
-
- var output = 0;
- for (var i = 0; i < config.numWaves; i++) {
- var n = simplex.noise2D(i * 213 + (-50 + x) * mod * (1 - config["wave" + i + "axis" + "x"]) * .5, i * 3124 + (-50 + y) * mod * (1 - config["wave" + i + "axis" + "y"]) * .5)
- n = Math.pow(n, 1.95 - 1.9 * config["wave" + i + "rounding"])
- var square = Math.floor((1.1 - config["wave" + i + "square"]) * 100)
- n = Math.round(n * square) / square;
- //output*=n
- if (output < n)
- output = n;
- }
- dataProvider.push([x, y, (output + 0.1) * 2]);
- }
-
-
- myChart.setOption({
- visualMap: {
- inRange: {
- barSize: 100 / config.size,
- color: [config.color1, config.color2, config.color3],
- }
- },
- series: [{
- data: dataProvider,
- realisticMaterial: {
- roughness: config.roughness,
- metalness: config.metalness
- }
- }]
- });
- //setTimeout(update, UPDATE_DURATION);
- }
-
- update();
-}
-var focalRange = 40
-var blurRadius = 4
-
-myChart.setOption(option = {
- toolbox: {
- left: 20,
- iconStyle: {
- normal: {
- borderColor: '#fff'
- }
- }
- },
- tooltip: {},
- visualMap: {
- show: false,
- min: 0.1,
- max: 2.5,
- inRange: {
- color: ['#000', '#300', '#fff']
- }
- },
- xAxis3D: {
- type: 'value'
- },
- yAxis3D: {
- type: 'value'
- },
- zAxis3D: {
- type: 'value',
- min: -6,
- max: 6
- },
- grid3D: {
- show: false,
- environment: '#000',
- viewControl: {
- distance: 100,
- maxDistance: 150,
- minDistance: 50,
- alpha: 38,
- beta: 220,
- minAlpha: 10,
- //maxBeta: 360,
- },
- postEffect: {
- enable: true,
- SSAO: {
- enable: true,
- intensity: 1.3,
- radius: 5
- },
- screenSpaceReflection: {
- enable: false
- },
- depthOfField: {
- enable: true,
- blurRadius: blurRadius,
- focalRange: focalRange,
- focalDistance: 70
- }
- },
- light: {
- main: {
- intensity: 1,
- shadow: true,
- shadowQuality: 'high',
- alpha: 30
- },
- ambient: {
- intensity: 0
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
- exposure: 2,
- diffuseIntensity: 1,
- specularIntensity: 1
- }
- }
- },
- series: [{
- type: 'bar3D',
- silent: true,
- shading: 'realistic',
- realisticMaterial: {
- roughness: 0.5,
- metalness: 0
- },
- instancing: true,
- barSize: 0.6,
- data: [],
- lineStyle: {
- width: 4
- },
- itemStyle: {
- color: "#fff"
- },
- animation: false,
- animationDurationUpdate: UPDATE_DURATION
- }]
-});
-
-setTimeout(function() {
- initVisualizer();
-});
-
-
-});
\ No newline at end of file
diff --git a/public/data-gl/bar3d-on-mapbox.js b/public/data-gl/bar3d-on-mapbox.js
deleted file mode 100644
index 00dc294..0000000
--- a/public/data-gl/bar3d-on-mapbox.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/*
-title: Bar3D on Mapbox
-category: bar3D
-titleCN: Bar3D on Mapbox
-*/
-
-mapboxgl.accessToken = 'pk.eyJ1IjoicGlzc2FuZyIsImEiOiJjaXBnaGYxcW8wMDFodWNtNDc4NzdqMWR2In0.4XUWeduDltiCbsIiS-U8Lg';
-
-
-$.getJSON(ROOT_PATH + '/data-gl/asset/data/population.json', function (data) {
-
- data = data.filter(function (dataItem) {
- return dataItem[2] > 0;
- }).map(function (dataItem) {
- return [dataItem[0], dataItem[1], dataItem[2]];
- });
-
- myChart.setOption({
- visualMap: {
- show: false,
- max: 1000,
- calculable: true,
- realtime: false,
- inRange: {
- color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
- },
- outOfRange: {
- colorAlpha: 0
- }
- },
- mapbox: {
- center: [104.114129, 37.550339],
- zoom: 3,
- pitch: 50,
- bearing: -10,
- style: 'mapbox://styles/mapbox/light-v9',
- altitudeScale: 3e2,
- postEffect: {
- enable: true,
- SSAO: {
- enable: true,
- radius: 2
- }
- },
- light: {
- main: {
- intensity: 2,
- shadow: true,
- shadowQuality: 'high'
- },
- ambient: {
- intensity: 0.
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/asset/canyon.hdr',
- exposure: 2,
- diffuseIntensity: 0.5
- }
- }
- },
- series: [{
- type: 'bar3D',
- coordinateSystem: 'mapbox',
- shading: 'lambert',
- minHeight: 0.1,
- barSize: 0.3,
- data: data,
- silent: true
- }]
- });
-});
\ No newline at end of file
diff --git a/public/data-gl/bar3d-shanghai.js b/public/data-gl/bar3d-shanghai.js
deleted file mode 100644
index c1603eb..0000000
--- a/public/data-gl/bar3d-shanghai.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/*
-title: 上海房价可视化 GL 版
-category: bar3D
-titleCN: 上海房价可视化 GL 版
-*/
-
-var uploadedDataURL = ROOT_PATH + '/asset/get/s/data-1495284690309-Bk9Ro3Te-.json';
-mapboxgl.accessToken = mapboxglToken;
-
-myChart.showLoading();
-
-$.getJSON(uploadedDataURL, function(linedata) {
-
- myChart.hideLoading();
-
- myChart.setOption({
-
- visualMap: {
- show: false,
- calculable: true,
- realtime: false,
- inRange: {
- color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
- },
- outOfRange: {
- colorAlpha: 0
- },
- max: linedata[1]
- },
- mapbox: {
- center: [121.4693, 31.123070],
- zoom: 10,
- pitch: 50,
- bearing: -10,
- style: 'mapbox://styles/mapbox/light-v9',
- boxHeight: 50,
- // altitudeScale: 3e2,
- postEffect: {
- enable: true,
- SSAO: {
- enable: true,
- radius: 2,
- intensity: 1.5
- }
- },
- light: {
- main: {
- intensity: 1,
- shadow: true,
- shadowQuality: 'high'
- },
- ambient: {
- intensity: 0.
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/canyon.hdr',
- exposure: 1,
- diffuseIntensity: 0.5
- }
- }
- },
- series: [{
- type: 'bar3D',
- shading: 'realistic',
- coordinateSystem: 'mapbox',
- barSize: 0.2,
- silent: true,
- data: linedata[0]
- }]
- });
-});
\ No newline at end of file
diff --git a/public/data-gl/bar3d-simplex-noise.js b/public/data-gl/bar3d-simplex-noise.js
deleted file mode 100644
index 2c32c9f..0000000
--- a/public/data-gl/bar3d-simplex-noise.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/*
-title: Bar3D - Simplex Noise
-category: bar3D
-titleCN: Bar3D - Simplex Noise
-theme: dark
-*/
-
-$.getScript('https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js').done(function () {
-
-
-var noise = new SimplexNoise(Math.random);
-function generateData(theta, min, max) {
- var data = [];
- for (var i = 0; i <= 50; i++) {
- for (var j = 0; j <= 50; j++) {
- var value = noise.noise2D(i / 20, j / 20);
- valMax = Math.max(valMax, value);
- valMin = Math.min(valMin, value);
- data.push([i, j, value * 2 + 4]);
- }
- }
- return data;
-}
-var valMin = Infinity;
-var valMax = -Infinity;
-var data = generateData(2, -5, 5);
-console.log(valMin, valMax);
-
-myChart.setOption(option = {
- visualMap: {
- show: false,
- min: 2,
- max: 6,
- inRange: {
- color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
- }
- },
- xAxis3D: {
- type: 'value'
- },
- yAxis3D: {
- type: 'value'
- },
- zAxis3D: {
- type: 'value',
- max: 10,
- min: 0
- },
- grid3D: {
- axisLine: {
- lineStyle: { color: '#fff' }
- },
- axisPointer: {
- lineStyle: { color: '#fff' }
- },
- viewControl: {
- // autoRotate: true
- },
- light: {
- main: {
- shadow: true,
- quality: 'ultra',
- intensity: 1.5
- }
- }
- },
- series: [{
- type: 'bar3D',
- data: data,
- shading: 'lambert',
- label: {
- formatter: function (param) {
- return param.value[2].toFixed(1);
- }
- }
- }]
-});
-
-});
\ No newline at end of file
diff --git a/public/data-gl/bar3d-voxelize-image.js b/public/data-gl/bar3d-voxelize-image.js
deleted file mode 100644
index 611425d..0000000
--- a/public/data-gl/bar3d-voxelize-image.js
+++ /dev/null
@@ -1,171 +0,0 @@
-/*
-title: Voxelize image
-category: bar3D
-titleCN: Voxelize image
-*/
-
-var canvas = document.createElement('canvas');
-var ctx = canvas.getContext('2d');
-
-var imgData;
-var currentImg;
-
-// Configurations
-var config = {
- scale: 0.3,
- roughness: 0,
- metalness: 1,
- projection: 'orthographic',
- depthOfField: 4,
- lockY: false,
- move: true,
- sameColor: false,
- color: '#777',
- colorContrast: 1.2,
- lightIntensity: 1,
- lightColor: '#fff',
- lightRotate: 30,
- lightPitch: 40,
- AO: 1.5,
- showEnvironment: false,
-
- barNumber: 80,
- barBevel: 0.18,
- barSize: 1.2
-};
-
-option = {
- tooltip: {},
- backgroundColor: '#000',
- xAxis3D: {
- type: 'value'
- },
- yAxis3D: {
- type: 'value'
- },
- zAxis3D: {
- type: 'value',
- min: 0,
- max: 100
- },
- grid3D: {
- show: false,
- viewControl: {
- projection: 'perspective',
- alpha: 45,
- beta: -45,
- panSensitivity: config.move ? 1 : 0,
- rotateSensitivity: config.lockY ? [1, 0] : 1,
- damping: 0.9,
- distance: 60
- },
- postEffect: {
- enable: true,
- bloom: {
- intensity: 0.2
- },
- screenSpaceAmbientOcclusion: {
- enable: true,
- intensity: 1.5,
- radius: 5,
- quality: 'high'
- },
- screenSpaceReflection: {
- enable: true
- },
- depthOfField: {
- enable: true,
- blurRadius: config.depthOfField,
- fstop: 10,
- focalDistance: 55
- }
- },
- boxDepth: 100,
- boxHeight: 20,
- environment: 'none',
- light: {
- main: {
- shadow: true,
- intensity: 2
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
- exposure: 2,
- diffuseIntensity: 0.2,
- specularIntensity: 1.5
- }
- }
- }
-};
-
-function updateData(pixelData, width, height) {
- console.time('update');
- var data = new Float32Array(pixelData.length / 4 * 3);
- var off = 0;
- for (var i = 0; i < pixelData.length / 4; i++) {
- var r = pixelData[i * 4];
- var g = pixelData[i * 4 + 1];
- var b = pixelData[i * 4 + 2];
-
- var lum = 0.2125 * r + 0.7154 * g + 0.0721 * b;
- lum = (lum - 125) * config.scale + 50;
- data[off++] = i % width;
- data[off++] = height - Math.floor(i / width);
- data[off++] = lum;
- };
-
- myChart.setOption({
- grid3D: {
- boxWidth: 100 / height * width
- },
- series: [{
- animation: false,
- type: 'bar3D',
- shading: 'realistic',
- realisticMaterial: {
- roughness: config.roughness,
- metalness: config.metalness
- },
- barSize: config.barSize,
- bevelSize: config.barBevel,
- silent: true,
- dimensions: ['x', 'y', 'z'],
- itemStyle: {
- color: config.sameColor ? config.color : function (params) {
- var i = params.dataIndex;
- var r = pixelData[i * 4] / 255;
- var g = pixelData[i * 4 + 1] / 255;
- var b = pixelData[i * 4 + 2] / 255;
- var lum = 0.2125 * r + 0.7154 * g + 0.0721 * b;
- r *= lum * config.colorContrast;
- g *= lum * config.colorContrast;
- b *= lum * config.colorContrast;
- return [r, g, b, 1];
- }
- },
- data: data
- }]
- });
-
- console.timeEnd('update');
-}
-
-function loadImage(img) {
- var height = (canvas.height = Math.min(config.barNumber, img.height));
- var aspect = img.width / img.height;
- var width = (canvas.width = Math.round(height * aspect));
-
- ctx.drawImage(img, 0, 0, width, height);
-
- imgData = ctx.getImageData(0, 0, width, height);
-
- updateData(imgData.data, width, height);
-}
-
-// Default
-var img = new Image();
-img.onload = function() {
- loadImage(img);
- currentImg = img;
-};
-img.src = ROOT_PATH + '/data-gl/asset/bitcoin.png';
\ No newline at end of file
diff --git a/public/data-gl/flowGL-noise.js b/public/data-gl/flowGL-noise.js
deleted file mode 100644
index 2d57e64..0000000
--- a/public/data-gl/flowGL-noise.js
+++ /dev/null
@@ -1,106 +0,0 @@
-/*
-title: Flow on the cartesian
-category: flowGL
-titleCN: 直角坐标系上的向量场
-theme: dark
-videoStart: 2000
-videoEnd: 10000
-*/
-
-$.getScript('https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js').done(function () {
-
-var noise = new SimplexNoise(Math.random);
-var noise2 = new SimplexNoise(Math.random);
-function generateData() {
- var data = [];
- for (var i = 0; i <= 50; i++) {
- for (var j = 0; j <= 50; j++) {
- var dx = noise.noise2D(i / 30, j / 30);
- var dy = noise2.noise2D(i / 30, j / 30);
- var mag = Math.sqrt(dx * dx + dy * dy);
- valMax = Math.max(valMax, mag);
- valMin = Math.min(valMin, mag);
- data.push([i, j, dx, dy, mag]);
- }
- }
- return data;
-}
-var valMin = Infinity;
-var valMax = -Infinity;
-var data = generateData();
-
-
-myChart.setOption({
- visualMap: {
- show: false,
- min: valMin,
- max: valMax,
- dimension: 4,
- inRange: {
- color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
- }
- },
- xAxis: {
- type: 'value',
- axisLine: {
- lineStyle: {
- color: '#fff'
- }
- },
- splitLine: {
- show: false,
- lineStyle: {
- color: 'rgba(255,255,255,0.2)'
- }
- }
- },
- yAxis: {
- type: 'value',
- axisLine: {
- lineStyle: {
- color: '#fff'
- }
- },
- splitLine: {
- show: false,
- lineStyle: {
- color: 'rgba(255,255,255,0.2)'
- }
- }
- },
- series: [{
- type: 'flowGL',
- data: data,
- particleDensity: 64,
- particleSize: 5,
- itemStyle: {
- opacity: 0.5
- }
- }, {
- type: 'custom',
- data: data,
- encode: {
- x: 0,
- y: 0
- },
- renderItem: function (params, api) {
- var x = api.value(0), y = api.value(1), dx = api.value(2), dy = api.value(3);
- var start = api.coord([x - dx / 2, y - dy / 2]);
- var end = api.coord([x + dx / 2, y + dy / 2]);
- return {
- type: 'line',
- shape: {
- x1: start[0], y1: start[1],
- x2: end[0], y2: end[1]
- },
- style: {
- lineWidth: 2,
- stroke:'#fff',
- opacity: 0.2
- }
- }
- }
- }]
-});
-
-});
\ No newline at end of file
diff --git a/public/data-gl/geo3d-with-different-height.js b/public/data-gl/geo3d-with-different-height.js
deleted file mode 100644
index 3ab2a29..0000000
--- a/public/data-gl/geo3d-with-different-height.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/*
-title: Geo3D with Different Height
-category: geo3D
-titleCN: Geo3D with Different Height
-*/
-
-
-$.getJSON(ROOT_PATH + '/data-gl/asset/data/world-population.json', function (populationData) {
-
- var max = -Infinity;
- var min = Infinity;
- populationData.forEach(function (item) {
- max = Math.max(Math.log(item.value), max);
- min = Math.min(Math.log(item.value), min);
- });
-
- var regions = populationData.map(function (item) {
- return {
- name: item.name,
- height: (Math.log(item.value) - min) / (max - min) * 3
- };
- })
-
- myChart.setOption(option = {
- backgroundColor: '#cdcfd5',
- geo3D: {
- map: 'world',
- shading: 'lambert',
-
- lambertMaterial: {
- detailTexture: ROOT_PATH + '/data-gl/asset/woods.jpg',
- textureTiling: 20
- },
-
- postEffect: {
- enable: true,
- SSAO: {
- enable: true,
- radius: 3,
- quality: 'high'
- }
- },
- groundPlane: {
- show: true
- },
- light: {
- main: {
- intensity: 1,
- shadow: true,
- shadowQuality: 'high',
- alpha: 30
- },
- ambient: {
- intensity: 0
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/canyon.hdr',
- exposure: 2,
- diffuseIntensity: 0.3
- }
- },
- viewControl: {
- distance: 50
- },
-
- regionHeight: 0.5,
-
- regions: regions
- }
- });
-
-});
\ No newline at end of file
diff --git a/public/data-gl/geo3d.js b/public/data-gl/geo3d.js
deleted file mode 100644
index 6a9eea2..0000000
--- a/public/data-gl/geo3d.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
-title: Geo3D
-category: geo3D
-titleCN: Geo3D
-*/
-
-option = {
- geo3D: {
- map: 'world',
- lambertMaterial: {
- baseTexture: ROOT_PATH + '/data-gl/asset/woods.jpg',
- textureTiling: 10
- },
-
- postEffect: {
- enable: true,
- SSAO: {
- enable: true,
- radius: 1
- }
- },
- groundPlane: {
- show: true
- },
- light: {
- main: {
- intensity: 1,
- shadow: true
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/canyon.hdr'
- }
- },
- viewControl: {
- distance: 50
- },
-
- itemStyle: {
- borderColor: '#000',
- borderWidth: 0.5
- },
-
-
- boxHeight: 1.0
- }
-}
-
-myChart.on('click', function () {
- alert('click')
-});
\ No newline at end of file
diff --git a/public/data-gl/global-population-bar3d-on-globe.js b/public/data-gl/global-population-bar3d-on-globe.js
deleted file mode 100644
index 305a94f..0000000
--- a/public/data-gl/global-population-bar3d-on-globe.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/*
-title: Global Population - Bar3D on Globe
-category: bar3D
-titleCN: Global Population - Bar3D on Globe
-*/
-
-$.getJSON(ROOT_PATH + "/data-gl/asset/data/population.json", function (data) {
-
- data = data.filter(function (dataItem) {
- return dataItem[2] > 0;
- }).map(function (dataItem) {
- return [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])];
- });
-
- option = {
- backgroundColor: '#000',
- globe: {
- baseTexture: ROOT_PATH + "/data-gl/asset/world.topo.bathy.200401.jpg",
- heightTexture: ROOT_PATH + "/data-gl/asset/world.topo.bathy.200401.jpg",
- shading: 'lambert',
- environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
- light: {
- main: {
- intensity: 2
- }
- },
- viewControl: {
- autoRotate: false
- }
- },
- visualMap: {
- max: 40,
- calculable: true,
- realtime: false,
- inRange: {
- colorLightness: [0.2, 0.9]
- },
- textStyle: {
- color: '#fff'
- },
- controller: {
- inRange: {
- color: 'orange'
- }
- },
- outOfRange: {
- colorAlpha: 0
- }
- },
- series: [{
- type: 'bar3D',
- coordinateSystem: 'globe',
- data: data,
- barSize: 0.6,
- minHeight: 0.2,
- silent: true,
- itemStyle: {
- color: 'orange'
- }
- }]
- };
-
- myChart.setOption(option);
-})
\ No newline at end of file
diff --git a/public/data-gl/global-wind-visualization-2.js b/public/data-gl/global-wind-visualization-2.js
deleted file mode 100644
index 89e2e3a..0000000
--- a/public/data-gl/global-wind-visualization-2.js
+++ /dev/null
@@ -1,248 +0,0 @@
-/*
-title: Global Wind Visualization 2
-category: flowGL
-tags: bmap
-titleCN: Global Wind Visualization 2
-videoStart: 2000
-videoEnd: 10000
-*/
-
-$.getJSON(ROOT_PATH + '/data-gl/asset/data/gfs.json', function(windData) {
- buildGrid(windData, function(header, grid) {
- var data = [];
- var p = 0;
- var maxMag = 0;
- var minMag = Infinity;
- for (var j = 0; j < header.ny; j++) {
- for (var i = 0; i < header.nx; i++) {
- var vx = grid[j][i][0];
- var vy = grid[j][i][1];
- var mag = Math.sqrt(vx * vx + vy * vy);
- var lng = i / header.nx * 360;
- if (lng >= 180) {
- lng = 180 - lng;
- }
- // 数据是一个一维数组
- // [ [经度, 维度，向量经度方向的值，向量维度方向的值] ]
- data.push([
- lng,
- 90 - j / header.ny * 180,
- vx,
- vy,
- mag
- ]);
- maxMag = Math.max(mag, maxMag);
- minMag = Math.min(mag, minMag);
- }
- }
- myChart.setOption({
- backgroundColor: '#001122',
- visualMap: {
- left: 'right',
- min: minMag,
- max: maxMag,
- dimension: 4,
- inRange: {
- // color: ['green', 'yellow', 'red']
- color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
- },
- realtime: false,
- calculable: true,
- textStyle: {
- color: '#fff'
- }
- },
- bmap: {
- center: [0, 0],
- zoom: 1,
- roam: true,
- mapStyle: {
- 'styleJson': [{
- 'featureType': 'water',
- 'elementType': 'all',
- 'stylers': {
- 'color': '#031628'
- }
- }, {
- 'featureType': 'land',
- 'elementType': 'geometry',
- 'stylers': {
- 'color': '#000102'
- }
- }, {
- 'featureType': 'highway',
- 'elementType': 'all',
- 'stylers': {
- 'visibility': 'off'
- }
- }, {
- 'featureType': 'arterial',
- 'elementType': 'geometry.fill',
- 'stylers': {
- 'color': '#000000'
- }
- }, {
- 'featureType': 'arterial',
- 'elementType': 'geometry.stroke',
- 'stylers': {
- 'color': '#0b3d51'
- }
- }, {
- 'featureType': 'local',
- 'elementType': 'geometry',
- 'stylers': {
- 'color': '#000000'
- }
- }, {
- 'featureType': 'railway',
- 'elementType': 'geometry.fill',
- 'stylers': {
- 'color': '#000000'
- }
- }, {
- 'featureType': 'railway',
- 'elementType': 'geometry.stroke',
- 'stylers': {
- 'color': '#08304b'
- }
- }, {
- 'featureType': 'subway',
- 'elementType': 'geometry',
- 'stylers': {
- 'lightness': -70
- }
- }, {
- 'featureType': 'building',
- 'elementType': 'geometry.fill',
- 'stylers': {
- 'color': '#000000'
- }
- }, {
- 'featureType': 'all',
- 'elementType': 'labels.text.fill',
- 'stylers': {
- 'color': '#857f7f'
- }
- }, {
- 'featureType': 'all',
- 'elementType': 'labels.text.stroke',
- 'stylers': {
- 'color': '#000000'
- }
- }, {
- 'featureType': 'building',
- 'elementType': 'geometry',
- 'stylers': {
- 'color': '#022338'
- }
- }, {
- 'featureType': 'green',
- 'elementType': 'geometry',
- 'stylers': {
- 'color': '#062032'
- }
- }, {
- 'featureType': 'boundary',
- 'elementType': 'all',
- 'stylers': {
- 'color': '#465b6c'
- }
- }, {
- 'featureType': 'manmade',
- 'elementType': 'all',
- 'stylers': {
- 'color': '#022338'
- }
- }, {
- 'featureType': 'label',
- 'elementType': 'all',
- 'stylers': {
- 'visibility': 'off'
- }
- }]
- }
- },
- series: [{
- type: 'flowGL',
- coordinateSystem: 'bmap',
- data: data,
- supersampling: 4,
- particleType: 'line',
- particleDensity: 128,
- particleSpeed: 1,
- // gridWidth: windData.nx,
- // gridHeight: windData.ny,
- itemStyle: {
- opacity: 0.7
- }
- }]
- });
- });
-});
-
-
-// https://github.com/Esri/wind-js/blob/master/windy.js#L41
-var createWindBuilder = function(uComp, vComp) {
- var uData = uComp.data,
- vData = vComp.data;
- return {
- header: uComp.header,
- //recipe: recipeFor("wind-" + uComp.header.surface1Value),
- data: function(i) {
- return [uData[i], vData[i]];
- }
- }
-};
-
-var createBuilder = function(data) {
- var uComp = null,
- vComp = null,
- scalar = null;
-
- data.forEach(function(record) {
- switch (record.header.parameterCategory + "," + record.header.parameterNumber) {
- case "2,2":
- uComp = record;
- break;
- case "2,3":
- vComp = record;
- break;
- default:
- scalar = record;
- }
- });
-
- return createWindBuilder(uComp, vComp);
-};
-
-var buildGrid = function(data, callback) {
- var builder = createBuilder(data);
-
- var header = builder.header;
- var λ0 = header.lo1,
- φ0 = header.la1; // the grid's origin (e.g., 0.0E, 90.0N)
- var Δλ = header.dx,
- Δφ = header.dy; // distance between grid points (e.g., 2.5 deg lon, 2.5 deg lat)
- var ni = header.nx,
- nj = header.ny; // number of grid points W-E and N-S (e.g., 144 x 73)
- var date = new Date(header.refTime);
- date.setHours(date.getHours() + header.forecastTime);
-
- // Scan mode 0 assumed. Longitude increases from λ0, and latitude decreases from φ0.
- // http://www.nco.ncep.noaa.gov/pmb/docs/grib2/grib2_table3-4.shtml
- var grid = [],
- p = 0;
- var isContinuous = Math.floor(ni * Δλ) >= 360;
- for (var j = 0; j < nj; j++) {
- var row = [];
- for (var i = 0; i < ni; i++, p++) {
- row[i] = builder.data(p);
- }
- if (isContinuous) {
- // For wrapped grids, duplicate first column as last column to simplify interpolation logic
- row.push(row[0]);
- }
- grid[j] = row;
- }
- callback(header, grid);
-};
\ No newline at end of file
diff --git a/public/data-gl/global-wind-visualization.js b/public/data-gl/global-wind-visualization.js
deleted file mode 100644
index 9494961..0000000
--- a/public/data-gl/global-wind-visualization.js
+++ /dev/null
@@ -1,196 +0,0 @@
-/*
-title: Global wind visualization
-category: flowGL
-tags: bmap
-titleCN: Global wind visualization
-videoStart: 2000
-videoEnd: 10000
-*/
-
-$.getJSON(ROOT_PATH + '/data-gl/asset/data/winds.json', function (windData) {
-
- var data = [];
- var p = 0;
- var maxMag = 0;
- var minMag = Infinity;
- for (var j = 0; j < windData.ny; j++) {
- for (var i = 0; i <= windData.nx; i++) {
- // Continuous data.
- var p = (i % windData.nx) + j * windData.nx;
- var vx = windData.data[p][0];
- var vy = windData.data[p][1];
- var mag = Math.sqrt(vx * vx + vy * vy);
- // 数据是一个一维数组
- // [ [经度, 维度，向量经度方向的值，向量维度方向的值] ]
- data.push([
- i / windData.nx * 360 - 180,
- j / windData.ny * 180 - 90,
- vx,
- vy,
- mag
- ]);
- maxMag = Math.max(mag, maxMag);
- minMag = Math.min(mag, minMag);
- }
- }
- myChart.setOption(option = {
- backgroundColor: '#001122',
- visualMap: {
- left: 'right',
- min: minMag,
- max: maxMag,
- dimension: 4,
- inRange: {
- // color: ['green', 'yellow', 'red']
- color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
- },
- realtime: false,
- calculable: true,
- textStyle: {
- color: '#fff'
- }
- },
- bmap: {
- center: [0, 0],
- zoom: 1,
- roam: true,
- mapStyle: {
- 'styleJson': [
- {
- 'featureType': 'water',
- 'elementType': 'all',
- 'stylers': {
- 'color': '#031628'
- }
- },
- {
- 'featureType': 'land',
- 'elementType': 'geometry',
- 'stylers': {
- 'color': '#000102'
- }
- },
- {
- 'featureType': 'highway',
- 'elementType': 'all',
- 'stylers': {
- 'visibility': 'off'
- }
- },
- {
- 'featureType': 'arterial',
- 'elementType': 'geometry.fill',
- 'stylers': {
- 'color': '#000000'
- }
- },
- {
- 'featureType': 'arterial',
- 'elementType': 'geometry.stroke',
- 'stylers': {
- 'color': '#0b3d51'
- }
- },
- {
- 'featureType': 'local',
- 'elementType': 'geometry',
- 'stylers': {
- 'color': '#000000'
- }
- },
- {
- 'featureType': 'railway',
- 'elementType': 'geometry.fill',
- 'stylers': {
- 'color': '#000000'
- }
- },
- {
- 'featureType': 'railway',
- 'elementType': 'geometry.stroke',
- 'stylers': {
- 'color': '#08304b'
- }
- },
- {
- 'featureType': 'subway',
- 'elementType': 'geometry',
- 'stylers': {
- 'lightness': -70
- }
- },
- {
- 'featureType': 'building',
- 'elementType': 'geometry.fill',
- 'stylers': {
- 'color': '#000000'
- }
- },
- {
- 'featureType': 'all',
- 'elementType': 'labels.text.fill',
- 'stylers': {
- 'color': '#857f7f'
- }
- },
- {
- 'featureType': 'all',
- 'elementType': 'labels.text.stroke',
- 'stylers': {
- 'color': '#000000'
- }
- },
- {
- 'featureType': 'building',
- 'elementType': 'geometry',
- 'stylers': {
- 'color': '#022338'
- }
- },
- {
- 'featureType': 'green',
- 'elementType': 'geometry',
- 'stylers': {
- 'color': '#062032'
- }
- },
- {
- 'featureType': 'boundary',
- 'elementType': 'all',
- 'stylers': {
- 'color': '#465b6c'
- }
- },
- {
- 'featureType': 'manmade',
- 'elementType': 'all',
- 'stylers': {
- 'color': '#022338'
- }
- },
- {
- 'featureType': 'label',
- 'elementType': 'all',
- 'stylers': {
- 'visibility': 'off'
- }
- }
- ]
- }
- },
- series: [{
- type: 'flowGL',
- coordinateSystem: 'bmap',
- data: data,
- supersampling: 4,
- particleType: 'line',
- particleDensity: 128,
- particleSpeed: 1,
- // gridWidth: windData.nx,
- // gridHeight: windData.ny,
- itemStyle: {
- opacity: 0.7
- }
- }]
- });
-});
\ No newline at end of file
diff --git a/public/data-gl/globe-atmosphere.js b/public/data-gl/globe-atmosphere.js
deleted file mode 100644
index e3499f5..0000000
--- a/public/data-gl/globe-atmosphere.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/*
-title: Globe with Atmosphere
-category: globe
-titleCN: 大气层显示
-*/
-
-option = {
- backgroundColor: '#000',
- globe: {
- baseTexture: ROOT_PATH + '/data-gl/asset/earth.jpg',
-
- shading: 'lambert',
-
- environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
-
- atmosphere: {
- show: true
- },
-
- light: {
- ambient: {
- intensity: 0.1
- },
- main: {
- intensity: 1.5
- }
- }
- },
- series: []
-};
\ No newline at end of file
diff --git a/public/data-gl/globe-contour-paint.js b/public/data-gl/globe-contour-paint.js
deleted file mode 100644
index 22d2d63..0000000
--- a/public/data-gl/globe-contour-paint.js
+++ /dev/null
@@ -1,178 +0,0 @@
-/*
-title: Contour Paint
-category: globe
-titleCN: Contour Paint
-*/
-
-
-var config = {
- color: '#c0101a',
- levels: 50,
- intensity: 100,
- threshold: 0.01
-}
-
-var canvas = document.createElement('canvas');
-canvas.width = 4096;
-canvas.height = 2048;
-context = canvas.getContext("2d");
-
-context.lineWidth = 0.4;
-context.strokeStyle = config.color;
-context.fillStyle = config.color;
-context.shadowColor = config.color;
-
-$.when(
- $.getScript('https://cdn.jsdelivr.net/npm/d3-array@2.8.0/dist/d3-array.js'),
- $.getScript('https://cdn.jsdelivr.net/npm/d3-contour@2.0.0/dist/d3-contour.js'),
- $.getScript('https://cdn.jsdelivr.net/npm/d3-geo@2.0.1/dist/d3-geo.js'),
- $.getScript('https://cdn.jsdelivr.net/npm/d3-timer@2.0.0/dist/d3-timer.js')
-).done(function () {
-
-image(ROOT_PATH + '/data-gl/asset/bathymetry_bw_composite_4k.jpg').then(function(image) {
- var m = image.height,
- n = image.width,
- values = new Array(n * m),
- contours = d3.contours().size([n, m]).smooth(true),
- projection = d3.geoIdentity().scale(canvas.width / n),
- path = d3.geoPath(projection, context);
-
- // StackBlur.R(image, 5);
-
- for (var j = 0, k = 0; j < m; ++j) {
- for (var i = 0; i < n; ++i, ++k) {
- values[k] = image.data[(k << 2)] / 255;
- }
- }
-
- var opt = {
- image: canvas
- }
-
- var results = [];
- function update(threshold, levels) {
- context.clearRect(0, 0, canvas.width, canvas.height);
- var thresholds = [];
- for (var i = 0; i < levels; i++) {
- thresholds.push((threshold + 1 / levels * i) % 1);
- }
- results = contours.thresholds(thresholds)(values);
- redraw();
- }
-
- function redraw() {
- results.forEach(function (d, idx) {
- context.beginPath();
- path(d);
- context.globalAlpha = 1;
- context.stroke();
- if (idx > config.levels / 5 * 3) {
- context.globalAlpha = 0.01;
- context.fill();
- }
- });
- onupdate();
- }
-
-
- update(config.threshold, config.levels);
-
- initCharts(opt);
-
-});
-
-function image(url) {
- return new Promise(function(resolve) {
- var image = new Image();
- image.src = url;
- image.crossOrigin = 'Anonymous';
- image.onload = function() {
- var canvas = document.createElement("canvas");
- canvas.width = image.width / 4;
- canvas.height = image.height / 4;
- var context = canvas.getContext("2d");
- context.drawImage(image, 0, 0, canvas.width, canvas.height);
- resolve(context.getImageData(0, 0, canvas.width, canvas.height));
- };
- });
-}
-
-var contourChart = echarts.init(document.createElement('canvas'), null, {
- width: 4096,
- height: 2048
-});
-
-var img = new echarts.graphic.Image({
- style: {
- x: -1,
- y: -1
- }
-});
-
-onupdate = function () {
- img.dirty();
-}
-
-function initCharts(opt) {
- img.style.width = opt.image.width + 2;
- img.style.height = opt.image.height + 2;
- img.style.image = opt.image;
- contourChart.getZr().add(img);
-
-
- myChart.setOption({
- backgroundColor: '#000',
- globe: {
-
- environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
-
- heightTexture: ROOT_PATH + '/data-gl/asset/bathymetry_bw_composite_4k.jpg',
-
- displacementScale: 0.05,
- displacementQuality: 'high',
-
- baseColor: '#111',
-
- shading: 'realistic',
- realisticMaterial: {
- roughness: 0.2,
- metalness: 0
- },
-
- postEffect: {
- enable: true,
- depthOfField: {
- // enable: true
- }
- },
- light: {
- ambient: {
- intensity: 0
- },
- main: {
- intensity: 0.1,
- shadow: false
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/lake.hdr',
- exposure: 1,
- diffuseIntensity: 0.5,
- specularIntensity: 2
- }
- },
- viewControl: {
- autoRotate: false
- },
-
- layers: [{
- type: 'blend',
- blendTo: 'albedo',
- texture: contourChart,
- intensity: 50
- }]
- }
- });
-}
-
-
-});
diff --git a/public/data-gl/globe-country-carousel.js b/public/data-gl/globe-country-carousel.js
deleted file mode 100644
index 1c94c78..0000000
--- a/public/data-gl/globe-country-carousel.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/*
-title: Country Carousel
-category: globe
-titleCN: Country Carousel
-*/
-
-var canvas = document.createElement('canvas');
-var mapChart = echarts.init(canvas, null, {
- width: 2048,
- height: 1024
-});
-
-mapChart.setOption({
- backgroundColor: '#999',
- geo: {
- type: 'map',
- map: 'world',
- top: 0,
- left: 0,
- right: 0,
- bottom: 0,
- boundingCoords: [[-180, 90], [180, -90]],
- silent: true,
- itemStyle: {
- borderColor: '#000'
- },
- label: {
- color: '#fff',
- fontSize: 40
- }
- }
-});
-option = {
- globe: {
- baseTexture: mapChart,
- heightTexture: ROOT_PATH + '/data-gl/asset/bathymetry_bw_composite_4k.jpg',
-
- displacementScale: 0.1,
-
- shading: 'realistic',
- realisticMaterial: {
- roughness: 0.8,
- metalness: 0
- },
-
- postEffect: {
- enable: true
- },
- temporalSuperSampling: {
- enable: true
- },
- light: {
- ambient: {
- intensity: 0
- },
- main: {
- intensity: 2,
- shadow: true
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/lake.hdr',
- exposure: 1,
- diffuseIntensity: 0.2
- }
- },
- viewControl: {
- animationDurationUpdate: 1000,
- animationEasingUpdate: 'cubicInOut',
- targetCoord: [116.46, 39.92],
- autoRotate: false
- }
- },
- series: []
-};
-
-var regions = mapChart.getModel().getComponent('geo').coordinateSystem.regions;
-
-setInterval(function () {
- var region = regions[Math.round(Math.random() * (regions.length - 1))];
- myChart.setOption({
- title: {
- left: 'center',
- top: 'center',
- text: region.name,
- textStyle: {
- fontSize: 40
- }
- },
- globe: {
- viewControl: {
- targetCoord: region.center
- }
- }
- });
- mapChart.setOption({
- geo: {
- regions: [{
- name: region.name,
- itemStyle: {
- normal: {
- areaColor: '#444'
- }
- }
- }]
- }
- })
-}, 2000);
\ No newline at end of file
diff --git a/public/data-gl/globe-displacement.js b/public/data-gl/globe-displacement.js
deleted file mode 100644
index 06b2125..0000000
--- a/public/data-gl/globe-displacement.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/*
-title: Globe Displacement
-category: globe
-titleCN: Globe Displacement
-*/
-
-option = {
- globe: {
- displacementTexture: ROOT_PATH + '/data-gl/asset/bathymetry_bw_composite_4k.jpg',
-
- displacementScale: 0.1,
- displacementQuality: 'ultra',
-
- shading: 'realistic',
- realisticMaterial: {
- roughness: 0.8,
- metalness: 0
- },
-
- postEffect: {
- enable: true,
- SSAO: {
- enable: true,
- radius: 2,
- intensity: 1.5,
- quality: 'high'
- }
- },
- temporalSuperSampling: {
- enable: true
- },
- light: {
- ambient: {
- intensity: 0
- },
- main: {
- intensity: 1,
- shadow: true
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
- exposure: 1,
- diffuseIntensity: 0.2
- }
- },
- viewControl: {
- autoRotate: false
- },
- debug: {
- wireframe: {
- show: true
- }
- }
- },
- series: []
-};
\ No newline at end of file
diff --git a/public/data-gl/globe-echarts-gl-hello-world.js b/public/data-gl/globe-echarts-gl-hello-world.js
deleted file mode 100644
index 6ef4cb5..0000000
--- a/public/data-gl/globe-echarts-gl-hello-world.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
-title: ECharts-GL Hello World
-category: globe
-titleCN: ECharts-GL Hello World
-scripts: 'https://cdn.jsdelivr.net/gh/ecomfe/echarts-gl/dist/echarts-gl.min.js'
-videoStart: 2000
-videoEnd: 6000
-*/
-
-option = {
- backgroundColor: '#000',
- globe: {
- baseTexture: ROOT_PATH + "/data-gl/asset/world.topo.bathy.200401.jpg",
- heightTexture: ROOT_PATH + "/data-gl/asset/world.topo.bathy.200401.jpg",
- displacementScale: 0.04,
- shading: 'realistic',
- environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
- realisticMaterial: {
- roughness: 0.9
- },
- postEffect: {
- enable: true
- },
- light: {
- main: {
- intensity: 5,
- shadow: true
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
- diffuseIntensity: 0.2
- }
- }
- }
-};
\ No newline at end of file
diff --git a/public/data-gl/globe-layers.js b/public/data-gl/globe-layers.js
deleted file mode 100644
index ef3d0e5..0000000
--- a/public/data-gl/globe-layers.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
-title: Globe Layers
-category: globe
-titleCN: Globe Layers
-videoStart: 2000
-videoEnd: 6000
-*/
-
-option = {
- backgroundColor: '#000',
- globe: {
- baseTexture: ROOT_PATH + '/data-gl/asset/earth.jpg',
- heightTexture: ROOT_PATH + '/data-gl/asset/bathymetry_bw_composite_4k.jpg',
-
- displacementScale: 0.1,
-
- shading: 'lambert',
-
- environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
-
- light: {
- ambient: {
- intensity: 0.1
- },
- main: {
- intensity: 1.5
- }
- },
-
- layers: [{
- type: 'blend',
- blendTo: 'emission',
- texture: ROOT_PATH + '/data-gl/asset/night.jpg'
- }, {
- type: 'overlay',
- texture: ROOT_PATH + '/data-gl/asset/clouds.png',
- shading: 'lambert',
- distance: 5
- }]
- },
- series: []
-}
\ No newline at end of file
diff --git a/public/data-gl/globe-moon.js b/public/data-gl/globe-moon.js
deleted file mode 100644
index 5fa9158..0000000
--- a/public/data-gl/globe-moon.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
-title: Moon
-category: globe
-titleCN: Moon
-*/
-
-option = {
- globe: {
- baseTexture: ROOT_PATH + '/data-gl/asset/moon-base.jpg',
- heightTexture: ROOT_PATH + '/data-gl/asset/moon-bump.jpg',
-
- displacementScale: 0.05,
- displacementQuality: 'medium',
-
- environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
-
- shading: 'realistic',
- realisticMaterial: {
- roughness: 0.8,
- metalness: 0
- },
-
- postEffect: {
- enable: true,
- SSAO: {
- enable: true,
- radius: 2,
- intensity: 1,
- quality: 'high'
- }
- },
- temporalSuperSampling: {
- enable: true
- },
- light: {
- ambient: {
- intensity: 0
- },
- main: {
- intensity: 2,
- shadow: true
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
- exposure: 0,
- diffuseIntensity: 0.02
- }
- },
- viewControl: {
- autoRotate: false
- }
- },
- series: []
-};
\ No newline at end of file
diff --git a/public/data-gl/globe-with-echarts-surface.js b/public/data-gl/globe-with-echarts-surface.js
deleted file mode 100644
index 8794802..0000000
--- a/public/data-gl/globe-with-echarts-surface.js
+++ /dev/null
@@ -1,239 +0,0 @@
-/*
-title: Globe with ECharts Surface
-category: globe
-titleCN: Globe with ECharts Surface
-*/
-
-var canvas = document.createElement('canvas');
-var mapChart = echarts.init(canvas, null, {
- width: 4096,
- height: 2048
-});
-
-mapChart.setOption({
- backgroundColor: '#fff',
- visualMap: {
- show: false,
- min: 0,
- max: 500000,
- inRange: {
- color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
- }
- },
- series : [
- {
- type: 'map',
- map: 'world',
- top: 0,
- left: 0,
- right: 0,
- bottom: 0,
- boundingCoords: [[-180, 90], [180, -90]],
- data:[
- {name : 'Afghanistan', value : 28397.812},
- {name : 'Angola', value : 19549.124},
- {name : 'Albania', value : 3150.143},
- {name : 'United Arab Emirates', value : 8441.537},
- {name : 'Argentina', value : 40374.224},
- {name : 'Armenia', value : 2963.496},
- {name : 'French Southern and Antarctic Lands', value : 268.065},
- {name : 'Australia', value : 22404.488},
- {name : 'Austria', value : 8401.924},
- {name : 'Azerbaijan', value : 9094.718},
- {name : 'Burundi', value : 9232.753},
- {name : 'Belgium', value : 10941.288},
- {name : 'Benin', value : 9509.798},
- {name : 'Burkina Faso', value : 15540.284},
- {name : 'Bangladesh', value : 151125.475},
- {name : 'Bulgaria', value : 7389.175},
- {name : 'The Bahamas', value : 66402.316},
- {name : 'Bosnia and Herzegovina', value : 3845.929},
- {name : 'Belarus', value : 9491.07},
- {name : 'Belize', value : 308.595},
- {name : 'Bermuda', value : 64.951},
- {name : 'Bolivia', value : 716.939},
- {name : 'Brazil', value : 195210.154},
- {name : 'Brunei', value : 27.223},
- {name : 'Bhutan', value : 716.939},
- {name : 'Botswana', value : 1969.341},
- {name : 'Central African Republic', value : 4349.921},
- {name : 'Canada', value : 34126.24},
- {name : 'Switzerland', value : 7830.534},
- {name : 'Chile', value : 17150.76},
- {name : 'China', value : 1359821.465},
- {name : 'Ivory Coast', value : 60508.978},
- {name : 'Cameroon', value : 20624.343},
- {name : 'Democratic Republic of the Congo', value : 62191.161},
- {name : 'Republic of the Congo', value : 3573.024},
- {name : 'Colombia', value : 46444.798},
- {name : 'Costa Rica', value : 4669.685},
- {name : 'Cuba', value : 11281.768},
- {name : 'Northern Cyprus', value : 1.468},
- {name : 'Cyprus', value : 1103.685},
- {name : 'Czech Republic', value : 10553.701},
- {name : 'Germany', value : 83017.404},
- {name : 'Djibouti', value : 834.036},
- {name : 'Denmark', value : 5550.959},
- {name : 'Dominican Republic', value : 10016.797},
- {name : 'Algeria', value : 37062.82},
- {name : 'Ecuador', value : 15001.072},
- {name : 'Egypt', value : 78075.705},
- {name : 'Eritrea', value : 5741.159},
- {name : 'Spain', value : 46182.038},
- {name : 'Estonia', value : 1298.533},
- {name : 'Ethiopia', value : 87095.281},
- {name : 'Finland', value : 5367.693},
- {name : 'Fiji', value : 860.559},
- {name : 'Falkland Islands', value : 49.581},
- {name : 'France', value : 63230.866},
- {name : 'Gabon', value : 1556.222},
- {name : 'United Kingdom', value : 62066.35},
- {name : 'Georgia', value : 4388.674},
- {name : 'Ghana', value : 24262.901},
- {name : 'Guinea', value : 10876.033},
- {name : 'Gambia', value : 1680.64},
- {name : 'Guinea Bissau', value : 10876.033},
- {name : 'Equatorial Guinea', value : 696.167},
- {name : 'Greece', value : 11109.999},
- {name : 'Greenland', value : 56.546},
- {name : 'Guatemala', value : 14341.576},
- {name : 'French Guiana', value : 231.169},
- {name : 'Guyana', value : 786.126},
- {name : 'Honduras', value : 7621.204},
- {name : 'Croatia', value : 4338.027},
- {name : 'Haiti', value : 9896.4},
- {name : 'Hungary', value : 10014.633},
- {name : 'Indonesia', value : 240676.485},
- {name : 'India', value : 1205624.648},
- {name : 'Ireland', value : 4467.561},
- {name : 'Iran', value : 240676.485},
- {name : 'Iraq', value : 30962.38},
- {name : 'Iceland', value : 318.042},
- {name : 'Israel', value : 7420.368},
- {name : 'Italy', value : 60508.978},
- {name : 'Jamaica', value : 2741.485},
- {name : 'Jordan', value : 6454.554},
- {name : 'Japan', value : 127352.833},
- {name : 'Kazakhstan', value : 15921.127},
- {name : 'Kenya', value : 40909.194},
- {name : 'Kyrgyzstan', value : 5334.223},
- {name : 'Cambodia', value : 14364.931},
- {name : 'South Korea', value : 51452.352},
- {name : 'Kosovo', value : 97.743},
- {name : 'Kuwait', value : 2991.58},
- {name : 'Laos', value : 6395.713},
- {name : 'Lebanon', value : 4341.092},
- {name : 'Liberia', value : 3957.99},
- {name : 'Libya', value : 6040.612},
- {name : 'Sri Lanka', value : 20758.779},
- {name : 'Lesotho', value : 2008.921},
- {name : 'Lithuania', value : 3068.457},
- {name : 'Luxembourg', value : 507.885},
- {name : 'Latvia', value : 2090.519},
- {name : 'Morocco', value : 31642.36},
- {name : 'Moldova', value : 103.619},
- {name : 'Madagascar', value : 21079.532},
- {name : 'Mexico', value : 117886.404},
- {name : 'Macedonia', value : 507.885},
- {name : 'Mali', value : 13985.961},
- {name : 'Myanmar', value : 51931.231},
- {name : 'Montenegro', value : 620.078},
- {name : 'Mongolia', value : 2712.738},
- {name : 'Mozambique', value : 23967.265},
- {name : 'Mauritania', value : 3609.42},
- {name : 'Malawi', value : 15013.694},
- {name : 'Malaysia', value : 28275.835},
- {name : 'Namibia', value : 2178.967},
- {name : 'New Caledonia', value : 246.379},
- {name : 'Niger', value : 15893.746},
- {name : 'Nigeria', value : 159707.78},
- {name : 'Nicaragua', value : 5822.209},
- {name : 'Netherlands', value : 16615.243},
- {name : 'Norway', value : 4891.251},
- {name : 'Nepal', value : 26846.016},
- {name : 'New Zealand', value : 4368.136},
- {name : 'Oman', value : 2802.768},
- {name : 'Pakistan', value : 173149.306},
- {name : 'Panama', value : 3678.128},
- {name : 'Peru', value : 29262.83},
- {name : 'Philippines', value : 93444.322},
- {name : 'Papua New Guinea', value : 6858.945},
- {name : 'Poland', value : 38198.754},
- {name : 'Puerto Rico', value : 3709.671},
- {name : 'North Korea', value : 1.468},
- {name : 'Portugal', value : 10589.792},
- {name : 'Paraguay', value : 6459.721},
- {name : 'Qatar', value : 1749.713},
- {name : 'Romania', value : 21861.476},
- {name : 'Russia', value : 21861.476},
- {name : 'Rwanda', value : 10836.732},
- {name : 'Western Sahara', value : 514.648},
- {name : 'Saudi Arabia', value : 27258.387},
- {name : 'Sudan', value : 35652.002},
- {name : 'South Sudan', value : 9940.929},
- {name : 'Senegal', value : 12950.564},
- {name : 'Solomon Islands', value : 526.447},
- {name : 'Sierra Leone', value : 5751.976},
- {name : 'El Salvador', value : 6218.195},
- {name : 'Somaliland', value : 9636.173},
- {name : 'Somalia', value : 9636.173},
- {name : 'Republic of Serbia', value : 3573.024},
- {name : 'Suriname', value : 524.96},
- {name : 'Slovakia', value : 5433.437},
- {name : 'Slovenia', value : 2054.232},
- {name : 'Sweden', value : 9382.297},
- {name : 'Swaziland', value : 1193.148},
- {name : 'Syria', value : 7830.534},
- {name : 'Chad', value : 11720.781},
- {name : 'Togo', value : 6306.014},
- {name : 'Thailand', value : 66402.316},
- {name : 'Tajikistan', value : 7627.326},
- {name : 'Turkmenistan', value : 5041.995},
- {name : 'East Timor', value : 10016.797},
- {name : 'Trinidad and Tobago', value : 1328.095},
- {name : 'Tunisia', value : 10631.83},
- {name : 'Turkey', value : 72137.546},
- {name : 'United Republic of Tanzania', value : 44973.33},
- {name : 'Uganda', value : 33987.213},
- {name : 'Ukraine', value : 46050.22},
- {name : 'Uruguay', value : 3371.982},
- {name : 'United States of America', value : 312247.116},
- {name : 'Uzbekistan', value : 27769.27},
- {name : 'Venezuela', value : 236.299},
- {name : 'Vietnam', value : 89047.397},
- {name : 'Vanuatu', value : 236.299},
- {name : 'West Bank', value : 13.565},
- {name : 'Yemen', value : 22763.008},
- {name : 'South Africa', value : 51452.352},
- {name : 'Zambia', value : 13216.985},
- {name : 'Zimbabwe', value : 13076.978}
- ]
- }
- ]
-});
-
-// http://visibleearth.nasa.gov/view_cat.php?categoryID=1484
-option = {
- globe: {
- baseTexture: mapChart,
- heightTexture: ROOT_PATH + "/data-gl/asset/bathymetry_bw_composite_4k.jpg",
-
- displacementScale: 0.1,
-
- shading: 'lambert',
-
- light: {
- ambient: {
- intensity: 0.5
- },
- main: {
- intensity: 0.6
- }
- },
-
- viewControl: {
- autoRotate: false
- }
- },
- series: []
-};
\ No newline at end of file
diff --git a/public/data-gl/graphgl-gpu-layout.js b/public/data-gl/graphgl-gpu-layout.js
deleted file mode 100644
index e27ebbf..0000000
--- a/public/data-gl/graphgl-gpu-layout.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/*
-title: GraphGL GPU Layout
-category: graphGL
-theme: dark
-titleCN: GraphGL GPU Layout
-videoStart: 0
-videoEnd: 10000
-shotWidth: 1280
-*/
-
-
-function createNodes(widthCount, heightCount) {
- var nodes = [];
- for (var i = 0; i < widthCount; i++) {
- for (var j = 0; j < heightCount; j++) {
- nodes.push({
- x: Math.random() * window.innerWidth,
- y: Math.random() * window.innerHeight,
- value: 1
- });
- }
- }
- return nodes;
-}
-
-function createEdges(widthCount, heightCount) {
- var edges = [];
- for (var i = 0; i < widthCount; i++) {
- for (var j = 0; j < heightCount; j++) {
- if (i < widthCount - 1) {
- edges.push({
- source: i + j * widthCount,
- target: i + 1 + j * widthCount,
- value: 1
- });
- }
- if (j < heightCount - 1) {
- edges.push({
- source: i + j * widthCount,
- target: i + (j + 1) * widthCount,
- value: 1
- });
- }
- }
- }
- return edges;
-}
-
-var nodes = createNodes(50, 50);
-var edges = createEdges(50, 50);
-
-option = {
- series: [{
- type: 'graphGL',
- nodes: nodes,
- edges: edges,
- itemStyle: {
- color: 'rgba(255,255,255,0.8)'
- },
- lineStyle: {
- color: 'rgba(255,255,255,0.8)',
- width: 3
- },
- forceAtlas2: {
- steps: 5,
- jitterTolerence: 10,
- edgeWeightInfluence: 4
- }
- }]
-};
\ No newline at end of file
diff --git a/public/data-gl/graphgl-large-internet.js b/public/data-gl/graphgl-large-internet.js
deleted file mode 100644
index b880d51..0000000
--- a/public/data-gl/graphgl-large-internet.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/*
-title: GraphGL - Large Internet
-category: graphGL
-theme: dark
-titleCN: GraphGL - Large Internet
-shotDelay: 10000
-shotWidth: 1920
-*/
-
-
-$.getJSON(ROOT_PATH + '/data-gl/asset/data/internet.graph.json', function (graph) {
- var edges = graph.edges.map(function (edge) {
- return {
- source: edge[0],
- target: edge[1],
- value: 2
- }
- });
- var categories = [];
- var categoriesMap = {};
- var nodes = graph.nodes.map(function (node) {
- if (!categoriesMap[node[3]]) {
- categories.push({
- name: node[3]
- });
- categoriesMap[node[3]] = true;
- }
- return {
- x: Math.random() * window.innerWidth,
- y: Math.random() * window.innerHeight,
- // x: node[0],
- // y: node[1],
- symbolSize: node[2],
- category: node[3],
- value: 1
- }
- });
-
-
- myChart.setOption({
- color: ["rgb(203,239,15)", "rgb(73,15,239)","rgb(239,231,15)","rgb(15,217,239)","rgb(30,15,239)","rgb(15,174,239)","rgb(116,239,15)","rgb(239,15,58)","rgb(15,239,174)","rgb(239,102,15)","rgb(239,15,15)","rgb(15,44,239)","rgb(239,145,15)","rgb(30,239,15)","rgb(239,188,15)","rgb(159,239,15)","rgb(159,15,239)","rgb(15,239,44)","rgb(15,239,87)","rgb(15,239,217)","rgb(203,15,239)","rgb(239,15,188)","rgb(239,15,102)","rgb(239,58,15)","rgb(239,15,145)","rgb(116,15,239)","rgb(15,131,239) [...]
- series: [{
- type: 'graphGL',
- nodes: nodes,
- edges: edges,
- categories: categories.sort(function (a, b) { return a.name - b.name; }),
- lineStyle: {
- color: 'rgba(255,255,255,0.2)'
- },
- itemStyle: {
- opacity: 1
- },
- forceAtlas2: {
- steps: 1,
- stopThreshold: 1,
- jitterTolerence: 10,
- edgeWeight: [0.2, 1],
- gravity: 0,
- edgeWeightInfluence: 1,
- scaling: 0.2
- }
- }]
- });
-});
\ No newline at end of file
diff --git a/public/data-gl/graphgl-npm-dep.js b/public/data-gl/graphgl-npm-dep.js
deleted file mode 100644
index a9c32ce..0000000
--- a/public/data-gl/graphgl-npm-dep.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/*
-title: NPM Dependencies with graphGL
-category: graphGL
-theme: dark
-titleCN: 1w 节点 2w7 边的NPM 依赖图
-shotDelay: 5000
-shotWidth: 1920
-*/
-
-function loadScript(scriptUrl, cb) {
- var scriptTag = document.createElement('script');
- scriptTag.onload = cb;
- scriptTag.src = scriptUrl;
- document.body.appendChild(scriptTag);
-}
-
-loadScript('https://cdn.jsdelivr.net/npm/echarts-graph-modularity@2.0.0/dist/echarts-graph-modularity.min.js', function () {
- // Reinit chart again
- // TODO: visual encoding registerion must been done before echarts.init.
- var dom = myChart.getDom();
- myChart.dispose();
- myChart = echarts.init(dom);
- $.getJSON(ROOT_PATH + '/data-gl/asset/data/npmdep.json', function (data) {
- var nodes = data.nodes.map(function (nodeName, idx) {
- return {
- name: nodeName,
- value: data.dependentsCount[idx]
- }
- });
- var edges = [];
- for (var i = 0; i < data.edges.length;) {
- var s = data.edges[i++];
- var t = data.edges[i++];
- edges.push({
- source: s,
- target: t
- });
- }
-
- nodes.forEach(function (node) {
- // if (node.value > 100) {
- node.emphasis = {
- label: {
- show: true
- }
- }
- // }
- if (node.value > 5000) {
- node.label = {
- show: true
- }
- }
- });
-
- myChart.setOption({
- backgroundColor: '#000',
- series: [{
- color: ['rgb(203,239,15)', 'rgb(73,15,239)','rgb(15,217,239)','rgb(30,15,239)','rgb(15,174,239)','rgb(116,239,15)','rgb(239,15,58)','rgb(15,239,174)','rgb(239,102,15)','rgb(239,15,15)','rgb(15,44,239)','rgb(239,145,15)','rgb(30,239,15)','rgb(239,188,15)','rgb(159,239,15)','rgb(159,15,239)','rgb(15,239,44)','rgb(15,239,87)','rgb(15,239,217)','rgb(203,15,239)','rgb(239,15,188)','rgb(239,15,102)','rgb(239,58,15)','rgb(239,15,145)','rgb(116,15,239)','rgb(15,131,239)','rgb(73, [...]
- type: 'graphGL',
- nodes: nodes,
- edges: edges,
- modularity: {
- resolution: 2,
- sort: true
- },
- lineStyle: {
- color: 'rgba(255,255,255,1)',
- opacity: 0.05
- },
- itemStyle: {
- opacity: 1
- // borderColor: '#fff',
- // borderWidth: 1
- },
- focusNodeAdjacency: false,
- focusNodeAdjacencyOn: 'click',
- symbolSize: function (value) {
- return Math.sqrt(value / 10);
- },
- label: {
- color: '#fff'
- },
- emphasis: {
- label: {
- show: false
- },
- lineStyle: {
- opacity: 0.5,
- width: 4
- }
- },
- forceAtlas2: {
- steps: 5,
- stopThreshold: 20,
- jitterTolerence: 10,
- edgeWeight: [0.2, 1],
- gravity: 5,
- edgeWeightInfluence: 0
- // preventOverlap: true
- }
- }]
- });
- });
-});
diff --git a/public/data-gl/image-surface-sushuang.js b/public/data-gl/image-surface-sushuang.js
deleted file mode 100644
index 4faf6ad..0000000
--- a/public/data-gl/image-surface-sushuang.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/*
-title: Image Surface Sushuang
-category: surface
-titleCN: Image Surface Sushuang
-*/
-
-var img = new Image();
-var canvas = document.createElement('canvas');
-var ctx = canvas.getContext('2d');
-
-img.onload = function () {
- var width = canvas.width = img.width;
- var height = canvas.height = img.height;
- ctx.drawImage(img, 0, 0, width, height);
- var imgData = ctx.getImageData(0, 0, width, height);
-
- var data = [];
- for (var i = 0; i < imgData.data.length / 4; i++) {
- var r = imgData.data[i * 4];
- var g = imgData.data[i * 4 + 1];
- var b = imgData.data[i * 4 + 2];
-
- var lum = 255 - (0.2125 * r + 0.7154 * g + 0.0721 * b);
- lum = (lum - 125) / 10 + 50;
- data.push([i % width, height - Math.floor(i / width), lum]);
- }
-
-
- myChart.setOption(option = {
- tooltip: {},
- backgroundColor: '#fff',
- xAxis3D: {
- type: 'value'
- },
- yAxis3D: {
- type: 'value'
- },
- zAxis3D: {
- type: 'value',
- min: 0,
- max: 100
- },
- grid3D: {
- axisPointer: {
- show: false
- },
- viewControl: {
- distance: 100
- },
- postEffect: {
- enable: true
- },
- light: {
- main: {
- shadow: true,
- intensity: 2
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/canyon.hdr',
- exposure: 2,
- diffuseIntensity: 0.2,
- specularIntensity: 1
- }
- }
- },
- series: [{
- type: 'surface',
- silent: true,
- wireframe: {
- show: false
- },
- itemStyle: {
- color: function (params) {
- var i = params.dataIndex;
- var r = imgData.data[i * 4];
- var g = imgData.data[i * 4 + 1];
- var b = imgData.data[i * 4 + 2];
- return 'rgb(' + [r, g, b].join(',') + ')';
- }
- },
- data: data
- }]
- });
-}
-
-img.src = 'data:image/jpeg;charset=utf-8;base64,/9j/4AAQSkZJRgABAQABXgFeAAD/4QFURXhpZgAATU0AKgAAAAgACAEGAAMAAAABAAIAAAESAAMAAAABAAEAAAEaAAUAAAABAAAAbgEbAAUAAAABAAAAdgEoAAMAAAABAAIAAAExAAIAAAAgAAAAfgEyAAIAAAAUAAAAnodpAAQAAAABAAAAsgAAAAAAAAFeAAAAAQAAAV4AAAABQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKQAyMDE3OjA0OjExIDIyOjAxOjUwAAAJkAAABwAAAAQwMjIxkAMAAgAAABQAAAEkkAQAAgAAABQAAAE4kQEABwAAAAQBAgMAoAAABwAAAAQwMTAwoAEAAwAAAAEAAQAAoAIABAAAAAEAAAEAoAMABAAAAAEAAAFJpAYAAwAAAAEAAAAAAAAAADIwMTc6MDM6MTUg [...]
diff --git a/public/data-gl/image-to-bar3d.js b/public/data-gl/image-to-bar3d.js
deleted file mode 100644
index 8db304e..0000000
--- a/public/data-gl/image-to-bar3d.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/*
-title: Image to Bar3D
-category: bar3D
-titleCN: Image to Bar3D
-*/
-
-var img = new Image();
-var canvas = document.createElement('canvas');
-var ctx = canvas.getContext('2d');
-
-img.onload = function () {
- var width = canvas.width = img.width / 2;
- var height = canvas.height = img.height / 2;
- ctx.drawImage(img, 0, 0, width, height);
- var imgData = ctx.getImageData(0, 0, width, height);
-
- var data = [];
- for (var i = 0; i < imgData.data.length / 4; i++) {
- var r = imgData.data[i * 4];
- var g = imgData.data[i * 4 + 1];
- var b = imgData.data[i * 4 + 2];
-
- var lum = 255 - (0.2125 * r + 0.7154 * g + 0.0721 * b);
- lum = (lum - 125) / 20 + 50;
- data.push([i % width, height - Math.floor(i / width), lum]);
- }
-
-
- myChart.setOption(option = {
- tooltip: {},
- backgroundColor: '#fff',
- xAxis3D: {
- type: 'value'
- },
- yAxis3D: {
- type: 'value'
- },
- zAxis3D: {
- type: 'value',
- min: 0,
- max: 100
- },
- grid3D: {
- viewControl: {
- alpha: 20,
- beta: -30
- },
- postEffect: {
- enable: true,
- SSAO: {
- enable: true
- }
- },
- boxDepth: 120,
- light: {
- main: {
- shadow: true,
- intensity: 2
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/canyon.hdr',
- exposure: 2,
- diffuseIntensity: 0.2,
- specularIntensity: 1
- }
- }
- },
- series: [{
- type: 'bar3D',
- shading: 'realistic',
- barSize: 1,
- wireframe: {
- show: false
- },
- itemStyle: {
- color: function (params) {
- var i = params.dataIndex;
- var r = imgData.data[i * 4];
- var g = imgData.data[i * 4 + 1];
- var b = imgData.data[i * 4 + 2];
- return 'rgb(' + [r, g, b].join(',') + ')';
- }
- },
- data: data
- }]
- });
-}
-
-img.src = 'data:image/jpeg;charset=utf-8;base64,/9j/4RtXRXhpZgAATU0AKgAAAAgADQEAAAMAAAABBmAAAAEBAAMAAAABCZAAAAECAAMAAAADAAAAqgEGAAMAAAABAAIAAAESAAMAAAABAAEAAAEVAAMAAAABAAMAAAEaAAUAAAABAAAAsAEbAAUAAAABAAAAuAEoAAMAAAABAAIAAAExAAIAAAAgAAAAwAEyAAIAAAAUAAAA4AITAAMAAAABAAEAAIdpAAQAAAABAAAA9AAAAZwACAAIAAgANWfgAAAnEAA1Z+AAACcQQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKQAyMDE3OjA0OjExIDIyOjI4OjQxAAAJkAAABwAAAAQwMjIxkAMAAgAAABoAAAFmkAQAAgAAABoAAAGAkQEABwAAAAQBAgMAoAAABwAAAAQwMTAwoAEAAwAAAAEAAQAAoAIA [...]
diff --git a/public/data-gl/iron-globe.js b/public/data-gl/iron-globe.js
deleted file mode 100644
index 9764e57..0000000
--- a/public/data-gl/iron-globe.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
-title: Iron globe
-category: globe
-titleCN: Iron globe
-*/
-
-
-option = {
- backgroundColor: '#000',
- globe: {
- baseTexture: ROOT_PATH + "/data-gl/asset/world.topo.bathy.200401.jpg",
- heightTexture: ROOT_PATH + "/data-gl/asset/bathymetry_bw_composite_4k.jpg",
- displacementScale: 0.2,
- shading: 'realistic',
- environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
- realisticMaterial: {
- roughness: ROOT_PATH + '/asset/get/s/data-1497599804873-H1SHkG-mZ.jpg',
- metalness: ROOT_PATH + '/asset/get/s/data-1497599800643-BJbHyGWQW.jpg',
- textureTiling: [8, 4]
- },
- postEffect: {
- enable: true
- },
- viewControl: {
- autoRotate: false
- },
- light: {
- main: {
- intensity: 2,
- shadow: true
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
- exposure: 2,
- diffuseIntensity: 2,
- specularIntensity: 2
- }
- }
- }
-};
\ No newline at end of file
diff --git a/public/data-gl/line3d-orthographic.js b/public/data-gl/line3d-orthographic.js
deleted file mode 100644
index b70b68b..0000000
--- a/public/data-gl/line3d-orthographic.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
-title: 三维折线图正交投影
-category: line3D
-titleCN: 三维折线图正交投影
-*/
-
-var data = [];
-// Parametric curve
-for (var t = 0; t < 25; t += 0.001) {
- var x = (1 + 0.25 * Math.cos(75 * t)) * Math.cos(t);
- var y = (1 + 0.25 * Math.cos(75 * t)) * Math.sin(t);
- var z = t + 2.0 * Math.sin(75 * t);
- data.push([x, y, z]);
-}
-console.log(data.length);
-
-option = {
- tooltip: {},
- backgroundColor: '#fff',
- visualMap: {
- show: false,
- dimension: 2,
- min: 0,
- max: 30,
- inRange: {
- color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
- }
- },
- xAxis3D: {
- type: 'value'
- },
- yAxis3D: {
- type: 'value'
- },
- zAxis3D: {
- type: 'value'
- },
- grid3D: {
- viewControl: {
- projection: 'orthographic'
- }
- },
- series: [{
- type: 'line3D',
- data: data,
- lineStyle: {
- width: 4
- }
- }]
-};
diff --git a/public/data-gl/lines3d-airline-on-globe.js b/public/data-gl/lines3d-airline-on-globe.js
deleted file mode 100644
index ef04a53..0000000
--- a/public/data-gl/lines3d-airline-on-globe.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
-title: Airline on Globe
-category: lines3D
-titleCN: Airline on Globe
-*/
-
-$.getJSON(ROOT_PATH + '/data-gl/asset/data/flights.json', function(data) {
-
- function getAirportCoord(idx) {
- return [data.airports[idx][3], data.airports[idx][4]];
- }
- var routes = data.routes.map(function(airline) {
- return [
- getAirportCoord(airline[1]),
- getAirportCoord(airline[2])
- ];
- });
-
- myChart.setOption({
- backgroundColor: '#000',
- globe: {
- baseTexture: ROOT_PATH + '/data-gl/asset/world.topo.bathy.200401.jpg',
- heightTexture: ROOT_PATH + '/data-gl/asset/bathymetry_bw_composite_4k.jpg',
-
- shading: 'lambert',
-
- light: {
- ambient: {
- intensity: 0.4
- },
- main: {
- intensity: 0.4
- }
- },
-
- viewControl: {
- autoRotate: false
- }
- },
- series: {
-
- type: 'lines3D',
-
- coordinateSystem: 'globe',
-
- blendMode: 'lighter',
-
- lineStyle: {
- width: 1,
- color: 'rgb(50, 50, 150)',
- opacity: 0.1
- },
-
- data: routes
- }
- });
-});
\ No newline at end of file
diff --git a/public/data-gl/lines3d-flight-path-on-mapbox.js b/public/data-gl/lines3d-flight-path-on-mapbox.js
deleted file mode 100644
index 4ce72c7..0000000
--- a/public/data-gl/lines3d-flight-path-on-mapbox.js
+++ /dev/null
@@ -1,183 +0,0 @@
-/*
-title: Flight path on Mapbox
-category: lines3D
-titleCN: Flight path on Mapbox
-*/
-
-// 数据来自 https://uber.github.io/deck.gl/#/examples/core-layers/line-layer
-
-mapboxgl.accessToken = 'pk.eyJ1IjoicGlzc2FuZyIsImEiOiJjaXBnaGYxcW8wMDFodWNtNDc4NzdqMWR2In0.4XUWeduDltiCbsIiS-U8Lg';
-
-
-$.get(ROOT_PATH + '/asset/get/s/data-1497886591658-rJOKkdH7W.txt', function (text) {
-
- var data = decodeFlightPathData(text);
-
- var dataAll = [];
- for (var i = 0; i < 4; i++) {
- dataAll = dataAll.concat(data.map(function (item) {
- return {
- name: item.name,
- coords: item.coords.map(function (coord) {
- return coord.slice();
- })
- };
- }));
- }
-
- myChart.setOption({
- mapbox: {
- center: [0, 51.5],
- zoom: 8,
- pitch: 60,
- altitudeScale: 5,
- style: 'mapbox://styles/mapbox/dark-v9',
- postEffect: {
- enable: true,
- bloom: {
- intensity: 0.4
- }
- }
- },
- series: [{
- type: 'lines3D',
-
- coordinateSystem: 'mapbox',
-
- effect: {
- show: true,
- constantSpeed: 40,
- trailWidth: 2,
- trailLength: 0.15,
- trailOpacity: 1
- },
-
- blendMode: 'lighter',
-
- polyline: true,
-
- lineStyle: {
- width: 1,
- color: 'rgb(50, 60, 170)',
- opacity: 0.1
- },
-
- data: dataAll
- }]
- });
-
- window.addEventListener('keydown', function () {
- myChart.dispatchAction({
- type: 'lines3DToggleEffect',
- seriesIndex: 0
- });
- });
-});
-
-
-/**
- * https://github.com/mapbox/polyline
- *
- * Decodes to a [longitude, latitude] coordinates array.
- *
- * This is adapted from the implementation in Project-OSRM.
- *
- * @param {String} str
- * @param {Number} precision
- * @returns {Array}
- *
- * @see https://github.com/Project-OSRM/osrm-frontend/blob/master/WebContent/routing/OSRM.RoutingGeometry.js
- */
-function decodePolyline(str, precision) {
- var index = 0;
- var lat = 0;
- var lng = 0;
- var coordinates = [];
- var shift = 0;
- var result = 0;
- var byte = null;
- var latitude_change;
- var longitude_change;
- var factor = Math.pow(10, precision || 5);
-
- // Coordinates have variable length when encoded, so just keep
- // track of whether we've hit the end of the string. In each
- // loop iteration, a single coordinate is decoded.
- while (index < str.length) {
-
- // Reset shift, result, and byte
- byte = null;
- shift = 0;
- result = 0;
-
- do {
- byte = str.charCodeAt(index++) - 63;
- result |= (byte & 0x1f) << shift;
- shift += 5;
- } while (byte >= 0x20);
-
- latitude_change = ((result & 1) ? ~(result >> 1) : (result >> 1));
-
- shift = result = 0;
-
- do {
- byte = str.charCodeAt(index++) - 63;
- result |= (byte & 0x1f) << shift;
- shift += 5;
- } while (byte >= 0x20);
-
- longitude_change = ((result & 1) ? ~(result >> 1) : (result >> 1));
-
- lat += latitude_change;
- lng += longitude_change;
-
- coordinates.push([lng / factor, lat / factor]);
- }
-
- return coordinates;
-}
-
-function decodeFlightPathData(text) {
- var lines = text.split('\n');
-
- var result = [];
-
- lines.forEach(function(line) {
-
- if (!line) {
- return;
- }
-
- var parts = line.split('\t');
- var coords0 = parts[2].split('\x01').map(function(str) { return decodePolyline(str, 5) });
- var coords1 = parts[3].split('\x01').map(function(str) { return decodePolyline(str, 1) });
-
- var coords = [];
- coords0.forEach(function(lineStr, i) {
- for (var j = 1; j < lineStr.length; j++) {
- var prevPt0 = coords0[i][j - 1],
- prevPt1 = coords1[i][j - 1],
- currPt0 = coords0[i][j],
- currPt1 = coords1[i][j];
-
- coords.push(
- [prevPt0[0], prevPt0[1], prevPt1[0]],
- [currPt0[0], currPt0[1], currPt1[0]]
- );
- // result.push({
- // name: parts[0],
- // country: parts[1],
- // start: [prevPt0[0], prevPt0[1], prevPt1[0]],
- // end: [currPt0[0], currPt0[1], currPt1[0]]
- // });
- }
- });
-
- result.push({
- name: parts[0],
- country: parts[1],
- coords: coords
- });
- });
- return result;
-}
\ No newline at end of file
diff --git a/public/data-gl/lines3d-flights-gl.js b/public/data-gl/lines3d-flights-gl.js
deleted file mode 100644
index 95644fb..0000000
--- a/public/data-gl/lines3d-flights-gl.js
+++ /dev/null
@@ -1,96 +0,0 @@
-/*
-title: Flights GL
-category: lines3D
-titleCN: Flights GL
-videoStart: 2000
-videoEnd: 8000
-*/
-
-var uploadedDataURL = ROOT_PATH + "/data-gl/asset/data/flights.json";
-
-myChart.showLoading();
-
-$.getJSON(uploadedDataURL, function(data) {
-
- myChart.hideLoading();
-
- function getAirportCoord(idx) {
- return [data.airports[idx][3], data.airports[idx][4]];
- }
- var routes = data.routes.map(function (airline) {
- return [
- getAirportCoord(airline[1]),
- getAirportCoord(airline[2])
- ];
- });
-
- myChart.setOption({
- geo3D: {
- map: 'world',
- shading: 'realistic',
- silent: true,
- environment: '#333',
- realisticMaterial: {
- roughness: 0.8,
- metalness: 0
- },
- postEffect: {
- enable: true
- },
- groundPlane: {
- show: false
- },
- light: {
- main: {
- intensity: 1,
- alpha: 30
- },
- ambient: {
- intensity: 0
- }
- },
- viewControl: {
- distance: 70,
- alpha: 89,
-
- panMouseButton: 'left',
- rotateMouseButton: 'right'
- },
-
- itemStyle: {
- color: '#000'
- },
-
- regionHeight: 0.5
- },
- series: [{
- type: 'lines3D',
-
- coordinateSystem: 'geo3D',
-
- effect: {
- show: true,
- trailWidth: 1,
- trailOpacity: 0.5,
- trailLength: 0.2,
- constantSpeed: 5
- },
-
- blendMode: 'lighter',
-
- lineStyle: {
- width: 0.2,
- opacity: 0.05
- },
-
- data: routes
- }]
- });
-
- window.addEventListener('keydown', function () {
- myChart.dispatchAction({
- type: 'lines3DToggleEffect',
- seriesIndex: 0
- });
- });
-});
\ No newline at end of file
diff --git a/public/data-gl/lines3d-flights-on-geo3d.js b/public/data-gl/lines3d-flights-on-geo3d.js
deleted file mode 100644
index c29cf30..0000000
--- a/public/data-gl/lines3d-flights-on-geo3d.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/*
-title: Flights on Geo3D
-category: lines3D
-titleCN: Flights on Geo3D
-*/
-
-$.getJSON(ROOT_PATH + '/data-gl/asset/data/flights.json', function(data) {
- function getAirportCoord(idx) {
- return [data.airports[idx][3], data.airports[idx][4]];
- }
- var routes = data.routes.map(function(airline) {
- return [
- getAirportCoord(airline[1]),
- getAirportCoord(airline[2])
- ];
- });
-
- myChart.setOption({
- geo3D: {
- map: 'world',
- shading: 'color',
-
- environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
-
- silent: true,
-
- groundPlane: {
- show: false
- },
- light: {
- main: {
- intensity: 0
- },
- ambient: {
- intensity: 0
- }
- },
- viewControl: {
- distance: 50
- },
-
- itemStyle: {
- color: '#111'
- },
-
- boxHeight: 0.5
- },
- series: [{
- type: 'lines3D',
-
- coordinateSystem: 'geo3D',
-
- effect: {
- show: true,
- trailWidth: 2,
- trailLength: 0.2
- },
-
- blendMode: 'lighter',
-
- lineStyle: {
- width: 0,
- color: 'rgb(50, 50, 150)',
- opacity: 0.2
- },
-
- data: routes
- }]
- });
-});
-
-window.addEventListener('keydown', function () {
- myChart.dispatchAction({
- type: 'lines3DToggleEffect',
- seriesIndex: 0
- });
-});
\ No newline at end of file
diff --git a/public/data-gl/lines3d-flights.js b/public/data-gl/lines3d-flights.js
deleted file mode 100644
index e6eb33f..0000000
--- a/public/data-gl/lines3d-flights.js
+++ /dev/null
@@ -1,148 +0,0 @@
-/*
-title: Flights
-category: lines3D
-titleCN: Flights
-*/
-
-
-$.getJSON(ROOT_PATH + '/data-gl/asset/data/flights.json', function (data) {
- var airports = data.airports.map(function (item) {
- return {
- coord: [item[3], item[4]]
- }
- });
- function getAirportCoord(idx) {
- return [data.airports[idx][3], data.airports[idx][4]];
- }
-
- // Route: [airlineIndex, sourceAirportIndex, destinationAirportIndex]
- var routesGroupByAirline = {};
- data.routes.forEach(function (route) {
- var airline = data.airlines[route[0]];
- var airlineName = airline[0];
- if (!routesGroupByAirline[airlineName]) {
- routesGroupByAirline[airlineName] = [];
- }
- routesGroupByAirline[airlineName].push(route);
- });
-
- var pointsData = [];
- data.routes.forEach(function (airline) {
- pointsData.push(getAirportCoord(airline[1]));
- pointsData.push(getAirportCoord(airline[2]));
- });
-
- var series = data.airlines.map(function (airline) {
- var airlineName = airline[0];
- var routes = routesGroupByAirline[airlineName];
-
- if (!routes) {
- return null;
- }
- return {
- type: 'lines3D',
- name: airlineName,
-
- effect: {
- show: true,
- trailWidth: 2,
- trailLength: 0.15,
- trailOpacity: 1,
- trailColor: 'rgb(30, 30, 60)'
- },
-
- lineStyle: {
- width: 1,
- color: 'rgb(50, 50, 150)',
- // color: 'rgb(118, 233, 241)',
- opacity: 0.1
- },
- blendMode: 'lighter',
-
- data: routes.map(function (item) {
- return [airports[item[1]].coord, airports[item[2]].coord];
- })
- };
- }).filter(function (series) {
- return !!series;
- });
- series.push({
- type: 'scatter3D',
- coordinateSystem: 'globe',
- blendMode: 'lighter',
- symbolSize: 2,
- itemStyle: {
- color: 'rgb(50, 50, 150)',
- opacity: 0.2
- },
- data: pointsData
- });
-
- myChart.setOption({
- legend: {
- selectedMode: 'single',
- left: 'left',
- data: Object.keys(routesGroupByAirline),
- orient: 'vertical',
- textStyle: {
- color: '#fff'
- }
- },
- globe: {
-
- environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
-
- heightTexture: ROOT_PATH + '/data-gl/asset/bathymetry_bw_composite_4k.jpg',
-
- displacementScale: 0.1,
- displacementQuality: 'high',
-
- baseColor: '#000',
-
- shading: 'realistic',
- realisticMaterial: {
- roughness: 0.2,
- metalness: 0
- },
-
- postEffect: {
- enable: true,
- depthOfField: {
- enable: false,
- focalDistance: 150
- }
- },
- temporalSuperSampling: {
- enable: true
- },
- light: {
- ambient: {
- intensity: 0
- },
- main: {
- intensity: 0.1,
- shadow: false
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/lake.hdr',
- exposure: 1,
- diffuseIntensity: 0.5,
- specularIntensity: 2
- }
- },
- viewControl: {
- autoRotate: false
- },
- silent: true
- },
- series: series
- });
- window.addEventListener('keydown', function () {
- series.forEach(function (series, idx) {
- myChart.dispatchAction({
- type: 'lines3DToggleEffect',
- seriesIndex: idx
- });
- })
- });
-});
diff --git a/public/data-gl/lines3d-taxi-chengdu.js b/public/data-gl/lines3d-taxi-chengdu.js
deleted file mode 100644
index 7cf6d24..0000000
--- a/public/data-gl/lines3d-taxi-chengdu.js
+++ /dev/null
@@ -1,492 +0,0 @@
-/*
-title: 成都市出租车运行轨迹图 - GL 版
-category: lines3D
-titleCN: 成都市出租车运行轨迹图 - GL 版
-*/
-
-mapboxgl.accessToken = 'pk.eyJ1IjoicGlzc2FuZyIsImEiOiJjaXBnaGYxcW8wMDFodWNtNDc4NzdqMWR2In0.4XUWeduDltiCbsIiS-U8Lg';
-var szRoad = {
- success: true,
- errorCode: 0,
- errorMsg: "成功",
- data: [
-
-{ROAD_LINE: "104.096113,30.615077;104.098278,30.615873;104.098292,30.615875;104.098818,30.615953;104.098848,30.616028;104.098870,30.616195;104.098732,30.617522;104.098509,30.620377;104.098505,30.620469;104.097949,30.622939;104.097576,30.623194;104.097317,30.623492;104.094637,30.625320;104.094115,30.625740;104.094119,30.625785;104.094477,30.627981;104.094801,30.629104;104.094954,30.629733;104.094943,30.630138;104.094949,30.630221;104.094774,30.630891;104.094425,30.631573;104.093507,30.633 [...]
-
-{ROAD_LINE: "104.096219,30.615181;104.097324,30.615673;104.098197,30.615909;104.098201,30.615910;104.098289,30.615912;104.098302,30.615907;104.098307,30.615907;104.098307,30.615906;104.098308,30.615905;104.098319,30.615906;104.098621,30.615942;104.098830,30.616259;104.098763,30.617050;104.098741,30.617316;104.098741,30.617319;104.098699,30.617706;104.098633,30.618562;104.098556,30.619514;104.098473,30.620439;104.098404,30.621110;104.098411,30.621215;104.098430,30.621279;104.098448,30.621 [...]
-
-{ROAD_LINE: "104.095916,30.615057;104.097259,30.615660;104.098067,30.615920;104.098547,30.615971;104.098547,30.615973;104.098547,30.615976;104.098546,30.615978;104.098540,30.615976;104.098538,30.615973;104.098827,30.616248;104.098768,30.617144;104.098729,30.617525;104.098724,30.617528;104.098718,30.617526;104.098702,30.617807;104.098615,30.618703;104.098557,30.619229;104.098546,30.619252;104.098551,30.619250;104.098554,30.619251;104.098552,30.619258;104.098538,30.619387;104.098476,30.619 [...]
-
-{ROAD_LINE: "104.096648,30.615392;104.095222,30.614775;104.094691,30.614512;104.093729,30.614167;104.093155,30.614814;104.092864,30.615778;104.092812,30.616637;104.092777,30.617633;104.092826,30.618801;104.092877,30.619481;104.092923,30.620045;104.092945,30.620394;104.093001,30.620975;104.092875,30.622014;104.092884,30.622786;104.093192,30.623403;104.093420,30.623948;104.093615,30.624474;104.093810,30.625141;104.094017,30.625381;104.094012,30.625466;104.093992,30.625524;104.093988,30.625 [...]
-
-{ROAD_LINE: "104.099107,30.613973;104.098809,30.616726;104.098316,30.622058;104.097600,30.623242;104.097625,30.623352;104.097426,30.623377;104.093764,30.620923;104.092242,30.620972;104.086071,30.620724;104.079613,30.620518;104.071359,30.620333;104.070254,30.620315;104.067066,30.623630;104.066969,30.624583;104.066858,30.630659;104.066834,30.631848;104.066754,30.633316;104.066531,30.637764;104.066348,30.643100;104.066269,30.646687;104.066003,30.651595;104.064131,30.652732;104.064131,30.652732"},
-
-{ROAD_LINE: "104.099059,30.614035;104.098677,30.618054;104.098599,30.618925;104.098615,30.618923;104.098638,30.618900;104.098643,30.618901;104.098649,30.618922;104.098633,30.619163;104.098335,30.622029;104.098095,30.622801;104.097759,30.623094;104.097741,30.623117;104.097744,30.623126;104.097748,30.623134;104.097749,30.623139;104.097747,30.623139;104.097734,30.623136;104.097732,30.623131;104.097732,30.623130;104.097736,30.623131;104.097740,30.623130;104.097741,30.623132;104.097726,30.623 [...]
-
-{ROAD_LINE: "104.099087,30.614000;104.099052,30.614288;104.098658,30.618130;104.098477,30.620154;104.098477,30.620217;104.098349,30.621734;104.098297,30.621969;104.098300,30.622019;104.098303,30.622066;104.098298,30.622114;104.098118,30.622767;104.097912,30.623029;104.096402,30.624432;104.094679,30.625357;104.094144,30.626001;104.094150,30.626077;104.094166,30.626252;104.094180,30.626347;104.094854,30.629252;104.094853,30.629252;104.094979,30.629886;104.093416,30.634287;104.093341,30.634 [...]
-
-{ROAD_LINE: "104.099098,30.613831;104.099015,30.614813;104.098927,30.615707;104.098928,30.615714;104.098927,30.615716;104.098925,30.615717;104.098923,30.615720;104.098921,30.615729;104.098855,30.616334;104.098744,30.617568;104.098674,30.618676;104.098555,30.619785;104.098452,30.620924;104.098395,30.621689;104.098347,30.621935;104.098319,30.622294;104.098223,30.622679;104.098013,30.622906;104.097876,30.623032;104.097886,30.623046;104.097900,30.623065;104.097902,30.623058;104.097902,30.623 [...]
-
-{ROAD_LINE: "104.099041,30.614039;104.099050,30.614077;104.099043,30.614102;104.099024,30.614257;104.098917,30.615269;104.098777,30.616777;104.098663,30.617975;104.098556,30.619109;104.098516,30.619554;104.098490,30.620143;104.098409,30.620741;104.098382,30.621239;104.098349,30.621589;104.098289,30.621621;104.098311,30.621628;104.098380,30.621631;104.098466,30.621617;104.098467,30.621775;104.098423,30.622191;104.098333,30.622505;104.098246,30.622643;104.098230,30.622678;104.098225,30.622 [...]
-
-{ROAD_LINE: "104.099099,30.613622;104.098992,30.614420;104.098897,30.615722;104.098756,30.617263;104.098628,30.618596;104.098506,30.619900;104.098390,30.620976;104.098373,30.621508;104.098379,30.621513;104.098390,30.621515;104.098393,30.621596;104.098174,30.622700;104.098001,30.622928;104.097961,30.622990;104.097766,30.623225;104.097282,30.623646;104.096572,30.624313;104.096225,30.624608;104.095482,30.624983;104.094696,30.625351;104.094241,30.625635;104.094177,30.625900;104.094186,30.626 [...]
-
-{ROAD_LINE: "104.099150,30.613626;104.099143,30.613777;104.099120,30.613967;104.099130,30.614095;104.098868,30.616979;104.098702,30.618805;104.098733,30.619048;104.098718,30.619055;104.098765,30.619120;104.098595,30.619954;104.098590,30.620098;104.098389,30.621421;104.098387,30.621466;104.097874,30.623084;104.097034,30.623787;104.096579,30.624231;104.096406,30.624435;104.096239,30.624591;104.095394,30.625060;104.094137,30.625776;104.094137,30.625803;104.094129,30.625840;104.094126,30.625 [...]
-
-{ROAD_LINE: "104.099148,30.613443;104.098961,30.614887;104.098893,30.615583;104.098828,30.616313;104.098773,30.616963;104.098751,30.617171;104.098746,30.617170;104.098744,30.617170;104.098745,30.617171;104.098746,30.617176;104.098737,30.617319;104.098691,30.617826;104.098604,30.618687;104.098571,30.619411;104.098536,30.619713;104.098528,30.619802;104.098515,30.619977;104.098515,30.620001;104.098503,30.620110;104.098498,30.620163;104.098497,30.620165;104.098494,30.620167;104.098496,30.620 [...]
-
-{ROAD_LINE: "104.099168,30.613443;104.099112,30.613901;104.099105,30.613911;104.099094,30.613927;104.099090,30.613930;104.099044,30.614140;104.098975,30.615069;104.098908,30.615901;104.098768,30.617076;104.098640,30.618711;104.098518,30.619939;104.098448,30.620934;104.098411,30.621674;104.098392,30.621696;104.098429,30.621729;104.098365,30.622026;104.098203,30.622531;104.097883,30.622901;104.097916,30.622989;104.097902,30.623061;104.097877,30.623103;104.097556,30.623380;104.096987,30.623 [...]
-
-{ROAD_LINE: "104.099214,30.613645;104.099015,30.615723;104.098852,30.617349;104.098847,30.617362;104.098817,30.617735;104.098660,30.619070;104.098655,30.619489;104.098615,30.619943;104.098502,30.620444;104.098524,30.620692;104.098524,30.620691;104.098524,30.620936;104.098490,30.621081;104.098450,30.621219;104.098450,30.621247;104.098427,30.621678;104.098381,30.622292;104.098398,30.622377;104.098331,30.622484;104.097791,30.623154;104.097745,30.623197;104.097499,30.623419;104.096335,30.624 [...]
-
-{ROAD_LINE: "104.099124,30.615977;104.098938,30.616545;104.098747,30.617802;104.098687,30.618874;104.098670,30.619448;104.098677,30.619487;104.098679,30.619491;104.098672,30.619496;104.098667,30.619511;104.098629,30.619818;104.098507,30.620883;104.098432,30.621156;104.098426,30.621188;104.098404,30.621208;104.098359,30.621556;104.098299,30.621725;104.098233,30.621790;104.098182,30.621897;104.098186,30.621897;104.098285,30.621985;104.098308,30.622318;104.098236,30.622587;104.098106,30.622 [...]
-
-{ROAD_LINE: "104.098893,30.615461;104.098635,30.617774;104.098568,30.618529;104.098500,30.619192;104.098470,30.619477;104.098474,30.619478;104.098449,30.619637;104.098387,30.620245;104.098317,30.620873;104.098225,30.621742;104.098198,30.622235;104.098192,30.622316;104.098193,30.622390;104.098188,30.622462;104.098159,30.622545;104.098151,30.622551;104.098039,30.622736;104.097908,30.622864;104.097904,30.622871;104.097721,30.623056;104.097423,30.623366;104.097127,30.623649;104.096827,30.623 [...]
-
-{ROAD_LINE: "104.099062,30.616017;104.098922,30.616208;104.098740,30.617410;104.098601,30.618920;104.098362,30.621759;104.097911,30.622979;104.096779,30.623994;104.094971,30.625188;104.094139,30.625733;104.094177,30.625938;104.094569,30.628333;104.094778,30.629046;104.094769,30.628999;104.094829,30.629188;104.094956,30.629834;104.093679,30.633321;104.092800,30.636178;104.091409,30.638451;104.089902,30.640174;104.089044,30.641077;104.088654,30.641433;104.085402,30.642586;104.083922,30.643 [...]
-
-{ROAD_LINE: "104.099504,30.616079;104.099263,30.616078;104.099242,30.616088;104.099118,30.616101;104.099009,30.616129;104.098902,30.616479;104.098830,30.617242;104.098804,30.617478;104.098796,30.617472;104.098788,30.617467;104.098787,30.617467;104.098776,30.617466;104.098787,30.617474;104.098742,30.617938;104.098672,30.618689;104.098638,30.619058;104.098614,30.619093;104.098630,30.619102;104.098604,30.619279;104.098574,30.619890;104.098524,30.620609;104.098388,30.621432;104.098309,30.621 [...]
-
-{ROAD_LINE: "104.099022,30.616073;104.098824,30.616555;104.098708,30.617463;104.098631,30.618304;104.098532,30.619451;104.098455,30.620186;104.098352,30.621169;104.098257,30.622240;104.097990,30.622869;104.097708,30.623205;104.097540,30.623323;104.097492,30.623315;104.097477,30.623318;104.097474,30.623320;104.097472,30.623321;104.097472,30.623322;104.097471,30.623323;104.097468,30.623320;104.097463,30.623317;104.097464,30.623314;104.097468,30.623313;104.097471,30.623314;104.097357,30.623 [...]
-
-{ROAD_LINE: "104.098918,30.616051;104.098716,30.617818;104.098618,30.618922;104.098516,30.620211;104.098429,30.621311;104.098310,30.622225;104.097760,30.623011;104.097083,30.623688;104.096168,30.624584;104.094989,30.625152;104.094163,30.625736;104.094268,30.626824;104.094335,30.627503;104.086381,30.642278;104.085300,30.642680;104.084835,30.642843;104.083718,30.643179;104.082846,30.643480;104.082505,30.643637;104.082296,30.643777;104.081871,30.644028;104.081421,30.644243;104.081373,30.644 [...]
-
-{ROAD_LINE: "104.099068,30.616011;104.099018,30.616023;104.098915,30.616138;104.098781,30.617138;104.098608,30.618864;104.098339,30.621433;104.098297,30.621973;104.098301,30.622031;104.098303,30.622069;104.097827,30.623074;104.097337,30.623549;104.096291,30.624497;104.095271,30.625078;104.094157,30.625643;104.094080,30.625850;104.094072,30.626040;104.094227,30.627015;104.094441,30.628059;104.094713,30.629004;104.094826,30.629328;104.094833,30.629363;104.094918,30.629817;104.094921,30.629 [...]
-
-{ROAD_LINE: "104.098576,30.615925;104.098571,30.615930;104.098563,30.615937;104.098564,30.615943;104.098794,30.615999;104.098792,30.616581;104.098710,30.617290;104.098683,30.617336;104.098676,30.617353;104.098668,30.617372;104.098624,30.617800;104.098545,30.618682;104.098505,30.619253;104.098453,30.619840;104.098381,30.620607;104.098346,30.620830;104.098161,30.622106;104.098184,30.622428;104.098114,30.622603;104.097973,30.622811;104.097828,30.623028;104.097099,30.623687;104.096556,30.624 [...]
-
-{ROAD_LINE: "104.098938,30.616078;104.098840,30.616706;104.098774,30.617258;104.098740,30.617645;104.098635,30.618454;104.098565,30.619134;104.098557,30.619205;104.098558,30.619208;104.098528,30.619407;104.098517,30.619831;104.098458,30.620688;104.098378,30.621380;104.098341,30.621681;104.098326,30.621718;104.098300,30.621711;104.098294,30.621713;104.098289,30.621756;104.098214,30.622324;104.097856,30.622932;104.097830,30.623029;104.097855,30.623033;104.097787,30.623148;104.097233,30.623 [...]
-
-{ROAD_LINE: "104.098874,30.615593;104.098855,30.615641;104.098816,30.615959;104.098777,30.616846;104.098658,30.618098;104.098548,30.619329;104.098517,30.620217;104.098401,30.621124;104.098285,30.621992;104.098226,30.622468;104.098197,30.622457;104.098192,30.622454;104.098185,30.622455;104.098167,30.622502;104.098076,30.622685;104.097810,30.623035;104.097500,30.623308;104.097497,30.623320;104.097507,30.623321;104.097514,30.623320;104.097504,30.623317;104.097499,30.623322;104.097498,30.623 [...]
-
-{ROAD_LINE: "104.098235,30.615902;104.098422,30.615905;104.098725,30.616025;104.098810,30.616318;104.098753,30.617157;104.098732,30.617277;104.098718,30.617479;104.098717,30.617602;104.098720,30.617699;104.098510,30.620108;104.098330,30.621887;104.098324,30.622040;104.098185,30.622644;104.098168,30.622667;104.097309,30.623587;104.095494,30.624950;104.094129,30.625627;104.094102,30.625720;104.094109,30.625762;104.094343,30.627561;104.094514,30.628169;104.094678,30.628709;104.094948,30.629 [...]
-
-{ROAD_LINE: "104.099166,30.616033;104.098709,30.617716;104.098603,30.618739;104.098582,30.618936;104.098576,30.618933;104.098577,30.618934;104.098582,30.618931;104.098570,30.619037;104.098552,30.619297;104.098503,30.619775;104.098451,30.620463;104.098420,30.621207;104.098326,30.621771;104.098226,30.622515;104.098175,30.622613;104.098045,30.622785;104.097534,30.623282;104.096698,30.624049;104.096259,30.624491;104.096224,30.624536;104.096142,30.624600;104.095929,30.624727;104.095440,30.624 [...]
-
-{ROAD_LINE: "104.099047,30.616018;104.098871,30.616730;104.098743,30.617965;104.098665,30.618964;104.098597,30.619259;104.098610,30.619246;104.098621,30.619240;104.098642,30.619231;104.098699,30.619209;104.098718,30.619207;104.098736,30.619206;104.098703,30.619328;104.098621,30.619958;104.098565,30.620822;104.098434,30.621738;104.098170,30.622749;104.097688,30.623163;104.097565,30.623239;104.097534,30.623247;104.097522,30.623255;104.097510,30.623265;104.097492,30.623273;104.097470,30.623 [...]
-
-{ROAD_LINE: "104.100633,30.616137;104.098711,30.615940;104.095028,30.614633;104.093764,30.614140;104.093349,30.614460;104.092794,30.616509;104.092798,30.616591;104.092779,30.618287;104.092881,30.620487;104.092884,30.620555;104.092882,30.620692;104.092822,30.621987;104.093444,30.623916;104.094067,30.625476;104.094197,30.627010;104.094262,30.627370;104.094578,30.628516;104.094598,30.628583;104.094798,30.629254;104.094884,30.629976;104.093920,30.632411;104.093848,30.632643;104.093307,30.634 [...]
-
-{ROAD_LINE: "104.099764,30.616048;104.099097,30.615955;104.098804,30.616567;104.098709,30.617659;104.098618,30.618788;104.098526,30.619784;104.098433,30.620719;104.098380,30.621428;104.098392,30.621506;104.098397,30.621659;104.098386,30.621701;104.098379,30.621707;104.098390,30.621809;104.098376,30.622263;104.098052,30.622834;104.097523,30.623335;104.096801,30.624042;104.095797,30.624808;104.094524,30.625372;104.094147,30.626086;104.094246,30.627088;104.094442,30.628002;104.094772,30.629 [...]
-
-{ROAD_LINE: "104.100567,30.616076;104.100533,30.616055;104.100683,30.616082;104.100807,30.616090;104.101464,30.616090;104.102142,30.616134;104.102277,30.616381;104.102315,30.616860;104.102198,30.617377;104.102147,30.617796;104.102193,30.617874;104.102203,30.618027;104.102238,30.618309;104.102167,30.618701;104.102138,30.618920;104.102133,30.619316;104.102483,30.620074;104.103245,30.621110;104.103930,30.621903;104.104514,30.622563;104.104654,30.622742;104.104791,30.623016;104.104173,30.623 [...]
-
-{ROAD_LINE: "104.100268,30.616109;104.099070,30.616014;104.098811,30.617190;104.098801,30.617355;104.098755,30.617613;104.098670,30.618410;104.098571,30.619298;104.098566,30.619444;104.098570,30.619449;104.098566,30.619442;104.098557,30.619535;104.098494,30.620373;104.098380,30.621446;104.098273,30.622436;104.097646,30.623216;104.096979,30.623834;104.096849,30.623905;104.096849,30.623904;104.096857,30.623907;104.096746,30.624027;104.096635,30.624097;104.096502,30.624254;104.096331,30.624 [...]
-
-{ROAD_LINE: "104.100046,30.616038;104.099474,30.615970;104.099439,30.615968;104.099414,30.615962;104.099259,30.615958;104.098931,30.616202;104.098782,30.617164;104.098738,30.617457;104.098728,30.617462;104.098718,30.617500;104.098645,30.618244;104.098533,30.619537;104.098448,30.620375;104.098338,30.621467;104.098278,30.621867;104.098204,30.622425;104.097949,30.622863;104.097931,30.622920;104.097951,30.622931;104.097968,30.622930;104.097975,30.622935;104.098013,30.622929;104.097862,30.623 [...]
-
-{ROAD_LINE: "104.100680,30.616119;104.099704,30.616079;104.098930,30.616098;104.098786,30.617018;104.098658,30.618036;104.098516,30.619312;104.098466,30.620382;104.098359,30.621569;104.098269,30.622471;104.098130,30.622751;104.097861,30.622978;104.096234,30.624515;104.095546,30.624899;104.094738,30.625259;104.094149,30.625901;104.094286,30.627018;104.094553,30.628237;104.094762,30.628948;104.094931,30.629635;104.094906,30.630242;104.094743,30.630971;104.094489,30.631493;104.094312,30.631 [...]
-
-{ROAD_LINE: "104.099706,30.616097;104.098982,30.616061;104.098811,30.616728;104.098749,30.617300;104.098743,30.617358;104.098742,30.617361;104.098724,30.617615;104.098666,30.618405;104.098506,30.619629;104.098331,30.620753;104.098263,30.621617;104.098108,30.621788;104.098087,30.622217;104.097857,30.622825;104.097686,30.623062;104.097698,30.623104;104.097705,30.623133;104.097514,30.623358;104.097148,30.623755;104.096587,30.624261;104.096236,30.624558;104.095435,30.624970;104.094740,30.625 [...]
-
-{ROAD_LINE: "104.098882,30.616281;104.098762,30.618025;104.098755,30.618134;104.098686,30.618940;104.098685,30.619030;104.098629,30.619526;104.098617,30.619536;104.098622,30.619591;104.098619,30.619632;104.098261,30.622542;104.098141,30.622817;104.097191,30.623835;104.096231,30.624675;104.095294,30.625101;104.094209,30.626173;104.094209,30.626240;104.094242,30.626943;104.094244,30.626988;104.094811,30.629104;104.094809,30.629106;104.094808,30.629108;104.094806,30.629108;104.094927,30.630 [...]
-
-{ROAD_LINE: "104.098860,30.616336;104.098763,30.617106;104.098697,30.617756;104.098648,30.618222;104.098610,30.618795;104.098607,30.618934;104.098605,30.618925;104.098589,30.619147;104.098551,30.619515;104.098494,30.620151;104.098430,30.620864;104.098366,30.621313;104.098363,30.621454;104.098367,30.621457;104.098358,30.621605;104.098361,30.621744;104.098361,30.621835;104.098367,30.621971;104.098346,30.622072;104.098334,30.622084;104.098321,30.622092;104.098299,30.622102;104.098280,30.622 [...]
-
-{ROAD_LINE: "104.098769,30.617277;104.098648,30.618328;104.098568,30.619270;104.098476,30.620431;104.098389,30.621577;104.098342,30.621931;104.098418,30.621947;104.098401,30.621965;104.098560,30.621977;104.098571,30.621996;104.098456,30.622353;104.098239,30.622737;104.098146,30.622813;104.098130,30.622842;104.098098,30.622836;104.097923,30.622990;104.097702,30.623210;104.097210,30.623639;104.096549,30.624242;104.096362,30.624437;104.096210,30.624556;104.095820,30.624791;104.095415,30.624 [...]
-
-{ROAD_LINE: "104.098767,30.617440;104.098625,30.619348;104.098599,30.619391;104.098618,30.619409;104.098632,30.619421;104.098626,30.619433;104.098621,30.619438;104.098606,30.619546;104.098529,30.620026;104.098432,30.620716;104.098339,30.621576;104.098292,30.621836;104.098282,30.622061;104.098072,30.622733;104.097829,30.623056;104.097886,30.623070;104.097906,30.623067;104.097927,30.623069;104.097929,30.623060;104.097726,30.623209;104.097514,30.623377;104.097514,30.623393;104.097511,30.623 [...]
-
-{ROAD_LINE: "104.098767,30.617403;104.098601,30.619125;104.098602,30.619557;104.098201,30.622529;104.095896,30.624803;104.094126,30.625790;104.094136,30.625880;104.094891,30.629391;104.094971,30.629952;104.093834,30.632876;104.092790,30.636041;104.091086,30.638766;104.088931,30.641189;104.088849,30.641267;104.086408,30.642264;104.085575,30.642546;104.082740,30.643559;104.081613,30.644150;104.081194,30.644334;104.081157,30.644293;104.081017,30.643968;104.080980,30.644034;104.077964,30.645 [...]
-
-{ROAD_LINE: "104.098865,30.616709;104.098758,30.617398;104.098692,30.618068;104.098597,30.619232;104.098503,30.620219;104.098420,30.621211;104.098354,30.621839;104.098320,30.621868;104.098322,30.621866;104.098298,30.621865;104.098299,30.622016;104.098220,30.622556;104.097786,30.623057;104.097810,30.623064;104.097826,30.623069;104.097834,30.623076;104.097843,30.623088;104.097858,30.623103;104.097583,30.623346;104.097313,30.623599;104.096802,30.624034;104.096363,30.624494;104.095612,30.624 [...]
-
-{ROAD_LINE: "104.098908,30.616359;104.098843,30.616911;104.098779,30.617068;104.098689,30.617640;104.098612,30.618793;104.098519,30.619550;104.098439,30.620533;104.098315,30.621764;104.098066,30.622760;104.097227,30.623564;104.096502,30.624297;104.096151,30.624614;104.095731,30.624853;104.095076,30.625151;104.094608,30.625395;104.094303,30.625562;104.094163,30.626116;104.094214,30.626735;104.094258,30.627256;104.094336,30.627666;104.094374,30.627707;104.094374,30.627710;104.094367,30.627 [...]
-
-{ROAD_LINE: "104.098843,30.617027;104.098836,30.617453;104.098740,30.617946;104.098636,30.618689;104.098560,30.619806;104.098458,30.620927;104.098395,30.621602;104.098388,30.621722;104.098388,30.621719;104.098368,30.621711;104.098357,30.621705;104.098354,30.621701;104.098334,30.621845;104.098306,30.622338;104.098273,30.622497;104.098268,30.622537;104.098283,30.622541;104.098288,30.622543;104.098241,30.622651;104.098132,30.622820;104.097710,30.623214;104.097076,30.623800;104.096420,30.624 [...]
-
-{ROAD_LINE: "104.098779,30.617438;104.098687,30.618256;104.098601,30.619222;104.098520,30.619885;104.098440,30.620605;104.098354,30.621446;104.098272,30.622270;104.098277,30.622490;104.098230,30.622681;104.098072,30.622910;104.097868,30.623114;104.097817,30.623135;104.097785,30.623169;104.097753,30.623221;104.097711,30.623224;104.097712,30.623242;104.097691,30.623237;104.097607,30.623194;104.097596,30.623190;104.097592,30.623208;104.097560,30.623206;104.097531,30.623201;104.097554,30.623 [...]
-
-{ROAD_LINE: "104.098934,30.616318;104.098784,30.617462;104.098685,30.618473;104.098562,30.619674;104.098454,30.620618;104.098465,30.621381;104.098419,30.621803;104.098332,30.622436;104.098124,30.622824;104.098002,30.623014;104.097559,30.623401;104.096829,30.624011;104.096126,30.624624;104.095328,30.625025;104.094608,30.625371;104.094218,30.625678;104.094231,30.626173;104.094303,30.626963;104.094443,30.627831;104.094708,30.628750;104.094787,30.628993;104.094805,30.629001;104.094815,30.629 [...]
-
-{ROAD_LINE: "104.098873,30.616889;104.098765,30.617130;104.098772,30.617163;104.098776,30.617193;104.098770,30.617237;104.098753,30.617430;104.098750,30.617493;104.098750,30.617524;104.098765,30.617710;104.098702,30.618095;104.098707,30.618222;104.098670,30.618385;104.098663,30.618469;104.098655,30.618612;104.098660,30.618907;104.098660,30.619060;104.098622,30.619187;104.098623,30.619343;104.098627,30.619403;104.098503,30.619713;104.098397,30.619711;104.098288,30.619606;104.098292,30.619 [...]
-
-{ROAD_LINE: "104.098930,30.616165;104.098622,30.619003;104.098246,30.622552;104.097764,30.623272;104.097754,30.623269;104.097747,30.623267;104.097739,30.623266;104.097477,30.623426;104.095794,30.624825;104.094127,30.625925;104.094137,30.625965;104.094656,30.628511;104.094669,30.628547;104.094951,30.630053;104.093732,30.633113;104.092826,30.636048;104.091334,30.638562;104.090264,30.639810;104.089333,30.640792;104.087317,30.641963;104.086030,30.642409;104.083390,30.643271;104.083388,30.643 [...]
-
-{ROAD_LINE: "104.098804,30.616907;104.098791,30.617410;104.098711,30.617865;104.098662,30.618510;104.098630,30.618770;104.098636,30.618792;104.098640,30.618797;104.098645,30.618805;104.098638,30.618807;104.098636,30.618803;104.098639,30.618799;104.098554,30.619686;104.098532,30.620013;104.098503,30.620209;104.098491,30.620276;104.098474,30.620404;104.098473,30.620403;104.098475,30.620406;104.098481,30.620416;104.098490,30.620425;104.098489,30.620473;104.098474,30.620532;104.098433,30.620 [...]
-
-{ROAD_LINE: "104.098832,30.617278;104.098625,30.618948;104.098493,30.620092;104.098379,30.621299;104.098287,30.621980;104.098321,30.622327;104.098167,30.622725;104.097844,30.623013;104.097798,30.623047;104.097767,30.623091;104.097608,30.623256;104.097573,30.623284;104.097558,30.623288;104.097522,30.623291;104.097508,30.623297;104.097513,30.623300;104.097501,30.623306;104.097480,30.623306;104.097481,30.623304;104.097490,30.623304;104.097492,30.623307;104.097374,30.623428;104.096709,30.624 [...]
-
-{ROAD_LINE: "104.098807,30.617168;104.098757,30.617704;104.098644,30.618387;104.098542,30.619468;104.098492,30.620391;104.098406,30.621277;104.098306,30.621856;104.098289,30.621911;104.098276,30.621934;104.098262,30.621959;104.098243,30.621962;104.098220,30.621998;104.098242,30.622030;104.098249,30.622121;104.098035,30.622780;104.097583,30.623178;104.097550,30.623213;104.097551,30.623215;104.096934,30.623842;104.096491,30.624290;104.096305,30.624462;104.096312,30.624463;104.096276,30.624 [...]
-
-{ROAD_LINE: "104.098693,30.617410;104.098680,30.617697;104.098449,30.620321;104.098180,30.622471;104.097681,30.622906;104.097694,30.623089;104.095221,30.625041;104.093987,30.626068;104.094789,30.629068;104.094831,30.629176;104.094961,30.629802;104.093715,30.633012;104.092733,30.636340;104.090611,30.639424;104.088654,30.641398;104.084788,30.642824;104.081897,30.643909;104.081694,30.644028;104.081501,30.644122;104.078839,30.645668;104.074611,30.646359;104.070246,30.646551;104.069818,30.646 [...]
-
-{ROAD_LINE: "104.098885,30.616310;104.098520,30.620028;104.098432,30.621263;104.098430,30.621349;104.098435,30.621484;104.098427,30.621543;104.098357,30.621801;104.098330,30.621926;104.098313,30.621995;104.098311,30.622042;104.097951,30.622981;104.094127,30.626098;104.094738,30.628768;104.094948,30.629378;104.094984,30.629817;104.093787,30.632993;104.092242,30.637312;104.090447,30.639674;104.087895,30.641825;104.084592,30.643028;104.082600,30.643651;104.081332,30.644311;104.081179,30.644 [...]
-
-{ROAD_LINE: "104.098855,30.616242;104.098657,30.617952;104.098577,30.618760;104.098510,30.619406;104.098507,30.619410;104.098538,30.619421;104.098549,30.619497;104.098475,30.620301;104.098365,30.621416;104.098326,30.621823;104.098275,30.622315;104.098107,30.622724;104.097918,30.623016;104.097744,30.623117;104.097258,30.623563;104.096415,30.624381;104.095625,30.624910;104.094714,30.625370;104.094228,30.625914;104.094287,30.626702;104.094439,30.627865;104.094724,30.628867;104.094740,30.628 [...]
-
-{ROAD_LINE: "104.098823,30.616400;104.098825,30.616514;104.098495,30.619341;104.098527,30.619448;104.098530,30.619557;104.098468,30.620183;104.098470,30.620296;104.098214,30.621841;104.098260,30.621928;104.097756,30.623139;104.095314,30.625011;104.094161,30.625935;104.094156,30.626115;104.094157,30.626210;104.094836,30.629119;104.094908,30.629318;104.094979,30.629824;104.093686,30.633200;104.092964,30.635723;104.092127,30.637436;104.090236,30.639750;104.088652,30.641455;104.085313,30.642 [...]
-
-{ROAD_LINE: "104.098778,30.616908;104.098694,30.617881;104.098625,30.618912;104.098592,30.619708;104.098504,30.620608;104.098386,30.621511;104.098295,30.621699;104.098221,30.621746;104.098215,30.621863;104.098257,30.622231;104.098121,30.622773;104.097781,30.623105;104.096945,30.623866;104.095902,30.624744;104.094770,30.625266;104.094141,30.625749;104.094173,30.626372;104.094253,30.627183;104.094512,30.628316;104.094635,30.628732;104.094628,30.628746;104.094630,30.628748;104.094631,30.628 [...]
-
-{ROAD_LINE: "104.098817,30.617141;104.098713,30.618123;104.098576,30.619312;104.098468,30.620319;104.098373,30.621362;104.098288,30.622152;104.098069,30.622838;104.097544,30.623332;104.097525,30.623368;104.097501,30.623364;104.097495,30.623359;104.097495,30.623348;104.097498,30.623333;104.097237,30.623587;104.096444,30.624392;104.095281,30.625035;104.094225,30.625622;104.094212,30.626522;104.094355,30.627651;104.094680,30.628806;104.094811,30.629291;104.094805,30.629312;104.094794,30.629 [...]
-
-{ROAD_LINE: "104.098796,30.617291;104.098783,30.617425;104.098788,30.617424;104.098791,30.617426;104.098790,30.617425;104.098790,30.617422;104.098742,30.617811;104.098649,30.618858;104.098518,30.620162;104.098387,30.621590;104.098158,30.622694;104.097344,30.623515;104.096360,30.624423;104.094910,30.625212;104.094255,30.625630;104.094206,30.626301;104.094325,30.627311;104.094691,30.628588;104.094842,30.629101;104.094843,30.629110;104.094847,30.629112;104.094844,30.629112;104.094981,30.629 [...]
-
-{ROAD_LINE: "104.098732,30.617425;104.098627,30.618628;104.098509,30.619820;104.098450,30.620734;104.098343,30.621661;104.098330,30.622369;104.097957,30.623010;104.097142,30.623703;104.096066,30.624661;104.095001,30.625176;104.094156,30.625641;104.094172,30.626353;104.094258,30.627283;104.094562,30.628429;104.094773,30.629129;104.094917,30.629638;104.094772,30.630826;104.094205,30.631954;104.093683,30.633191;104.093311,30.634523;104.093051,30.635380;104.093025,30.635576;104.092987,30.635 [...]
-
-{ROAD_LINE: "104.098878,30.616546;104.098880,30.616598;104.098880,30.616608;104.098882,30.616608;104.098862,30.616695;104.098732,30.617299;104.098665,30.617768;104.098631,30.618374;104.098612,30.618775;104.098604,30.618840;104.098601,30.618853;104.098591,30.618867;104.098575,30.619078;104.098537,30.619594;104.098485,30.620166;104.098382,30.620818;104.098362,30.621409;104.098310,30.621890;104.098130,30.622638;104.097790,30.623029;104.097689,30.623159;104.097684,30.623155;104.097605,30.623 [...]
-
-{ROAD_LINE: "104.098807,30.616781;104.098725,30.617751;104.098589,30.618846;104.098554,30.619237;104.098518,30.619269;104.098502,30.619283;104.098507,30.619281;104.098511,30.619270;104.098505,30.619273;104.098510,30.619271;104.098510,30.619274;104.098489,30.619430;104.098487,30.619495;104.098477,30.619502;104.098466,30.619743;104.098388,30.620620;104.098329,30.621199;104.098278,30.621635;104.098197,30.622399;104.098060,30.622776;104.097982,30.622917;104.097770,30.623113;104.097737,30.623 [...]
-
-{ROAD_LINE: "104.098820,30.616854;104.098757,30.617423;104.098761,30.617425;104.098730,30.617743;104.098632,30.618850;104.098485,30.620226;104.098355,30.621585;104.098028,30.622815;104.097527,30.623257;104.097536,30.623291;104.097539,30.623307;104.097538,30.623325;104.097536,30.623337;104.097534,30.623350;104.097529,30.623368;104.097524,30.623389;104.097519,30.623392;104.097516,30.623389;104.097512,30.623382;104.097050,30.623794;104.096475,30.624337;104.095811,30.624813;104.094964,30.625 [...]
-
-{ROAD_LINE: "104.098810,30.617087;104.098713,30.617855;104.098660,30.618538;104.098659,30.618941;104.098659,30.619079;104.098655,30.619161;104.098639,30.619165;104.098619,30.619154;104.098634,30.619177;104.098563,30.619575;104.098464,30.620212;104.098361,30.620969;104.098296,30.621720;104.098117,30.622692;104.097890,30.622944;104.097894,30.622957;104.097791,30.623055;104.097217,30.623570;104.096527,30.624223;104.096020,30.624631;104.095445,30.624930;104.094558,30.625344;104.094158,30.625 [...]
-
-{ROAD_LINE: "104.098800,30.617481;104.098794,30.617487;104.098792,30.617488;104.098792,30.617489;104.098793,30.617484;104.098792,30.617493;104.098754,30.617880;104.098667,30.618621;104.098633,30.619295;104.098636,30.619328;104.098576,30.619781;104.098501,30.620522;104.098434,30.621286;104.098361,30.621778;104.098284,30.622030;104.098240,30.622533;104.098166,30.622709;104.098133,30.622771;104.097788,30.623038;104.097237,30.623571;104.096766,30.624042;104.096341,30.624465;104.095690,30.624 [...]
-
-{ROAD_LINE: "104.098810,30.617182;104.098813,30.617334;104.098873,30.617425;104.098862,30.617555;104.098838,30.617790;104.098837,30.618217;104.098413,30.621011;104.098382,30.621349;104.098385,30.621566;104.096605,30.624281;104.095657,30.624963;104.094150,30.626045;104.094170,30.626136;104.094811,30.629276;104.094823,30.629269;104.094979,30.629179;104.094994,30.629876;104.093286,30.634908;104.092731,30.636405;104.090384,30.639871;104.088699,30.641460;104.083730,30.643204;104.081620,30.644 [...]
-
-{ROAD_LINE: "104.098802,30.617013;104.098758,30.617391;104.098751,30.617402;104.098745,30.617397;104.098696,30.617586;104.098621,30.618315;104.098530,30.619429;104.098440,30.620426;104.098360,30.621477;104.098320,30.621903;104.098328,30.621904;104.098335,30.621904;104.098330,30.622001;104.098308,30.622256;104.098300,30.622263;104.098303,30.622266;104.098306,30.622269;104.098309,30.622271;104.098309,30.622273;104.098298,30.622277;104.098268,30.622411;104.098227,30.622537;104.098150,30.622 [...]
-
-{ROAD_LINE: "104.098856,30.616167;104.098781,30.617289;104.098780,30.617464;104.098805,30.617473;104.098816,30.617480;104.098825,30.617480;104.098820,30.617474;104.098825,30.617534;104.098746,30.618344;104.098633,30.619561;104.098519,30.620748;104.098409,30.621899;104.098262,30.622522;104.097881,30.623005;104.097885,30.623012;104.097891,30.623022;104.097885,30.623032;104.097752,30.623158;104.096988,30.623865;104.096066,30.624688;104.095311,30.625037;104.094248,30.625533;104.094101,30.625 [...]
-
-{ROAD_LINE: "104.098860,30.616155;104.098657,30.618607;104.098638,30.618880;104.098638,30.618879;104.098627,30.619120;104.098612,30.619369;104.098435,30.620908;104.098144,30.622691;104.097527,30.623322;104.097521,30.623324;104.097521,30.623326;104.097006,30.623809;104.095164,30.625082;104.094544,30.625385;104.094132,30.625900;104.094499,30.628116;104.094871,30.629274;104.094893,30.629378;104.094938,30.629684;104.093737,30.633081;104.093079,30.635418;104.092322,30.637132;104.090823,30.639 [...]
-
-{ROAD_LINE: "104.098777,30.616168;104.098788,30.617024;104.098811,30.617318;104.098765,30.617453;104.098765,30.617487;104.098763,30.617583;104.098763,30.617643;104.098390,30.620898;104.098307,30.621827;104.098010,30.622864;104.097661,30.623169;104.096932,30.623884;104.096196,30.624594;104.094237,30.625608;104.094124,30.626100;104.094252,30.626838;104.094257,30.626908;104.094257,30.626975;104.094252,30.627100;104.094692,30.628561;104.094799,30.628928;104.094991,30.629701;104.094969,30.630 [...]
-
-{ROAD_LINE: "104.098789,30.616836;104.098719,30.617453;104.098707,30.617460;104.098698,30.617470;104.098689,30.617481;104.098680,30.617510;104.098611,30.618127;104.098518,30.619155;104.098477,30.619420;104.098478,30.619417;104.098479,30.619412;104.098475,30.619405;104.098475,30.619404;104.098473,30.619410;104.098476,30.619418;104.098479,30.619423;104.098481,30.619424;104.098445,30.619749;104.098390,30.620485;104.098309,30.621292;104.098279,30.621622;104.098244,30.621637;104.098202,30.621 [...]
-
-{ROAD_LINE: "104.098797,30.617084;104.098356,30.620889;104.098339,30.621616;104.098423,30.622290;104.098358,30.622612;104.098209,30.622752;104.097865,30.623080;104.097285,30.623596;104.096671,30.624092;104.096385,30.624350;104.096180,30.624541;104.095733,30.624788;104.095370,30.624777;104.094527,30.625239;104.094336,30.625865;104.094396,30.626658;104.094364,30.627464;104.094495,30.628049;104.094489,30.628124;104.094483,30.628137;104.094542,30.628344;104.094685,30.628799;104.094796,30.629 [...]
-
-{ROAD_LINE: "104.098716,30.617335;104.098569,30.618942;104.098478,30.619840;104.098449,30.620481;104.098355,30.621410;104.098283,30.622268;104.097979,30.622901;104.097734,30.623125;104.097741,30.623125;104.097746,30.623129;104.097763,30.623138;104.097766,30.623140;104.097764,30.623140;104.097767,30.623143;104.097784,30.623168;104.097809,30.623193;104.097816,30.623204;104.097818,30.623206;104.097649,30.623344;104.097018,30.623895;104.096507,30.624392;104.095825,30.624821;104.094936,30.625 [...]
-
-{ROAD_LINE: "104.098783,30.617401;104.098704,30.618261;104.098624,30.619191;104.098540,30.620274;104.098431,30.621388;104.098262,30.622487;104.097690,30.623154;104.097523,30.623316;104.097520,30.623331;104.097525,30.623356;104.097534,30.623372;104.097537,30.623371;104.097541,30.623367;104.097544,30.623364;104.097540,30.623367;104.097539,30.623375;104.097540,30.623379;104.097542,30.623381;104.097528,30.623393;104.097186,30.623685;104.096459,30.624371;104.095660,30.624869;104.094616,30.625 [...]
-
-{ROAD_LINE: "104.100564,30.616182;104.100079,30.616221;104.099485,30.616172;104.098987,30.616298;104.098889,30.617014;104.098831,30.617341;104.098801,30.617317;104.098793,30.617309;104.098797,30.617315;104.098767,30.617639;104.098695,30.618311;104.098611,30.619116;104.098591,30.619198;104.098590,30.619206;104.098586,30.619209;104.098579,30.619217;104.098555,30.619431;104.098473,30.620178;104.098377,30.621215;104.098309,30.622262;104.098082,30.622876;104.097764,30.623233;104.097694,30.623 [...]
-
-{ROAD_LINE: "104.098668,30.618815;104.098614,30.619459;104.098607,30.619623;104.098283,30.622439;104.097589,30.623239;104.097527,30.623309;104.094981,30.625193;104.094177,30.625833;104.094189,30.626005;104.094798,30.628982;104.094926,30.629428;104.094991,30.629979;104.093721,30.633227;104.092936,30.635799;104.091143,30.638816;104.088804,30.641298;104.085115,30.642734;104.083323,30.643321;104.080677,30.644654;104.078582,30.645818;104.078000,30.646127;104.078499,30.647307;104.078307,30.647 [...]
-
-{ROAD_LINE: "104.098814,30.617594;104.098690,30.618787;104.098591,30.619636;104.098505,30.620488;104.098452,30.621065;104.098404,30.621424;104.098396,30.621570;104.098376,30.621850;104.098353,30.622093;104.098304,30.622504;104.098152,30.622741;104.097633,30.623191;104.096746,30.624066;104.096019,30.624684;104.095244,30.625064;104.094447,30.625444;104.094169,30.625735;104.094175,30.626125;104.094175,30.626185;104.094179,30.626293;104.094189,30.626411;104.094212,30.626562;104.094224,30.626 [...]
-
-{ROAD_LINE: "104.098787,30.617607;104.098733,30.618160;104.098702,30.618645;104.098677,30.618728;104.098651,30.618737;104.098638,30.618735;104.098607,30.618770;104.098595,30.619056;104.098587,30.619590;104.098553,30.619938;104.098478,30.620646;104.098408,30.621277;104.098355,30.621728;104.098354,30.622212;104.098311,30.622437;104.098320,30.622452;104.098271,30.622597;104.098162,30.622776;104.097675,30.623245;104.097079,30.623785;104.096386,30.624510;104.096017,30.624745;104.095525,30.624 [...]
-
-{ROAD_LINE: "104.098662,30.618384;104.098667,30.618507;104.098662,30.618772;104.098665,30.618814;104.098653,30.618972;104.098650,30.619024;104.098634,30.619289;104.098634,30.619321;104.098472,30.621249;104.098503,30.621309;104.098497,30.621403;104.098490,30.621441;104.098166,30.622739;104.097907,30.623034;104.096639,30.624164;104.095366,30.625067;104.094249,30.625595;104.094177,30.625825;104.094176,30.625910;104.094152,30.626001;104.094205,30.626465;104.094226,30.626555;104.094284,30.626 [...]
-
-{ROAD_LINE: "104.098677,30.618851;104.098688,30.619318;104.098663,30.619555;104.098574,30.620165;104.098409,30.621535;104.098156,30.622685;104.097674,30.623250;104.097345,30.623568;104.096735,30.624115;104.096400,30.624438;104.096058,30.624673;104.095166,30.625090;104.094588,30.625374;104.094203,30.625642;104.094193,30.626190;104.094258,30.626906;104.094380,30.627733;104.094777,30.628971;104.094873,30.629268;104.094938,30.629668;104.094865,30.630554;104.094435,30.631594;104.093856,30.632 [...]
-
-{ROAD_LINE: "104.098862,30.617620;104.098623,30.619374;104.098634,30.619391;104.098640,30.619418;104.098622,30.619483;104.098292,30.621871;104.097964,30.622894;104.097719,30.623244;104.095499,30.624978;104.094120,30.625775;104.094115,30.625848;104.094119,30.626015;104.094126,30.626100;104.094129,30.626181;104.094131,30.626352;104.094309,30.627584;104.094801,30.629186;104.094941,30.629882;104.094087,30.632184;104.093854,30.632741;104.092982,30.635613;104.092886,30.635846;104.092471,30.636 [...]
-
-{ROAD_LINE: "104.099263,30.617697;104.098739,30.618478;104.098607,30.619221;104.098522,30.620066;104.098376,30.621082;104.098337,30.621883;104.098310,30.622374;104.098198,30.622714;104.097996,30.622930;104.097777,30.623113;104.097518,30.623345;104.097622,30.623835;104.098137,30.624402;104.098563,30.625018;104.098922,30.625548;104.099065,30.625875;104.099384,30.626363;104.099024,30.626827;104.098028,30.627516;104.097070,30.628173;104.096271,30.628700;104.095367,30.629331;104.094824,30.630 [...]
-
-{ROAD_LINE: "104.098797,30.617650;104.098614,30.619328;104.098609,30.619334;104.098542,30.619901;104.098419,30.621409;104.098427,30.621721;104.098315,30.622012;104.098289,30.622111;104.097777,30.623127;104.097591,30.623279;104.095541,30.624930;104.094167,30.625882;104.094159,30.626040;104.094219,30.626785;104.094219,30.626893;104.094806,30.629027;104.094969,30.629693;104.093848,30.632794;104.093367,30.634606;104.093197,30.635225;104.093019,30.635588;104.092067,30.637601;104.090541,30.639 [...]
-
-{ROAD_LINE: "104.098658,30.618687;104.098613,30.619195;104.098605,30.619253;104.098590,30.619464;104.098588,30.619504;104.098582,30.619583;104.098327,30.621958;104.098326,30.621997;104.098324,30.622067;104.098403,30.622207;104.099808,30.622859;104.099206,30.623814;104.099096,30.623929;104.098061,30.624412;104.098065,30.624444;104.098745,30.625371;104.098850,30.625575;104.098849,30.625602;104.098865,30.625635;104.099002,30.625853;104.099350,30.626495;104.097369,30.628009;104.094978,30.629 [...]
-
-{ROAD_LINE: "104.098668,30.618652;104.098570,30.619408;104.098471,30.620416;104.098381,30.621322;104.098312,30.621959;104.098224,30.622519;104.098142,30.622732;104.097943,30.622951;104.097579,30.623205;104.097165,30.623625;104.096790,30.623948;104.096448,30.624332;104.095834,30.624780;104.094896,30.625220;104.094215,30.625649;104.094205,30.626343;104.094257,30.627051;104.094288,30.627417;104.094055,30.627314;104.093652,30.626853;104.092861,30.626196;104.092239,30.626089;104.091243,30.626 [...]
-
-{ROAD_LINE: "104.098664,30.618681;104.098378,30.621212;104.098307,30.621947;104.097847,30.623029;104.097463,30.623375;104.095972,30.624705;104.094167,30.625624;104.094218,30.626566;104.094667,30.628633;104.094743,30.628881;104.094723,30.628880;104.094740,30.628915;104.094621,30.631147;104.093400,30.634331;104.092846,30.636033;104.092233,30.637280;104.090619,30.639433;104.088511,30.641525;104.085516,30.642586;104.082466,30.643656;104.081716,30.644006;104.079450,30.645301;104.077259,30.646 [...]
-
-{ROAD_LINE: "104.098784,30.617876;104.098735,30.618658;104.098698,30.619026;104.098669,30.619063;104.098685,30.619077;104.098677,30.619079;104.098675,30.619077;104.098651,30.619267;104.098620,30.619623;104.098544,30.620303;104.098464,30.620930;104.098383,30.621336;104.098285,30.621924;104.098243,30.622545;104.097903,30.623120;104.097618,30.623499;104.097689,30.624049;104.098529,30.625170;104.099286,30.626095;104.099431,30.626510;104.098959,30.627054;104.097992,30.627836;104.096944,30.628 [...]
-
-{ROAD_LINE: "104.098721,30.617970;104.098425,30.620811;104.098315,30.621518;104.098201,30.622531;104.097841,30.622942;104.097807,30.622959;104.097474,30.623207;104.096937,30.623334;104.096850,30.623187;104.093959,30.620892;104.093930,30.620895;104.092927,30.621112;104.092916,30.621327;104.092811,30.622115;104.092831,30.622359;104.093777,30.624556;104.094119,30.625728;104.094120,30.625858;104.094551,30.628384;104.094701,30.628808;104.094703,30.628806;104.094919,30.630191;104.093715,30.632 [...]
-
-{ROAD_LINE: "104.098942,30.617594;104.098788,30.617727;104.098580,30.618977;104.098562,30.619138;104.098560,30.619281;104.098560,30.619418;104.098337,30.621514;104.098276,30.622174;104.098281,30.622271;104.097587,30.623267;104.097586,30.623267;104.097579,30.623266;104.097576,30.623266;104.097577,30.623262;104.096244,30.624546;104.096161,30.624607;104.094117,30.625892;104.094131,30.626073;104.094374,30.627931;104.094579,30.628529;104.094913,30.630087;104.093954,30.632454;104.093952,30.632 [...]
-
-{ROAD_LINE: "104.099193,30.617625;104.098793,30.617574;104.098718,30.617670;104.098695,30.617977;104.098698,30.618070;104.098637,30.619089;104.098637,30.619195;104.098607,30.619341;104.098482,30.620098;104.098449,30.620364;104.098450,30.620461;104.098362,30.621191;104.098384,30.621547;104.098378,30.621689;104.098380,30.621736;104.098340,30.621851;104.098221,30.622252;104.098226,30.622321;104.097729,30.623166;104.096042,30.624726;104.094076,30.625698;104.094002,30.625985;104.094002,30.626 [...]
-
-{ROAD_LINE: "104.099244,30.617611;104.098869,30.617728;104.098695,30.618351;104.098551,30.619447;104.098481,30.620436;104.098398,30.621460;104.098344,30.621959;104.098229,30.622525;104.097819,30.623026;104.097635,30.623177;104.097648,30.623208;104.097661,30.623238;104.097468,30.623399;104.096997,30.623780;104.096363,30.624473;104.095607,30.624920;104.094707,30.625314;104.094158,30.625691;104.094161,30.626118;104.094204,30.626436;104.094266,30.626896;104.094288,30.627201;104.094378,30.627 [...]
-
-{ROAD_LINE: "104.098692,30.617781;104.098535,30.619181;104.098450,30.620148;104.098347,30.621105;104.098236,30.621925;104.098037,30.622720;104.097524,30.623237;104.097523,30.623319;104.097555,30.623382;104.097550,30.623384;104.097543,30.623380;104.097554,30.623383;104.097561,30.623375;104.097552,30.623372;104.097542,30.623379;104.097543,30.623384;104.097546,30.623387;104.097548,30.623388;104.097543,30.623389;104.097381,30.623504;104.096897,30.623942;104.095958,30.624755;104.094723,30.625 [...]
-
-{ROAD_LINE: "104.098785,30.617891;104.098473,30.620604;104.098461,30.621273;104.098508,30.621515;104.098424,30.621644;104.098341,30.621667;104.098326,30.621696;104.098283,30.622310;104.098156,30.622745;104.097994,30.622989;104.097964,30.623059;104.097989,30.623089;104.097642,30.623322;104.097212,30.623645;104.096965,30.623833;104.096755,30.623999;104.096267,30.624496;104.095221,30.625021;104.094429,30.625408;104.094203,30.625670;104.094206,30.625897;104.094214,30.626042;104.094315,30.626 [...]
-
-{ROAD_LINE: "104.098705,30.618664;104.098583,30.619461;104.098515,30.620568;104.098419,30.621469;104.098394,30.621605;104.098387,30.621620;104.098350,30.621667;104.098324,30.621651;104.098314,30.621639;104.098292,30.622018;104.098241,30.622537;104.097882,30.622966;104.097862,30.622999;104.097858,30.623012;104.097651,30.623199;104.097227,30.623587;104.096686,30.624121;104.096442,30.624371;104.096094,30.624632;104.095575,30.624905;104.094653,30.625328;104.094192,30.625624;104.094142,30.625 [...]
-
-{ROAD_LINE: "104.098850,30.617718;104.098735,30.617920;104.098359,30.621564;104.098350,30.621719;104.098355,30.621739;104.098381,30.622024;104.098356,30.622397;104.097819,30.623104;104.097794,30.623122;104.097674,30.623192;104.097671,30.623191;104.097666,30.623186;104.097309,30.623531;104.095721,30.624832;104.094144,30.625997;104.094136,30.626390;104.094147,30.626538;104.094159,30.626623;104.094219,30.627097;104.094219,30.627155;104.094576,30.628471;104.094904,30.629924;104.094898,30.630 [...]
-
-{ROAD_LINE: "104.098689,30.618551;104.098640,30.619361;104.098632,30.619368;104.098627,30.619374;104.098606,30.619719;104.098474,30.620481;104.098372,30.621611;104.098219,30.622599;104.097630,30.623226;104.097014,30.623833;104.096336,30.624507;104.095823,30.624814;104.094859,30.625298;104.094321,30.625588;104.094170,30.625742;104.094184,30.626142;104.094248,30.626750;104.094252,30.627086;104.094369,30.627711;104.094410,30.627869;104.094410,30.627879;104.094412,30.627883;104.094432,30.627 [...]
-
-{ROAD_LINE: "104.098801,30.618415;104.098688,30.618924;104.098624,30.619306;104.098524,30.619944;104.098349,30.621726;104.098343,30.621778;104.098338,30.621806;104.098341,30.621804;104.098342,30.621804;104.098341,30.621802;104.098353,30.621800;104.098355,30.621826;104.098311,30.622265;104.098075,30.622825;104.098032,30.622843;104.098016,30.622837;104.098003,30.622840;104.097603,30.623161;104.097074,30.623633;104.096534,30.624253;104.096139,30.624584;104.095513,30.624917;104.094765,30.625 [...]
-
-{ROAD_LINE: "104.098701,30.618125;104.098344,30.621751;104.098242,30.622458;104.097917,30.622888;104.098003,30.622920;104.097979,30.623019;104.097413,30.623472;104.097201,30.623582;104.097078,30.623668;104.096869,30.623902;104.096618,30.624127;104.096559,30.624151;104.096430,30.624263;104.096323,30.624387;104.096299,30.624407;104.096095,30.624595;104.095624,30.624857;104.095067,30.625149;104.094509,30.625404;104.094427,30.625452;104.094152,30.625818;104.094149,30.626325;104.094180,30.627 [...]
-
-{ROAD_LINE: "104.098758,30.617575;104.098703,30.618137;104.098613,30.619116;104.098533,30.619961;104.098438,30.620959;104.098387,30.621548;104.098366,30.621783;104.098310,30.622342;104.098144,30.622753;104.098081,30.622814;104.097943,30.622958;104.097737,30.623115;104.097460,30.623384;104.096978,30.623797;104.096531,30.624293;104.096158,30.624614;104.095690,30.624848;104.094846,30.625252;104.094328,30.625512;104.094168,30.625738;104.094154,30.625924;104.094191,30.626177;104.094276,30.626 [...]
-
-{ROAD_LINE: "104.099256,30.617650;104.099314,30.617661;104.099331,30.617669;104.099331,30.617677;104.099343,30.617676;104.099068,30.617645;104.098733,30.618145;104.098601,30.619193;104.098466,30.620256;104.098354,30.621398;104.098240,30.622278;104.097999,30.622890;104.097918,30.623000;104.097693,30.623134;104.097280,30.623501;104.096972,30.623845;104.096708,30.624099;104.096466,30.624330;104.096174,30.624590;104.095983,30.624693;104.095699,30.624823;104.095096,30.625129;104.094578,30.625 [...]
-
-{ROAD_LINE: "104.099338,30.617682;104.099060,30.617737;104.098734,30.617931;104.098643,30.618691;104.098634,30.618913;104.098623,30.618932;104.098579,30.619287;104.098540,30.619842;104.098484,30.620350;104.098437,30.620937;104.098387,30.621604;104.098331,30.622186;104.098322,30.622446;104.098311,30.622466;104.098274,30.622530;104.098139,30.622764;104.097837,30.623067;104.097297,30.623563;104.096677,30.624198;104.096577,30.624277;104.096291,30.624517;104.096013,30.624686;104.095948,30.624 [...]
-
-{ROAD_LINE: "104.098893,30.618078;104.098542,30.620765;104.098537,30.620776;104.098534,30.620778;104.098530,30.620792;104.098525,30.620799;104.098481,30.621122;104.098441,30.621437;104.098427,30.621631;104.098382,30.621735;104.098351,30.621741;104.098313,30.621832;104.098304,30.622072;104.098339,30.622348;104.098364,30.622388;104.098347,30.622509;104.098319,30.622576;104.098269,30.622652;104.098278,30.622668;104.098290,30.622679;104.098298,30.622684;104.098302,30.622683;104.098304,30.622 [...]
-
-{ROAD_LINE: "104.098475,30.618525;104.098757,30.616247;104.098753,30.616233;104.098883,30.614920;104.099170,30.611674;104.099132,30.611016;104.097445,30.610476;104.096892,30.609749;104.096548,30.608088;104.095009,30.607823;104.094974,30.607927;104.094827,30.609509;104.094768,30.610446;104.094780,30.610684;104.094767,30.610844;104.094768,30.610966;104.094695,30.611691;104.094160,30.613286;104.093448,30.614333;104.092879,30.615687;104.092878,30.615760;104.092878,30.615822;104.092874,30.615 [...]
-
-{ROAD_LINE: "104.098679,30.618427;104.098649,30.619055;104.098628,30.619222;104.098612,30.619241;104.098597,30.619253;104.098602,30.619245;104.098606,30.619241;104.098616,30.619239;104.098603,30.619245;104.098578,30.619275;104.098554,30.619583;104.098490,30.620298;104.098421,30.621212;104.098248,30.622139;104.097848,30.622977;104.097310,30.623486;104.096891,30.623867;104.096638,30.624132;104.096521,30.624246;104.096460,30.624315;104.096234,30.624520;104.095723,30.624874;104.095114,30.625 [...]
-
-{ROAD_LINE: "104.098601,30.618896;104.098601,30.618918;104.098583,30.619122;104.098517,30.619723;104.098473,30.620204;104.098423,30.620825;104.098368,30.621286;104.098336,30.621537;104.098322,30.622098;104.098290,30.622376;104.098292,30.622379;104.098285,30.622386;104.098280,30.622388;104.098276,30.622396;104.098199,30.622600;104.097853,30.622976;104.097622,30.623204;104.097567,30.623259;104.097576,30.623256;104.097579,30.623261;104.097574,30.623253;104.097571,30.623256;104.097567,30.623 [...]
-
-{ROAD_LINE: "104.098622,30.618757;104.098587,30.619291;104.098588,30.619395;104.098587,30.619397;104.098590,30.619399;104.098591,30.619403;104.098590,30.619409;104.098587,30.619417;104.098588,30.619417;104.098374,30.621605;104.098343,30.621933;104.098354,30.621968;104.098343,30.621981;104.098342,30.621996;104.098355,30.622044;104.098237,30.622618;104.098031,30.622790;104.098074,30.622866;104.098095,30.622900;104.098094,30.622911;104.097995,30.623032;104.097404,30.623586;104.096670,30.624 [...]
-
-{ROAD_LINE: "104.098559,30.618805;104.098554,30.618898;104.098564,30.618916;104.098526,30.619450;104.098489,30.619982;104.098406,30.620566;104.098330,30.621104;104.098281,30.621528;104.098248,30.622048;104.098142,30.622707;104.098109,30.622818;104.098083,30.622863;104.098109,30.622891;104.098067,30.622921;104.097789,30.623155;104.097523,30.623418;104.097657,30.623902;104.098157,30.624653;104.098882,30.625510;104.099026,30.625720;104.099010,30.625736;104.099006,30.625746;104.099252,30.626 [...]
-
-{ROAD_LINE: "104.098594,30.618759;104.098522,30.619401;104.098515,30.619915;104.098450,30.620514;104.098393,30.621254;104.098267,30.622050;104.098090,30.622727;104.097801,30.623027;104.097731,30.623119;104.097714,30.623158;104.097701,30.623189;104.097700,30.623205;104.097702,30.623216;104.097704,30.623223;104.097707,30.623220;104.097708,30.623216;104.097705,30.623215;104.097706,30.623212;104.097704,30.623216;104.097701,30.623223;104.097694,30.623239;104.097461,30.623465;104.096813,30.624 [...]
-
-{ROAD_LINE: "104.099772,30.617932;104.098729,30.619347;104.098693,30.619463;104.098691,30.619447;104.098681,30.619435;104.098672,30.619433;104.098665,30.619431;104.098657,30.619436;104.098654,30.619450;104.098602,30.619898;104.098519,30.620803;104.098397,30.621836;104.098428,30.621844;104.098464,30.621845;104.098504,30.621844;104.098496,30.621895;104.098404,30.622272;104.098144,30.622775;104.097965,30.622998;104.098013,30.623066;104.098013,30.623079;104.098016,30.623094;104.097735,30.623 [...]
-
-{ROAD_LINE: "104.100035,30.617686;104.100439,30.617695;104.100708,30.617767;104.101149,30.617796;104.101614,30.617824;104.102054,30.617836;104.102089,30.617818;104.102130,30.617818;104.102122,30.618155;104.102067,30.618784;104.102011,30.619378;104.102102,30.620097;104.102705,30.620770;104.103427,30.621494;104.104082,30.622142;104.104641,30.622686;104.104691,30.623188;104.103947,30.623786;104.103156,30.624301;104.102524,30.624706;104.101992,30.625088;104.100936,30.625798;104.100116,30.626 [...]
-
-{ROAD_LINE: "104.100458,30.617810;104.100089,30.617806;104.099620,30.617746;104.099043,30.617654;104.098736,30.618225;104.098576,30.619339;104.098558,30.619429;104.098549,30.619420;104.098545,30.619413;104.098542,30.619416;104.098499,30.620052;104.098395,30.621258;104.098206,30.622582;104.097802,30.623079;104.097797,30.623085;104.097796,30.623095;104.097789,30.623106;104.097789,30.623110;104.097418,30.623446;104.096725,30.624098;104.096349,30.624431;104.095874,30.624751;104.095302,30.625 [...]
-
-{ROAD_LINE: "104.100811,30.617784;104.101063,30.617804;104.101360,30.617836;104.101979,30.617870;104.102193,30.618034;104.102091,30.618475;104.102102,30.619251;104.102184,30.619980;104.102910,30.620916;104.103858,30.621935;104.104553,30.622664;104.104655,30.622778;104.104658,30.622789;104.104653,30.622800;104.104650,30.622809;104.104651,30.622836;104.104657,30.622839;104.104655,30.622839;104.104652,30.622840;104.104651,30.622839;104.104651,30.622837;104.104742,30.622974;104.104631,30.623 [...]
-
-{ROAD_LINE: "104.100089,30.617672;104.099448,30.617682;104.099082,30.617930;104.098826,30.618563;104.098742,30.618986;104.098709,30.619026;104.098684,30.619023;104.098626,30.619351;104.098529,30.620141;104.098459,30.620751;104.098346,30.621384;104.098324,30.621641;104.098312,30.621655;104.098266,30.621692;104.098241,30.622109;104.098214,30.622612;104.098101,30.622803;104.098108,30.622806;104.098104,30.622805;104.098092,30.622801;104.098079,30.622800;104.097998,30.622906;104.097635,30.623 [...]
-
-{ROAD_LINE: "104.100532,30.617669;104.100577,30.617673;104.100595,30.617692;104.100606,30.617714;104.100556,30.617738;104.100147,30.617712;104.099503,30.617663;104.099133,30.617660;104.098898,30.617999;104.098804,30.618666;104.098725,30.618996;104.098677,30.619271;104.098671,30.619461;104.098648,30.619724;104.098644,30.619822;104.098625,30.620030;104.098604,30.620218;104.098588,30.620414;104.098575,30.620548;104.098558,30.620868;104.098528,30.621025;104.098519,30.621021;104.098516,30.621 [...]
-
-{ROAD_LINE: "104.100555,30.617810;104.100735,30.617802;104.100916,30.617811;104.101022,30.617865;104.100677,30.617870;104.099917,30.617729;104.099160,30.617751;104.098903,30.618427;104.098731,30.619519;104.098600,30.620233;104.098462,30.621006;104.098447,30.621331;104.098368,30.621839;104.098358,30.622228;104.098303,30.622523;104.098256,30.622638;104.098070,30.622801;104.097798,30.623059;104.097163,30.623652;104.096531,30.624259;104.096268,30.624475;104.096029,30.624667;104.095970,30.624 [...]
-
-{ROAD_LINE: "104.100818,30.617637;104.100447,30.617612;104.099757,30.617667;104.099599,30.618221;104.099460,30.619304;104.099134,30.620503;104.098942,30.621314;104.098618,30.621620;104.098394,30.622043;104.098266,30.622521;104.097830,30.623016;104.097434,30.623380;104.096918,30.623813;104.096415,30.624346;104.096006,30.624625;104.095702,30.624831;104.094879,30.625264;104.094507,30.625515;104.094179,30.625876;104.094182,30.626610;104.094307,30.627501;104.094646,30.628547;104.094805,30.629 [...]
-
-{ROAD_LINE: "104.100270,30.617790;104.099420,30.617590;104.099118,30.617595;104.098820,30.617659;104.098745,30.617792;104.098475,30.620594;104.098474,30.620674;104.098474,30.620743;104.098474,30.620797;104.098407,30.621463;104.098329,30.621893;104.098327,30.621983;104.098340,30.622126;104.098288,30.622481;104.098238,30.622567;104.098213,30.622634;104.097841,30.623049;104.097681,30.623187;104.097342,30.623496;104.095046,30.625157;104.094154,30.625767;104.094162,30.625823;104.094488,30.628 [...]
-
-{ROAD_LINE: "104.099848,30.617613;104.099288,30.617612;104.099010,30.617674;104.098776,30.618304;104.098656,30.619167;104.098582,30.619783;104.098484,30.620648;104.098426,30.621385;104.098410,30.621641;104.098377,30.621736;104.098352,30.621738;104.098324,30.621732;104.098311,30.621729;104.098294,30.621724;104.098296,30.621724;104.098283,30.621877;104.098264,30.622145;104.098252,30.622305;104.098255,30.622313;104.098255,30.622322;104.098251,30.622325;104.098250,30.622330;104.098250,30.622 [...]
-
-{ROAD_LINE: "104.100284,30.617704;104.100046,30.617669;104.099781,30.617671;104.099395,30.617672;104.099097,30.617685;104.098870,30.618224;104.098796,30.618841;104.098752,30.619240;104.098681,30.619515;104.098543,30.620221;104.098421,30.621118;104.098333,30.621843;104.098309,30.622191;104.098167,30.622713;104.098194,30.622758;104.098201,30.622769;104.098205,30.622775;104.098201,30.622778;104.098156,30.622818;104.097747,30.623182;104.097123,30.623650;104.096798,30.623956;104.096574,30.624 [...]
-
-{ROAD_LINE: "104.099795,30.617827;104.098803,30.617973;104.098709,30.618555;104.098655,30.619043;104.098652,30.619052;104.098642,30.619050;104.098625,30.619048;104.098604,30.619051;104.098587,30.619041;104.098582,30.619039;104.098579,30.619039;104.098575,30.619050;104.098573,30.619054;104.098558,30.619301;104.098496,30.619867;104.098397,30.620577;104.098312,30.621593;104.098277,30.622369;104.098004,30.622881;104.097850,30.623028;104.097509,30.623301;104.097506,30.623753;104.097960,30.624 [...]
-
-{ROAD_LINE: "104.100121,30.617767;104.099570,30.617734;104.099285,30.617713;104.099098,30.617696;104.098825,30.618160;104.098692,30.619021;104.098545,30.620090;104.098403,30.621367;104.098260,30.622480;104.098083,30.622837;104.098131,30.622887;104.098072,30.622874;104.097789,30.623048;104.097412,30.623355;104.096949,30.623772;104.096459,30.624246;104.096117,30.624579;104.095441,30.624909;104.094402,30.625401;104.094054,30.625637;104.094066,30.625872;104.094087,30.626302;104.094128,30.626 [...]
-
-{ROAD_LINE: "104.099936,30.617734;104.099585,30.617706;104.098993,30.617661;104.098718,30.618186;104.098611,30.619339;104.098450,30.620728;104.098357,30.621645;104.098338,30.621609;104.098338,30.621617;104.098324,30.621616;104.098323,30.621623;104.098306,30.621894;104.098149,30.622615;104.097830,30.622956;104.097792,30.622999;104.097701,30.623098;104.097168,30.623566;104.096505,30.624243;104.095791,30.624728;104.094771,30.625206;104.094215,30.625573;104.094146,30.625940;104.094238,30.626 [...]
-
-{ROAD_LINE: "104.099662,30.617657;104.098735,30.617737;104.098495,30.620114;104.098492,30.620317;104.098357,30.621614;104.098355,30.621676;104.098339,30.621813;104.098332,30.621866;104.097990,30.622834;104.097752,30.623166;104.096651,30.624114;104.096137,30.624627;104.094256,30.625525;104.094114,30.625770;104.094117,30.625802;104.094308,30.627499;104.094673,30.628611;104.094821,30.629176;104.094828,30.629207;104.094926,30.629906;104.093719,30.633102;104.093081,30.635355;104.092185,30.637 [...]
-
-{ROAD_LINE: "104.100947,30.617745;104.100388,30.617674;104.099745,30.617621;104.099243,30.617647;104.098828,30.618300;104.098637,30.619621;104.098531,30.620801;104.098435,30.621537;104.098437,30.621566;104.098414,30.621808;104.098359,30.622257;104.098208,30.622689;104.098149,30.622776;104.098113,30.622793;104.098098,30.622817;104.098071,30.622856;104.097697,30.623155;104.097026,30.623731;104.096651,30.624096;104.096227,30.624518;104.095830,30.624785;104.095200,30.625071;104.094527,30.625 [...]
-
-{ROAD_LINE: "104.100668,30.617794;104.099057,30.617600;104.098665,30.618230;104.098404,30.621213;104.098291,30.622584;104.097561,30.623282;104.097552,30.623285;104.097556,30.623284;104.097556,30.623282;104.097552,30.623282;104.095951,30.624724;104.094136,30.626035;104.094484,30.628021;104.094602,30.628394;104.094939,30.629494;104.094964,30.629937;104.094050,30.632278;104.094049,30.632291;104.093799,30.632965;104.093022,30.635588;104.092977,30.635712;104.092868,30.635971;104.091088,30.638 [...]
-
-{ROAD_LINE: "104.099864,30.617706;104.098722,30.619674;104.098548,30.620848;104.098432,30.621848;104.098227,30.622796;104.098022,30.622978;104.097953,30.622986;104.097893,30.623029;104.097510,30.623338;104.096928,30.623893;104.096716,30.624082;104.096488,30.624305;104.095966,30.624729;104.095118,30.625129;104.094370,30.625481;104.094330,30.625457;104.094105,30.625701;104.094179,30.626465;104.094274,30.627330;104.094595,30.628457;104.094777,30.628922;104.094782,30.628939;104.094786,30.628 [...]
-
-{ROAD_LINE: "104.100410,30.617772;104.100863,30.617824;104.101533,30.617905;104.101863,30.617968;104.101990,30.618059;104.101991,30.618232;104.101918,30.618550;104.101858,30.618949;104.101824,30.619645;104.102244,30.620430;104.103138,30.621301;104.103943,30.622059;104.104444,30.622564;104.104542,30.622671;104.104550,30.622667;104.104571,30.622688;104.104803,30.623086;104.104267,30.623573;104.103568,30.624034;104.102859,30.624473;104.102698,30.624571;104.102206,30.624911;104.101340,30.625 [...]
-
-{ROAD_LINE: "104.100837,30.617829;104.100175,30.617768;104.099630,30.617795;104.099071,30.618127;104.098746,30.619106;104.098613,30.620019;104.098458,30.621169;104.098376,30.622230;104.098148,30.622871;104.097785,30.623158;104.097690,30.623235;104.097635,30.623284;104.097613,30.623310;104.097600,30.623324;104.097202,30.623651;104.096512,30.624304;104.095682,30.624871;104.094610,30.625375;104.094274,30.625894;104.094343,30.626884;104.094519,30.628026;104.094824,30.629103;104.094986,30.630 [...]
-
-{ROAD_LINE: "104.100016,30.617672;104.098753,30.618069;104.098281,30.622444;104.097604,30.623209;104.097385,30.623424;104.095694,30.624840;104.094166,30.626267;104.094227,30.626560;104.094967,30.630440;104.093156,30.635202;104.092623,30.636585;104.089926,30.640116;104.088747,30.641321;104.083408,30.643279;104.083343,30.643298;104.081192,30.644413;104.081149,30.644401;104.079556,30.645253;104.075414,30.646394;104.075147,30.647244;104.075179,30.647515;104.077841,30.651546;104.078270,30.652 [...]
-
-{ROAD_LINE: "104.101399,30.616149;104.100422,30.615965;104.099312,30.615905;104.098983,30.616405;104.098846,30.617316;104.098730,30.618372;104.098593,30.619515;104.098481,30.620678;104.098383,30.621347;104.098401,30.621546;104.098326,30.622007;104.098276,30.622562;104.097668,30.623239;104.096876,30.624000;104.096292,30.624585;104.096072,30.624702;104.095529,30.624945;104.094532,30.625397;104.094175,30.626018;104.094255,30.626778;104.094464,30.627779;104.094719,30.628631;104.094753,30.628 [...]
-
-{ROAD_LINE: "104.101105,30.616121;104.100045,30.616106;104.099236,30.616052;104.098883,30.616218;104.098747,30.617207;104.098712,30.617462;104.098698,30.617482;104.098691,30.617492;104.098684,30.617496;104.098656,30.617732;104.098601,30.618542;104.098465,30.619853;104.098410,30.620735;104.098358,30.621760;104.098314,30.621950;104.098324,30.621960;104.098317,30.621952;104.098267,30.621982;104.098147,30.622626;104.097900,30.622968;104.097968,30.622983;104.098013,30.623012;104.098041,30.623 [...]
-
-{ROAD_LINE: "104.102654,30.615620;104.102636,30.615625;104.102620,30.615617;104.102597,30.615611;104.102559,30.615597;104.102553,30.615497;104.102666,30.614760;104.101999,30.614666;104.100801,30.614596;104.099735,30.614510;104.099038,30.614749;104.098954,30.615486;104.098904,30.615741;104.098829,30.616586;104.098735,30.617590;104.098600,30.618799;104.098501,30.619951;104.098399,30.621009;104.098330,30.621643;104.098276,30.621835;104.098247,30.621888;104.098245,30.622111;104.098178,30.622 [...]
-
-{ROAD_LINE: "104.101133,30.616329;104.101169,30.616360;104.101131,30.616321;104.101112,30.616307;104.101133,30.616252;104.101107,30.616236;104.101101,30.616129;104.101164,30.616003;104.101183,30.615981;104.101108,30.616172;104.101115,30.616266;104.101195,30.616147;104.101258,30.616067;104.101249,30.616077;104.101301,30.616025;104.101199,30.616053;104.101079,30.616166;104.101205,30.616050;104.101246,30.616035;104.101204,30.616025;104.101144,30.616082;104.101293,30.616031;104.101193,30.616 [...]
-
-{ROAD_LINE: "104.102253,30.617152;104.101943,30.617768;104.101588,30.617854;104.100975,30.617896;104.100503,30.617941;104.099785,30.617816;104.099693,30.617798;104.099242,30.617777;104.098892,30.618021;104.098697,30.619139;104.098553,30.620231;104.098475,30.620771;104.098396,30.621417;104.098307,30.621963;104.098225,30.622588;104.097825,30.623095;104.097385,30.623546;104.096636,30.624247;104.095936,30.624817;104.095443,30.625028;104.095071,30.625211;104.094711,30.625357;104.094427,30.625 [...]
-
-{ROAD_LINE: "104.102001,30.616224;104.102149,30.616919;104.102144,30.617560;104.102070,30.618036;104.101956,30.618927;104.101870,30.619744;104.102312,30.620525;104.103182,30.621349;104.104111,30.622245;104.104750,30.623143;104.104024,30.623736;104.103207,30.624260;104.102869,30.624468;104.102465,30.624696;104.101743,30.625239;104.101234,30.625601;104.101021,30.625705;104.100971,30.625696;104.100516,30.625930;104.100077,30.626239;104.099790,30.626657;104.100268,30.627347;104.100691,30.628 [...]
-
-{ROAD_LINE: "104.101130,30.616276;104.100358,30.616183;104.099459,30.616094;104.099316,30.616064;104.099294,30.616052;104.099278,30.616046;104.099266,30.616032;104.099261,30.616022;104.099225,30.616019;104.098884,30.616183;104.098829,30.616898;104.098745,30.617318;104.098739,30.617305;104.098731,30.617346;104.098706,30.617586;104.098647,30.618237;104.098583,30.619206;104.098564,30.619332;104.098563,30.619334;104.098566,30.619338;104.098560,30.619403;104.098518,30.619853;104.098453,30.620 [...]
-
-{ROAD_LINE: "104.101201,30.616215;104.100731,30.616291;104.100627,30.616893;104.100548,30.617600;104.101069,30.617729;104.102141,30.617802;104.102247,30.618037;104.102197,30.618255;104.102130,30.618708;104.102117,30.619396;104.102075,30.619933;104.102543,30.620671;104.103447,30.621560;104.104314,30.622356;104.104681,30.622688;104.104680,30.622686;104.104681,30.622686;104.104682,30.622686;104.104682,30.622687;104.104679,30.622689;104.104735,30.622800;104.104470,30.623422;104.103397,30.624 [...]
-
-{ROAD_LINE: "104.101433,30.616244;104.101236,30.616225;104.100851,30.616143;104.100067,30.616115;104.099021,30.616055;104.098858,30.616735;104.098766,30.617542;104.098690,30.618247;104.098642,30.618912;104.098633,30.619092;104.098631,30.619091;104.098603,30.619305;104.098558,30.619851;104.098495,30.620601;104.098416,30.621402;104.098337,30.622161;104.098276,30.622514;104.098121,30.622774;104.097583,30.623247;104.097552,30.623296;104.097547,30.623304;104.097544,30.623304;104.097536,30.623 [...]
-
-{ROAD_LINE: "104.103113,30.616335;104.102582,30.616284;104.101700,30.616188;104.100782,30.616087;104.100069,30.616028;104.099219,30.615988;104.098938,30.616085;104.098849,30.616798;104.098796,30.617447;104.098793,30.617492;104.098792,30.617499;104.098790,30.617498;104.098787,30.617498;104.098745,30.617800;104.098639,30.618645;104.098542,30.619783;104.098423,30.620974;104.098305,30.622033;104.098078,30.622752;104.097595,30.623208;104.097049,30.623692;104.096602,30.624156;104.096315,30.624 [...]
-
-{ROAD_LINE: "104.102343,30.616251;104.102192,30.616232;104.100608,30.616148;104.099770,30.616158;104.098891,30.616307;104.098827,30.617200;104.098740,30.618035;104.098498,30.620291;104.098505,30.620656;104.098180,30.622691;104.097806,30.623026;104.096477,30.624165;104.095366,30.624996;104.094136,30.625848;104.094424,30.627884;104.094846,30.629283;104.094816,30.629238;104.094828,30.629229;104.094831,30.629249;104.094924,30.630147;104.093482,30.633923;104.093037,30.635671;104.092492,30.636 [...]
-
-{ROAD_LINE: "104.102502,30.616240;104.102498,30.616277;104.102206,30.617797;104.100662,30.617785;104.100232,30.617745;104.099328,30.617664;104.098788,30.617792;104.098638,30.618875;104.098638,30.619044;104.098599,30.619331;104.098503,30.620138;104.098399,30.621419;104.098397,30.621536;104.098345,30.622012;104.098241,30.622572;104.098101,30.622804;104.096575,30.624242;104.095747,30.624823;104.094142,30.625832;104.094378,30.627651;104.094708,30.628819;104.094781,30.629084;104.094864,30.629 [...]
-
-{ROAD_LINE: "104.103033,30.616381;104.103667,30.616396;104.104178,30.616816;104.104557,30.617313;104.104001,30.617706;104.103384,30.617863;104.102704,30.617864;104.102135,30.617829;104.101690,30.617785;104.101105,30.617703;104.100334,30.617627;104.099864,30.617587;104.099090,30.617722;104.098820,30.618641;104.098756,30.619265;104.098711,30.619361;104.098689,30.619370;104.098675,30.619376;104.098668,30.619380;104.098660,30.619383;104.098614,30.619721;104.098493,30.621217;104.098477,30.621 [...]
-
-{ROAD_LINE: "104.103294,30.616403;104.104522,30.617169;104.104630,30.617181;104.105050,30.616818;104.105281,30.616852;104.105598,30.617082;104.105878,30.617280;104.106088,30.617577;104.106445,30.617991;104.106817,30.618368;104.106928,30.618620;104.107075,30.619032;104.106927,30.619408;104.106730,30.619604;104.106458,30.619902;104.106085,30.620196;104.105529,30.620685;104.105240,30.620916;104.104781,30.621274;104.104219,30.621872;104.104513,30.622393;104.104762,30.622686;104.104755,30.622 [...]
-
-{ROAD_LINE: "104.103475,30.616317;104.099548,30.615978;104.098569,30.619158;104.098548,30.619219;104.098105,30.622738;104.097775,30.623170;104.097786,30.623176;104.094407,30.625466;104.094437,30.627874;104.094840,30.630663;104.093906,30.632647;104.092967,30.635656;104.092335,30.637032;104.089574,30.640522;104.085028,30.642756;104.080787,30.644583;104.076331,30.646238;104.072191,30.646710;104.069814,30.648592;104.068635,30.651960;104.068841,30.652570;104.068841,30.652570"},
-
-{ROAD_LINE: "104.103214,30.616311;104.104539,30.617192;104.104974,30.617006;104.105622,30.617122;104.106268,30.617770;104.106898,30.618384;104.107287,30.619104;104.106709,30.619751;104.106539,30.620200;104.107323,30.620846;104.107708,30.621163;104.107693,30.621183;104.107689,30.621184;104.106576,30.622097;104.105355,30.622902;104.105353,30.622909;104.105327,30.622931;104.104695,30.623342;104.103623,30.624038;104.102904,30.624505;104.102407,30.624836;104.101611,30.625396;104.101088,30.625 [...]
-
-{ROAD_LINE: "104.102356,30.616754;104.102360,30.617277;104.102199,30.617821;104.102198,30.618169;104.102145,30.618966;104.102058,30.619727;104.102537,30.620580;104.103468,30.621566;104.104120,30.622181;104.104581,30.622721;104.104589,30.622750;104.104588,30.622757;104.104695,30.623101;104.104228,30.623582;104.103484,30.624072;104.103359,30.624154;104.103363,30.624149;104.103350,30.624152;104.103364,30.624134;104.103081,30.624313;104.102451,30.624721;104.102129,30.624967;104.101892,30.625 [...]
-
-{ROAD_LINE: "104.102522,30.616247;104.102504,30.616279;104.102478,30.616340;104.102361,30.616654;104.102374,30.616712;104.102243,30.616980;104.102236,30.617524;104.102104,30.617809;104.101799,30.617856;104.101327,30.617837;104.101047,30.617839;104.100800,30.617789;104.100301,30.617748;104.099925,30.617756;104.099635,30.617723;104.099510,30.617694;104.099440,30.617673;104.099378,30.617663;104.099173,30.617691;104.098942,30.617714;104.098779,30.618320;104.098696,30.619008;104.098678,30.619 [...]
-
-{ROAD_LINE: "104.102393,30.616234;104.102423,30.616290;104.102416,30.616722;104.102380,30.617083;104.102375,30.617346;104.102276,30.617873;104.102241,30.618127;104.102179,30.618782;104.102109,30.619408;104.102100,30.620023;104.102639,30.620728;104.103551,30.621679;104.104468,30.622592;104.104621,30.622766;104.104609,30.622769;104.104605,30.622770;104.104606,30.622773;104.104606,30.622779;104.104601,30.622783;104.104601,30.622786;104.104602,30.622787;104.104670,30.623275;104.103633,30.623 [...]
-
-{ROAD_LINE: "104.102468,30.616468;104.102206,30.617752;104.101720,30.617813;104.101171,30.617762;104.099930,30.617669;104.099469,30.617671;104.099188,30.617674;104.098810,30.618342;104.098683,30.619073;104.098600,30.619803;104.098498,30.620499;104.098396,30.621204;104.098308,30.621724;104.098222,30.621949;104.098200,30.622310;104.098113,30.622702;104.097638,30.623189;104.097421,30.623631;104.097767,30.624292;104.098578,30.625453;104.098975,30.626077;104.099039,30.626175;104.099120,30.626 [...]
-
-{ROAD_LINE: "104.102374,30.617176;104.102296,30.617538;104.102209,30.618014;104.102142,30.618359;104.102103,30.618768;104.102029,30.619282;104.104673,30.622843;104.104714,30.623182;104.104117,30.623707;104.103421,30.624326;104.103834,30.625337;104.104128,30.626291;104.103294,30.626797;104.102434,30.627314;104.101846,30.627635;104.101266,30.628026;104.100986,30.628313;104.101411,30.629049;104.101953,30.630063;104.102626,30.631149;104.102967,30.631735;104.102977,30.631786;104.102960,30.631 [...]
-
-{ROAD_LINE: "104.101460,30.617917;104.099648,30.617667;104.099167,30.617625;104.098743,30.617792;104.098449,30.620726;104.098277,30.621733;104.098224,30.621829;104.098222,30.621868;104.098183,30.622554;104.098043,30.622880;104.097222,30.623564;104.095434,30.624895;104.094122,30.625775;104.094131,30.626088;104.094146,30.626372;104.094311,30.627651;104.094774,30.629201;104.094773,30.629203;104.094776,30.629204;104.094881,30.630206;104.093635,30.633300;104.093009,30.635660;104.091801,30.638 [...]
-
-{ROAD_LINE: "104.102133,30.617865;104.099467,30.617605;104.098705,30.618115;104.098484,30.620071;104.098247,30.621883;104.097976,30.622812;104.097690,30.623157;104.096892,30.623532;104.096471,30.623195;104.094066,30.621034;104.094047,30.620888;104.091909,30.620975;104.088564,30.620892;104.084757,30.620695;104.080803,30.620540;104.076376,30.620414;104.070749,30.620309;104.069210,30.620533;104.067515,30.620675;104.067500,30.620666;104.067156,30.621041;104.067145,30.621608;104.067147,30.621 [...]
-
-{ROAD_LINE: "104.102183,30.618649;104.102180,30.618730;104.102145,30.619124;104.102148,30.619189;104.102087,30.619721;104.102085,30.619784;104.102084,30.620079;104.104508,30.622571;104.104790,30.623060;104.104585,30.623366;104.102508,30.624726;104.100480,30.626107;104.100440,30.626142;104.098422,30.627362;104.096854,30.628369;104.096353,30.628721;104.094978,30.629871;104.093877,30.632636;104.093146,30.635220;104.092870,30.635876;104.091166,30.638814;104.088651,30.641432;104.085475,30.642 [...]
-
-{ROAD_LINE: "104.101021,30.617897;104.100518,30.617850;104.100079,30.617825;104.099664,30.617780;104.099629,30.617765;104.099610,30.617745;104.099602,30.617730;104.099519,30.617737;104.099199,30.617711;104.098870,30.617776;104.098698,30.618722;104.098493,30.620235;104.098400,30.621580;104.098372,30.622152;104.098406,30.622304;104.098484,30.622378;104.098362,30.622519;104.098204,30.622690;104.098010,30.622913;104.097819,30.623062;104.097797,30.623032;104.097787,30.623022;104.097743,30.623 [...]
-
-{ROAD_LINE: "104.102150,30.617991;104.100728,30.617724;104.100027,30.617549;104.099207,30.617698;104.098874,30.618463;104.098670,30.619658;104.098503,30.620985;104.098379,30.621665;104.098361,30.621713;104.098322,30.622235;104.098159,30.622741;104.097920,30.622957;104.097894,30.622998;104.097874,30.623019;104.097700,30.623150;104.097222,30.623574;104.096637,30.624184;104.096407,30.624394;104.096208,30.624544;104.095884,30.624739;104.095578,30.624881;104.095044,30.625131;104.094233,30.625 [...]
-
-{ROAD_LINE: "104.100966,30.617908;104.100404,30.617827;104.099676,30.617737;104.099183,30.617754;104.098949,30.618314;104.098767,30.619289;104.098573,30.620369;104.098506,30.621190;104.098491,30.621307;104.098456,30.621420;104.098423,30.621494;104.098396,30.621613;104.098348,30.621768;104.098272,30.621787;104.098167,30.621775;104.098131,30.621772;104.098104,30.621770;104.098070,30.621800;104.098158,30.622141;104.098224,30.622338;104.098264,30.622457;104.098278,30.622479;104.098288,30.622 [...]
-
-{ROAD_LINE: "104.101388,30.617850;104.100157,30.617820;104.098773,30.617732;104.098439,30.620074;104.098272,30.621598;104.098215,30.622742;104.097194,30.623631;104.096527,30.624219;104.096157,30.624607;104.094126,30.625682;104.094087,30.626007;104.094362,30.627994;104.094688,30.629104;104.094846,30.630089;104.093829,30.632796;104.093827,30.632845;104.093009,30.635563;104.092851,30.635981;104.092854,30.635981;104.092339,30.637139;104.090254,30.639831;104.088704,30.641445;104.086367,30.642 [...]
-
-{ROAD_LINE: "104.101218,30.617817;104.099460,30.617609;104.098937,30.617664;104.098823,30.617794;104.098439,30.620313;104.098359,30.621041;104.098322,30.621354;104.098315,30.622049;104.098390,30.622287;104.098281,30.622501;104.098276,30.622507;104.098013,30.622799;104.098013,30.622812;104.097960,30.622976;104.097894,30.623049;104.096419,30.624401;104.094861,30.625083;104.094060,30.625658;104.094096,30.625817;104.094090,30.625972;104.094124,30.626152;104.094137,30.626208;104.094159,30.626 [...]
-
-{ROAD_LINE: "104.101358,30.617727;104.100877,30.617624;104.100147,30.617567;104.099190,30.617617;104.098846,30.618154;104.098715,30.618857;104.098651,30.619091;104.098557,30.619603;104.098487,30.620276;104.098385,30.621000;104.098297,30.621776;104.098124,30.622641;104.097605,30.623269;104.096953,30.623872;104.096335,30.624479;104.096119,30.624632;104.095706,30.624873;104.095011,30.625270;104.094366,30.625612;104.094229,30.626101;104.094210,30.626658;104.094297,30.627361;104.094443,30.627 [...]
-
-{ROAD_LINE: "104.102136,30.618009;104.101059,30.617847;104.100499,30.617840;104.099802,30.617755;104.099337,30.617705;104.098938,30.617801;104.098724,30.618568;104.098659,30.619210;104.098633,30.619371;104.098562,30.619663;104.098452,30.620449;104.098346,30.621384;104.098317,30.622042;104.098047,30.622784;104.097735,30.623141;104.097659,30.623181;104.097594,30.623199;104.097638,30.623243;104.097649,30.623270;104.097646,30.623299;104.097692,30.623309;104.097702,30.623314;104.097696,30.623 [...]
-
-{ROAD_LINE: "104.102292,30.618081;104.102231,30.618321;104.102185,30.618561;104.102175,30.618899;104.102189,30.619321;104.102500,30.620162;104.103378,30.621288;104.104306,30.622307;104.104643,30.622676;104.104657,30.622715;104.104661,30.622727;104.104655,30.622735;104.104637,30.622743;104.104618,30.622750;104.104774,30.622983;104.104306,30.623570;104.103523,30.624071;104.103254,30.624244;104.103253,30.624243;104.103251,30.624242;104.103123,30.624325;104.102623,30.624651;104.102130,30.624 [...]
-
-{ROAD_LINE: "104.101281,30.617789;104.100838,30.617735;104.100303,30.617706;104.099989,30.617654;104.099496,30.617629;104.099306,30.617618;104.099220,30.617605;104.099185,30.617595;104.099022,30.617592;104.098780,30.617557;104.098719,30.616940;104.098720,30.616253;104.098486,30.615949;104.098000,30.615875;104.097140,30.615578;104.096150,30.615138;104.095424,30.614829;104.094996,30.614638;104.094924,30.614613;104.094331,30.614331;104.093722,30.614145;104.093372,30.614438;104.092942,30.615 [...]
-
-{ROAD_LINE: "104.102200,30.617947;104.101644,30.617871;104.101353,30.617809;104.100991,30.617724;104.100758,30.617704;104.100359,30.617682;104.099827,30.617640;104.099555,30.617608;104.099478,30.617609;104.099427,30.617616;104.099409,30.617623;104.099407,30.617626;104.099390,30.617622;104.099251,30.617612;104.098845,30.617719;104.098673,30.618439;104.098536,30.619638;104.098479,30.620548;104.098443,30.620844;104.098426,30.621068;104.098404,30.621250;104.098386,30.621462;104.098385,30.621 [...]
-
-{ROAD_LINE: "104.102290,30.618735;104.102258,30.619241;104.102400,30.620030;104.103020,30.620801;104.103724,30.621584;104.104295,30.622187;104.104856,30.622796;104.104638,30.623288;104.103879,30.623809;104.103144,30.624307;104.102630,30.624646;104.101910,30.625138;104.100969,30.625779;104.100220,30.626278;104.100129,30.626317;104.100118,30.626313;104.100137,30.626329;104.100148,30.626341;104.100149,30.626341;104.100144,30.626335;104.100142,30.626332;104.100143,30.626334;104.100022,30.626 [...]
-
-{ROAD_LINE: "104.101691,30.617870;104.101109,30.617850;104.100291,30.617805;104.099563,30.617797;104.099063,30.617909;104.098804,30.618769;104.098659,30.619966;104.098497,30.621179;104.098371,30.622288;104.097899,30.623005;104.097690,30.623172;104.097678,30.623173;104.097655,30.623176;104.096871,30.623867;104.096469,30.624304;104.095886,30.624735;104.094882,30.625205;104.094305,30.625475;104.094124,30.625801;104.094252,30.626631;104.094383,30.627643;104.094690,30.628638;104.094743,30.628 [...]
-
-{ROAD_LINE: "104.102135,30.618528;104.102141,30.618073;104.101709,30.617886;104.101119,30.617714;104.100776,30.617661;104.100186,30.617592;104.099606,30.617550;104.099042,30.617713;104.098837,30.618622;104.098569,30.619881;104.098406,30.621264;104.098254,30.622465;104.097618,30.623278;104.097556,30.623324;104.097561,30.623319;104.097562,30.623321;104.097558,30.623320;104.097553,30.623318;104.097548,30.623315;104.097551,30.623318;104.097553,30.623325;104.097553,30.623332;104.097556,30.623 [...]
-
-{ROAD_LINE: "104.101675,30.617844;104.100821,30.617778;104.100421,30.617791;104.099878,30.617773;104.099314,30.617778;104.099057,30.618184;104.098854,30.619229;104.098607,30.620308;104.098396,30.621185;104.098264,30.621946;104.098116,30.622534;104.098086,30.622562;104.098108,30.622590;104.098106,30.622615;104.097917,30.622843;104.097628,30.623215;104.096959,30.623843;104.096597,30.624142;104.096500,30.624170;104.096299,30.624391;104.096047,30.624613;104.095551,30.624888;104.094901,30.625 [...]
-
-{ROAD_LINE: "104.101912,30.617898;104.101451,30.617837;104.101219,30.617807;104.100837,30.617798;104.100153,30.617757;104.099281,30.617817;104.099051,30.618460;104.098909,30.619124;104.098840,30.619114;104.098801,30.619160;104.098705,30.619665;104.098633,30.620395;104.098554,30.621134;104.098495,30.621535;104.098431,30.621991;104.098361,30.622463;104.098325,30.622542;104.098316,30.622554;104.098311,30.622554;104.098290,30.622543;104.098232,30.622602;104.098188,30.622651;104.098164,30.622 [...]
-
-{ROAD_LINE: "104.102187,30.618783;104.102035,30.619347;104.102020,30.619665;104.102272,30.620311;104.103329,30.621421;104.104052,30.622128;104.104408,30.622474;104.104414,30.622489;104.104545,30.622624;104.104738,30.623040;104.104623,30.623280;104.103872,30.623793;104.103364,30.624274;104.103824,30.625358;104.104120,30.626330;104.103391,30.626781;104.102921,30.627044;104.102535,30.627325;104.101957,30.627645;104.101293,30.628112;104.101106,30.628483;104.101640,30.629503;104.102443,30.630 [...]
-
-{ROAD_LINE: "104.102303,30.617970;104.102300,30.618052;104.102298,30.618109;104.102295,30.618174;104.102268,30.618525;104.102262,30.618662;104.102170,30.619573;104.102167,30.619879;104.102164,30.619979;104.104628,30.622723;104.104639,30.622748;104.104733,30.623058;104.104433,30.623433;104.101944,30.625098;104.098612,30.627220;104.096653,30.628499;104.096056,30.628896;104.094959,30.630078;104.093387,30.634351;104.092890,30.635899;104.092027,30.637579;104.088989,30.641097;104.088609,30.641 [...]
-
-{ROAD_LINE: "104.103277,30.618001;104.102477,30.618012;104.102085,30.617989;104.101760,30.617976;104.101353,30.618031;104.100640,30.617992;104.099965,30.617964;104.099216,30.617822;104.098872,30.618181;104.098706,30.619275;104.098551,30.620073;104.098430,30.620762;104.098349,30.621286;104.098344,30.621465;104.098297,30.621664;104.098243,30.622108;104.098149,30.622590;104.097861,30.622876;104.097886,30.622937;104.097791,30.623110;104.097622,30.623273;104.097042,30.623810;104.096407,30.624 [...]
-
-{ROAD_LINE: "104.103417,30.617986;104.103070,30.617885;104.102693,30.617914;104.102556,30.617871;104.102466,30.617903;104.102392,30.617920;104.102318,30.617905;104.102063,30.617846;104.101754,30.617791;104.101309,30.617742;104.100706,30.617639;104.100080,30.617532;104.099371,30.617692;104.099062,30.618156;104.098865,30.618771;104.098730,30.619441;104.098631,30.620135;104.098533,30.620851;104.098422,30.621511;104.098332,30.622082;104.098154,30.622698;104.097667,30.623158;104.096883,30.623 [...]
-
-{ROAD_LINE: "104.103586,30.617910;104.101557,30.617992;104.101328,30.617913;104.098813,30.617650;104.098691,30.617722;104.098560,30.618194;104.098150,30.622397;104.096612,30.624101;104.096147,30.624630;104.095931,30.624797;104.093904,30.625820;104.094022,30.626780;104.094418,30.627859;104.094529,30.628331;104.094694,30.628858;104.094699,30.628868;104.094808,30.629039;104.094786,30.629141;104.094782,30.629181;104.094919,30.629821;104.093509,30.633670;104.092548,30.636666;104.091181,30.638 [...]
-
-{ROAD_LINE: "104.102362,30.618215;104.101955,30.619873;104.101980,30.620371;104.104443,30.622546;104.104616,30.622703;104.104616,30.622701;104.104759,30.622981;104.104770,30.623098;104.104516,30.623400;104.103086,30.624342;104.101777,30.625263;104.100245,30.626315;104.100245,30.626318;104.100245,30.626320;104.100247,30.626323;104.100114,30.626406;104.097939,30.627708;104.097028,30.628289;104.097021,30.628288;104.095919,30.629027;104.094714,30.631136;104.093416,30.634155;104.092382,30.636 [...]
-
-{ROAD_LINE: "104.102356,30.617853;104.099801,30.617792;104.099141,30.617740;104.098790,30.617804;104.098468,30.619759;104.098465,30.619834;104.098178,30.622196;104.098178,30.622227;104.098183,30.622257;104.098105,30.622786;104.097835,30.623046;104.097397,30.623387;104.097352,30.623422;104.095969,30.624699;104.094107,30.625978;104.094632,30.628669;104.094708,30.628961;104.094878,30.629533;104.094901,30.629811;104.094899,30.629898;104.094896,30.629986;104.094898,30.630079;104.094898,30.630 [...]
-
-{ROAD_LINE: "104.103043,30.617879;104.103904,30.617714;104.104292,30.617503;104.104734,30.617184;104.105119,30.616947;104.105448,30.616906;104.105739,30.617175;104.106057,30.617460;104.106324,30.617704;104.106782,30.618203;104.107089,30.618659;104.107327,30.619254;104.106838,30.619695;104.106470,30.620045;104.106727,30.620349;104.107035,30.620629;104.107421,30.620931;104.107537,30.621267;104.107044,30.621809;104.107038,30.621808;104.106978,30.621865;104.106346,30.622259;104.105614,30.622 [...]
-
-{ROAD_LINE: "104.103575,30.617995;104.102358,30.617882;104.102195,30.618015;104.102238,30.618330;104.102268,30.618504;104.102257,30.618557;104.102190,30.619017;104.102202,30.619087;104.102202,30.619618;104.102290,30.619908;104.102288,30.619983;104.104416,30.622551;104.104540,30.622656;104.104496,30.622690;104.104648,30.623011;104.104676,30.623118;104.104408,30.623469;104.102350,30.624790;104.100670,30.625862;104.100660,30.625877;104.098503,30.627268;104.097026,30.628244;104.096587,30.628 [...]
-
-{ROAD_LINE: "104.103626,30.617936;104.102706,30.617940;104.102408,30.618006;104.102260,30.618267;104.102035,30.618925;104.101999,30.619356;104.102017,30.619583;104.102299,30.620268;104.103386,30.621384;104.104336,30.622288;104.104758,30.622719;104.104738,30.623260;104.103909,30.623804;104.103094,30.624459;104.102649,30.624720;104.102225,30.625006;104.101774,30.625317;104.101406,30.625588;104.101070,30.625799;104.100866,30.625845;104.100593,30.626007;104.100367,30.626154;104.100298,30.626 [...]
-
-{ROAD_LINE: "104.102350,30.618214;104.102204,30.618490;104.102046,30.619225;104.102291,30.620393;104.103264,30.621385;104.104246,30.622249;104.104670,30.622681;104.104667,30.622709;104.104665,30.622721;104.104673,30.622718;104.104662,30.622730;104.104646,30.622751;104.104644,30.622761;104.104666,30.622744;104.104789,30.622879;104.104447,30.623463;104.103512,30.624083;104.103153,30.624305;104.102670,30.624596;104.102336,30.624837;104.102176,30.624971;104.102056,30.625045;104.101971,30.625 [...]
-
-{ROAD_LINE: "104.103607,30.617960;104.102997,30.617948;104.102523,30.617941;104.102316,30.618002;104.102209,30.618367;104.102124,30.618879;104.102093,30.619360;104.102153,30.620026;104.102972,30.620949;104.103910,30.621967;104.104524,30.622592;104.104564,30.622660;104.104569,30.622671;104.104572,30.622688;104.104817,30.622979;104.104726,30.623271;104.103980,30.623752;104.103176,30.624274;104.103074,30.624331;104.102917,30.624432;104.102465,30.624738;104.102107,30.625098;104.101632,30.625 [...]
-
-{ROAD_LINE: "104.103528,30.617945;104.103363,30.617943;104.102266,30.617965;104.102260,30.617988;104.102247,30.618040;104.102233,30.618165;104.102228,30.618219;104.102172,30.618615;104.102172,30.618672;104.102157,30.618797;104.102150,30.618840;104.102070,30.619153;104.102078,30.619219;104.102064,30.619444;104.102064,30.619579;104.102015,30.619839;104.102002,30.619939;104.101995,30.620034;104.104321,30.622415;104.104795,30.623085;104.104623,30.623335;104.101460,30.625415;104.100370,30.626 [...]
-
-{ROAD_LINE: "104.102594,30.618031;104.102430,30.618420;104.102282,30.618836;104.102231,30.619797;104.102662,30.620537;104.103607,30.621573;104.104435,30.622437;104.104683,30.622703;104.104674,30.622717;104.104673,30.622724;104.104675,30.622732;104.104675,30.622741;104.104673,30.622741;104.104670,30.622742;104.104670,30.622741;104.104700,30.622773;104.104637,30.623304;104.099907,30.626299;104.099584,30.626586;104.098530,30.627251;104.096654,30.628466;104.096635,30.628504;104.096650,30.628 [...]
-
-{ROAD_LINE: "104.103384,30.617937;104.102745,30.617945;104.102472,30.617942;104.102400,30.617990;104.102349,30.618327;104.102242,30.618658;104.102118,30.619335;104.102298,30.620267;104.103147,30.621209;104.104065,30.622161;104.104673,30.622709;104.104821,30.623027;104.104060,30.623766;104.102913,30.624498;104.102621,30.624691;104.102606,30.624717;104.102148,30.625021;104.101349,30.625561;104.100950,30.625831;104.100839,30.625894;104.100418,30.626127;104.099804,30.626475;104.098769,30.627 [...]
-
-{ROAD_LINE: "104.102450,30.617910;104.102222,30.618258;104.102192,30.618327;104.102188,30.618659;104.102185,30.618739;104.102190,30.618775;104.102074,30.619383;104.104025,30.622154;104.104641,30.622713;104.104669,30.622728;104.104721,30.622795;104.104798,30.622981;104.104796,30.623048;104.104546,30.623378;104.103730,30.623916;104.102815,30.624516;104.102616,30.624642;104.102540,30.624699;104.102465,30.624736;104.102352,30.624800;104.101912,30.625132;104.100944,30.625782;104.100880,30.625 [...]
-
-{ROAD_LINE: "104.104513,30.617363;104.104518,30.617385;104.104398,30.617462;104.102677,30.617919;104.101558,30.617879;104.099855,30.617607;104.098852,30.617604;104.098539,30.620013;104.098443,30.621109;104.098364,30.621699;104.098344,30.621859;104.098370,30.622132;104.098360,30.622182;104.098346,30.622301;104.098345,30.622342;104.098166,30.622726;104.098081,30.622852;104.097922,30.622719;104.097487,30.623122;104.097304,30.623329;104.095436,30.625007;104.094187,30.625808;104.094336,30.627 [...]
-
-{ROAD_LINE: "104.104311,30.617496;104.104036,30.617663;104.103729,30.617769;104.103142,30.617864;104.102629,30.617985;104.102468,30.617995;104.102314,30.617996;104.102290,30.618100;104.102270,30.618130;104.102225,30.618175;104.102202,30.618281;104.102133,30.618454;104.102140,30.618704;104.102197,30.618918;104.102116,30.619401;104.102129,30.619918;104.102683,30.620593;104.103288,30.621326;104.103932,30.622024;104.104263,30.622373;104.104564,30.622689;104.104583,30.622749;104.104811,30.623 [...]
-
-{ROAD_LINE: "104.104447,30.617273;104.104213,30.617490;104.103689,30.617719;104.103175,30.617724;104.102690,30.617880;104.102292,30.617809;104.101666,30.617657;104.101213,30.617650;104.100968,30.617634;104.100819,30.617666;104.100725,30.617690;104.100677,30.617645;104.100618,30.617622;104.100334,30.617620;104.099982,30.617515;104.099634,30.617506;104.099430,30.617586;104.099021,30.617832;104.098765,30.618670;104.098603,30.619764;104.098454,30.621007;104.098327,30.621833;104.098309,30.621 [...]
-
-{ROAD_LINE: "104.104570,30.617366;104.104353,30.617468;104.104319,30.617456;104.104262,30.617439;104.104255,30.617437;104.104034,30.617645;104.103677,30.617882;104.103171,30.617991;104.102717,30.618044;104.102433,30.618052;104.101773,30.618128;104.101029,30.618117;104.100736,30.618009;104.100513,30.618007;104.100027,30.617928;104.099533,30.617871;104.099074,30.617828;104.098944,30.617890;104.098759,30.618611;104.098582,30.619669;104.098501,30.620549;104.098395,30.620775;104.098387,30.620 [...]
-
-{ROAD_LINE: "104.104206,30.616803;104.102956,30.617934;104.102388,30.617906;104.101978,30.617881;104.101554,30.617836;104.100972,30.617750;104.099966,30.617693;104.099340,30.617692;104.098943,30.617708;104.098797,30.618350;104.098685,30.618850;104.098655,30.618863;104.098648,30.618867;104.098645,30.618868;104.098624,30.618872;104.098614,30.618869;104.098585,30.619126;104.098518,30.619730;104.098467,30.620285;104.098409,30.620892;104.098393,30.621183;104.098440,30.621206;104.098479,30.621 [...]
-
-{ROAD_LINE: "104.103999,30.616523;104.104245,30.616814;104.104490,30.617101;104.104323,30.617438;104.103928,30.617701;104.103351,30.617920;104.102549,30.617953;104.102335,30.618095;104.102284,30.618421;104.102257,30.618477;104.102227,30.618643;104.102162,30.619218;104.102141,30.619771;104.102555,30.620507;104.103430,30.621502;104.104126,30.622221;104.104662,30.622759;104.104664,30.622765;104.104662,30.622768;104.104649,30.622772;104.104651,30.622773;104.104655,30.622785;104.104652,30.622 [...]
-
-{ROAD_LINE: "104.105405,30.616825;104.104796,30.617120;104.103739,30.617859;104.102953,30.617912;104.102033,30.617907;104.100140,30.617763;104.098690,30.617939;104.098337,30.621363;104.098342,30.621914;104.098298,30.622289;104.097774,30.623171;104.097369,30.623512;104.095902,30.624763;104.095399,30.624992;104.094292,30.625380;104.094082,30.625718;104.094106,30.626013;104.094112,30.626067;104.094481,30.628081;104.094861,30.629489;104.094899,30.630049;104.094896,30.630126;104.094129,30.632 [...]
-
-{ROAD_LINE: "104.105433,30.616817;104.105328,30.616845;104.104069,30.617678;104.103337,30.617970;104.102282,30.617990;104.102317,30.618322;104.102257,30.618755;104.102255,30.618819;104.102173,30.619110;104.102153,30.619219;104.102055,30.619968;104.104655,30.622816;104.104718,30.623131;104.104600,30.623336;104.102738,30.624547;104.101464,30.625415;104.100455,30.626032;104.100050,30.626337;104.099860,30.626547;104.099867,30.626607;104.100438,30.627537;104.100693,30.627720;104.101753,30.629 [...]
-
-{ROAD_LINE: "104.105989,30.617285;104.105420,30.616810;104.105225,30.616904;104.105091,30.617010;104.103841,30.617842;104.103293,30.617958;104.102253,30.617943;104.102236,30.618040;104.102250,30.618112;104.102203,30.618672;104.102198,30.618710;104.102198,30.618752;104.102193,30.618797;104.102158,30.619095;104.102133,30.619388;104.102119,30.619538;104.102117,30.619581;104.102078,30.619719;104.102070,30.619834;104.102065,30.619991;104.104536,30.622595;104.104833,30.623069;104.104678,30.623 [...]
-
-{ROAD_LINE: "104.106015,30.617514;104.105658,30.617052;104.105513,30.617022;104.105074,30.617170;104.104753,30.617128;104.104266,30.616588;104.103833,30.616421;104.102845,30.616264;104.102578,30.616260;104.101769,30.616122;104.101243,30.616142;104.100564,30.616077;104.099640,30.616004;104.099020,30.616038;104.098920,30.617011;104.098879,30.617225;104.098857,30.617242;104.098846,30.617457;104.098766,30.618266;104.098646,30.619583;104.098529,30.620842;104.098409,30.622008;104.098177,30.622 [...]
-
-{ROAD_LINE: "104.104380,30.617535;104.103578,30.617735;104.102880,30.617689;104.102662,30.617744;104.102598,30.617878;104.102580,30.618191;104.102493,30.618519;104.102364,30.618994;104.102327,30.619504;104.102756,30.620566;104.103455,30.621340;104.104089,30.622094;104.104690,30.622687;104.104676,30.622716;104.104665,30.622739;104.104655,30.622758;104.104650,30.622778;104.104642,30.622791;104.104633,30.622810;104.104628,30.622820;104.104625,30.622820;104.104620,30.622817;104.104618,30.622 [...]
-
-{ROAD_LINE: "104.104147,30.617671;104.103468,30.617981;104.102566,30.617906;104.101813,30.617916;104.100959,30.617869;104.099607,30.617674;104.099263,30.617680;104.098943,30.618092;104.098829,30.618747;104.098773,30.619051;104.098730,30.619070;104.098682,30.619090;104.098677,30.619094;104.098687,30.619092;104.098695,30.619090;104.098647,30.619293;104.098565,30.619941;104.098521,30.620557;104.098441,30.621236;104.098350,30.621721;104.098288,30.622398;104.097979,30.622933;104.097524,30.623 [...]
-}
-
-
-var taxiRoutes = [];
-var data = szRoad.data;
-var hStep = 300 / (data.length - 1);
-
-var i = 0;
-for (var x in data) {
- // i++;
- // if(i<5000)
- // continue;
- var line = data[x];
- // if(busLines.length>500)
- // break;
- var pointString = line.ROAD_LINE;
- var pointArr = pointString.split(';');
- var lnglats = [];
- for (var j in pointArr) {
- lnglats.push(pointArr[j].split(','))
- }
- taxiRoutes.push({
- coords: lnglats,
- lineStyle: {
- // color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * x))
- }
- })
-}
-
-option = {
- mapbox: {
- center: [104.091, 30.639],
- zoom: 13,
- // pitch: 50,
- // bearing: -10,
- altitudeScale: 2,
- style: 'mapbox://styles/mapbox/dark-v9',
- postEffect: {
- enable: true,
- FXAA: {
- enable: true
- }
- },
- light: {
- main: {
- intensity: 1,
- shadow: true,
- shadowQuality: 'high'
- },
- ambient: {
- intensity: 0.
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
- exposure: 1,
- diffuseIntensity: 0.5,
- specularIntensity: 2
- }
- }
- },
- series: [{
- type: 'lines3D',
-
- coordinateSystem: 'mapbox',
-
- effect: {
- show: true,
- constantSpeed: 5,
- trailWidth: 2,
- trailLength: 0.4,
- trailOpacity: 1,
- spotIntensity: 10
- },
-
- blendMode: 'lighter',
-
- polyline: true,
-
- lineStyle: {
- width: 0.1,
- color: 'rgb(200, 40, 0)',
- opacity: 0.
- },
-
- data: {
- count: function () {
- return taxiRoutes.length;
- },
- getItem: function (idx) {
- return taxiRoutes[idx]
- }
- }
- }]
-}
\ No newline at end of file
diff --git a/public/data-gl/lines3d-taxi-routes-of-cape-town.js b/public/data-gl/lines3d-taxi-routes-of-cape-town.js
deleted file mode 100644
index 794d059..0000000
--- a/public/data-gl/lines3d-taxi-routes-of-cape-town.js
+++ /dev/null
@@ -1,169 +0,0 @@
-/*
-title: Taxi routes of Cape Town
-category: lines3D
-titleCN: Taxi routes of Cape Town
-*/
-
-mapboxgl.accessToken = mapboxglToken;
-
-var ENCODE_SCALE = 1e6;
-function decodeLine(line) {
-
- var result = [];
- var prevX = line[0];
- var prevY = line[1];
-
- for (var i = 0; i < line[2].length; i += 2) {
- var x = line[2].charCodeAt(i) - 64;
- var y = line[2].charCodeAt(i + 1) - 64;
- // ZigZag decoding
- x = (x >> 1) ^ (-(x & 1));
- y = (y >> 1) ^ (-(y & 1));
- // Delta deocding
- x += prevX;
- y += prevY;
-
- prevX = x;
- prevY = y;
- // Dequantize
- result.push([x / ENCODE_SCALE, y / ENCODE_SCALE, 10]);
- }
-
- return result;
-}
-
-var geoJSON = {
- features: []
-};
-var regions = [];
-var readShp = new Promise(function (resolve, reject) {
- shapefile.open(ROOT_PATH + '/asset/get/s/data-1498751177695-rkzAeiGEb.shp', ROOT_PATH + '/asset/get/s/data-1498751184605-rJYAxjMVW.dbf')
- .then(source => source.read()
- .then(function append(result) {
- if (result.done) {
- resolve();
- return;
- }
- var feature = result.value;
- feature.properties.name = geoJSON.features.length + '';
- regions.push({
- name: geoJSON.features.length + '',
- value: 1,
- height: feature.properties.SHAPE_leng * 10000
- })
- geoJSON.features.push(feature);
- return source.read().then(append);
- })
- );
-});
-
-myChart.showLoading();
-
-Promise.all([$.getJSON(ROOT_PATH + '/asset/get/s/data-1498751206824-HkkgZsfEW.json'), readShp])
- .then(function ([data, lastFeature]) {
-
- var lines = data.map(function (track) {
- return {
- coords: decodeLine(track)
- };
- });
-
- myChart.hideLoading();
-
- echarts.registerMap('buildings', geoJSON);
-
- myChart.setOption({
- mapbox: {
- center: [18.424552361777955, -33.92188144682616],
- zoom: 14,
- pitch: 50,
- bearing: -10,
- altitudeScale: 2,
- style: 'mapbox://styles/mapbox/dark-v9',
- postEffect: {
- enable: true,
- screenSpaceAmbientOcclusion: {
- enable: true,
- intensity: 1.2,
- radius: 6,
- quality: 'high'
- },
- screenSpaceReflection: {
- enable: true
- }
- },
- light: {
- main: {
- intensity: 1,
- shadow: true,
- shadowQuality: 'high'
- },
- ambient: {
- intensity: 0.
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
- exposure: 1,
- diffuseIntensity: 0.5,
- specularIntensity: 2
- }
- }
- },
- series: [{
- type: 'lines3D',
-
- coordinateSystem: 'mapbox',
-
- effect: {
- show: true,
- constantSpeed: 5,
- trailWidth: 2,
- trailLength: 0.8,
- trailOpacity: 1,
- spotIntensity: 10
- },
-
- blendMode: 'lighter',
-
- polyline: true,
-
- lineStyle: {
- width: 0.1,
- color: 'rgb(200, 40, 0)',
- opacity: 0.
- },
-
- data: {
- count: function () {
- return lines.length;
- },
- getItem: function (idx) {
- return lines[idx]
- }
- }
- }, {
- type: 'map3D',
- map: 'buildings',
-
- coordinateSystem: 'mapbox',
- shading: 'realistic',
- silent: true,
-
- instancing: true,
-
- data: regions,
-
- realisticMaterial: {
- metalness: 1,
- roughness: 0.2,
- }
- }]
- });
- });
-
-window.addEventListener('keydown', function () {
- myChart.dispatchAction({
- type: 'lines3DToggleEffect',
- seriesIndex: 0
- });
-});
\ No newline at end of file
diff --git a/public/data-gl/linesGL-ny.js b/public/data-gl/linesGL-ny.js
deleted file mode 100644
index 01165a1..0000000
--- a/public/data-gl/linesGL-ny.js
+++ /dev/null
@@ -1,91 +0,0 @@
-/*
-title: Use linesGL to draw 1 million ny streets.
-titleCN: 实时交互的纽约街道可视化
-category: linesGL
-*/
-
-
-var CHUNK_COUNT = 32;
-
-var dataCount = 0;
-
-function fetchData(idx) {
- if (idx >= CHUNK_COUNT) {
- return;
- }
- var dataURL = ROOT_PATH + '/data/asset/data/links-ny/links_ny_' + idx + '.bin';
- var xhr = new XMLHttpRequest();
- xhr.open('GET', dataURL, true);
- xhr.responseType = 'arraybuffer';
-
- xhr.onload = function (e) {
- var rawData = new Float32Array(this.response);
- var data = new Float64Array(rawData.length - 2);
- var offsetX = rawData[0];
- var offsetY = rawData[1];
- var off = 0;
- var addedDataCount = 0;
- for (var i = 2; i < rawData.length;) {
- var count = rawData[i++];
- data[off++] = count;
- for (var k = 0; k < count; k++) {
- var x = rawData[i++] + offsetX;
- var y = rawData[i++] + offsetY;
- data[off++] = x;
- data[off++] = y;
-
- addedDataCount++;
- }
- }
-
- myChart.appendData({
- seriesIndex: 0,
- data: data
- });
-
- dataCount += addedDataCount;
-
- fetchData(idx + 1);
- }
-
- xhr.send();
-}
-
-option = {
- progressive: 20000,
- backgroundColor: '#111',
- geo: {
- center: [-74.04327099998152, 40.86737600240287],
- zoom: 360,
- map: 'world',
- roam: true,
- silent: true,
- itemStyle: {
- normal: {
- color: 'transparent',
- borderColor: 'rgba(255,255,255,0.1)',
- borderWidth: 1
- }
- }
- },
- series: [{
- type: 'linesGL',
-
- coordinateSystem: 'geo',
-
- blendMode: 'lighter',
-
- dimensions: ['value'],
-
- data: new Float64Array(),
- polyline: true,
- large: true,
-
- lineStyle: {
- color: 'orange',
- opacity: 0.3
- }
- }]
-}
-
-fetchData(0);
\ No newline at end of file
diff --git a/public/data-gl/map3d-alcohol-consumption.js b/public/data-gl/map3d-alcohol-consumption.js
deleted file mode 100644
index abaaf8a..0000000
--- a/public/data-gl/map3d-alcohol-consumption.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/*
-title: Map3D - Alcohol Consumption
-category: map3D
-titleCN: Map3D - Alcohol Consumption
-*/
-
-$.getJSON(ROOT_PATH + '/data-gl/asset/data/alcohol.json', function (data) {
- var regionData = data.map(function (item) {
- return {
- name: item[0],
- value: item[1]
- }
- })
- console.log(regionData);
-
- myChart.setOption({
- backgroundColor: '#cdcfd5',
- visualMap: {
- min: 0,
- max: 15,
- realtime: true,
- calculable : true,
- inRange: {
- color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
- }
- },
- series: [{
- type: 'map3D',
- map: 'world',
- shading: 'lambert',
- realisticMaterial: {
- roughness: 0.2,
- metalness: 0
- },
- postEffect: {
- enable: true,
- SSAO: {
- enable: true,
- radius: 2,
- intensity: 1
- }
- },
- groundPlane: {
- show: true
- },
- light: {
- main: {
- intensity: 2,
- shadow: true,
- shadowQuality: 'high',
- alpha: 30
- },
- ambient: {
- intensity: 0
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/canyon.hdr',
- exposure: 1,
- diffuseIntensity: 1
- }
- },
- viewControl: {
- distance: 50
- },
-
-
- regionHeight: 1,
-
- data: regionData
- }]
- });
-})
\ No newline at end of file
diff --git a/public/data-gl/map3d-buildings-on-mapbox.js b/public/data-gl/map3d-buildings-on-mapbox.js
deleted file mode 100644
index a678ae9..0000000
--- a/public/data-gl/map3d-buildings-on-mapbox.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/*
-title: Buildings on Mapbox
-category: map3D
-titleCN: Buildings on Mapbox
-*/
-
-mapboxgl.accessToken = mapboxglToken;
-
-
-$.getJSON(ROOT_PATH + '/data-gl/asset/data/buildings.json', function (buildingsGeoJSON) {
-
- echarts.registerMap('buildings', buildingsGeoJSON);
-
- var regionsData = buildingsGeoJSON.features.map(function (feature) {
- return {
- name: feature.properties.name,
- value: Math.random(),
- height: +feature.properties.height * 10
- };
- });
-
- myChart.setOption({
- mapbox: {
- center: [13.409779, 52.520645],
- zoom: 13,
- pitch: 50,
- bearing: -10,
- style: 'mapbox://styles/mapbox/dark-v9',
- postEffect: {
- enable: true,
- SSAO: {
- enable: true,
- intensity: 1.2,
- radius: 10
- },
- screenSpaceReflection: {
- enable:true
- }
- },
- light: {
- main: {
- intensity: 1,
- shadow: false,
- shadowQuality: 'high'
- },
- ambient: {
- intensity: 0.
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
- exposure: 1,
- diffuseIntensity: 0.5,
- specularIntensity: 2
- }
- }
- },
- series: [{
- type: 'map3D',
- coordinateSystem: 'mapbox',
- map: 'buildings',
- data: regionsData,
- shading: 'realistic',
- instancing: true,
- silent: true,
- itemStyle: {
- borderColor: [0, 2, 10],
- borderWidth: 1
- },
- realisticMaterial: {
- metalness: 1,
- roughness: 0.4
- }
- }]
- });
-
-
-});
\ No newline at end of file
diff --git a/public/data-gl/map3d-buildings.js b/public/data-gl/map3d-buildings.js
deleted file mode 100644
index 54b74dd..0000000
--- a/public/data-gl/map3d-buildings.js
+++ /dev/null
@@ -1,110 +0,0 @@
-/*
-title: Buildings
-category: map3D
-titleCN: Buildings
-*/
-
-
-$.getJSON(ROOT_PATH + '/data-gl/asset/data/buildings.json', function (buildingsGeoJSON) {
-
- echarts.registerMap('buildings', buildingsGeoJSON);
-
- var regions = buildingsGeoJSON.features.map(function (feature) {
- return {
- name: feature.properties.name,
- value: Math.random(),
- height: feature.properties.height / 10
- };
- });
-
-
- myChart.setOption({
- visualMap: {
- show: false,
- min: 0.4,
- max: 1,
- inRange: {
- color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
- }
- },
- series: [{
- type: 'map3D',
- map: 'buildings',
- shading: 'realistic',
- environment: '#000',
- realisticMaterial: {
- roughness: 0.6,
- textureTiling: 20
- },
- postEffect: {
- enable: true,
- SSAO: {
- enable: true,
- intensity: 1.3,
- radius: 5
- },
- screenSpaceReflection: {
- enable:false
- },
- depthOfField: {
- enable: true,
- blurRadius: 4,
- focalDistance: 30
- }
- },
- light: {
- main: {
- intensity: 3,
- alpha: 40,
- shadow: true,
- shadowQuality: 'high'
- },
- ambient: {
- intensity: 0.
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
- exposure: 1,
- diffuseIntensity: 0.5,
- specularIntensity: 1
- }
- },
- groundPlane: {
- show: false,
- color: '#333'
- },
- viewControl: {
- minBeta: -360,
- maxBeta: 360,
- alpha: 50,
- center: [50, 0, -10],
- distance: 30,
- minDistance: 5,
-
- panMouseButton: 'left',
- rotateMouseButton: 'middle',
- zoomSensitivity: 0.5
- },
-
- itemStyle: {
- areaColor: '#666'
- // borderColor: '#222',
- // borderWidth: 1
- },
-
- label: {
- color: 'white'
- },
-
- silent: true,
-
- instancing: true,
-
- boxWidth: 200,
- boxHeight: 1,
-
- data: regions
- }]
- });
-
-});
\ No newline at end of file
diff --git a/public/data-gl/map3d-colorful-cities.js b/public/data-gl/map3d-colorful-cities.js
deleted file mode 100644
index c436f41..0000000
--- a/public/data-gl/map3d-colorful-cities.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/*
-title: 五彩的城市建筑
-category: map3D
-titleCN: 五彩的城市建筑
-*/
-
-mapboxgl.accessToken = 'pk.eyJ1IjoicGlzc2FuZyIsImEiOiJjaXBnaGYxcW8wMDFodWNtNDc4NzdqMWR2In0.4XUWeduDltiCbsIiS-U8Lg';
-
-myChart.showLoading();
-
-$.getJSON(ROOT_PATH + '/data-gl/asset/data/buildings.json', function (buildingsGeoJSON) {
-
- echarts.registerMap('buildings', buildingsGeoJSON);
-
- myChart.hideLoading();
-
- var regionsData = buildingsGeoJSON.features.map(function (feature) {
- return {
- name: feature.properties.name,
- value: Math.random(),
- height: +feature.properties.height * 10
- };
- });
-
- myChart.setOption({
- visualMap: {
- show: false,
- min: 0.4,
- max: 1,
- inRange: {
- color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
- }
- },
- mapbox: {
- center: [13.409779, 52.520645],
- zoom: 13,
- pitch: 50,
- bearing: -10,
- style: 'mapbox://styles/mapbox/dark-v9',
- postEffect: {
- enable: true,
- SSAO: {
- enable: true,
- intensity: 1.3,
- radius: 5
- },
- screenSpaceReflection: {
- enable:false
- },
- depthOfField: {
- enable: true,
- blurRadius: 4,
- focalDistance: 90
- }
- },
- light: {
- main: {
- intensity: 3,
- alpha: -40,
- shadow: true,
- shadowQuality: 'high'
- },
- ambient: {
- intensity: 0.
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
- exposure: 1,
- diffuseIntensity: 0.5,
- specularIntensity: 1
- }
- }
- },
- series: [{
- type: 'map3D',
- coordinateSystem: 'mapbox',
- map: 'buildings',
- data: regionsData,
- shading: 'realistic',
- instancing: true,
- silent: true,
- itemStyle: {
- areaColor: '#fff'
- },
- realisticMaterial: {
- metalness: 0,
- roughness: 0.0
- }
- }]
- });
-
-
-});
\ No newline at end of file
diff --git a/public/data-gl/map3d-plastic-material-style-buildings-on-mapbox.js b/public/data-gl/map3d-plastic-material-style-buildings-on-mapbox.js
deleted file mode 100644
index 64bfb9b..0000000
--- a/public/data-gl/map3d-plastic-material-style-buildings-on-mapbox.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
-title: Plastic material style buildings on Mapbox
-category: map3D
-titleCN: Plastic material style buildings on Mapbox
-*/
-
-mapboxgl.accessToken = 'pk.eyJ1IjoicGlzc2FuZyIsImEiOiJjaXBnaGYxcW8wMDFodWNtNDc4NzdqMWR2In0.4XUWeduDltiCbsIiS-U8Lg';
-
-myChart.showLoading();
-
-$.getJSON(ROOT_PATH + '/data-gl/asset/data/buildings.json', function (buildingsGeoJSON) {
-
- echarts.registerMap('buildings', buildingsGeoJSON);
-
- myChart.hideLoading();
-
- var regionsData = buildingsGeoJSON.features.map(function (feature) {
- return {
- name: feature.properties.name,
- value: Math.random(),
- height: +feature.properties.height * 10
- };
- });
-
- myChart.setOption({
- mapbox: {
- center: [13.409779, 52.520645],
- zoom: 13,
- pitch: 50,
- bearing: -10,
- style: 'mapbox://styles/mapbox/dark-v9',
- postEffect: {
- enable: true,
- SSAO: {
- enable: true,
- intensity: 1.3,
- radius: 5
- },
- screenSpaceReflection: {
- enable:false
- },
- depthOfField: {
- enable: true,
- blurRadius: 4,
- focalDistance: 90
- }
- },
- light: {
- main: {
- intensity: 2,
- alpha: -40,
- shadow: true,
- shadowQuality: 'high'
- },
- ambient: {
- intensity: 0.
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
- exposure: 1,
- diffuseIntensity: 0.5,
- specularIntensity: 1
- }
- }
- },
- series: [{
- type: 'map3D',
- coordinateSystem: 'mapbox',
- map: 'buildings',
- data: regionsData,
- shading: 'realistic',
- instancing: true,
- silent: true,
- itemStyle: {
- areaColor: '#fff'
- },
- realisticMaterial: {
- metalness: 0,
- roughness: 0.0
- }
- }]
- });
-
-
-});
\ No newline at end of file
diff --git a/public/data-gl/map3d-wood-city.js b/public/data-gl/map3d-wood-city.js
deleted file mode 100644
index 6b89e7f..0000000
--- a/public/data-gl/map3d-wood-city.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/*
-title: Wood City
-category: map3D
-titleCN: Wood City
-*/
-
-
-$.getJSON(ROOT_PATH + '/data-gl/asset/data/buildings.json', function (buildingsGeoJSON) {
-
- echarts.registerMap('buildings', buildingsGeoJSON);
-
- var regions = buildingsGeoJSON.features.map(function (feature) {
- return {
- name: feature.properties.name,
- value: Math.max(Math.sqrt(feature.properties.height), 0.1),
- height: Math.max(Math.sqrt(feature.properties.height), 0.1)
- };
- });
-
-
- myChart.setOption({
- series: [{
- type: 'map3D',
- map: 'buildings',
- shading: 'realistic',
- realisticMaterial: {
- roughness: 0.6,
- textureTiling: 20,
- detailTexture: ROOT_PATH + '/data-gl/asset/woods.jpg'
- },
- postEffect: {
- enable: true,
- bloom: {
- enable: false
- },
- SSAO: {
- enable: true,
- quality: 'medium',
- radius: 10,
- intensity: 1.2
- },
- depthOfField: {
- enable: false,
- focalRange: 5,
- fstop: 1,
- blurRadius: 6
- }
- },
- groundPlane: {
- show: true,
- color: '#333'
- },
- light: {
- main: {
- intensity: 6,
- shadow: true,
- shadowQuality: 'high',
- alpha: 30
- },
- ambient: {
- intensity: 0
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/canyon.hdr',
- exposure: 2,
- diffuseIntensity: 1,
- specularIntensity: 1
- }
- },
- viewControl: {
- minBeta: -360,
- maxBeta: 360
- },
-
- itemStyle: {
- areaColor: '#666'
- },
-
- label: {
- color: 'white'
- },
-
- silent: true,
-
- instancing: true,
-
- boxWidth: 200,
- boxHeight: 1,
-
- data: regions
- }]
- });
-
-});
\ No newline at end of file
diff --git a/public/data-gl/map3d-wood-map-on-mapbox.js b/public/data-gl/map3d-wood-map-on-mapbox.js
deleted file mode 100644
index b6a3582..0000000
--- a/public/data-gl/map3d-wood-map-on-mapbox.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/*
-title: 木质地图 on mapbox
-category: map3D
-titleCN: 木质地图 on mapbox
-*/
-
-mapboxgl.accessToken = mapboxglToken;
-
-$.getJSON(ROOT_PATH + '/data-gl/asset/data/alcohol.json', function (data) {
- var regionData = data.map(function (item) {
- return {
- name: item[0],
- height: item[1] + 1
- }
- })
- option = {
- mapbox: {
- zoom: 2,
- center: [0, 0],
- style: 'mapbox://styles/mapbox/light-v9',
- postEffect: {
- enable: true,
- SSAO: {
- enable: true,
- radius: 5,
- intensity: 1.5,
- quality: 'high'
- }
- },
- altitudeScale: 1e5,
- light: {
- main: {
- intensity: 2,
- shadow: true,
- shadowQuality: 'high'
- },
- ambient: {
- intensity: 0
- },
- ambientCubemap: {
- diffuseIntensity: 1,
- specularIntensity: 1,
- exposure: 2,
- texture: ROOT_PATH + '/data-gl/asset/canyon.hdr'
- }
- }
- },
- series: [{
- type: 'map3D',
- map: 'world',
- coordinateSystem: 'mapbox',
- shading: 'realistic',
- silent: true,
- itemStyle: {
- areaColor: '#fff'
- },
- realisticMaterial: {
- roughness: ROOT_PATH + "/asset/get/s/data-1497191796671-B16_H05G-.png",
- normalTexture: ROOT_PATH + "/asset/get/s/data-1497191771850-rJ4DrAqf-.jpg",
- detailTexture: ROOT_PATH + "/asset/get/s/data-1497191756633-SJr8HRqzW.jpg",
- textureTiling: [4, 4]
- },
- data: regionData
- }]
- };
-
- myChart.setOption(option);
-});
\ No newline at end of file
diff --git a/public/data-gl/map3d-wood-map.js b/public/data-gl/map3d-wood-map.js
deleted file mode 100644
index 2648061..0000000
--- a/public/data-gl/map3d-wood-map.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/*
-title: 木质世界地图
-category: map3D
-titleCN: 木质世界地图
-*/
-
-$.getJSON(ROOT_PATH + '/data-gl/asset/data/alcohol.json', function (data) {
- var regionData = data.map(function (item) {
- return {
- name: item[0],
- height: Math.pow(item[1], 0.2) + 1
- }
- })
- option = {
- series: [{
- type: 'map3D',
- map: 'world',
- shading: 'realistic',
- realisticMaterial: {
- roughness: ROOT_PATH + "/data-gl/asset/wood/roughness.jpg",
- normalTexture: ROOT_PATH + "/data-gl/asset/wood/normal.jpg",
- detailTexture: ROOT_PATH + "/data-gl/asset/wood/diffuse.jpg",
- textureTiling: [2, 2]
- },
- postEffect: {
- enable: true,
- SSAO: {
- enable: true,
- radius: 3,
- intensity: 1.4,
- quality: 'high'
- }
- },
- light: {
- main: {
- intensity: 2,
- shadow: true,
- shadowQuality: 'high',
- alpha: 150,
- beta: 0
- },
- ambient: {
- intensity: 0
- },
- ambientCubemap: {
- diffuseIntensity: 2,
- specularIntensity: 2,
- texture: ROOT_PATH + '/data-gl/asset/canyon.hdr'
- }
- },
- viewControl: {
- alpha: 89,
- rotateMouseButton: 'right',
- panMouseButton: 'left',
- distance: 80
- },
- groundPlane: {
- show: true,
- color: '#333',
- realisticMaterial: {
- roughness: ROOT_PATH + "/data-gl/asset/redbricks/roughness.jpg",
- normalTexture: ROOT_PATH + "/data-gl/asset/redbricks/normal.jpg",
- detailTexture: ROOT_PATH + "/data-gl/asset/redbricks/diffuse.jpg",
- textureTiling: [8, 4]
- }
- },
- data: regionData
- }]
- };
-
- myChart.setOption(option);
-});
\ No newline at end of file
diff --git a/public/data-gl/metal-bar3d.js b/public/data-gl/metal-bar3d.js
deleted file mode 100644
index 0d2c83e..0000000
--- a/public/data-gl/metal-bar3d.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/*
-title: Metal Bar3D
-category: bar3D
-titleCN: Metal Bar3D
-*/
-
-$.getScript('https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js').done(function () {
-
-
-var noise = new SimplexNoise(Math.random);
-function generateData(theta, min, max) {
- var data = [];
- for (var i = 0; i <= 20; i++) {
- for (var j = 0; j <= 20; j++) {
- var value = noise.noise2D(i / 20, j / 20);
- valMax = Math.max(valMax, value);
- valMin = Math.min(valMin, value);
- data.push([i, j, value * 2 + 4]);
- }
- }
- return data;
-}
-var valMin = Infinity;
-var valMax = -Infinity;
-var data = generateData(2, -5, 5);
-
-
-myChart.setOption(option = {
- tooltip: {},
- xAxis3D: {
- type: 'value'
- },
- yAxis3D: {
- type: 'value'
- },
- zAxis3D: {
- type: 'value',
- max: 10,
- min: 0
- },
- grid3D: {
- environment: '#000',
- axisPointer: {
- show: false
- },
- postEffect: {
- enable: true,
- SSAO: {
- enable: true,
- radius: 5
- }
- },
- light: {
- main: {
- intensity: 3
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
- exposure: 1,
- diffuseIntensity: 0.5,
- specularIntensity: 2
- }
- }
- },
- series: [{
- type: 'bar3D',
- data: data,
-
- barSize: 4,
-
- bevelSize: 0.4,
- bevelSmoothness: 4,
-
- shading: 'realistic',
- realisticMaterial: {
- roughness: 0.3,
- metalness: 1
- },
-
- label: {
- textStyle: {
- fontSize: 16,
- borderWidth: 1
- }
- },
-
- itemStyle: {
- color: '#ccc'
- },
-
- emphasis: {
- label: {
- show: false
- }
- }
- }]
-});
-
-});
\ No newline at end of file
diff --git a/public/data-gl/metal-surface.js b/public/data-gl/metal-surface.js
deleted file mode 100644
index 6ebcd9c..0000000
--- a/public/data-gl/metal-surface.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/*
-title: Metal Surface
-category: surface
-titleCN: Metal Surface
-*/
-
-
-var sin = Math.sin;
-var cos = Math.cos;
-var pow = Math.pow;
-var sqrt = Math.sqrt;
-var cosh = Math.cosh;
-var sinh = Math.sinh;
-var PI = Math.PI;
-
-var aa = 0.4;
-var r = 1 - aa * aa;
-var w = sqrt(r);
-
-option = {
- tooltip: {},
- visualMap: {
- show: false,
- dimension: 2,
- min: -5,
- max: 5,
- inRange: {
- color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
- }
- },
- xAxis3D: {},
- yAxis3D: {},
- zAxis3D: {},
- grid3D: {
- show: false,
- postEffect: {
- enable: true,
- SSAO: {
- enable: true,
- radius: 4,
- quality: 'high',
- intensity: 1.5
- }
- },
- temporalSuperSampling: {
- enable: true
- },
- light: {
- main: {
- intensity: 2,
- shadow: true
- },
- ambient: {
- intensity: 0
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/canyon.hdr',
- exposure: 2,
- diffuseIntensity: 0.2,
- specularIntensity: 3
- }
- }
- },
- series: [{
- type: 'surface',
- parametric: true,
- silent: true,
- wireframe: {
- show: false
- },
- shading: 'realistic',
- realisticMaterial: {
- roughness: 0.2,
- metalness: 1
- },
- parametricEquation: {
- u: {
- min: -13.2,
- max: 13.2,
- step: 0.2
- },
- v: {
- min: -37.4,
- max: 37.4,
- step: 0.2
- },
- x: function (u, v) {
- var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2))
- return -u + (2 * r * cosh(aa * u) * sinh(aa * u) / denom);
- },
- y: function (u, v) {
- var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2))
- return 2 * w * cosh(aa * u) * (-(w * cos(v) * cos(w * v)) - (sin(v) * sin(w * v))) / denom;
- },
- z: function (u, v) {
- var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2))
- return 2 * w * cosh(aa * u) * (-(w * sin(v) * cos(w * v)) + (cos(v) * sin(w * v))) / denom
- }
- }
- }]
-};
\ No newline at end of file
diff --git a/public/data-gl/parametric-surface-rose.js b/public/data-gl/parametric-surface-rose.js
deleted file mode 100644
index 8b71738..0000000
--- a/public/data-gl/parametric-surface-rose.js
+++ /dev/null
@@ -1,149 +0,0 @@
-/*
-title: Parametric Surface Rose
-category: surface
-titleCN: Parametric Surface Rose
-*/
-
-
-var sin = Math.sin;
-var cos = Math.cos;
-var pow = Math.pow;
-var sqrt = Math.sqrt;
-var cosh = Math.cosh;
-var sinh = Math.sinh;
-var exp = Math.exp;
-var PI = Math.PI;
-var square = function (x) {
- return x*x;
-}
-var mod2 = function (a, b) {
- var c = a % b;
- return c > 0 ? c : (c + b);
-}
-
-var theta1 = -(20/9) * PI;
-var theta2 = 15 * PI;
-function getParametricEquation() {
- return {
- u: {
- min: 0,
- max: 1,
- step: 1 / 24
- },
- v: {
- min: theta1,
- max: theta2,
- step: (theta2 - theta1) / 575
- },
- x: function (x1, theta) {
- var phi = (PI/2)*exp(-theta/(8*PI));
- var y1 = 1.9565284531299512*square(x1)*square(1.2768869870150188*x1-1)*sin(phi);
- var X = 1-square(1.25*square(1-mod2((3.6*theta),(2*PI))/PI)-0.25)/2;
- var r = X*(x1*sin(phi)+y1*cos(phi));
- return r * sin(theta);
- },
- y: function (x1, theta) {
- var phi = (PI/2)*exp(-theta/(8*PI));
- var y1 = 1.9565284531299512*square(x1)*square(1.2768869870150188*x1-1)*sin(phi);
- var X = 1-square(1.25*square(1-mod2((3.6*theta),(2*PI))/PI)-0.25)/2;
- var r = X*(x1*sin(phi)+y1*cos(phi));
- return r * cos(theta);
- },
- z: function (x1, theta) {
- var phi = (PI/2)*exp(-theta/(8*PI));
- var y1 = 1.9565284531299512*square(x1)*square(1.2768869870150188*x1-1)*sin(phi);
- var X = 1-square(1.25*square(1-mod2((3.6*theta),(2*PI))/PI)-0.25)/2;
- var r = X*(x1*sin(phi)+y1*cos(phi));
- return X*(x1*cos(phi)-y1*sin(phi));
- }
- };
-}
-
-option = {
- toolbox: {
- feature: {
- saveAsImage: {
- backgroundColor: '#111'
- }
- },
- iconStyle: {
- normal: {
- borderColor: '#fff'
- }
- },
- left: 0
- },
- xAxis3D: {
- type: 'value'
- },
- yAxis3D: {
- type: 'value'
- },
- zAxis3D: {
- type: 'value'
- },
- grid3D: {
-
- show: false,
-
- axisPointer: {
- show: false
- },
- axisLine: {
- lineStyle: {
- color: '#fff'
- }
- },
- postEffect: {
- enable: true,
- SSAO: {
- enable: true,
- radius: 10,
- intensity: 2
- },
- edge: {
- enable: true
- }
- },
- temporalSuperSampling: {
- enable: true
- },
- light: {
- main: {
- intensity: 3,
- shadow: true,
- },
- ambient: {
- intensity: 0
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/canyon.hdr',
- exposure: 0,
- diffuseIntensity: 1,
- specularIntensity: 0.5
- }
- },
- viewControl: {
- // projection: 'orthographic'
- }
- },
- series: [{
- type: 'surface',
- parametric: true,
- shading: 'realistic',
- silent: true,
- wireframe: {
- show: false
- },
- realisticMaterial: {
- baseTexture: ROOT_PATH + '/asset/get/s/data-1494250104909-SkZtfeAyZ.jpg',
- roughness: 0.7,
- metalness: 0,
- textureTiling: [200, 20]
- },
- itemStyle: {
- color: '#fff'
- },
- parametricEquation: getParametricEquation()
- }]
-};
\ No newline at end of file
diff --git a/public/data-gl/scatter3D-dataset.js b/public/data-gl/scatter3D-dataset.js
deleted file mode 100644
index d15364e..0000000
--- a/public/data-gl/scatter3D-dataset.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
-title: 3D Scatter with Dataset
-category: scatter3D
-titleCN: 使用 dataset 为三维散点图设置数据
-*/
-
-$.get(ROOT_PATH + '/data/asset/data/life-expectancy-table.json', function (data) {
- var symbolSize = 2.5;
- option = {
- grid3D: {},
- xAxis3D: {
- type: 'category'
- },
- yAxis3D: {},
- zAxis3D: {},
- dataset: {
- dimensions: [
- 'Income',
- 'Life Expectancy',
- 'Population',
- 'Country',
- {name: 'Year', type: 'ordinal'}
- ],
- source: data
- },
- series: [
- {
- type: 'scatter3D',
- symbolSize: symbolSize,
- encode: {
- x: 'Country',
- y: 'Life Expectancy',
- z: 'Income',
- tooltip: [0, 1, 2, 3, 4]
- }
- }
- ]
- };
-
- myChart.setOption(option);
-});
\ No newline at end of file
diff --git a/public/data-gl/scatter3d-globe-population.js b/public/data-gl/scatter3d-globe-population.js
deleted file mode 100644
index 189d244..0000000
--- a/public/data-gl/scatter3d-globe-population.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/*
-title: Scatter3D - Globe Population
-category: scatter3D
-titleCN: Scatter3D - Globe Population
-*/
-
-
-$.getJSON(ROOT_PATH + '/data-gl/asset/data/population.json', function (data) {
-
- data = data.filter(function (dataItem) {
- return dataItem[2] > 0;
- }).map(function (dataItem) {
- return [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])];
- });
-
- myChart.setOption({
- visualMap: {
- show: false,
- min: 0,
- max: 60,
- inRange: {
- symbolSize: [1.0, 10.0]
- }
- },
- globe: {
-
- environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
-
- heightTexture: ROOT_PATH + '/data-gl/asset/bathymetry_bw_composite_4k.jpg',
-
- displacementScale: 0.05,
- displacementQuality: 'high',
-
- globeOuterRadius: 100,
-
- baseColor: '#000',
-
- shading: 'realistic',
- realisticMaterial: {
- roughness: 0.2,
- metalness: 0
- },
-
- postEffect: {
- enable: true,
- depthOfField: {
- focalRange: 15,
- enable: true,
- focalDistance: 100
- }
- },
- temporalSuperSampling: {
- enable: true
- },
- light: {
- ambient: {
- intensity: 0
- },
- main: {
- intensity: 0.1,
- shadow: false
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/lake.hdr',
- exposure: 1,
- diffuseIntensity: 0.5,
- specularIntensity: 2
- }
- },
- viewControl: {
- autoRotate: false,
- beta: 180,
- alpha: 20,
- distance: 100
- }
- },
- series: {
- type: 'scatter3D',
- coordinateSystem: 'globe',
- blendMode: 'lighter',
- symbolSize: 2,
- itemStyle: {
- color: 'rgb(50, 50, 150)',
- opacity: 1
- },
- data: data
- }
- });
-});
diff --git a/public/data-gl/scatter3d-orthographic.js b/public/data-gl/scatter3d-orthographic.js
deleted file mode 100644
index d2ab3a8..0000000
--- a/public/data-gl/scatter3d-orthographic.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/*
-title: 三维散点图正交投影
-category: scatter3D
-theme: dark
-titleCN: 三维散点图正交投影
-*/
-
-$.getScript('https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js').done(function () {
-
-
-var noise = new SimplexNoise(Math.random);
-function generateData(theta, min, max) {
- var data = [];
- for (var i = 0; i <= 40; i++) {
- for (var j = 0; j <= 40; j++) {
- for (var k = 0; k <= 40; k++) {
- var value = noise.noise3D(i / 20, j / 20, k / 20);
- valMax = Math.max(valMax, value);
- valMin = Math.min(valMin, value);
- data.push([i, j, k, value * 2 + 4]);
- }
- }
- }
- return data;
-}
-var valMin = Infinity;
-var valMax = -Infinity;
-var data = generateData(2, -5, 5);
-console.log(valMin, valMax);
-
-myChart.setOption(option = {
- visualMap: {
- show: false,
- min: 2,
- max: 6,
- inRange: {
- symbolSize: [0.5, 15],
- color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'],
- colorAlpha: [0.2, 1]
- }
- },
- xAxis3D: {
- type: 'value'
- },
- yAxis3D: {
- type: 'value'
- },
- zAxis3D: {
- type: 'value'
- },
- grid3D: {
- axisLine: {
- lineStyle: { color: '#fff' }
- },
- axisPointer: {
- lineStyle: { color: '#fff' }
- },
- viewControl: {
- projection: 'orthographic'
- }
- },
- series: [{
- type: 'scatter3D',
- data: data
- }]
-});
-
-});
\ No newline at end of file
diff --git a/public/data-gl/scatter3d-scatter.js b/public/data-gl/scatter3d-scatter.js
deleted file mode 100644
index b1ee000..0000000
--- a/public/data-gl/scatter3d-scatter.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/*
-title: 3D Scatter with Scatter Matrix
-category: scatter3D
-titleCN: 三维散点图和散点矩阵结合使用
-*/
-
-$.get(ROOT_PATH + '/data/asset/data/life-expectancy-table.json', function (data) {
-
- var sizeValue = '57%';
- var symbolSize = 2.5;
-
- option = {
- tooltip: {},
- grid3D: {
- width: '50%'
- },
- xAxis3D: {},
- yAxis3D: {},
- zAxis3D: {},
- grid: [
- {left: '50%', width: '20%', bottom: sizeValue},
- {left: '75%', width: '20%', bottom: sizeValue},
- {left: '50%', width: '20%', top: sizeValue},
- {left: '75%', width: '20%', 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: 'scatter3D',
- symbolSize: 3,
- encode: {
- x: 'Population',
- y: 'Life Expectancy',
- z: 'Income',
- tooltip: [0, 1, 2, 3, 4]
- }
- },
-
- {
- 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(option);
-});
\ No newline at end of file
diff --git a/public/data-gl/scatter3d-shanghai.js b/public/data-gl/scatter3d-shanghai.js
deleted file mode 100644
index 7d322ea..0000000
--- a/public/data-gl/scatter3d-shanghai.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
-title: 上海房价可视化三维散点图
-category: scatter3D
-titleCN: 上海房价可视化三维散点图
-*/
-
-var uploadedDataURL = ROOT_PATH + "/asset/get/s/data-1495284690309-Bk9Ro3Te-.json";
-mapboxgl.accessToken = mapboxglToken;
-
-myChart.showLoading();
-
-$.getJSON(uploadedDataURL, function(linedata) {
-
- myChart.hideLoading();
-
- myChart.setOption({
-
- visualMap: {
- show: false,
- calculable: true,
- realtime: false,
- inRange: {
- color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
- },
- outOfRange: {
- colorAlpha: 0
- },
- max: linedata[1]
- },
- mapbox: {
- center: [121.4693, 31.123070],
- zoom: 10,
- pitch: 50,
- bearing: -10,
- style: 'mapbox://styles/mapbox/light-v9',
- boxHeight: 2,
- // altitudeScale: 3e2
- },
- series: [{
- type: 'scatter3D',
- coordinateSystem: 'mapbox',
- silent: true,
- data: linedata[0],
- itemStyle: {
- borderWidth: 0.5,
- borderColor: '#fff'
- }
- }]
- });
-});
\ No newline at end of file
diff --git a/public/data-gl/scatter3d-simplex-noise.js b/public/data-gl/scatter3d-simplex-noise.js
deleted file mode 100644
index 4421234..0000000
--- a/public/data-gl/scatter3d-simplex-noise.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/*
-title: Scatter3D - Simplex Noise
-category: scatter3D
-theme: dark
-titleCN: Scatter3D - Simplex Noise
-*/
-
-$.getScript('https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js').done(function () {
-
-
-var noise = new SimplexNoise(Math.random);
-function generateData(theta, min, max) {
- var data = [];
- for (var i = 0; i <= 20; i++) {
- for (var j = 0; j <= 20; j++) {
- for (var k = 0; k <= 20; k++) {
- var value = noise.noise3D(i / 10, j / 10, k / 10);
- valMax = Math.max(valMax, value);
- valMin = Math.min(valMin, value);
- data.push([i, j, k, value * 2 + 4]);
- }
- }
- }
- return data;
-}
-var valMin = Infinity;
-var valMax = -Infinity;
-var data = generateData(2, -5, 5);
-console.log(valMin, valMax);
-
-myChart.setOption(option = {
- visualMap: {
- show: false,
- min: 2,
- max: 6,
- inRange: {
- symbolSize: [0.5, 25],
- color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'],
- colorAlpha: [0.2, 1]
- }
- },
- xAxis3D: {
- type: 'value'
- },
- yAxis3D: {
- type: 'value'
- },
- zAxis3D: {
- type: 'value'
- },
- grid3D: {
- axisLine: {
- lineStyle: { color: '#fff' }
- },
- axisPointer: {
- lineStyle: { color: '#fff' }
- },
- viewControl: {
- // autoRotate: true
- }
- },
- series: [{
- type: 'scatter3D',
- data: data
- }]
-});
-
-});
\ No newline at end of file
diff --git a/public/data-gl/scatter3d-weibo-checkin-on-mapbox.js b/public/data-gl/scatter3d-weibo-checkin-on-mapbox.js
deleted file mode 100644
index 2669d0d..0000000
--- a/public/data-gl/scatter3d-weibo-checkin-on-mapbox.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/*
-title: Weibo checkin on Mapbox
-category: scatter3D
-titleCN: Weibo checkin on Mapbox
-*/
-
-
-mapboxgl.accessToken = mapboxglToken;
-
-$.getJSON(ROOT_PATH + '/asset/get/s/data-1491917776060-Sku0i8qpx.json', function (weiboData) {
-
- weiboData = weiboData.map(function (serieData, idx) {
- var px = serieData[0] / 1000;
- var py = serieData[1] / 1000;
- var res = [[px, py, 1]];
-
- for (var i = 2; i < serieData.length; i += 2) {
- var dx = serieData[i] / 1000;
- var dy = serieData[i + 1] / 1000;
- var x = px + dx;
- var y = py + dy;
- res.push([x.toFixed(2), y.toFixed(2), 1]);
-
- px = x;
- py = y;
- }
- return res;
- });
-
- myChart.setOption({
- mapbox: {
- center: [104.114129, 37.550339],
- zoom: 3,
- pitch: 0,
- bearing: 0,
- style: 'mapbox://styles/mapbox/dark-v9',
- postEffect: {
- enable: true
- },
- light: {
- main: {
- intensity: 2,
- shadow: false,
- shadowQuality: 'high'
- },
- ambient: {
- intensity: 0.
- }
- }
- },
- series: [{
- name: '弱',
- type: 'scatter3D',
- coordinateSystem: 'mapbox',
- symbolSize: 1,
- itemStyle: {
- shadowBlur: 2,
- shadowColor: 'rgba(37, 140, 249, 0.8)',
- color: 'rgba(37, 140, 249, 0.8)'
- },
- data: weiboData[0]
- }, {
- name: '中',
- type: 'scatter3D',
- coordinateSystem: 'mapbox',
- symbolSize: 1,
- itemStyle: {
- shadowBlur: 2,
- shadowColor: 'rgba(14, 241, 242, 0.8)',
- color: 'rgba(14, 241, 242, 0.8)'
- },
- data: weiboData[1]
- }, {
- name: '强',
- type: 'scatter3D',
- coordinateSystem: 'mapbox',
- symbolSize: 1,
- itemStyle: {
- shadowBlur: 2,
- shadowColor: 'rgba(255, 255, 255, 0.8)',
- color: 'rgba(255, 255, 255, 0.8)'
- },
- data: weiboData[2]
- }]
- });
-
-});
\ No newline at end of file
diff --git a/public/data-gl/scatter3d.js b/public/data-gl/scatter3d.js
deleted file mode 100644
index a3235f8..0000000
--- a/public/data-gl/scatter3d.js
+++ /dev/null
@@ -1,208 +0,0 @@
-/*
-title: Scatter3D
-category: scatter3D
-theme: dark
-titleCN: Scatter3D
-*/
-
-
-var indices = {
- name: 0,
- group: 1,
- id: 16
-};
-var schema = [
- {name: 'name', index: 0},
- {name: 'group', index: 1},
- {name: 'protein', index: 2},
- {name: 'calcium', index: 3},
- {name: 'sodium', index: 4},
- {name: 'fiber', index: 5},
- {name: 'vitaminc', index: 6},
- {name: 'potassium', index: 7},
- {name: 'carbohydrate', index: 8},
- {name: 'sugars', index: 9},
- {name: 'fat', index: 10},
- {name: 'water', index: 11},
- {name: 'calories', index: 12},
- {name: 'saturated', index: 13},
- {name: 'monounsat', index: 14},
- {name: 'polyunsat', index: 15},
- {name: 'id', index: 16}
-];
-var data;
-
-var fieldIndices = schema.reduce(function (obj, item) {
- obj[item.name] = item.index;
- return obj;
-}, {});
-
-var groupCategories = [];
-var groupColors = [];
-var data;
-var fieldNames = schema.map(function (item) {
- return item.name;
-});
-fieldNames = fieldNames.slice(2, fieldNames.length - 2);
-
-function getMaxOnExtent(data) {
- var colorMax = -Infinity;
- var symbolSizeMax = -Infinity;
- for (var i = 0; i < data.length; i++) {
- var item = data[i];
- var colorVal = item[fieldIndices[config.color]];
- var symbolSizeVal = item[fieldIndices[config.symbolSize]];
- colorMax = Math.max(colorVal, colorMax);
- symbolSizeMax = Math.max(symbolSizeVal, symbolSizeMax);
- }
- return {
- color: colorMax,
- symbolSize: symbolSizeMax
- };
-}
-
-var config = app.config = {
- xAxis3D: 'protein',
- yAxis3D: 'fiber',
- zAxis3D: 'sodium',
- color: 'fiber',
- symbolSize: 'vitaminc',
-
- onChange: function () {
- var max = getMaxOnExtent(data);
- if (data) {
- myChart.setOption({
- visualMap: [{
- max: max.color / 2
- }, {
- max: max.symbolSize / 2
- }],
- xAxis3D: {
- name: config.xAxis3D
- },
- yAxis3D: {
- name: config.yAxis3D
- },
- zAxis3D: {
- name: config.zAxis3D
- },
- series: {
- dimensions: [
- config.xAxis3D,
- config.yAxis3D,
- config.yAxis3D,
- config.color,
- config.symbolSiz
- ],
- data: data.map(function (item, idx) {
- return [
- item[fieldIndices[config.xAxis3D]],
- item[fieldIndices[config.yAxis3D]],
- item[fieldIndices[config.zAxis3D]],
- item[fieldIndices[config.color]],
- item[fieldIndices[config.symbolSize]],
- idx
- ];
- })
- }
- });
- }
- }
-};
-app.configParameters = {};
-['xAxis3D', 'yAxis3D', 'zAxis3D', 'color', 'symbolSize'].forEach(function (fieldName) {
- app.configParameters[fieldName] = {
- options: fieldNames
- };
-});
-
-$.getJSON(ROOT_PATH + '/data/asset/data/nutrients.json', function (_data) {
- data = _data;
-
- var max = getMaxOnExtent(data);
- myChart.setOption({
- tooltip: {},
- visualMap: [{
- top: 10,
- calculable: true,
- dimension: 3,
- max: max.color / 2,
- inRange: {
- color: ['#1710c0', '#0b9df0', '#00fea8', '#00ff0d', '#f5f811', '#f09a09', '#fe0300']
- },
- textStyle: {
- color: '#fff'
- }
- }, {
- bottom: 10,
- calculable: true,
- dimension: 4,
- max: max.symbolSize / 2,
- inRange: {
- symbolSize: [10, 40]
- },
- textStyle: {
- color: '#fff'
- }
- }],
- xAxis3D: {
- name: config.xAxis3D,
- type: 'value'
- },
- yAxis3D: {
- name: config.yAxis3D,
- type: 'value'
- },
- zAxis3D: {
- name: config.zAxis3D,
- type: 'value'
- },
- grid3D: {
- axisLine: {
- lineStyle: {
- color: '#fff'
- }
- },
- axisPointer: {
- lineStyle: {
- color: '#ffbd67'
- }
- },
- viewControl: {
- // autoRotate: true
- // projection: 'orthographic'
- }
- },
- series: [{
- type: 'scatter3D',
- dimensions: [
- config.xAxis3D,
- config.yAxis3D,
- config.yAxis3D,
- config.color,
- config.symbolSiz
- ],
- data: data.map(function (item, idx) {
- return [
- item[fieldIndices[config.xAxis3D]],
- item[fieldIndices[config.yAxis3D]],
- item[fieldIndices[config.zAxis3D]],
- item[fieldIndices[config.color]],
- item[fieldIndices[config.symbolSize]],
- idx
- ];
- }),
- symbolSize: 12,
- // symbol: 'triangle',
- itemStyle: {
- borderWidth: 1,
- borderColor: 'rgba(255,255,255,0.8)'
- },
- emphasis: {
- itemStyle: {
- color: '#fff'
- }
- }
- }]
- });
-});
\ No newline at end of file
diff --git a/public/data-gl/scatterGL-gps.js b/public/data-gl/scatterGL-gps.js
deleted file mode 100644
index 18d8a19..0000000
--- a/public/data-gl/scatterGL-gps.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/*
-title: 10 million Bulk GPS points
-titleCN: 1 千万 GPS 点可视化
-category: scatterGL
-*/
-
-
-var dataCount = 0;
-var CHUNK_COUNT = 230;
-// https://blog.openstreetmap.org/2012/04/01/bulk-gps-point-data/
-function fetchData(idx) {
- if (idx >= CHUNK_COUNT) {
- return;
- }
- var dataURL = ROOT_PATH + '/data/asset/data/gps/gps_'+ idx + '.bin';
- var xhr = new XMLHttpRequest();
- xhr.open('GET', dataURL, true);
- xhr.responseType = 'arraybuffer';
-
- xhr.onload = function (e) {
- var rawData = new Int32Array(this.response);
- var data = new Float32Array(rawData.length);
- var addedDataCount = rawData.length / 2;
- for (var i = 0; i < rawData.length; i += 2) {
- data[i] = rawData[i+1] / 1e7;
- data[i+1] = rawData[i] / 1e7;
- }
-
- myChart.appendData({
- seriesIndex: 0,
- data: data
- });
-
- fetchData(idx + 1);
- }
-
- xhr.send();
-}
-
-option = {
- backgroundColor: '#000',
- title: {
- text: '10000000 GPS Points',
- left: 'center',
- textStyle: {
- color: '#fff'
- }
- },
- geo: {
- map: 'world',
- roam: true,
- label: {
- emphasis: {
- show: false
- }
- },
- silent: true,
- itemStyle: {
- normal: {
- areaColor: '#323c48',
- borderColor: '#111'
- },
- emphasis: {
- areaColor: '#2a333d'
- }
- }
- },
- series: [{
- name: '弱',
- type: 'scatterGL',
- progressive: 1e6,
- coordinateSystem: 'geo',
- symbolSize: 1,
- zoomScale: 0.002,
- blendMode: 'lighter',
- large: true,
- itemStyle: {
- color: 'rgb(20, 15, 2)'
- },
- postEffect: {
- enable: true
- },
- silent: true,
- dimensions: ['lng', 'lat'],
- data: new Float32Array()
- }]
-};
-
-fetchData(0);
\ No newline at end of file
diff --git a/public/data-gl/scattergl-weibo.js b/public/data-gl/scattergl-weibo.js
deleted file mode 100644
index 29eb1cc..0000000
--- a/public/data-gl/scattergl-weibo.js
+++ /dev/null
@@ -1,100 +0,0 @@
-/*
-title: 微博签到数据点亮中国
-category: scatterGL
-theme: dark
-titleCN: 微博签到数据点亮中国
-*/
-
-
-$.getJSON(ROOT_PATH + '/data/asset/data/weibo.json', function (weiboData) {
-
- weiboData = weiboData.map(function (serieData, idx) {
- var px = serieData[0] / 1000;
- var py = serieData[1] / 1000;
- var res = [[px, py]];
-
- for (var i = 2; i < serieData.length; i += 2) {
- var dx = serieData[i] / 1000;
- var dy = serieData[i + 1] / 1000;
- var x = px + dx;
- var y = py + dy;
- res.push([x.toFixed(2), y.toFixed(2), 1]);
-
- px = x;
- py = y;
- }
- return res;
- });
- myChart.setOption(option = {
- title : {
- text: '微博签到数据点亮中国',
- subtext: 'From ThinkGIS',
- sublink: 'http://www.thinkgis.cn/public/sina',
- left: 'center',
- top: 'top',
- textStyle: {
- color: '#fff'
- }
- },
- tooltip: {},
- legend: {
- left: 'left',
- data: ['强', '中', '弱'],
- textStyle: {
- color: '#ccc'
- }
- },
- geo: {
- map: 'china',
- roam: true,
- label: {
- emphasis: {
- show: false
- }
- },
- itemStyle: {
- normal: {
- areaColor: '#323c48',
- borderColor: '#111'
- },
- emphasis: {
- areaColor: '#2a333d'
- }
- }
- },
- series: [{
- name: '弱',
- type: 'scatterGL',
- coordinateSystem: 'geo',
- symbolSize: 1,
- itemStyle: {
- shadowBlur: 2,
- shadowColor: 'rgba(37, 140, 249, 0.8)',
- color: 'rgba(37, 140, 249, 0.8)'
- },
- data: weiboData[0]
- }, {
- name: '中',
- type: 'scatterGL',
- coordinateSystem: 'geo',
- symbolSize: 1,
- itemStyle: {
- shadowBlur: 2,
- shadowColor: 'rgba(14, 241, 242, 0.8)',
- color: 'rgba(14, 241, 242, 0.8)'
- },
- data: weiboData[1]
- }, {
- name: '强',
- type: 'scatterGL',
- coordinateSystem: 'geo',
- symbolSize: 1,
- itemStyle: {
- shadowBlur: 2,
- shadowColor: 'rgba(255, 255, 255, 0.8)',
- color: 'rgba(255, 255, 255, 0.8)'
- },
- data: weiboData[2]
- }]
- });
-});
\ No newline at end of file
diff --git a/public/data-gl/simple-surface.js b/public/data-gl/simple-surface.js
deleted file mode 100644
index 4b16ebd..0000000
--- a/public/data-gl/simple-surface.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
-title: Simple Surface
-category: surface
-titleCN: Simple Surface
-*/
-
-option = {
- tooltip: {},
- backgroundColor: '#fff',
- visualMap: {
- show: false,
- dimension: 2,
- min: -1,
- max: 1,
- inRange: {
- color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
- }
- },
- xAxis3D: {
- type: 'value'
- },
- yAxis3D: {
- type: 'value'
- },
- zAxis3D: {
- type: 'value'
- },
- grid3D: {
- viewControl: {
- // projection: 'orthographic'
- }
- },
- series: [{
- type: 'surface',
- wireframe: {
- // show: false
- },
- equation: {
- x: {
- step: 0.05
- },
- y: {
- step: 0.05
- },
- z: function (x, y) {
- if (Math.abs(x) < 0.1 && Math.abs(y) < 0.1) {
- return '-';
- }
- return Math.sin(x * Math.PI) * Math.sin(y * Math.PI);
- }
- }
- }]
-}
\ No newline at end of file
diff --git a/public/data-gl/sphere-parametric-surface.js b/public/data-gl/sphere-parametric-surface.js
deleted file mode 100644
index 507a4bf..0000000
--- a/public/data-gl/sphere-parametric-surface.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/*
-title: Sphere Parametric Surface
-category: surface
-titleCN: Sphere Parametric Surface
-*/
-
-option = {
- tooltip: {},
- visualMap: {
- show: false,
- dimension: 2,
- min: -1,
- max: 1,
- inRange: {
- color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
- }
- },
- xAxis3D: {},
- yAxis3D: {},
- zAxis3D: {},
- grid3D: {},
- series: [{
- type: 'surface',
- parametric: true,
- // shading: 'albedo',
- parametricEquation: {
- u: {
- min: -Math.PI,
- max: Math.PI,
- step: Math.PI / 20
- },
- v: {
- min: 0,
- max: Math.PI,
- step: Math.PI / 20
- },
- x: function (u, v) {
- return Math.sin(v) * Math.sin(u);
- },
- y: function (u, v) {
- return Math.sin(v) * Math.cos(u);
- },
- z: function (u, v) {
- return Math.cos(v);
- }
- }
- }]
-};
\ No newline at end of file
diff --git a/public/data-gl/stacked-bar3d.js b/public/data-gl/stacked-bar3d.js
deleted file mode 100644
index 450c47a..0000000
--- a/public/data-gl/stacked-bar3d.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/*
-title: Stacked Bar3D
-category: bar3D
-titleCN: Stacked Bar3D
-*/
-
-$.getScript('https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js').done(function () {
-
-
-function generateData() {
- var data = [];
- var noise = new SimplexNoise(Math.random);
- for (var i = 0; i <= 10; i++) {
- for (var j = 0; j <= 10; j++) {
- var value = noise.noise2D(i / 5, j / 5);
- data.push([i, j, value * 2 + 4]);
- }
- }
- return data;
-}
-
-var series = [];
-for (var i = 0; i < 10; i++) {
- series.push({
- type: 'bar3D',
- data: generateData(),
- stack: 'stack',
- shading: 'lambert',
- emphasis: {
- label: {
- show: false
- }
- }
- });
-}
-
-myChart.setOption({
- xAxis3D: {
- type: 'value'
- },
- yAxis3D: {
- type: 'value'
- },
- zAxis3D: {
- type: 'value'
- },
- grid3D: {
- viewControl: {
- // autoRotate: true
- },
- light: {
- main: {
- shadow: true,
- quality: 'ultra',
- intensity: 1.5
- }
- }
- },
- series: series
-});
-
-});
\ No newline at end of file
diff --git a/public/data-gl/surface-breather.js b/public/data-gl/surface-breather.js
deleted file mode 100644
index 6a1718b..0000000
--- a/public/data-gl/surface-breather.js
+++ /dev/null
@@ -1,119 +0,0 @@
-/*
-title: Breather
-category: surface
-titleCN: Breather
-*/
-
-var sin = Math.sin;
-var cos = Math.cos;
-var pow = Math.pow;
-var sqrt = Math.sqrt;
-var cosh = Math.cosh;
-var sinh = Math.sinh;
-var PI = Math.PI;
-
-var aa = 0.4;
-var r = 1 - aa * aa;
-var w = sqrt(r);
-
-option = {
- toolbox: {
- left: 20,
- iconStyle: {
- normal: {
- borderColor: '#000'
- }
- },
- feature: {
- myExportObj: {
- title: 'Export OBJ',
- icon: 'M4.7,22.9L29.3,45.5L54.7,23.4M4.6,43.6L4.6,58L53.8,58L53.8,43.6M29.2,45.1L29.2,0',
- onclick: function () {
- var res = echarts.exportGL2PLY(myChart, {
- mainType: 'grid3D',
- index: 0
- });
- download(res, 'surface.ply', 'text/plain');
- }
- }
- }
- },
- tooltip: {},
- visualMap: {
- show: false,
- dimension: 2,
- min: -3,
- max: 3,
- inRange: {
- color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
- }
- },
- xAxis3D: {},
- yAxis3D: {},
- zAxis3D: {},
- grid3D: {
- show: true,
- postEffect: {
- enable: true,
- SSAO: {
- enable: true,
- radius: 4
- }
- },
- viewControl: {
- distance: 130,
- beta: 50
- },
- light: {
- main: {
- intensity: 2,
- shadow: true
- },
- ambient: {
- intensity: 0
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/canyon.hdr',
- exposure: 2,
- diffuseIntensity: 0.2,
- specularIntensity: 1
- }
- }
- },
- series: [{
- type: 'surface',
- parametric: true,
- wireframe: {
- show: false
- },
- shading: 'realistic',
- realisticMaterial: {
- roughness: 0.3,
- metalness: 0
- },
- parametricEquation: {
- u: {
- min: -13.2,
- max: 13.2,
- step: 0.2
- },
- v: {
- min: -37.4,
- max: 37.4,
- step: 0.2
- },
- x: function (u, v) {
- var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2))
- return -u + (2 * r * cosh(aa * u) * sinh(aa * u) / denom);
- },
- y: function (u, v) {
- var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2))
- return 2 * w * cosh(aa * u) * (-(w * cos(v) * cos(w * v)) - (sin(v) * sin(w * v))) / denom;
- },
- z: function (u, v) {
- var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2))
- return 2 * w * cosh(aa * u) * (-(w * sin(v) * cos(w * v)) + (cos(v) * sin(w * v))) / denom
- }
- }
- }]
-};
\ No newline at end of file
diff --git a/public/data-gl/surface-golden-rose.js b/public/data-gl/surface-golden-rose.js
deleted file mode 100644
index eb61325..0000000
--- a/public/data-gl/surface-golden-rose.js
+++ /dev/null
@@ -1,159 +0,0 @@
-/*
-title: Golden Rose
-category: surface
-titleCN: Golden Rose
-*/
-
-
-var sin = Math.sin;
-var cos = Math.cos;
-var pow = Math.pow;
-var sqrt = Math.sqrt;
-var cosh = Math.cosh;
-var sinh = Math.sinh;
-var exp = Math.exp;
-var PI = Math.PI;
-var square = function (x) {
- return x*x;
-}
-var mod2 = function (a, b) {
- var c = a % b;
- return c > 0 ? c : (c + b);
-}
-
-var theta1 = -(20/9) * PI;
-var theta2 = 15 * PI;
-function getParametricEquation(dx, dy) {
- return {
- u: {
- min: 0,
- max: 1,
- step: 1 / 24
- },
- v: {
- min: theta1,
- max: theta2,
- step: (theta2 - theta1) / 575
- },
- x: function (x1, theta) {
- var phi = (PI/2)*exp(-theta/(8*PI));
- var y1 = 1.9565284531299512*square(x1)*square(1.2768869870150188*x1-1)*sin(phi);
- var X = 1-square(1.25*square(1-mod2((3.6*theta),(2*PI))/PI)-0.25)/2;
- var r = X*(x1*sin(phi)+y1*cos(phi));
- return r * sin(theta) + dx;
- },
- y: function (x1, theta) {
- var phi = (PI/2)*exp(-theta/(8*PI));
- var y1 = 1.9565284531299512*square(x1)*square(1.2768869870150188*x1-1)*sin(phi);
- var X = 1-square(1.25*square(1-mod2((3.6*theta),(2*PI))/PI)-0.25)/2;
- var r = X*(x1*sin(phi)+y1*cos(phi));
- return r * cos(theta) + dy;
- },
- z: function (x1, theta) {
- var phi = (PI/2)*exp(-theta/(8*PI));
- var y1 = 1.9565284531299512*square(x1)*square(1.2768869870150188*x1-1)*sin(phi);
- var X = 1-square(1.25*square(1-mod2((3.6*theta),(2*PI))/PI)-0.25)/2;
- var r = X*(x1*sin(phi)+y1*cos(phi));
- return X*(x1*cos(phi)-y1*sin(phi));
- }
- };
-}
-
-function createSeries(dx, dy, color) {
- return {
- type: 'surface',
- parametric: true,
- shading: 'realistic',
- silent: true,
- wireframe: {
- show: false
- },
- realisticMaterial: {
- roughness: 0.3,
- metalness: 1
- },
- itemStyle: {
- color: color || [2, 1.5, 0.2]
- },
- parametricEquation: getParametricEquation(dx, dy)
- };
-}
-
-option = {
- toolbox: {
- feature: {
- saveAsImage: {
- backgroundColor: '#111'
- }
- },
- iconStyle: {
- normal: {
- borderColor: '#fff'
- }
- },
- left: 0
- },
- xAxis3D: {
- type: 'value'
- },
- yAxis3D: {
- type: 'value'
- },
- zAxis3D: {
- type: 'value'
- },
- grid3D: {
-
- show: false,
- boxWidth: 200,
- boxDepth: 200,
-
- axisPointer: {
- show: false
- },
- axisLine: {
- lineStyle: {
- color: '#fff'
- }
- },
- postEffect: {
- enable: true,
- SSAO: {
- enable: true,
- radius: 10,
- intensity: 1
- },
- depthOfField: {
- enable: true
- }
- },
- temporalSuperSampling: {
- enable: true
- },
- light: {
- main: {
- intensity: 1,
- shadow: true,
- },
- ambient: {
- intensity: 0
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
- exposure: 1,
- diffuseIntensity: 1,
- specularIntensity: 1
- }
- },
- viewControl: {
- // projection: 'orthographic'
- }
- },
- series: [
- createSeries(1.5, 1.5),
- createSeries(-1.5, -1.5),
- createSeries(-1.5, 1.5),
- createSeries(1.5, -1.5),
- createSeries(0, 0),
- ]
-};
\ No newline at end of file
diff --git a/public/data-gl/surface-leather.js b/public/data-gl/surface-leather.js
deleted file mode 100644
index 10b0a68..0000000
--- a/public/data-gl/surface-leather.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/*
-title: 皮革材质
-category: surface
-titleCN: 皮革材质
-*/
-
-var TILING = [4, 2];
-
-var heightImg = new Image();
-heightImg.onload = update;
-heightImg.crossOrigin = 'anonymous';
-heightImg.src = ROOT_PATH + '/data-gl/asset/leather/leather_height.jpg';
-
-function update() {
- var canvas = document.createElement('canvas');
- var ctx = canvas.getContext('2d');
- var width = canvas.width = heightImg.width;
- var height = canvas.height = heightImg.height;
- ctx.drawImage(heightImg, 0, 0, width, height);
- var imgData = ctx.getImageData(0, 0, width, height).data;
-
- function getScale(u, v) {
- u = (u / Math.PI * 0.5 + 0.5) * TILING[0];
- v = v / Math.PI * TILING[1];
-
- u = Math.floor((u - Math.floor(u)) * (width - 1));
- v = Math.floor((1 - v + Math.floor(v)) * (height - 1));
-
- var idx = v * width + u;
- return 1 + imgData[idx * 4] / 255 / 20;
- }
-
- myChart.setOption({
- xAxis3D: {
- type: 'value',
- min: -1.5,
- max: 1.5
- },
- yAxis3D: {
- type: 'value',
- min: -1.5,
- max: 1.5
- },
- zAxis3D: {
- type: 'value',
- min: -1.5,
- max: 1.5
- },
- grid3D: {
- show: false,
-
- environment: 'none',
-
- axisPointer: {
- show: false
- },
- postEffect: {
- enable: true,
- screenSpaceAmbientOcclusion: {
- enable: true,
- radius: 10,
- intensity: 2,
- quality: 'high'
- },
- screenSpaceReflection: {
- enable: false
- },
- depthOfField: {
- enable: false,
- focalRange: 10,
- fstop: 4
- }
- },
- temporalSuperSampling: {
- enable: true
- },
- light: {
- main: {
- intensity: 2,
- shadow: true
- },
- ambient: {
- intensity: 0
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
- exposure: 1,
- diffuseIntensity: 1,
- specularIntensity: 2
- }
- },
- viewControl: {
- distance: 80
- // projection: 'orthographic'
- }
- },
- series: [{
- type: 'surface',
- parametric: true,
- shading: 'realistic',
- silent: true,
- wireframe: {
- show: false
- },
- realisticMaterial: {
- // detailTexture: 'asset/leather/leather_albedo.jpg',
- roughness: ROOT_PATH + '/data-gl/asset/leather/leather_roughness.jpg',
- normalTexture: ROOT_PATH + '/data-gl/asset/leather/leather_normal.jpg',
- textureTiling: TILING
- },
- itemStyle: {
- color: '#300'
- },
- parametricEquation: {
- u: {
- min: -Math.PI,
- max: Math.PI,
- step: Math.PI / 100
- },
- v: {
- min: 0.4,
- max: Math.PI - 0.4,
- step: Math.PI / 100
- },
- x: function (u, v) {
- return Math.sin(v) * Math.sin(u) * getScale(u, v);
- },
- y: function (u, v) {
- return Math.sin(v) * Math.cos(u) * getScale(u, v);
- },
- z: function (u, v) {
- return Math.cos(v) * getScale(u, v);
- }
- }
- }]
- });
-}
\ No newline at end of file
diff --git a/public/data-gl/surface-mollusc-shell.js b/public/data-gl/surface-mollusc-shell.js
deleted file mode 100644
index 7745288..0000000
--- a/public/data-gl/surface-mollusc-shell.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/*
-title: Mollusc Shell
-category: surface
-titleCN: Mollusc Shell
-*/
-
-option = {
- tooltip: {},
- visualMap: {
- show: false,
- dimension: 2,
- min: -5,
- max: 0,
- inRange: {
- color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
- }
- },
- xAxis3D: {},
- yAxis3D: {},
- zAxis3D: {},
- grid3D: {
- show: true,
- postEffect: {
- enable: true
- },
- temporalSuperSampling: {
- enable: true
- },
- light: {
- main: {
- intensity: 3,
- shadow: true
- },
- ambient: {
- intensity: 0
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/canyon.hdr',
- exposure: 2,
- diffuseIntensity: 1,
- specularIntensity: 1
- }
- }
- },
- series: [{
- type: 'surface',
- parametric: true,
- wireframe: {
- show: false
- },
- shading: 'realistic',
- realisticMaterial: {
- roughness: 0.4,
- metalness: 0
- },
- parametricEquation: {
- u: {
- min: -Math.PI,
- max: Math.PI,
- step: Math.PI / 40
- },
- v: {
- min: -15,
- max: 6,
- step: 0.21
- },
- x: function (u, v) {
- return Math.pow(1.16, v) * Math.cos(v) * (1 + Math.cos(u));
- },
- y: function (u, v) {
- return -Math.pow(1.16, v) * Math.sin(v) * (1 + Math.cos(u));
- },
- z: function (u, v) {
- return -2 * Math.pow(1.16, v) * (1 + Math.sin(u));
- }
- }
- }]
-};
\ No newline at end of file
diff --git a/public/data-gl/surface-theme-roses.js b/public/data-gl/surface-theme-roses.js
deleted file mode 100644
index 376b7cf..0000000
--- a/public/data-gl/surface-theme-roses.js
+++ /dev/null
@@ -1,154 +0,0 @@
-/*
-title: Theme Roses
-category: surface
-titleCN: Theme Roses
-*/
-
-
-var sin = Math.sin;
-var cos = Math.cos;
-var pow = Math.pow;
-var sqrt = Math.sqrt;
-var cosh = Math.cosh;
-var sinh = Math.sinh;
-var exp = Math.exp;
-var PI = Math.PI;
-var square = function (x) {
- return x*x;
-}
-var mod2 = function (a, b) {
- var c = a % b;
- return c > 0 ? c : (c + b);
-}
-
-var theta1 = -(20/9) * PI;
-var theta2 = 15 * PI;
-function getParametricEquation(dx, dy) {
- return {
- u: {
- min: 0,
- max: 1,
- step: 1 / 24
- },
- v: {
- min: theta1,
- max: theta2,
- step: (theta2 - theta1) / 575
- },
- x: function (x1, theta) {
- var phi = (PI/2)*exp(-theta/(8*PI));
- var y1 = 1.9565284531299512*square(x1)*square(1.2768869870150188*x1-1)*sin(phi);
- var X = 1-square(1.25*square(1-mod2((3.6*theta),(2*PI))/PI)-0.25)/2;
- var r = X*(x1*sin(phi)+y1*cos(phi));
- return r * sin(theta) + dx;
- },
- y: function (x1, theta) {
- var phi = (PI/2)*exp(-theta/(8*PI));
- var y1 = 1.9565284531299512*square(x1)*square(1.2768869870150188*x1-1)*sin(phi);
- var X = 1-square(1.25*square(1-mod2((3.6*theta),(2*PI))/PI)-0.25)/2;
- var r = X*(x1*sin(phi)+y1*cos(phi));
- return r * cos(theta) + dy;
- },
- z: function (x1, theta) {
- var phi = (PI/2)*exp(-theta/(8*PI));
- var y1 = 1.9565284531299512*square(x1)*square(1.2768869870150188*x1-1)*sin(phi);
- var X = 1-square(1.25*square(1-mod2((3.6*theta),(2*PI))/PI)-0.25)/2;
- var r = X*(x1*sin(phi)+y1*cos(phi));
- return X*(x1*cos(phi)-y1*sin(phi));
- }
- };
-}
-
-function createSeries(dx, dy, color) {
- return {
- type: 'surface',
- parametric: true,
- shading: 'realistic',
- silent: true,
- wireframe: {
- show: false
- },
- realisticMaterial: {
- roughness: 0.7,
- metalness: 0,
- textureTiling: [200, 20]
- },
- parametricEquation: getParametricEquation(dx, dy)
- };
-}
-
-option = {
- toolbox: {
- feature: {
- saveAsImage: {
- backgroundColor: '#111'
- }
- },
- iconStyle: {
- normal: {
- borderColor: '#fff'
- }
- },
- left: 0
- },
- xAxis3D: {
- type: 'value'
- },
- yAxis3D: {
- type: 'value'
- },
- zAxis3D: {
- type: 'value'
- },
- grid3D: {
-
- show: false,
- boxWidth: 200,
- boxDepth: 200,
-
- axisPointer: {
- show: false
- },
- axisLine: {
- lineStyle: {
- color: '#fff'
- }
- },
- postEffect: {
- enable: true,
- SSAO: {
- enable: true,
- radius: 10,
- intensity: 1
- }
- },
- temporalSuperSampling: {
- enable: true
- },
- light: {
- main: {
- intensity: 1,
- shadow: true,
- },
- ambient: {
- intensity: 0
- },
- ambientCubemap: {
- texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
- exposure: 1,
- diffuseIntensity: 1,
- specularIntensity: 1
- }
- },
- viewControl: {
- // projection: 'orthographic'
- }
- },
- series: [
- createSeries(1.5, 1.5),
- createSeries(-1.5, -1.5),
- createSeries(-1.5, 1.5),
- createSeries(1.5, -1.5),
- createSeries(0, 0),
- ]
-};
\ No newline at end of file
diff --git a/public/data-gl/surface-wave.js b/public/data-gl/surface-wave.js
deleted file mode 100644
index 23c7b24..0000000
--- a/public/data-gl/surface-wave.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
-title: Surface Wave
-category: surface
-titleCN: Surface Wave
-*/
-
-option = {
- tooltip: {},
- backgroundColor: '#fff',
- visualMap: {
- show: false,
- dimension: 2,
- min: -1,
- max: 1,
- inRange: {
- color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
- }
- },
- xAxis3D: {
- type: 'value'
- },
- yAxis3D: {
- type: 'value'
- },
- zAxis3D: {
- type: 'value',
- max: 1,
- splitNumber: 2
- },
- grid3D: {
- viewControl: {
- // projection: 'orthographic'
- },
- boxHeight: 40
- },
- series: [{
- type: 'surface',
- wireframe: {
- show: false
- },
- shading: 'color',
- equation: {
- x: {
- step: 0.05,
- min: -3,
- max: 3,
- },
- y: {
- step: 0.05,
- min: -3,
- max: 3,
- },
- z: function (x, y) {
- return Math.sin(x * x + y * y) * x / 3.14
- }
- }
- }]
-}
\ No newline at end of file
diff --git a/public/examples/ts/gl/animating-contour-on-globe.js b/public/examples/ts/gl/animating-contour-on-globe.js
new file mode 100644
index 0000000..dac7a49
--- /dev/null
+++ b/public/examples/ts/gl/animating-contour-on-globe.js
@@ -0,0 +1,182 @@
+/*
+title: Animating Contour on Globe
+category: globe
+titleCN: Animating Contour on Globe
+videoStart: 2000
+videoEnd: 6000
+*/
+
+var config = {
+ color: '#c0101a',
+ levels: 1,
+ intensity: 4,
+ threshold: 0.01
+};
+
+var canvas = document.createElement('canvas');
+canvas.width = 4096;
+canvas.height = 2048;
+context = canvas.getContext('2d');
+
+context.lineWidth = 0.5;
+context.strokeStyle = config.color;
+context.fillStyle = config.color;
+context.shadowColor = config.color;
+
+$.when(
+ $.getScript('https://cdn.jsdelivr.net/npm/d3-array@2.8.0/dist/d3-array.js'),
+ $.getScript(
+ 'https://cdn.jsdelivr.net/npm/d3-contour@2.0.0/dist/d3-contour.js'
+ ),
+ $.getScript('https://cdn.jsdelivr.net/npm/d3-geo@2.0.1/dist/d3-geo.js'),
+ $.getScript('https://cdn.jsdelivr.net/npm/d3-timer@2.0.0/dist/d3-timer.js')
+).done(function () {
+ image(ROOT_PATH + '/data-gl/asset/bathymetry_bw_composite_4k.jpg').then(
+ function (image) {
+ var m = image.height,
+ n = image.width,
+ values = new Array(n * m),
+ contours = d3.contours().size([n, m]).smooth(true),
+ projection = d3.geoIdentity().scale(canvas.width / n),
+ path = d3.geoPath(projection, context);
+
+ // StackBlur.R(image, 5);
+
+ for (var j = 0, k = 0; j < m; ++j) {
+ for (var i = 0; i < n; ++i, ++k) {
+ values[k] = image.data[k << 2] / 255;
+ }
+ }
+
+ var opt = {
+ image: canvas
+ };
+
+ var results = [];
+ function update(threshold, levels) {
+ context.clearRect(0, 0, canvas.width, canvas.height);
+ var thresholds = [];
+ for (var i = 0; i < levels; i++) {
+ thresholds.push((threshold + (1 / levels) * i) % 1);
+ }
+ results = contours.thresholds(thresholds)(values);
+ redraw();
+ }
+
+ function redraw() {
+ results.forEach(function (d, idx) {
+ context.beginPath();
+ path(d);
+ context.globalAlpha = 1;
+ context.stroke();
+ if (idx > (config.levels / 5) * 3) {
+ context.globalAlpha = 0.01;
+ context.fill();
+ }
+ });
+ opt.onupdate();
+ }
+ d3.timer(function (t) {
+ var threshold = (t % 10000) / 10000;
+ update(threshold, 1);
+ });
+
+ initCharts(opt);
+
+ update(config.threshold, config.levels);
+ }
+ );
+
+ function image(url) {
+ return new Promise(function (resolve) {
+ var image = new Image();
+ image.src = url;
+ image.crossOrigin = 'Anonymous';
+ image.onload = function () {
+ var canvas = document.createElement('canvas');
+ canvas.width = image.width / 8;
+ canvas.height = image.height / 8;
+ var context = canvas.getContext('2d');
+ context.drawImage(image, 0, 0, canvas.width, canvas.height);
+ resolve(context.getImageData(0, 0, canvas.width, canvas.height));
+ };
+ });
+ }
+
+ function initCharts(opt) {
+ var contourChart = echarts.init(document.createElement('canvas'), null, {
+ width: 4096,
+ height: 2048
+ });
+
+ var img = new echarts.graphic.Image({
+ style: {
+ image: opt.image,
+ x: -1,
+ y: -1,
+ width: opt.image.width + 2,
+ height: opt.image.height + 2
+ }
+ });
+ contourChart.getZr().add(img);
+
+ opt.onupdate = function () {
+ img.dirty();
+ };
+
+ myChart.setOption({
+ backgroundColor: '#000',
+ globe: {
+ environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
+
+ heightTexture:
+ ROOT_PATH + '/data-gl/asset/bathymetry_bw_composite_4k.jpg',
+
+ displacementScale: 0.05,
+ displacementQuality: 'high',
+
+ baseColor: '#000',
+
+ shading: 'realistic',
+ realisticMaterial: {
+ roughness: 0.2,
+ metalness: 0
+ },
+
+ postEffect: {
+ enable: true,
+ depthOfField: {
+ // enable: true
+ }
+ },
+ light: {
+ ambient: {
+ intensity: 0
+ },
+ main: {
+ intensity: 0.1,
+ shadow: false
+ },
+ ambientCubemap: {
+ texture: ROOT_PATH + '/data-gl/asset/lake.hdr',
+ exposure: 1,
+ diffuseIntensity: 0.5,
+ specularIntensity: 2
+ }
+ },
+ viewControl: {
+ autoRotate: false
+ },
+
+ layers: [
+ {
+ type: 'blend',
+ blendTo: 'emission',
+ texture: contourChart,
+ intensity: config.intensity
+ }
+ ]
+ }
+ });
+ }
+});
diff --git a/public/examples/ts/gl/bar3d-dataset.js b/public/examples/ts/gl/bar3d-dataset.js
new file mode 100644
index 0000000..0153ca2
--- /dev/null
+++ b/public/examples/ts/gl/bar3d-dataset.js
@@ -0,0 +1,51 @@
+/*
+title: 3D Bar with Dataset
+category: bar3D
+titleCN: 使用 dataset 为三维柱状图设置数据
+*/
+
+$.get(
+ ROOT_PATH + '/data/asset/data/life-expectancy-table.json',
+ function (data) {
+ option = {
+ grid3D: {},
+ tooltip: {},
+ xAxis3D: {
+ type: 'category'
+ },
+ yAxis3D: {
+ type: 'category'
+ },
+ zAxis3D: {},
+ visualMap: {
+ max: 1e8,
+ dimension: 'Population'
+ },
+ dataset: {
+ dimensions: [
+ 'Income',
+ 'Life Expectancy',
+ 'Population',
+ 'Country',
+ { name: 'Year', type: 'ordinal' }
+ ],
+ source: data
+ },
+ series: [
+ {
+ type: 'bar3D',
+ // symbolSize: symbolSize,
+ shading: 'lambert',
+ encode: {
+ x: 'Year',
+ y: 'Country',
+ z: 'Life Expectancy',
+ tooltip: [0, 1, 2, 3, 4]
+ }
+ }
+ ]
+ };
+
+ myChart.setOption(option);
+ }
+);
diff --git a/public/examples/ts/gl/bar3d-global-population.js b/public/examples/ts/gl/bar3d-global-population.js
new file mode 100644
index 0000000..d234396
--- /dev/null
+++ b/public/examples/ts/gl/bar3d-global-population.js
@@ -0,0 +1,109 @@
+/*
+title: Bar3D - Global Population
+category: bar3D
+titleCN: Bar3D - Global Population
+*/
+
+$.getJSON(ROOT_PATH + '/data-gl/asset/data/population.json', function (data) {
+ data = data
+ .filter(function (dataItem) {
+ return dataItem[2] > 0;
+ })
+ .map(function (dataItem) {
+ return [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])];
+ });
+
+ myChart.setOption({
+ backgroundColor: '#cdcfd5',
+ geo3D: {
+ map: 'world',
+ shading: 'lambert',
+ light: {
+ main: {
+ intensity: 5,
+ shadow: true,
+ shadowQuality: 'high',
+ alpha: 30
+ },
+ ambient: {
+ intensity: 0
+ },
+ ambientCubemap: {
+ texture: 'data-gl/asset/canyon.hdr',
+ exposure: 1,
+ diffuseIntensity: 0.5
+ }
+ },
+ viewControl: {
+ distance: 50,
+ panMouseButton: 'left',
+ rotateMouseButton: 'right'
+ },
+ groundPlane: {
+ show: true,
+ color: '#999'
+ },
+ postEffect: {
+ enable: true,
+ bloom: {
+ enable: false
+ },
+ SSAO: {
+ radius: 1,
+ intensity: 1,
+ enable: true
+ },
+ depthOfField: {
+ enable: false,
+ focalRange: 10,
+ blurRadius: 10,
+ fstop: 1
+ }
+ },
+ temporalSuperSampling: {
+ enable: true
+ },
+ itemStyle: {},
+
+ regionHeight: 2
+ },
+ visualMap: {
+ max: 40,
+ calculable: true,
+ realtime: false,
+ inRange: {
+ color: [
+ '#313695',
+ '#4575b4',
+ '#74add1',
+ '#abd9e9',
+ '#e0f3f8',
+ '#ffffbf',
+ '#fee090',
+ '#fdae61',
+ '#f46d43',
+ '#d73027',
+ '#a50026'
+ ]
+ },
+ outOfRange: {
+ colorAlpha: 0
+ }
+ },
+ series: [
+ {
+ type: 'bar3D',
+ coordinateSystem: 'geo3D',
+ shading: 'lambert',
+ data: data,
+ barSize: 0.1,
+ minHeight: 0.2,
+ silent: true,
+ itemStyle: {
+ color: 'orange'
+ // opacity: 0.8
+ }
+ }
+ ]
+ });
+});
diff --git a/public/examples/ts/gl/bar3d-mapbox-view-change.js b/public/examples/ts/gl/bar3d-mapbox-view-change.js
new file mode 100644
index 0000000..befb244
--- /dev/null
+++ b/public/examples/ts/gl/bar3d-mapbox-view-change.js
@@ -0,0 +1,118 @@
+/*
+title: Mapbox 视角切换
+category: bar3D
+titleCN: Mapbox 视角切换
+*/
+
+mapboxgl.accessToken = mapboxglToken;
+
+$.getJSON(ROOT_PATH + '/data-gl/asset/data/population.json', function (data) {
+ data = data
+ .filter(function (dataItem) {
+ return dataItem[2] > 0;
+ })
+ .map(function (dataItem) {
+ return [dataItem[0], dataItem[1], dataItem[2]];
+ });
+
+ myChart.setOption({
+ title: {
+ text: '空格键切换视角',
+ left: 'center'
+ },
+ visualMap: {
+ show: false,
+ max: 1000,
+ calculable: true,
+ realtime: false,
+ inRange: {
+ color: [
+ '#313695',
+ '#4575b4',
+ '#74add1',
+ '#abd9e9',
+ '#e0f3f8',
+ '#ffffbf',
+ '#fee090',
+ '#fdae61',
+ '#f46d43',
+ '#d73027',
+ '#a50026'
+ ]
+ },
+ outOfRange: {
+ colorAlpha: 0
+ }
+ },
+ mapbox: {
+ center: [104.114129, 37.550339],
+ zoom: 3,
+ pitch: 50,
+ bearing: -10,
+ style: 'mapbox://styles/mapbox/light-v9',
+ boxHeight: 20,
+ // altitudeScale: 3e2,
+ postEffect: {
+ enable: true,
+ SSAO: {
+ enable: true,
+ radius: 2
+ }
+ },
+ light: {
+ main: {
+ intensity: 2,
+ shadow: true,
+ shadowQuality: 'high'
+ },
+ ambient: {
+ intensity: 0
+ },
+ ambientCubemap: {
+ texture: ROOT_PATH + '/data-gl/asset/canyon.hdr',
+ exposure: 2,
+ diffuseIntensity: 0.5
+ }
+ }
+ },
+ series: [
+ {
+ type: 'bar3D',
+ coordinateSystem: 'mapbox',
+ shading: 'lambert',
+ minHeight: 0.1,
+ barSize: 0.3,
+ data: data,
+ silent: true
+ }
+ ]
+ });
+
+ function top() {
+ myChart.setOption({
+ mapbox: {
+ pitch: 0,
+ bearing: 0,
+ boxHeight: 0
+ }
+ });
+ }
+
+ function perspective() {
+ myChart.setOption({
+ mapbox: {
+ pitch: 50,
+ bearing: -10,
+ boxHeight: 20
+ }
+ });
+ }
+
+ var isPerspective = true;
+ window.addEventListener('keydown', function (e) {
+ if (e.keyCode === 32) {
+ isPerspective ? top() : perspective();
+ isPerspective = !isPerspective;
+ }
+ });
+});
diff --git a/public/examples/ts/gl/bar3d-music-visualization.js b/public/examples/ts/gl/bar3d-music-visualization.js
new file mode 100644
index 0000000..52b5d98
--- /dev/null
+++ b/public/examples/ts/gl/bar3d-music-visualization.js
@@ -0,0 +1,161 @@
+/*
+title: Music Visualization
+category: bar3D
+titleCN: Music Visualization
+*/
+
+var UPDATE_DURATION = 100;
+
+window.AudioContext = window.AudioContext || window.webkitAudioContext;
+
+var audioContext = new AudioContext();
+
+var oReq = new XMLHttpRequest();
+oReq.open('GET', ROOT_PATH + '/data/asset/sound/roll-it-up.mp3', true);
+oReq.responseType = 'arraybuffer';
+
+oReq.onload = function (e) {
+ audioContext.decodeAudioData(oReq.response, initVisualizer);
+};
+oReq.send();
+
+function initVisualizer(audioBuffer) {
+ inited = true;
+
+ var source = audioContext.createBufferSource();
+ source.buffer = audioBuffer;
+
+ // Must invoked right after click event
+ if (source.noteOn) {
+ source.noteOn(0);
+ } else {
+ source.start(0);
+ }
+
+ var analyzer = audioContext.createAnalyser();
+ var gainNode = audioContext.createGain();
+ analyzer.fftSize = 4096;
+
+ gainNode.gain.value = 1;
+ source.connect(gainNode);
+ gainNode.connect(analyzer);
+ analyzer.connect(audioContext.destination);
+
+ var frequencyBinCount = analyzer.frequencyBinCount;
+ var dataArray = new Uint8Array(frequencyBinCount);
+
+ var beta = 0;
+ function update() {
+ analyzer.getByteFrequencyData(dataArray);
+
+ var item = [];
+ var size = 50;
+ var dataProvider = [];
+
+ for (var i = 0; i < size * size; i++) {
+ var x = i % size;
+ var y = Math.floor(i / size);
+ var dx = x - size / 2;
+ var dy = y - size / 2;
+
+ var angle = Math.atan2(dy, dx);
+ if (angle < 0) {
+ angle = Math.PI * 2 + angle;
+ }
+ var dist = Math.sqrt(dx * dx + dy * dy);
+ var idx = Math.min(
+ frequencyBinCount - 1,
+ Math.round((angle / Math.PI / 2) * 60 + dist * 60) + 100
+ );
+
+ var val = Math.pow(dataArray[idx] / 100, 3);
+ dataProvider.push([x, y, Math.max(val, 0.1)]);
+ }
+
+ myChart.setOption({
+ grid3D: {
+ viewControl: {
+ beta: beta,
+ alpha:
+ ((Math.sin(beta / 10 + 40) * ((beta % 10) + 5)) / 15) * 30 + 30,
+ distance:
+ ((Math.cos(beta / 50 + 20) * ((beta % 10) + 5)) / 15) * 50 + 80,
+ animationDurationUpdate: UPDATE_DURATION,
+ animationEasingUpdate: 'linear'
+ }
+ },
+ series: [
+ {
+ data: dataProvider
+ }
+ ]
+ });
+ beta += 2;
+
+ setTimeout(update, UPDATE_DURATION);
+ }
+
+ update();
+}
+
+option = {
+ tooltip: {},
+ visualMap: {
+ show: false,
+ min: 0.1,
+ max: 4,
+ inRange: {
+ color: ['#010103', '#2f490c', '#b0b70f', '#fdff44', '#fff']
+ }
+ },
+ xAxis3D: {
+ type: 'value'
+ },
+ yAxis3D: {
+ type: 'value'
+ },
+ zAxis3D: {
+ type: 'value',
+ min: -6,
+ max: 6
+ },
+ grid3D: {
+ show: false,
+ environment: '#000',
+ viewControl: {
+ distance: 100
+ },
+ postEffect: {
+ enable: true,
+ FXAA: {
+ enable: true
+ }
+ },
+ light: {
+ main: {
+ shadow: true,
+ intensity: 10,
+ quality: 'high'
+ },
+ ambientCubemap: {
+ texture: ROOT_PATH + '/data-gl/asset/canyon.hdr',
+ exposure: 0,
+ diffuseIntensity: 0.2
+ }
+ }
+ },
+ series: [
+ {
+ type: 'bar3D',
+ silent: true,
+ shading: 'lambert',
+ data: [],
+ barSize: 1,
+ lineStyle: {
+ width: 4
+ },
+ // animation: false,
+ animationDurationUpdate: UPDATE_DURATION
+ }
+ ]
+};
diff --git a/public/examples/ts/gl/bar3d-myth.js b/public/examples/ts/gl/bar3d-myth.js
new file mode 100644
index 0000000..137bf79
--- /dev/null
+++ b/public/examples/ts/gl/bar3d-myth.js
@@ -0,0 +1,107 @@
+/*
+title: 星云
+category: bar3D
+titleCN: 星云
+*/
+
+var img = new Image();
+var canvas = document.createElement('canvas');
+var ctx = canvas.getContext('2d');
+
+img.onload = function () {
+ var width = (canvas.width = img.width);
+ var height = (canvas.height = img.height);
+ ctx.drawImage(img, 0, 0, width, height);
+ var imgData = ctx.getImageData(0, 0, width, height);
+
+ var data = new Float32Array((imgData.data.length / 4) * 3);
+ var off = 0;
+ for (var i = 0; i < imgData.data.length / 4; i++) {
+ var r = imgData.data[i * 4];
+ var g = imgData.data[i * 4 + 1];
+ var b = imgData.data[i * 4 + 2];
+
+ var lum = 0.2125 * r + 0.7154 * g + 0.0721 * b;
+ lum = (lum - 125) / 4 + 50;
+
+ data[off++] = i % width;
+ data[off++] = height - Math.floor(i / width);
+ data[off++] = lum;
+ }
+
+ myChart.setOption(
+ (option = {
+ tooltip: {},
+ backgroundColor: '#fff',
+ xAxis3D: {
+ type: 'value'
+ },
+ yAxis3D: {
+ type: 'value'
+ },
+ zAxis3D: {
+ type: 'value',
+ min: 0,
+ max: 100
+ },
+ grid3D: {
+ show: false,
+ viewControl: {
+ alpha: 70,
+ beta: 0
+ },
+ postEffect: {
+ enable: true,
+ depthOfField: {
+ enable: true,
+ blurRadius: 4,
+ fstop: 10
+ }
+ // SSAO: {
+ // enable: true
+ // }
+ },
+ boxDepth: 100,
+ boxHeight: 20,
+ environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
+ light: {
+ main: {
+ shadow: true,
+ intensity: 2
+ },
+ ambientCubemap: {
+ texture: ROOT_PATH + '/data-gl/asset/canyon.hdr',
+ exposure: 2,
+ diffuseIntensity: 0.2
+ }
+ }
+ },
+ series: [
+ {
+ type: 'bar3D',
+ shading: 'lambert',
+ barSize: 0.8,
+ silent: true,
+ dimensions: ['x', 'y', 'z'],
+ itemStyle: {
+ color: function (params) {
+ var i = params.dataIndex;
+ var r = imgData.data[i * 4] / 255;
+ var g = imgData.data[i * 4 + 1] / 255;
+ var b = imgData.data[i * 4 + 2] / 255;
+ var lum = 0.2125 * r + 0.7154 * g + 0.0721 * b;
+ r *= lum * 2;
+ g *= lum * 2;
+ b *= lum * 2;
+ return [r, g, b, 1];
+ }
+ },
+ data: data
+ }
+ ]
+ })
+ );
+};
+
+img.src = ROOT_PATH + '/data-gl/asset/sample.jpg';
+img.crossOrigin = 'Anonymous';
diff --git a/public/examples/ts/gl/bar3d-noise-modified-from-marpi-demo.js b/public/examples/ts/gl/bar3d-noise-modified-from-marpi-demo.js
new file mode 100644
index 0000000..a0db195
--- /dev/null
+++ b/public/examples/ts/gl/bar3d-noise-modified-from-marpi-demo.js
@@ -0,0 +1,216 @@
+/*
+title: Noise modified from marpi's demo
+category: bar3D
+titleCN: Noise modified from marpi's demo
+*/
+
+$.getScript(
+ 'https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
+).done(function () {
+ var simplex = new SimplexNoise();
+
+ window.onresize = myChart.resize;
+
+ var UPDATE_DURATION = 1000;
+
+ function initVisualizer() {
+ var config = {
+ numWaves: 2,
+ randomize: randomize,
+ color1: '#000',
+ color2: '#300',
+ color3: '#fff',
+ size: 150,
+ roughness: 0.5,
+ metalness: 0
+ };
+
+ //gui.add(config, "numWaves", 1, 3).name("Waves number").onChange(update).listen();
+ for (var i = 0; i < 2; i++) {
+ config['wave' + i + 'axis' + 'x'] = Math.random();
+ config['wave' + i + 'axis' + 'y'] = Math.random();
+ config['wave' + i + 'rounding'] = Math.random();
+ config['wave' + i + 'square'] = Math.random();
+ }
+
+ function randomize() {
+ //config.numWaves = Math.floor(Math.random() * 3) + 1;
+ for (var i = 0; i < 2; i++) {
+ config['wave' + i + 'axis' + 'x'] = Math.random();
+ config['wave' + i + 'axis' + 'y'] = Math.random();
+ config['wave' + i + 'rounding'] = Math.random();
+ config['wave' + i + 'square'] = Math.random();
+ }
+
+ // Iterate over all controllers
+ for (var i in gui.__controllers) {
+ gui.__controllers[i].updateDisplay();
+ }
+ update();
+ }
+
+ function update() {
+ var item = [];
+ var dataProvider = [];
+
+ var mod = 0.1;
+
+ //config.numWaves = Math.round(config.numWaves)
+
+ //var occurenceR = Math.random() * .02
+ //var r = 0//Math.random()
+ for (var s = 0; s < config.size * config.size; s++) {
+ var x = s % config.size;
+ var y = Math.floor(s / config.size);
+
+ //if (Math.random() < occurenceR)
+ // r = Math.random()
+
+ var output = 0;
+ for (var i = 0; i < config.numWaves; i++) {
+ var n = simplex.noise2D(
+ i * 213 +
+ (-50 + x) * mod * (1 - config['wave' + i + 'axis' + 'x']) * 0.5,
+ i * 3124 +
+ (-50 + y) * mod * (1 - config['wave' + i + 'axis' + 'y']) * 0.5
+ );
+ n = Math.pow(n, 1.95 - 1.9 * config['wave' + i + 'rounding']);
+ var square = Math.floor((1.1 - config['wave' + i + 'square']) * 100);
+ n = Math.round(n * square) / square;
+ //output*=n
+ if (output < n) output = n;
+ }
+ dataProvider.push([x, y, (output + 0.1) * 2]);
+ }
+
+ myChart.setOption({
+ visualMap: {
+ inRange: {
+ barSize: 100 / config.size,
+ color: [config.color1, config.color2, config.color3]
+ }
+ },
+ series: [
+ {
+ data: dataProvider,
+ realisticMaterial: {
+ roughness: config.roughness,
+ metalness: config.metalness
+ }
+ }
+ ]
+ });
+ //setTimeout(update, UPDATE_DURATION);
+ }
+
+ update();
+ }
+ var focalRange = 40;
+ var blurRadius = 4;
+
+ myChart.setOption(
+ (option = {
+ toolbox: {
+ left: 20,
+ iconStyle: {
+ normal: {
+ borderColor: '#fff'
+ }
+ }
+ },
+ tooltip: {},
+ visualMap: {
+ show: false,
+ min: 0.1,
+ max: 2.5,
+ inRange: {
+ color: ['#000', '#300', '#fff']
+ }
+ },
+ xAxis3D: {
+ type: 'value'
+ },
+ yAxis3D: {
+ type: 'value'
+ },
+ zAxis3D: {
+ type: 'value',
+ min: -6,
+ max: 6
+ },
+ grid3D: {
+ show: false,
+ environment: '#000',
+ viewControl: {
+ distance: 100,
+ maxDistance: 150,
+ minDistance: 50,
+ alpha: 38,
+ beta: 220,
+ minAlpha: 10
+ //maxBeta: 360,
+ },
+ postEffect: {
+ enable: true,
+ SSAO: {
+ enable: true,
+ intensity: 1.3,
+ radius: 5
+ },
+ screenSpaceReflection: {
+ enable: false
+ },
+ depthOfField: {
+ enable: true,
+ blurRadius: blurRadius,
+ focalRange: focalRange,
+ focalDistance: 70
+ }
+ },
+ light: {
+ main: {
+ intensity: 1,
+ shadow: true,
+ shadowQuality: 'high',
+ alpha: 30
+ },
+ ambient: {
+ intensity: 0
+ },
+ ambientCubemap: {
+ texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
+ exposure: 2,
+ diffuseIntensity: 1,
+ specularIntensity: 1
+ }
+ }
+ },
+ series: [
+ {
+ type: 'bar3D',
+ silent: true,
+ shading: 'realistic',
+ realisticMaterial: {
+ roughness: 0.5,
+ metalness: 0
+ },
+ instancing: true,
+ barSize: 0.6,
+ data: [],
+ lineStyle: {
+ width: 4
+ },
+ itemStyle: {
+ color: '#fff'
+ },
+ animation: false,
+ animationDurationUpdate: UPDATE_DURATION
+ }
+ ]
+ })
+ );
+
+ setTimeout(function () {
+ initVisualizer();
+ });
+});
diff --git a/public/examples/ts/gl/bar3d-on-mapbox.js b/public/examples/ts/gl/bar3d-on-mapbox.js
new file mode 100644
index 0000000..4bd5148
--- /dev/null
+++ b/public/examples/ts/gl/bar3d-on-mapbox.js
@@ -0,0 +1,86 @@
+/*
+title: Bar3D on Mapbox
+category: bar3D
+titleCN: Bar3D on Mapbox
+*/
+
+mapboxgl.accessToken =
+ 'pk.eyJ1IjoicGlzc2FuZyIsImEiOiJjaXBnaGYxcW8wMDFodWNtNDc4NzdqMWR2In0.4XUWeduDltiCbsIiS-U8Lg';
+
+$.getJSON(ROOT_PATH + '/data-gl/asset/data/population.json', function (data) {
+ data = data
+ .filter(function (dataItem) {
+ return dataItem[2] > 0;
+ })
+ .map(function (dataItem) {
+ return [dataItem[0], dataItem[1], dataItem[2]];
+ });
+
+ myChart.setOption({
+ visualMap: {
+ show: false,
+ max: 1000,
+ calculable: true,
+ realtime: false,
+ inRange: {
+ color: [
+ '#313695',
+ '#4575b4',
+ '#74add1',
+ '#abd9e9',
+ '#e0f3f8',
+ '#ffffbf',
+ '#fee090',
+ '#fdae61',
+ '#f46d43',
+ '#d73027',
+ '#a50026'
+ ]
+ },
+ outOfRange: {
+ colorAlpha: 0
+ }
+ },
+ mapbox: {
+ center: [104.114129, 37.550339],
+ zoom: 3,
+ pitch: 50,
+ bearing: -10,
+ style: 'mapbox://styles/mapbox/light-v9',
+ altitudeScale: 3e2,
+ postEffect: {
+ enable: true,
+ SSAO: {
+ enable: true,
+ radius: 2
+ }
+ },
+ light: {
+ main: {
+ intensity: 2,
+ shadow: true,
+ shadowQuality: 'high'
+ },
+ ambient: {
+ intensity: 0
+ },
+ ambientCubemap: {
+ texture: ROOT_PATH + '/asset/canyon.hdr',
+ exposure: 2,
+ diffuseIntensity: 0.5
+ }
+ }
+ },
+ series: [
+ {
+ type: 'bar3D',
+ coordinateSystem: 'mapbox',
+ shading: 'lambert',
+ minHeight: 0.1,
+ barSize: 0.3,
+ data: data,
+ silent: true
+ }
+ ]
+ });
+});
diff --git a/public/data-gl/bar3d-punch-card.js b/public/examples/ts/gl/bar3d-punch-card.js
similarity index 61%
rename from public/data-gl/bar3d-punch-card.js
rename to public/examples/ts/gl/bar3d-punch-card.js
index c9b37af..255987b 100644
--- a/public/data-gl/bar3d-punch-card.js
+++ b/public/examples/ts/gl/bar3d-punch-card.js
@@ -4,72 +4,89 @@ category: bar3D
titleCN: Bar3D - Punch Card
*/
-
+// prettier-ignore
var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
'7a', '8a', '9a','10a','11a',
'12p', '1p', '2p', '3p', '4p', '5p',
'6p', '7p', '8p', '9p', '10p', '11p'];
+
+// prettier-ignore
var days = ['Saturday', 'Friday', 'Thursday',
'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
+// prettier-ignore
var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2 [...]
option = {
- tooltip: {},
- visualMap: {
- max: 20,
- inRange: {
- color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
- }
- },
- xAxis3D: {
- type: 'category',
- data: hours
- },
- yAxis3D: {
- type: 'category',
- data: days
- },
- zAxis3D: {
- type: 'value'
+ tooltip: {},
+ visualMap: {
+ max: 20,
+ inRange: {
+ color: [
+ '#313695',
+ '#4575b4',
+ '#74add1',
+ '#abd9e9',
+ '#e0f3f8',
+ '#ffffbf',
+ '#fee090',
+ '#fdae61',
+ '#f46d43',
+ '#d73027',
+ '#a50026'
+ ]
+ }
+ },
+ xAxis3D: {
+ type: 'category',
+ data: hours
+ },
+ yAxis3D: {
+ type: 'category',
+ data: days
+ },
+ zAxis3D: {
+ type: 'value'
+ },
+ grid3D: {
+ boxWidth: 200,
+ boxDepth: 80,
+ viewControl: {
+ // projection: 'orthographic'
},
- grid3D: {
- boxWidth: 200,
- boxDepth: 80,
- viewControl: {
- // projection: 'orthographic'
- },
- light: {
- main: {
- intensity: 1.2,
- shadow: true
- },
- ambient: {
- intensity: 0.3
- }
- }
- },
- series: [{
- type: 'bar3D',
- data: data.map(function (item) {
- return {
- value: [item[1], item[0], item[2]],
- }
- }),
- shading: 'lambert',
+ light: {
+ main: {
+ intensity: 1.2,
+ shadow: true
+ },
+ ambient: {
+ intensity: 0.3
+ }
+ }
+ },
+ series: [
+ {
+ type: 'bar3D',
+ data: data.map(function (item) {
+ return {
+ value: [item[1], item[0], item[2]]
+ };
+ }),
+ shading: 'lambert',
+ label: {
+ fontSize: 16,
+ borderWidth: 1
+ },
+
+ emphasis: {
label: {
- fontSize: 16,
- borderWidth: 1
+ fontSize: 20,
+ color: '#900'
},
-
- emphasis: {
- label: {
- fontSize: 20,
- color: '#900'
- },
- itemStyle: {
- color: '#900'
- }
+ itemStyle: {
+ color: '#900'
}
- }]
-}
\ No newline at end of file
+ }
+ }
+ ]
+};
diff --git a/public/examples/ts/gl/bar3d-shanghai.js b/public/examples/ts/gl/bar3d-shanghai.js
new file mode 100644
index 0000000..0543425
--- /dev/null
+++ b/public/examples/ts/gl/bar3d-shanghai.js
@@ -0,0 +1,84 @@
+/*
+title: 上海房价可视化 GL 版
+category: bar3D
+titleCN: 上海房价可视化 GL 版
+*/
+
+var uploadedDataURL =
+ ROOT_PATH + '/asset/get/s/data-1495284690309-Bk9Ro3Te-.json';
+mapboxgl.accessToken = mapboxglToken;
+
+myChart.showLoading();
+
+$.getJSON(uploadedDataURL, function (linedata) {
+ myChart.hideLoading();
+
+ myChart.setOption({
+ visualMap: {
+ show: false,
+ calculable: true,
+ realtime: false,
+ inRange: {
+ color: [
+ '#313695',
+ '#4575b4',
+ '#74add1',
+ '#abd9e9',
+ '#e0f3f8',
+ '#ffffbf',
+ '#fee090',
+ '#fdae61',
+ '#f46d43',
+ '#d73027',
+ '#a50026'
+ ]
+ },
+ outOfRange: {
+ colorAlpha: 0
+ },
+ max: linedata[1]
+ },
+ mapbox: {
+ center: [121.4693, 31.12307],
+ zoom: 10,
+ pitch: 50,
+ bearing: -10,
+ style: 'mapbox://styles/mapbox/light-v9',
+ boxHeight: 50,
+ // altitudeScale: 3e2,
+ postEffect: {
+ enable: true,
+ SSAO: {
+ enable: true,
+ radius: 2,
+ intensity: 1.5
+ }
+ },
+ light: {
+ main: {
+ intensity: 1,
+ shadow: true,
+ shadowQuality: 'high'
+ },
+ ambient: {
+ intensity: 0
+ },
+ ambientCubemap: {
+ texture: ROOT_PATH + '/data-gl/asset/canyon.hdr',
+ exposure: 1,
+ diffuseIntensity: 0.5
+ }
+ }
+ },
+ series: [
+ {
+ type: 'bar3D',
+ shading: 'realistic',
+ coordinateSystem: 'mapbox',
+ barSize: 0.2,
+ silent: true,
+ data: linedata[0]
+ }
+ ]
+ });
+});
diff --git a/public/examples/ts/gl/bar3d-simplex-noise.js b/public/examples/ts/gl/bar3d-simplex-noise.js
new file mode 100644
index 0000000..39788c9
--- /dev/null
+++ b/public/examples/ts/gl/bar3d-simplex-noise.js
@@ -0,0 +1,94 @@
+/*
+title: Bar3D - Simplex Noise
+category: bar3D
+titleCN: Bar3D - Simplex Noise
+theme: dark
+*/
+
+$.getScript(
+ 'https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
+).done(function () {
+ var noise = new SimplexNoise(Math.random);
+ function generateData(theta, min, max) {
+ var data = [];
+ for (var i = 0; i <= 50; i++) {
+ for (var j = 0; j <= 50; j++) {
+ var value = noise.noise2D(i / 20, j / 20);
+ valMax = Math.max(valMax, value);
+ valMin = Math.min(valMin, value);
+ data.push([i, j, value * 2 + 4]);
+ }
+ }
+ return data;
+ }
+ var valMin = Infinity;
+ var valMax = -Infinity;
+ var data = generateData(2, -5, 5);
+ console.log(valMin, valMax);
+
+ myChart.setOption(
+ (option = {
+ visualMap: {
+ show: false,
+ min: 2,
+ max: 6,
+ inRange: {
+ color: [
+ '#313695',
+ '#4575b4',
+ '#74add1',
+ '#abd9e9',
+ '#e0f3f8',
+ '#ffffbf',
+ '#fee090',
+ '#fdae61',
+ '#f46d43',
+ '#d73027',
+ '#a50026'
+ ]
+ }
+ },
+ xAxis3D: {
+ type: 'value'
+ },
+ yAxis3D: {
+ type: 'value'
+ },
+ zAxis3D: {
+ type: 'value',
+ max: 10,
+ min: 0
+ },
+ grid3D: {
+ axisLine: {
+ lineStyle: { color: '#fff' }
+ },
+ axisPointer: {
+ lineStyle: { color: '#fff' }
+ },
+ viewControl: {
+ // autoRotate: true
+ },
+ light: {
+ main: {
+ shadow: true,
+ quality: 'ultra',
+ intensity: 1.5
+ }
+ }
+ },
+ series: [
+ {
+ type: 'bar3D',
+ data: data,
+ shading: 'lambert',
+ label: {
+ formatter: function (param) {
+ return param.value[2].toFixed(1);
+ }
+ }
+ }
+ ]
+ })
+ );
+});
diff --git a/public/examples/ts/gl/bar3d-voxelize-image.js b/public/examples/ts/gl/bar3d-voxelize-image.js
new file mode 100644
index 0000000..fcb2ecb
--- /dev/null
+++ b/public/examples/ts/gl/bar3d-voxelize-image.js
@@ -0,0 +1,175 @@
+/*
+title: Voxelize image
+category: bar3D
+titleCN: Voxelize image
+*/
+
+var canvas = document.createElement('canvas');
+var ctx = canvas.getContext('2d');
+
+var imgData;
+var currentImg;
+
+// Configurations
+var config = {
+ scale: 0.3,
+ roughness: 0,
+ metalness: 1,
+ projection: 'orthographic',
+ depthOfField: 4,
+ lockY: false,
+ move: true,
+ sameColor: false,
+ color: '#777',
+ colorContrast: 1.2,
+ lightIntensity: 1,
+ lightColor: '#fff',
+ lightRotate: 30,
+ lightPitch: 40,
+ AO: 1.5,
+ showEnvironment: false,
+
+ barNumber: 80,
+ barBevel: 0.18,
+ barSize: 1.2
+};
+
+option = {
+ tooltip: {},
+ backgroundColor: '#000',
+ xAxis3D: {
+ type: 'value'
+ },
+ yAxis3D: {
+ type: 'value'
+ },
+ zAxis3D: {
+ type: 'value',
+ min: 0,
+ max: 100
+ },
+ grid3D: {
+ show: false,
+ viewControl: {
+ projection: 'perspective',
+ alpha: 45,
+ beta: -45,
+ panSensitivity: config.move ? 1 : 0,
+ rotateSensitivity: config.lockY ? [1, 0] : 1,
+ damping: 0.9,
+ distance: 60
+ },
+ postEffect: {
+ enable: true,
+ bloom: {
+ intensity: 0.2
+ },
+ screenSpaceAmbientOcclusion: {
+ enable: true,
+ intensity: 1.5,
+ radius: 5,
+ quality: 'high'
+ },
+ screenSpaceReflection: {
+ enable: true
+ },
+ depthOfField: {
+ enable: true,
+ blurRadius: config.depthOfField,
+ fstop: 10,
+ focalDistance: 55
+ }
+ },
+ boxDepth: 100,
+ boxHeight: 20,
+ environment: 'none',
+ light: {
+ main: {
+ shadow: true,
+ intensity: 2
+ },
+ ambientCubemap: {
+ texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
+ exposure: 2,
+ diffuseIntensity: 0.2,
+ specularIntensity: 1.5
+ }
+ }
+ }
+};
+
+function updateData(pixelData, width, height) {
+ console.time('update');
+ var data = new Float32Array((pixelData.length / 4) * 3);
+ var off = 0;
+ for (var i = 0; i < pixelData.length / 4; i++) {
+ var r = pixelData[i * 4];
+ var g = pixelData[i * 4 + 1];
+ var b = pixelData[i * 4 + 2];
+
+ var lum = 0.2125 * r + 0.7154 * g + 0.0721 * b;
+ lum = (lum - 125) * config.scale + 50;
+ data[off++] = i % width;
+ data[off++] = height - Math.floor(i / width);
+ data[off++] = lum;
+ }
+
+ myChart.setOption({
+ grid3D: {
+ boxWidth: (100 / height) * width
+ },
+ series: [
+ {
+ animation: false,
+ type: 'bar3D',
+ shading: 'realistic',
+ realisticMaterial: {
+ roughness: config.roughness,
+ metalness: config.metalness
+ },
+ barSize: config.barSize,
+ bevelSize: config.barBevel,
+ silent: true,
+ dimensions: ['x', 'y', 'z'],
+ itemStyle: {
+ color: config.sameColor
+ ? config.color
+ : function (params) {
+ var i = params.dataIndex;
+ var r = pixelData[i * 4] / 255;
+ var g = pixelData[i * 4 + 1] / 255;
+ var b = pixelData[i * 4 + 2] / 255;
+ var lum = 0.2125 * r + 0.7154 * g + 0.0721 * b;
+ r *= lum * config.colorContrast;
+ g *= lum * config.colorContrast;
+ b *= lum * config.colorContrast;
+ return [r, g, b, 1];
+ }
+ },
+ data: data
+ }
+ ]
+ });
+
+ console.timeEnd('update');
+}
+
+function loadImage(img) {
+ var height = (canvas.height = Math.min(config.barNumber, img.height));
+ var aspect = img.width / img.height;
+ var width = (canvas.width = Math.round(height * aspect));
+
+ ctx.drawImage(img, 0, 0, width, height);
+
+ imgData = ctx.getImageData(0, 0, width, height);
+
+ updateData(imgData.data, width, height);
+}
+
+// Default
+var img = new Image();
+img.onload = function () {
+ loadImage(img);
+ currentImg = img;
+};
+img.src = ROOT_PATH + '/data-gl/asset/bitcoin.png';
diff --git a/public/examples/ts/gl/flowGL-noise.js b/public/examples/ts/gl/flowGL-noise.js
new file mode 100644
index 0000000..11810a4
--- /dev/null
+++ b/public/examples/ts/gl/flowGL-noise.js
@@ -0,0 +1,125 @@
+/*
+title: Flow on the cartesian
+category: flowGL
+titleCN: 直角坐标系上的向量场
+theme: dark
+videoStart: 2000
+videoEnd: 10000
+*/
+
+$.getScript(
+ 'https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
+).done(function () {
+ var noise = new SimplexNoise(Math.random);
+ var noise2 = new SimplexNoise(Math.random);
+ function generateData() {
+ var data = [];
+ for (var i = 0; i <= 50; i++) {
+ for (var j = 0; j <= 50; j++) {
+ var dx = noise.noise2D(i / 30, j / 30);
+ var dy = noise2.noise2D(i / 30, j / 30);
+ var mag = Math.sqrt(dx * dx + dy * dy);
+ valMax = Math.max(valMax, mag);
+ valMin = Math.min(valMin, mag);
+ data.push([i, j, dx, dy, mag]);
+ }
+ }
+ return data;
+ }
+ var valMin = Infinity;
+ var valMax = -Infinity;
+ var data = generateData();
+
+ myChart.setOption({
+ visualMap: {
+ show: false,
+ min: valMin,
+ max: valMax,
+ dimension: 4,
+ inRange: {
+ color: [
+ '#313695',
+ '#4575b4',
+ '#74add1',
+ '#abd9e9',
+ '#e0f3f8',
+ '#ffffbf',
+ '#fee090',
+ '#fdae61',
+ '#f46d43',
+ '#d73027',
+ '#a50026'
+ ]
+ }
+ },
+ xAxis: {
+ type: 'value',
+ axisLine: {
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: 'rgba(255,255,255,0.2)'
+ }
+ }
+ },
+ yAxis: {
+ type: 'value',
+ axisLine: {
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: 'rgba(255,255,255,0.2)'
+ }
+ }
+ },
+ series: [
+ {
+ type: 'flowGL',
+ data: data,
+ particleDensity: 64,
+ particleSize: 5,
+ itemStyle: {
+ opacity: 0.5
+ }
+ },
+ {
+ type: 'custom',
+ data: data,
+ encode: {
+ x: 0,
+ y: 0
+ },
+ renderItem: function (params, api) {
+ var x = api.value(0),
+ y = api.value(1),
+ dx = api.value(2),
+ dy = api.value(3);
+ var start = api.coord([x - dx / 2, y - dy / 2]);
+ var end = api.coord([x + dx / 2, y + dy / 2]);
+ return {
+ type: 'line',
+ shape: {
+ x1: start[0],
+ y1: start[1],
+ x2: end[0],
+ y2: end[1]
+ },
+ style: {
+ lineWidth: 2,
+ stroke: '#fff',
+ opacity: 0.2
+ }
+ };
+ }
+ }
+ ]
+ });
+});
diff --git a/public/examples/ts/gl/geo3d-with-different-height.js b/public/examples/ts/gl/geo3d-with-different-height.js
new file mode 100644
index 0000000..1e57d9c
--- /dev/null
+++ b/public/examples/ts/gl/geo3d-with-different-height.js
@@ -0,0 +1,74 @@
+/*
+title: Geo3D with Different Height
+category: geo3D
+titleCN: Geo3D with Different Height
+*/
+
+$.getJSON(
+ ROOT_PATH + '/data-gl/asset/data/world-population.json',
+ function (populationData) {
+ var max = -Infinity;
+ var min = Infinity;
+ populationData.forEach(function (item) {
+ max = Math.max(Math.log(item.value), max);
+ min = Math.min(Math.log(item.value), min);
+ });
+
+ var regions = populationData.map(function (item) {
+ return {
+ name: item.name,
+ height: ((Math.log(item.value) - min) / (max - min)) * 3
+ };
+ });
+
+ myChart.setOption(
+ (option = {
+ backgroundColor: '#cdcfd5',
+ geo3D: {
+ map: 'world',
+ shading: 'lambert',
+
+ lambertMaterial: {
+ detailTexture: ROOT_PATH + '/data-gl/asset/woods.jpg',
+ textureTiling: 20
+ },
+
+ postEffect: {
+ enable: true,
+ SSAO: {
+ enable: true,
+ radius: 3,
+ quality: 'high'
+ }
+ },
+ groundPlane: {
+ show: true
+ },
+ light: {
+ main: {
+ intensity: 1,
+ shadow: true,
+ shadowQuality: 'high',
+ alpha: 30
+ },
+ ambient: {
+ intensity: 0
+ },
+ ambientCubemap: {
+ texture: ROOT_PATH + '/data-gl/asset/canyon.hdr',
+ exposure: 2,
+ diffuseIntensity: 0.3
+ }
+ },
+ viewControl: {
+ distance: 50
+ },
+
+ regionHeight: 0.5,
+
+ regions: regions
+ }
+ })
+ );
+ }
+);
diff --git a/public/examples/ts/gl/geo3d.js b/public/examples/ts/gl/geo3d.js
new file mode 100644
index 0000000..7472b0c
--- /dev/null
+++ b/public/examples/ts/gl/geo3d.js
@@ -0,0 +1,49 @@
+/*
+title: Geo3D
+category: geo3D
+titleCN: Geo3D
+*/
+
+option = {
+ geo3D: {
+ map: 'world',
+ lambertMaterial: {
+ baseTexture: ROOT_PATH + '/data-gl/asset/woods.jpg',
+ textureTiling: 10
+ },
+
+ postEffect: {
+ enable: true,
+ SSAO: {
+ enable: true,
+ radius: 1
+ }
+ },
+ groundPlane: {
+ show: true
+ },
+ light: {
+ main: {
+ intensity: 1,
+ shadow: true
+ },
+ ambientCubemap: {
+ texture: ROOT_PATH + '/data-gl/asset/canyon.hdr'
+ }
+ },
+ viewControl: {
+ distance: 50
+ },
+
+ itemStyle: {
+ borderColor: '#000',
+ borderWidth: 0.5
+ },
+
+ boxHeight: 1.0
+ }
+};
+
+myChart.on('click', function () {
+ alert('click');
+});
diff --git a/public/examples/ts/gl/global-population-bar3d-on-globe.js b/public/examples/ts/gl/global-population-bar3d-on-globe.js
new file mode 100644
index 0000000..68ccf01
--- /dev/null
+++ b/public/examples/ts/gl/global-population-bar3d-on-globe.js
@@ -0,0 +1,67 @@
+/*
+title: Global Population - Bar3D on Globe
+category: bar3D
+titleCN: Global Population - Bar3D on Globe
+*/
+
+$.getJSON(ROOT_PATH + '/data-gl/asset/data/population.json', function (data) {
+ data = data
+ .filter(function (dataItem) {
+ return dataItem[2] > 0;
+ })
+ .map(function (dataItem) {
+ return [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])];
+ });
+
+ option = {
+ backgroundColor: '#000',
+ globe: {
+ baseTexture: ROOT_PATH + '/data-gl/asset/world.topo.bathy.200401.jpg',
+ heightTexture: ROOT_PATH + '/data-gl/asset/world.topo.bathy.200401.jpg',
+ shading: 'lambert',
+ environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
+ light: {
+ main: {
+ intensity: 2
+ }
+ },
+ viewControl: {
+ autoRotate: false
+ }
+ },
+ visualMap: {
+ max: 40,
+ calculable: true,
+ realtime: false,
+ inRange: {
+ colorLightness: [0.2, 0.9]
+ },
+ textStyle: {
+ color: '#fff'
+ },
+ controller: {
+ inRange: {
+ color: 'orange'
+ }
+ },
+ outOfRange: {
+ colorAlpha: 0
+ }
+ },
+ series: [
+ {
... 7595 lines suppressed ...
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-examples] 02/15: use prettier to format code
Posted by sh...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
commit 16a668348fea384ceb3c90558616e04eda103199
Author: pissang <bm...@gmail.com>
AuthorDate: Mon Sep 6 12:59:21 2021 +0800
use prettier to format code
---
.babelrc | 11 +-
.eslintrc.js | 13 +
.eslintrc.yaml | 194 ------
.gitignore | 1 +
.gitignore => .prettierignore | 14 +-
.prettierrc | 7 +
.vscode/settings.json | 4 +
README.md | 24 +-
build/copyResource.js | 139 ++--
build/server.js | 24 +-
build/webpack.config.js | 155 ++---
common/buildCode.js | 611 +++++++++---------
common/compareImage.js | 81 +--
common/task.js | 96 ++-
config/common.js | 6 +-
config/env.asf.js | 2 +-
config/env.dev.js | 2 +-
config/env.localsite.js | 2 +-
e2e/cases/README.md | 2 +-
e2e/cases/liquidfill.js | 14 +-
e2e/cases/wordcloud.js | 230 +++----
e2e/config.js | 58 +-
e2e/main.js | 1290 +++++++++++++++++++++-----------------
e2e/package.json | 3 +-
e2e/preview.html | 47 +-
e2e/report.html | 353 ++++++-----
e2e/template.html | 47 +-
e2e/tsconfig.json | 18 +-
e2e/webpack.config.js | 29 +-
public/en/editor.html | 53 +-
public/en/index.html | 54 +-
public/en/view.html | 53 +-
public/zh/editor.html | 53 +-
public/zh/index.html | 54 +-
public/zh/view.html | 53 +-
src/common/config.js | 224 +++----
src/common/helper.js | 105 ++--
src/common/i18n.js | 236 +++----
src/common/store.js | 80 +--
src/dep/showDebugDirtyRect.js | 152 ++---
src/editor/CodeAce.vue | 195 +++---
src/editor/CodeMonaco.vue | 267 ++++----
src/editor/Editor.vue | 772 ++++++++++++-----------
src/editor/FullCodePreview.vue | 139 ++--
src/editor/Preview.vue | 728 ++++++++++-----------
src/editor/View.vue | 27 +-
src/editor/downloadExample.js | 22 +-
src/editor/object-visualizer.css | 122 ++--
src/editor/sandbox.js | 376 +++++------
src/editor/transformTs.js | 10 +-
src/explore/ExampleCard.vue | 236 +++----
src/explore/Explore.vue | 672 ++++++++++----------
src/main.js | 61 +-
src/style/color.scss | 42 +-
src/style/config.xl.scss | 1219 ++++++++++++++++++-----------------
tool/build-example.js | 695 ++++++++++----------
tool/screenshot.html | 317 ++++++----
tool/seedrandom.js | 459 ++++++++------
tool/updateFrontMatter.js | 43 +-
59 files changed, 5707 insertions(+), 5289 deletions(-)
diff --git a/.babelrc b/.babelrc
index e87d71a..9da67db 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,5 +1,10 @@
{
- "presets": [["@babel/preset-env", {
+ "presets": [
+ [
+ "@babel/preset-env",
+ {
"modules": false
- }]]
-}
\ No newline at end of file
+ }
+ ]
+ ]
+}
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000..d64a787
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,13 @@
+module.exports = {
+ root: true,
+ env: {
+ browser: true,
+ node: true
+ },
+ extends: ['prettier', 'prettier/vue'],
+ plugins: ['prettier'],
+ // add your custom rules here
+ rules: {
+ 'space-before-function-paren': 0
+ }
+};
diff --git a/.eslintrc.yaml b/.eslintrc.yaml
deleted file mode 100644
index e4a2cee..0000000
--- a/.eslintrc.yaml
+++ /dev/null
@@ -1,194 +0,0 @@
-# Note:
-# If eslint does not work in VSCode, please check:
-# (1) Whether "@typescript-eslint/eslint-plugin" and "@typescript-eslint/parser"
-# are npm installed locally. Should better in the same version.
-# (2) Whether "VSCode ESlint extension" is installed.
-# (3) If the project folder is not the root folder of your working space, please
-# config the "VSCode ESlint extension" in "settings":
-# ```json
-# "eslint.workingDirectories": [{"mode": "auto"}]
-# ```
-# Note that it should be "workingDirectories" rather than "WorkingDirectories".
-
-rules:
- # Check the rules in: node_modules/@typescript-eslint/eslint-plugin/README.md
- no-console:
- - 2
- -
- allow:
- - "warn"
- - "error"
- prefer-const: 1
- no-constant-condition: 0
- comma-dangle: 2
- no-debugger: 2
- no-dupe-keys: 2
- no-empty-character-class: 2
- no-ex-assign: 2
- no-extra-boolean-cast: 0
- no-func-assign: 2
- no-inner-declarations: 2
- no-invalid-regexp: 2
- no-negated-in-lhs: 2
- no-obj-calls: 2
- no-sparse-arrays: 2
- no-unreachable: 2
- use-isnan: 2
- valid-typeof: 2
- block-scoped-var: 2
- curly:
- - 2
- - "all"
- eqeqeq:
- - 2
- - "allow-null"
- guard-for-in: 2
- no-else-return: 0
- no-labels:
- - 2
- -
- allowLoop: true
- no-eval: 2
- no-extend-native: 2
- no-extra-bind: 0
- no-implied-eval: 2
- no-iterator: 2
- no-irregular-whitespace: 2
- no-lone-blocks: 2
- no-loop-func: 2
- no-multi-str: 2
- no-native-reassign: 2
- no-new-wrappers: 2
- no-octal: 2
- no-octal-escape: 2
- no-proto: 2
- no-redeclare: 2
- no-self-compare: 2
- no-unneeded-ternary: 2
- no-with: 2
- radix: 2
- wrap-iife:
- - 2
- - "any"
- no-delete-var: 2
- no-dupe-args: 2
- no-duplicate-case: 2
- no-label-var: 2
- no-shadow-restricted-names: 2
- no-undef: 2
- no-undef-init: 2
- "no-use-before-define": 0
- brace-style:
- - 2
- - "stroustrup"
- - {}
- comma-spacing:
- - 2
- -
- before: false
- after: true
- comma-style:
- - 2
- - "last"
- new-parens: 2
- no-array-constructor: 2
- no-multi-spaces:
- - 1
- -
- ignoreEOLComments: true
- exceptions:
- Property: true
- no-new-object: 2
- no-trailing-spaces: 2
- no-extra-parens:
- - 2
- - "functions"
- no-mixed-spaces-and-tabs: 2
- one-var:
- - 2
- - "never"
- operator-linebreak:
- - 2
- - "before"
- -
- overrides:
- "=": "after"
- "quotes":
- - 2
- - "single"
- "semi":
- - 2
- - "always"
- semi-spacing: 2
- keyword-spacing: 2
- key-spacing:
- - 2
- -
- beforeColon: false
- afterColon: true
- "space-before-function-paren":
- - 2
- -
- anonymous: "always"
- named: "never"
- space-before-blocks:
- - 2
- - "always"
- computed-property-spacing:
- - 2
- - "never"
- space-in-parens:
- - 2
- - "never"
- space-unary-ops: 2
- spaced-comment: 0
-
- max-nested-callbacks:
- - 1
- - 5
- max-depth:
- - 1
- - 6
- max-len:
- - 2
- - 120
- - 4
- -
- ignoreUrls: true
- ignoreComments: true
- max-params:
- - 1
- - 15
-
- space-infix-ops: 2
- dot-notation:
- - 2
- -
- allowKeywords: true
- allowPattern: "^catch$"
-
- arrow-spacing: 2
- constructor-super: 2
- no-confusing-arrow:
- - 2
- -
- allowParens: true
- no-class-assign: 2
- no-const-assign: 2
- # no-dupe-class-members: 2
- no-this-before-super: 0
- no-duplicate-imports: 2
- prefer-rest-params: 0
- unicode-bom: 2
- max-statements-per-line: 2
-
- no-useless-constructor: 0
- indent: ["warn", 4]
-
- "func-call-spacing": "error"
-
- "no-unused-vars":
- - 1
- -
- vars: "local"
- args: "none"
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index b862812..5e01c25 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,6 +14,7 @@ public/vendors/echarts/map/raw
/public/asset
/public/data/option
/public/data-gl/option
+/public/examples/js
/e2e/package-lock.json
tmp
diff --git a/.gitignore b/.prettierignore
similarity index 71%
copy from .gitignore
copy to .prettierignore
index b862812..84fc23f 100644
--- a/.gitignore
+++ b/.prettierignore
@@ -1,8 +1,16 @@
+public/data
+public/data-gl
+src/data
+src/data
+src/data
+
+
+
+# From git ignore
node_modules
release
public/vendors/echarts/map/tool
public/vendors/echarts/map/raw
-.DS_Store
/public.zip
/build/config.gypi
/public-gh
@@ -14,7 +22,7 @@ public/vendors/echarts/map/raw
/public/asset
/public/data/option
/public/data-gl/option
+/public/examples/js
/e2e/package-lock.json
-tmp
-.webm
\ No newline at end of file
+tmp
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..3410e80
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,7 @@
+{
+ "tabWidth": 2,
+ "semi": true,
+ "singleQuote": true,
+ "trailingComma": "none",
+ "printWidth": 80
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..1b6457c
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+ "editor.formatOnSave": true,
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
+}
diff --git a/README.md b/README.md
index 5891e3f..d2c7314 100644
--- a/README.md
+++ b/README.md
@@ -25,7 +25,6 @@ It will copy all the build resources to echarts-website/next/examples
1. Update the URL of localEChartsMinJS in `common/config.js`
2. Add `local=1` in URL. For example: `editor.html?c=area-basic&local=1`
-
## Edit example
All test cases are in the `public/examples/ts` folder. The comment in the header
@@ -59,26 +58,27 @@ Most of examples are written in `TypeScript`. You need to comile it to `JavaScri
npm run compile:example
```
-
## Some built-in features available in examples
### Import third-party library
For example:
+
```js
$.when(
- $.getScript(ROOT_PATH + '/data/asset/js/xxxx.js'),
- $.getScript('https://cdn.jsdelivr.net/npm/d3-contour@2.0.0/dist/d3-contour.jXs'),
+ $.getScript(ROOT_PATH + '/data/asset/js/xxxx.js'),
+ $.getScript(
+ 'https://cdn.jsdelivr.net/npm/d3-contour@2.0.0/dist/d3-contour.jXs'
+ )
).done(function () {
- // ...
+ // ...
});
```
-
-
### Controller panel
Use this code to enable controller panel for a example:
+
```js
app.config = {
aNameForTheSelectWidget: 'This is the initial value'
@@ -109,8 +109,8 @@ app.configParameters = {
```js
app.onresize = function () {
- // Do something.
-}
+ // Do something.
+};
```
### Get width and height of the chart area
@@ -120,7 +120,6 @@ var width = myChart.getWidth();
var height = myChart.getHeight();
```
-
## Update example snapshots
```shell
@@ -133,7 +132,6 @@ Only for default theme
node tool/build-example.js -t default
```
-
## Run e2e tests.
Run all the examples to test package publishing and install, module importing, minimal bundling and DTS correctness.
@@ -145,6 +143,7 @@ npm run build:example
```
Then run the tests.
+
```shell
npm run test:e2e
```
@@ -152,6 +151,7 @@ npm run test:e2e
You can change the testing branch or local dir, which is available when add `--local` in `e2e/config.js`
If you want to test with esbuild bundler. Which is much faster.
+
```shell
npm run test:e2e:esbuild
```
@@ -178,5 +178,3 @@ Specify matched tests.
```shell
node e2e/main.js --skip npm --tests bar3D*
```
-
-
diff --git a/build/copyResource.js b/build/copyResource.js
index d36d55d..bfa378a 100644
--- a/build/copyResource.js
+++ b/build/copyResource.js
@@ -23,78 +23,91 @@ const projectDir = __dirname;
*/
function initEnv() {
- let envType = argv.env;
- let isDev = argv.dev != null || argv.debug != null || envType === 'debug' || envType === 'dev';
-
- if (isDev) {
- console.warn('====================================================================');
- console.warn('THIS IS IN DEV MODE');
- console.warn('!!! Please input your local host in `config/env.dev.js` firstly !!!');
- console.warn('====================================================================');
- envType = 'dev';
- }
-
- if (!envType) {
- throw new Error('--env MUST be specified');
- }
-
- let config = require('../config/env.' + envType);
-
- if (isDev) {
- console.warn('====================================================================');
- console.warn('Please visit the website: ');
- console.warn(config.host);
- console.warn('====================================================================');
- }
-
- assert(path.isAbsolute(config.releaseDestDir));
-
- config.envType = envType;
-
- return config;
+ let envType = argv.env;
+ let isDev =
+ argv.dev != null ||
+ argv.debug != null ||
+ envType === 'debug' ||
+ envType === 'dev';
+
+ if (isDev) {
+ console.warn(
+ '===================================================================='
+ );
+ console.warn('THIS IS IN DEV MODE');
+ console.warn(
+ '!!! Please input your local host in `config/env.dev.js` firstly !!!'
+ );
+ console.warn(
+ '===================================================================='
+ );
+ envType = 'dev';
+ }
+
+ if (!envType) {
+ throw new Error('--env MUST be specified');
+ }
+
+ let config = require('../config/env.' + envType);
+
+ if (isDev) {
+ console.warn(
+ '===================================================================='
+ );
+ console.warn('Please visit the website: ');
+ console.warn(config.host);
+ console.warn(
+ '===================================================================='
+ );
+ }
+
+ assert(path.isAbsolute(config.releaseDestDir));
+
+ config.envType = envType;
+
+ return config;
}
async function copyResourcesToDest(config) {
- let basePath = path.resolve(projectDir, '../public');
- const filePaths = await globby([
- '**/*',
- // Use jade in echarts-www
- '!zh/*',
- '!en/*'
- ], {
- cwd: basePath
- });
-
- console.log();
-
- for (let filePath of filePaths) {
- fse.ensureDirSync(
- path.resolve(config.releaseDestDir, path.dirname(filePath))
- );
- let destPath = path.resolve(config.releaseDestDir, filePath);
- fs.copyFileSync(
- path.resolve(basePath, filePath),
- destPath
- );
-
- if (process.stdout.clearLine) {
- process.stdout.clearLine();
- process.stdout.cursorTo(0);
- process.stdout.write(chalk.green(`resource copied to: ${destPath}`));
- }
- else {
- console.log(chalk.green(`resource copied to: ${destPath}`));
- }
+ let basePath = path.resolve(projectDir, '../public');
+ const filePaths = await globby(
+ [
+ '**/*',
+ // Use jade in echarts-www
+ '!zh/*',
+ '!en/*'
+ ],
+ {
+ cwd: basePath
+ }
+ );
+
+ console.log();
+
+ for (let filePath of filePaths) {
+ fse.ensureDirSync(
+ path.resolve(config.releaseDestDir, path.dirname(filePath))
+ );
+ let destPath = path.resolve(config.releaseDestDir, filePath);
+ fs.copyFileSync(path.resolve(basePath, filePath), destPath);
+
+ if (process.stdout.clearLine) {
+ process.stdout.clearLine();
+ process.stdout.cursorTo(0);
+ process.stdout.write(chalk.green(`resource copied to: ${destPath}`));
+ } else {
+ console.log(chalk.green(`resource copied to: ${destPath}`));
}
+ }
- console.log('\ncopyResourcesToDest done.');
+ console.log('\ncopyResourcesToDest done.');
}
async function run() {
- let config = initEnv();
- await copyResourcesToDest(config);
+ let config = initEnv();
+ await copyResourcesToDest(config);
- console.log('All done.');
+ console.log('All done.');
}
run();
diff --git a/build/server.js b/build/server.js
index 77b0da6..03867d2 100644
--- a/build/server.js
+++ b/build/server.js
@@ -2,19 +2,23 @@ const nStatic = require('node-static');
const open = require('open');
const fileServer = new nStatic.Server(__dirname + '/../public');
-require('http').createServer(function (request, response) {
- request.addListener('end', function () {
+require('http')
+ .createServer(function (request, response) {
+ request
+ .addListener('end', function () {
fileServer.serve(request, response);
- }).resume();
-}).listen(3002);
+ })
+ .resume();
+ })
+ .listen(3002);
// Wait bundling to be finished
setTimeout(() => {
- open('http://127.0.0.1:3002/en/index.html');
+ open('http://127.0.0.1:3002/en/index.html');
}, 3000);
-process.on('SIGINT', function() {
- console.log('Closing');
- // Close through ctrl + c;
- process.exit();
-});
\ No newline at end of file
+process.on('SIGINT', function () {
+ console.log('Closing');
+ // Close through ctrl + c;
+ process.exit();
+});
diff --git a/build/webpack.config.js b/build/webpack.config.js
index 3107a0c..80dd631 100644
--- a/build/webpack.config.js
+++ b/build/webpack.config.js
@@ -6,81 +6,94 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const distPath = path.resolve(__dirname, '../public');
module.exports = [
- {
- entry: path.resolve(__dirname, '../src/main.js'),
- output: {
- publicPath: './',
- filename: 'example-bundle.js',
- path: path.join(distPath, 'js'),
- library: 'echartsExample',
- libraryTarget: 'var'
+ {
+ entry: path.resolve(__dirname, '../src/main.js'),
+ output: {
+ publicPath: './',
+ filename: 'example-bundle.js',
+ path: path.join(distPath, 'js'),
+ library: 'echartsExample',
+ libraryTarget: 'var'
+ },
+ stats: 'minimal',
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ use: ['vue-loader']
},
- stats: 'minimal',
- module: {
- rules: [{
- test: /\.vue$/,
- use: ['vue-loader']
- }, {
- test: /\.js$/,
- use: ['babel-loader'],
- exclude: /node_modules/
- }, {
- test: /\.css$/,
- use: [MiniCssExtractPlugin.loader, 'css-loader']
- }, {
- test: /\.scss$/,
- use: [MiniCssExtractPlugin.loader, 'css-loader', 'sassjs-loader']
- }, {
- test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2)(\?.+)?$/,
- use: [{
- loader: 'file-loader',
- options: {
- limit: 10000,
- outputPath: '../asset',
- name: '[name].[ext]'
- }
- }]
- }, {
- test: /\.svg$/,
- use: [{
- loader: 'html-loader',
- options: {
- minimize: true
- }
- }]
- },]
+ {
+ test: /\.js$/,
+ use: ['babel-loader'],
+ exclude: /node_modules/
},
- externals: {
- vue: 'Vue'
+ {
+ test: /\.css$/,
+ use: [MiniCssExtractPlugin.loader, 'css-loader']
},
- plugins: [
- new webpack.IgnorePlugin(/^fs$/),
- new VueLoaderPlugin(),
- new MiniCssExtractPlugin({
- filename: '../css/example-bundle.css'
- })
- ]
- },
- {
- // Sepearte built ts transformer to be loaded async
- entry: path.resolve(__dirname, '../src/editor/transformTs.js'),
- stats: 'minimal',
- module: {
- rules: [{
- test: /\.m?js$/,
- include: /node_modules/,
- type: 'javascript/auto',
- resolve: {
- fullySpecified: false
- }
- }]
+ {
+ test: /\.scss$/,
+ use: [MiniCssExtractPlugin.loader, 'css-loader', 'sassjs-loader']
},
- output: {
- filename: 'example-transform-ts-bundle.js',
- path: path.join(distPath, 'js'),
- library: 'echartsExampleTransformTs',
- libraryExport: 'default',
- libraryTarget: 'var'
+ {
+ test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2)(\?.+)?$/,
+ use: [
+ {
+ loader: 'file-loader',
+ options: {
+ limit: 10000,
+ outputPath: '../asset',
+ name: '[name].[ext]'
+ }
+ }
+ ]
+ },
+ {
+ test: /\.svg$/,
+ use: [
+ {
+ loader: 'html-loader',
+ options: {
+ minimize: true
+ }
+ }
+ ]
}
+ ]
+ },
+ externals: {
+ vue: 'Vue'
+ },
+ plugins: [
+ new webpack.IgnorePlugin(/^fs$/),
+ new VueLoaderPlugin(),
+ new MiniCssExtractPlugin({
+ filename: '../css/example-bundle.css'
+ })
+ ]
+ },
+ {
+ // Sepearte built ts transformer to be loaded async
+ entry: path.resolve(__dirname, '../src/editor/transformTs.js'),
+ stats: 'minimal',
+ module: {
+ rules: [
+ {
+ test: /\.m?js$/,
+ include: /node_modules/,
+ type: 'javascript/auto',
+ resolve: {
+ fullySpecified: false
+ }
+ }
+ ]
+ },
+ output: {
+ filename: 'example-transform-ts-bundle.js',
+ path: path.join(distPath, 'js'),
+ library: 'echartsExampleTransformTs',
+ libraryExport: 'default',
+ libraryTarget: 'var'
}
+ }
];
diff --git a/common/buildCode.js b/common/buildCode.js
index f0f5afa..64e4204 100644
--- a/common/buildCode.js
+++ b/common/buildCode.js
@@ -1,84 +1,83 @@
const COMPONENTS_MAP = {
- grid: 'GridComponent',
- polar: 'PolarComponent',
- geo: 'GeoComponent',
- singleAxis: 'SingleAxisComponent',
- parallel: 'ParallelComponent',
- calendar: 'CalendarComponent',
- graphic: 'GraphicComponent',
- toolbox: 'ToolboxComponent',
- tooltip: 'TooltipComponent',
- axisPointer: 'AxisPointerComponent',
- brush: 'BrushComponent',
- title: 'TitleComponent',
- timeline: 'TimelineComponent',
- markPoint: 'MarkPointComponent',
- markLine: 'MarkLineComponent',
- markArea: 'MarkAreaComponent',
- legend: 'LegendComponent',
- dataZoom: 'DataZoomComponent',
- visualMap: 'VisualMapComponent',
- aria: 'AriaComponent',
- dataset: 'DatasetComponent',
-
- // Dependencies
- xAxis: 'GridComponent',
- yAxis: 'GridComponent',
- angleAxis: 'PolarComponent',
- radiusAxis: 'PolarComponent'
-}
+ grid: 'GridComponent',
+ polar: 'PolarComponent',
+ geo: 'GeoComponent',
+ singleAxis: 'SingleAxisComponent',
+ parallel: 'ParallelComponent',
+ calendar: 'CalendarComponent',
+ graphic: 'GraphicComponent',
+ toolbox: 'ToolboxComponent',
+ tooltip: 'TooltipComponent',
+ axisPointer: 'AxisPointerComponent',
+ brush: 'BrushComponent',
+ title: 'TitleComponent',
+ timeline: 'TimelineComponent',
+ markPoint: 'MarkPointComponent',
+ markLine: 'MarkLineComponent',
+ markArea: 'MarkAreaComponent',
+ legend: 'LegendComponent',
+ dataZoom: 'DataZoomComponent',
+ visualMap: 'VisualMapComponent',
+ aria: 'AriaComponent',
+ dataset: 'DatasetComponent',
+
+ // Dependencies
+ xAxis: 'GridComponent',
+ yAxis: 'GridComponent',
+ angleAxis: 'PolarComponent',
+ radiusAxis: 'PolarComponent'
+};
const CHARTS_MAP = {
- line: 'LineChart',
- bar: 'BarChart',
- pie: 'PieChart',
- scatter: 'ScatterChart',
- radar: 'RadarChart',
- map: 'MapChart',
- tree: 'TreeChart',
- treemap: 'TreemapChart',
- graph: 'GraphChart',
- gauge: 'GaugeChart',
- funnel: 'FunnelChart',
- parallel: 'ParallelChart',
- sankey: 'SankeyChart',
- boxplot: 'BoxplotChart',
- candlestick: 'CandlestickChart',
- effectScatter: 'EffectScatterChart',
- lines: 'LinesChart',
- heatmap: 'HeatmapChart',
- pictorialBar: 'PictorialBarChart',
- themeRiver: 'ThemeRiverChart',
- sunburst: 'SunburstChart',
- custom: 'CustomChart'
-}
+ line: 'LineChart',
+ bar: 'BarChart',
+ pie: 'PieChart',
+ scatter: 'ScatterChart',
+ radar: 'RadarChart',
+ map: 'MapChart',
+ tree: 'TreeChart',
+ treemap: 'TreemapChart',
+ graph: 'GraphChart',
+ gauge: 'GaugeChart',
+ funnel: 'FunnelChart',
+ parallel: 'ParallelChart',
+ sankey: 'SankeyChart',
+ boxplot: 'BoxplotChart',
+ candlestick: 'CandlestickChart',
+ effectScatter: 'EffectScatterChart',
+ lines: 'LinesChart',
+ heatmap: 'HeatmapChart',
+ pictorialBar: 'PictorialBarChart',
+ themeRiver: 'ThemeRiverChart',
+ sunburst: 'SunburstChart',
+ custom: 'CustomChart'
+};
const COMPONENTS_GL_MAP = {
-
- grid3D: 'Grid3DComponent',
- geo3D: 'Geo3DComponent',
- globe: 'GlobeComponent',
- mapbox3D: 'Mapbox3DComponent',
- maptalks3D: 'Maptalks3DComponent',
-
- // Dependencies
- xAxis3D: 'Grid3DComponent',
- yAxis3D: 'Grid3DComponent',
- zAxis3D: 'Grid3DComponent',
-}
+ grid3D: 'Grid3DComponent',
+ geo3D: 'Geo3DComponent',
+ globe: 'GlobeComponent',
+ mapbox3D: 'Mapbox3DComponent',
+ maptalks3D: 'Maptalks3DComponent',
+
+ // Dependencies
+ xAxis3D: 'Grid3DComponent',
+ yAxis3D: 'Grid3DComponent',
+ zAxis3D: 'Grid3DComponent'
+};
const CHARTS_GL_MAP = {
- bar3D: 'Bar3DChart',
- line3D: 'Line3DChart',
- scatter3D: 'Scatter3DChart',
- lines3D: 'Lines3DChart',
- polygons3D: 'Polygons3DChart',
- surface: 'SurfaceChart',
- map3D: 'Map3DChart',
-
- scatterGL: 'ScatterGLChart',
- graphGL: 'GraphGLChart',
- flowGL: 'FlowGLChart',
- linesGL: 'LinesGLChart'
-}
+ bar3D: 'Bar3DChart',
+ line3D: 'Line3DChart',
+ scatter3D: 'Scatter3DChart',
+ lines3D: 'Lines3DChart',
+ polygons3D: 'Polygons3DChart',
+ surface: 'SurfaceChart',
+ map3D: 'Map3DChart',
+
+ scatterGL: 'ScatterGLChart',
+ graphGL: 'GraphGLChart',
+ flowGL: 'FlowGLChart',
+ linesGL: 'LinesGLChart'
+};
const COMPONENTS_MAP_REVERSE = {};
const CHARTS_MAP_REVERSE = {};
@@ -86,32 +85,39 @@ const CHARTS_GL_MAP_REVERSE = {};
const COMPONENTS_GL_MAP_REVERSE = {};
const RENDERERS_MAP_REVERSE = {
- 'SVGRenderer': 'svg',
- 'CanvasRenderer': 'canvas'
-}
+ SVGRenderer: 'svg',
+ CanvasRenderer: 'canvas'
+};
// Component that will be injected automatically in preprocessor
// These should be excluded util find they were used explicitly.
const MARKERS = ['markLine', 'markArea', 'markPoint'];
const INJECTED_COMPONENTS = [
- ...MARKERS, 'grid', 'axisPointer',
- 'aria' // TODO aria
+ ...MARKERS,
+ 'grid',
+ 'axisPointer',
+ 'aria' // TODO aria
];
// Component that was dependent.
const DEPENDENT_COMPONENTS = [
- 'xAxis', 'yAxis', 'angleAxis', 'radiusAxis',
- 'xAxis3D', 'yAxis3D', 'zAxis3D'
+ 'xAxis',
+ 'yAxis',
+ 'angleAxis',
+ 'radiusAxis',
+ 'xAxis3D',
+ 'yAxis3D',
+ 'zAxis3D'
];
function createReverseMap(map, reverseMap) {
- Object.keys(map).forEach(key => {
- // Exclude dependencies.
- if (DEPENDENT_COMPONENTS.includes(key)) {
- return;
- }
- reverseMap[map[key]] = key;
- });
+ Object.keys(map).forEach((key) => {
+ // Exclude dependencies.
+ if (DEPENDENT_COMPONENTS.includes(key)) {
+ return;
+ }
+ reverseMap[map[key]] = key;
+ });
}
createReverseMap(COMPONENTS_MAP, COMPONENTS_MAP_REVERSE);
@@ -120,248 +126,273 @@ createReverseMap(COMPONENTS_GL_MAP, COMPONENTS_GL_MAP_REVERSE);
createReverseMap(CHARTS_GL_MAP, CHARTS_GL_MAP_REVERSE);
module.exports.collectDeps = function collectDeps(option) {
- let deps = [];
- if (option.options) {
+ let deps = [];
+ if (option.options) {
+ // TODO getOption() doesn't have baseOption and options.
+ option.options.forEach((opt) => {
+ deps = deps.concat(collectDeps(opt));
+ });
- // TODO getOption() doesn't have baseOption and options.
- option.options.forEach((opt) => {
- deps = deps.concat(collectDeps(opt));
- });
+ if (option.baseOption) {
+ deps = deps.concat(collectDeps(option.baseOption));
+ }
- if (option.baseOption) {
- deps = deps.concat(collectDeps(option.baseOption))
- }
+ // Remove duplicates
+ return Array.from(new Set(deps));
+ }
- // Remove duplicates
- return Array.from(new Set(deps));
+ Object.keys(option).forEach((key) => {
+ if (INJECTED_COMPONENTS.includes(key)) {
+ return;
}
+ const val = option[key];
- Object.keys(option).forEach((key) => {
- if (INJECTED_COMPONENTS.includes(key)) {
- return;
- }
- const val = option[key];
-
- if (Array.isArray(val) && !val.length) {
- return;
- }
-
- if (COMPONENTS_MAP[key]) {
- deps.push(COMPONENTS_MAP[key]);
- }
- if (COMPONENTS_GL_MAP[key]) {
- deps.push(COMPONENTS_GL_MAP[key]);
- }
- });
+ if (Array.isArray(val) && !val.length) {
+ return;
+ }
- let series = option.series;
- if (!Array.isArray(series)) {
- series = [series];
+ if (COMPONENTS_MAP[key]) {
+ deps.push(COMPONENTS_MAP[key]);
}
+ if (COMPONENTS_GL_MAP[key]) {
+ deps.push(COMPONENTS_GL_MAP[key]);
+ }
+ });
+
+ let series = option.series;
+ if (!Array.isArray(series)) {
+ series = [series];
+ }
- series.forEach((seriesOpt) => {
- if (CHARTS_MAP[seriesOpt.type]) {
- deps.push(CHARTS_MAP[seriesOpt.type]);
- }
- if (CHARTS_GL_MAP[seriesOpt.type]) {
- deps.push(CHARTS_GL_MAP[seriesOpt.type]);
- }
- if (seriesOpt.type === 'map') {
- // Needs geo component when using map
- deps.push(COMPONENTS_MAP.geo);
- }
- MARKERS.forEach(markerType => {
- if (seriesOpt[markerType]) {
- deps.push(COMPONENTS_MAP[markerType]);
- }
- });
+ series.forEach((seriesOpt) => {
+ if (CHARTS_MAP[seriesOpt.type]) {
+ deps.push(CHARTS_MAP[seriesOpt.type]);
+ }
+ if (CHARTS_GL_MAP[seriesOpt.type]) {
+ deps.push(CHARTS_GL_MAP[seriesOpt.type]);
+ }
+ if (seriesOpt.type === 'map') {
+ // Needs geo component when using map
+ deps.push(COMPONENTS_MAP.geo);
+ }
+ MARKERS.forEach((markerType) => {
+ if (seriesOpt[markerType]) {
+ deps.push(COMPONENTS_MAP[markerType]);
+ }
});
+ });
- // Remove duplicates
- return Array.from(new Set(deps));
-}
+ // Remove duplicates
+ return Array.from(new Set(deps));
+};
function buildMinimalBundleCode(deps, includeType) {
- const chartsImports = [];
- const componentsImports = [];
- const chartsGLImports = [];
- const componentsGLImports = [];
- const renderersImports = [];
- deps.forEach(function (dep) {
- if (dep.endsWith('Renderer')) {
- renderersImports.push(dep);
- }
- else if (CHARTS_MAP_REVERSE[dep]) {
- chartsImports.push(dep);
- if (includeType) {
- chartsImports.push(dep.replace(/Chart$/, 'SeriesOption'));
- }
- }
- else if (COMPONENTS_MAP_REVERSE[dep]) {
- componentsImports.push(dep);
- if (includeType) {
- componentsImports.push(dep.replace(/Component$/, 'ComponentOption'));
- }
- }
- else if (CHARTS_GL_MAP_REVERSE[dep]) {
- chartsGLImports.push(dep)
- }
- else if (COMPONENTS_GL_MAP_REVERSE[dep]) {
- componentsGLImports.push(dep);
- }
- });
-
- function getImportsPartCode(imports) {
- return `${imports.map(str => `
- ${str}`).join(',')}`;
+ const chartsImports = [];
+ const componentsImports = [];
+ const chartsGLImports = [];
+ const componentsGLImports = [];
+ const renderersImports = [];
+ deps.forEach(function (dep) {
+ if (dep.endsWith('Renderer')) {
+ renderersImports.push(dep);
+ } else if (CHARTS_MAP_REVERSE[dep]) {
+ chartsImports.push(dep);
+ if (includeType) {
+ chartsImports.push(dep.replace(/Chart$/, 'SeriesOption'));
+ }
+ } else if (COMPONENTS_MAP_REVERSE[dep]) {
+ componentsImports.push(dep);
+ if (includeType) {
+ componentsImports.push(dep.replace(/Component$/, 'ComponentOption'));
+ }
+ } else if (CHARTS_GL_MAP_REVERSE[dep]) {
+ chartsGLImports.push(dep);
+ } else if (COMPONENTS_GL_MAP_REVERSE[dep]) {
+ componentsGLImports.push(dep);
}
-
- const allImports = [
- ...componentsImports,
- ...chartsImports,
- ...componentsGLImports,
- ...chartsGLImports,
- ...renderersImports
- ];
-
- const ECOptionTypeCode = `
+ });
+
+ function getImportsPartCode(imports) {
+ return `${imports
+ .map(
+ (str) => `
+ ${str}`
+ )
+ .join(',')}`;
+ }
+
+ const allImports = [
+ ...componentsImports,
+ ...chartsImports,
+ ...componentsGLImports,
+ ...chartsGLImports,
+ ...renderersImports
+ ];
+
+ const ECOptionTypeCode = `
type ECOption = echarts.ComposeOption<
- ${allImports.filter(a => a.endsWith('Option')).join(' | ')}
+ ${allImports.filter((a) => a.endsWith('Option')).join(' | ')}
>`;
- const importsCodes = [
- [componentsImports, 'echarts/components'],
- [chartsImports, 'echarts/charts'],
- [renderersImports, 'echarts/renderers'],
- [chartsGLImports, 'echarts-gl/charts'],
- [componentsGLImports, 'echarts-gl/components']
- ].filter(a => a[0].length > 0).map(item => `
+ const importsCodes = [
+ [componentsImports, 'echarts/components'],
+ [chartsImports, 'echarts/charts'],
+ [renderersImports, 'echarts/renderers'],
+ [chartsGLImports, 'echarts-gl/charts'],
+ [componentsGLImports, 'echarts-gl/components']
+ ]
+ .filter((a) => a[0].length > 0)
+ .map((item) =>
+ `
import {${getImportsPartCode(item[0])}
} from '${item[1]}';
- `.trim()).join('\n');
+ `.trim()
+ )
+ .join('\n');
- return `import * as echarts from 'echarts/core';
+ return (
+ `import * as echarts from 'echarts/core';
${importsCodes}
echarts.use(
- [${allImports.filter(a => !a.endsWith('Option')).join(', ')}]
+ [${allImports.filter((a) => !a.endsWith('Option')).join(', ')}]
);
` + (includeType ? ECOptionTypeCode : '')
+ );
}
module.exports.buildMinimalBundleCode = buildMinimalBundleCode;
function buildLegacyMinimalBundleCode(deps, isESM) {
- const modules = [];
- deps.forEach(function (dep) {
- if (dep.endsWith('Renderer') && dep !== 'CanvasRenderer') {
- modules.push(`zrender/lib/${RENDERERS_MAP_REVERSE[dep]}/${RENDERERS_MAP_REVERSE[dep]}`);
- }
- else if (CHARTS_MAP_REVERSE[dep]) {
- modules.push(`echarts/lib/chart/${CHARTS_MAP_REVERSE[dep]}`);
- }
- else if (COMPONENTS_MAP_REVERSE[dep]) {
- modules.push(`echarts/lib/component/${COMPONENTS_MAP_REVERSE[dep]}`);
- }
- else if (CHARTS_GL_MAP_REVERSE[dep]) {
- modules.push(`echarts-gl/lib/chart/${CHARTS_GL_MAP_REVERSE[dep]}`);
- }
- else if (COMPONENTS_GL_MAP_REVERSE[dep]) {
- modules.push(`echarts-gl/lib/component/${COMPONENTS_GL_MAP_REVERSE[dep]}`);
- }
- });
+ const modules = [];
+ deps.forEach(function (dep) {
+ if (dep.endsWith('Renderer') && dep !== 'CanvasRenderer') {
+ modules.push(
+ `zrender/lib/${RENDERERS_MAP_REVERSE[dep]}/${RENDERERS_MAP_REVERSE[dep]}`
+ );
+ } else if (CHARTS_MAP_REVERSE[dep]) {
+ modules.push(`echarts/lib/chart/${CHARTS_MAP_REVERSE[dep]}`);
+ } else if (COMPONENTS_MAP_REVERSE[dep]) {
+ modules.push(`echarts/lib/component/${COMPONENTS_MAP_REVERSE[dep]}`);
+ } else if (CHARTS_GL_MAP_REVERSE[dep]) {
+ modules.push(`echarts-gl/lib/chart/${CHARTS_GL_MAP_REVERSE[dep]}`);
+ } else if (COMPONENTS_GL_MAP_REVERSE[dep]) {
+ modules.push(
+ `echarts-gl/lib/component/${COMPONENTS_GL_MAP_REVERSE[dep]}`
+ );
+ }
+ });
- return isESM ? `import * as echarts from 'echarts/lib/echarts';
-${modules.map(mod => {
+ return isESM
+ ? `import * as echarts from 'echarts/lib/echarts';
+${modules
+ .map((mod) => {
return `import '${mod}';`;
-}).join('\n')}
-` : `const echarts = require('echarts/lib/echarts');
-${modules.map(mod => {
- return `require('${mod}');`;
-}).join('\n')}
+ })
+ .join('\n')}
`
+ : `const echarts = require('echarts/lib/echarts');
+${modules
+ .map((mod) => {
+ return `require('${mod}');`;
+ })
+ .join('\n')}
+`;
}
function hasGLInDeps(deps) {
- return !!deps.find(dep => !!(CHARTS_GL_MAP_REVERSE[dep] || COMPONENTS_GL_MAP_REVERSE[dep]));
+ return !!deps.find(
+ (dep) => !!(CHARTS_GL_MAP_REVERSE[dep] || COMPONENTS_GL_MAP_REVERSE[dep])
+ );
}
module.buildLegacyMinimalBundleCode = buildLegacyMinimalBundleCode;
module.exports.buildExampleCode = function (
- jsCode, deps, {
- // If enable minimal import
- minimal,
- // If is ESM module or CommonJS module
- // Force to be true in ts mode or minimal mode.
- esm = true,
- // If use legacy minimal import, like:
- // import 'echarts/lib/chart/bar';
- // Only available when minimal is true.
- legacy,
- // If is ts code
- ts,
- // Theme
- theme,
- ROOT_PATH,
- // Other imports code code string
- // For example
- // `import 'echarts-liquidfill'`
- extraImports
- }
+ jsCode,
+ deps,
+ {
+ // If enable minimal import
+ minimal,
+ // If is ESM module or CommonJS module
+ // Force to be true in ts mode or minimal mode.
+ esm = true,
+ // If use legacy minimal import, like:
+ // import 'echarts/lib/chart/bar';
+ // Only available when minimal is true.
+ legacy,
+ // If is ts code
+ ts,
+ // Theme
+ theme,
+ ROOT_PATH,
+ // Other imports code code string
+ // For example
+ // `import 'echarts-liquidfill'`
+ extraImports
+ }
) {
- // if (minimal && !legacy) {
- // // ESM must be used when use the new minimal import
- // esm = true;
- // }
-
- if (ts) {
- esm = true;
- }
-
- if (minimal && !esm) {
- // Only legacy mode can be used when use require in mimimal bundle.
- legacy = true;
- }
-
-
- const hasECStat = jsCode.indexOf('ecStat') >= 0;
- const usedRootPath = jsCode.indexOf('ROOT_PATH') >= 0;
- const usedApp = jsCode.indexOf('app') >= 0;
-
- const DEP_CODE = `
-${hasECStat ?
- esm ? `import ecStat from 'echarts-stat';`
- : `var ecStat = require('echarts-stat');`
+ // if (minimal && !legacy) {
+ // // ESM must be used when use the new minimal import
+ // esm = true;
+ // }
+
+ if (ts) {
+ esm = true;
+ }
+
+ if (minimal && !esm) {
+ // Only legacy mode can be used when use require in mimimal bundle.
+ legacy = true;
+ }
+
+ const hasECStat = jsCode.indexOf('ecStat') >= 0;
+ const usedRootPath = jsCode.indexOf('ROOT_PATH') >= 0;
+ const usedApp = jsCode.indexOf('app') >= 0;
+
+ const DEP_CODE = `
+${
+ hasECStat
+ ? esm
+ ? `import ecStat from 'echarts-stat';`
+ : `var ecStat = require('echarts-stat');`
: ''
}
`;
- const IMPORT_CODE = [
- !minimal
- ? esm
- ? `import * as echarts from 'echarts';${hasGLInDeps(deps) ? `\nimport 'echarts-gl';` : ''}`
- : `var echarts = require('echarts');${hasGLInDeps(deps) ? `\nrequire('echarts-gl');` : ''}`
- : legacy
- ? buildLegacyMinimalBundleCode(deps, esm)
- : buildMinimalBundleCode(deps, ts),
- (theme && theme !== 'dark')
- ? esm
- ? `import 'echarts/theme/${theme}'`
- : `require('echarts/theme/${theme}')`
- : '',
- extraImports
- ].filter(a => !!a).join('\n');
-
- const ENV_CODE = [
- usedRootPath ? `var ROOT_PATH = '${ROOT_PATH}';` : '',
- usedApp ? `var app${ts ? ': any' : ''} = {};` : '',
- ts && !minimal ? 'type ECOption = echarts.EChartsOption' : ''
- ].filter(a => !!a).join('\n');
-
- const PREPARE_CODE = [
- IMPORT_CODE.trim(), DEP_CODE.trim(), ENV_CODE.trim()
- ].filter(a => !!a).join('\n\n');
-
- return `${PREPARE_CODE}
+ const IMPORT_CODE = [
+ !minimal
+ ? esm
+ ? `import * as echarts from 'echarts';${
+ hasGLInDeps(deps) ? `\nimport 'echarts-gl';` : ''
+ }`
+ : `var echarts = require('echarts');${
+ hasGLInDeps(deps) ? `\nrequire('echarts-gl');` : ''
+ }`
+ : legacy
+ ? buildLegacyMinimalBundleCode(deps, esm)
+ : buildMinimalBundleCode(deps, ts),
+ theme && theme !== 'dark'
+ ? esm
+ ? `import 'echarts/theme/${theme}'`
+ : `require('echarts/theme/${theme}')`
+ : '',
+ extraImports
+ ]
+ .filter((a) => !!a)
+ .join('\n');
+
+ const ENV_CODE = [
+ usedRootPath ? `var ROOT_PATH = '${ROOT_PATH}';` : '',
+ usedApp ? `var app${ts ? ': any' : ''} = {};` : '',
+ ts && !minimal ? 'type ECOption = echarts.EChartsOption' : ''
+ ]
+ .filter((a) => !!a)
+ .join('\n');
+
+ const PREPARE_CODE = [IMPORT_CODE.trim(), DEP_CODE.trim(), ENV_CODE.trim()]
+ .filter((a) => !!a)
+ .join('\n\n');
+
+ return `${PREPARE_CODE}
var chartDom = document.getElementById('main')${ts ? '!' : ''};
var myChart = echarts.init(chartDom${theme ? `, '${theme}'` : ''});
@@ -371,4 +402,4 @@ ${jsCode.trim()}
option && myChart.setOption(option);
`;
-}
\ No newline at end of file
+};
diff --git a/common/compareImage.js b/common/compareImage.js
index e0d3a93..1515933 100644
--- a/common/compareImage.js
+++ b/common/compareImage.js
@@ -3,45 +3,52 @@ const PNG = require('pngjs').PNG;
const pixelmatch = require('pixelmatch');
function readPNG(path) {
- return new Promise(resolve => {
- fs.createReadStream(path)
- .pipe(new PNG())
- .on('parsed', function () {
- resolve({
- data: this.data,
- width: this.width,
- height: this.height
- });
- });
- });
+ return new Promise((resolve) => {
+ fs.createReadStream(path)
+ .pipe(new PNG())
+ .on('parsed', function () {
+ resolve({
+ data: this.data,
+ width: this.width,
+ height: this.height
+ });
+ });
+ });
}
-module.exports.compareImage = function (targetPath, sourcePath, threshold = 0.1) {
- if (!fs.existsSync(targetPath)) {
- return true;
- }
+module.exports.compareImage = function (
+ targetPath,
+ sourcePath,
+ threshold = 0.1
+) {
+ if (!fs.existsSync(targetPath)) {
+ return true;
+ }
- return Promise.all([
- readPNG(targetPath),
- readPNG(sourcePath)
- ]).then(([expectedImg, actualImg]) => {
- let width = expectedImg.width;
- let height = expectedImg.height;
- if (
- (width !== actualImg.width)
- || (height !== actualImg.height)
- ) {
- return {diffRatio: 1}
+ return Promise.all([readPNG(targetPath), readPNG(sourcePath)]).then(
+ ([expectedImg, actualImg]) => {
+ let width = expectedImg.width;
+ let height = expectedImg.height;
+ if (width !== actualImg.width || height !== actualImg.height) {
+ return { diffRatio: 1 };
+ }
+ const diffPNG = new PNG({ width, height });
+ let diffPixelsCount = pixelmatch(
+ expectedImg.data,
+ actualImg.data,
+ diffPNG.data,
+ width,
+ height,
+ {
+ threshold
}
- const diffPNG = new PNG({width, height});
- let diffPixelsCount = pixelmatch(expectedImg.data, actualImg.data, diffPNG.data, width, height, {
- threshold
- });
- let totalPixelsCount = width * height;
+ );
+ let totalPixelsCount = width * height;
- return {
- diffRatio: diffPixelsCount / totalPixelsCount,
- diffPNG
- };
- });
-}
\ No newline at end of file
+ return {
+ diffRatio: diffPixelsCount / totalPixelsCount,
+ diffPNG
+ };
+ }
+ );
+};
diff --git a/common/task.js b/common/task.js
index f2e5f1c..4ad82ce 100644
--- a/common/task.js
+++ b/common/task.js
@@ -1,51 +1,49 @@
-function runTasks(
- taskParamsLists, createTask, concurrency
-) {
- concurrency = Math.min(taskParamsLists.length, concurrency);
- return new Promise((resolve, reject) => {
- let runningTaskCount = 0;
- let cursor = 0;
- let rets = [];
-
- function finishTask(res, idx) {
- rets[idx] = res;
- processNext();
- }
-
- function failTask(e) {
- console.error(e);
- processNext();
- }
-
- function processNext() {
- runningTaskCount--;
- addTask();
-
- if (runningTaskCount === 0) {
- resolve(rets);
- }
- }
-
- function addTask() {
- const param = taskParamsLists[cursor];
- if (param) {
- const currentTaskIdx = cursor;
- runningTaskCount++;
- createTask(param)
- .then((res) => finishTask(res, currentTaskIdx))
- .catch(failTask);
- cursor++;
- }
- }
-
- for (let i = 0; i < concurrency; i++) {
- addTask();
- }
-
- if (!runningTaskCount) {
- resolve(rets);
- }
- });
+function runTasks(taskParamsLists, createTask, concurrency) {
+ concurrency = Math.min(taskParamsLists.length, concurrency);
+ return new Promise((resolve, reject) => {
+ let runningTaskCount = 0;
+ let cursor = 0;
+ let rets = [];
+
+ function finishTask(res, idx) {
+ rets[idx] = res;
+ processNext();
+ }
+
+ function failTask(e) {
+ console.error(e);
+ processNext();
+ }
+
+ function processNext() {
+ runningTaskCount--;
+ addTask();
+
+ if (runningTaskCount === 0) {
+ resolve(rets);
+ }
+ }
+
+ function addTask() {
+ const param = taskParamsLists[cursor];
+ if (param) {
+ const currentTaskIdx = cursor;
+ runningTaskCount++;
+ createTask(param)
+ .then((res) => finishTask(res, currentTaskIdx))
+ .catch(failTask);
+ cursor++;
+ }
+ }
+
+ for (let i = 0; i < concurrency; i++) {
+ addTask();
+ }
+
+ if (!runningTaskCount) {
+ resolve(rets);
+ }
+ });
}
-module.exports.runTasks = runTasks;
\ No newline at end of file
+module.exports.runTasks = runTasks;
diff --git a/config/common.js b/config/common.js
index e4d473f..f053ebf 100644
--- a/config/common.js
+++ b/config/common.js
@@ -1,5 +1 @@
-
-module.exports = {
-};
-
-
+module.exports = {};
diff --git a/config/env.asf.js b/config/env.asf.js
index 8c08547..16d9a2e 100644
--- a/config/env.asf.js
+++ b/config/env.asf.js
@@ -2,7 +2,7 @@ const path = require('path');
const config = require('./common');
Object.assign(config, {
- releaseDestDir: path.resolve(__dirname, '../../echarts-website/examples')
+ releaseDestDir: path.resolve(__dirname, '../../echarts-website/examples')
});
module.exports = config;
diff --git a/config/env.dev.js b/config/env.dev.js
index 8c08547..16d9a2e 100644
--- a/config/env.dev.js
+++ b/config/env.dev.js
@@ -2,7 +2,7 @@ const path = require('path');
const config = require('./common');
Object.assign(config, {
- releaseDestDir: path.resolve(__dirname, '../../echarts-website/examples')
+ releaseDestDir: path.resolve(__dirname, '../../echarts-website/examples')
});
module.exports = config;
diff --git a/config/env.localsite.js b/config/env.localsite.js
index 84106f2..b8fdaaf 100644
--- a/config/env.localsite.js
+++ b/config/env.localsite.js
@@ -2,7 +2,7 @@ const path = require('path');
const config = require('./common');
Object.assign(config, {
- releaseDestDir: path.resolve(__dirname, '../../echarts-website/next/examples')
+ releaseDestDir: path.resolve(__dirname, '../../echarts-website/next/examples')
});
module.exports = config;
diff --git a/e2e/cases/README.md b/e2e/cases/README.md
index 7d12477..57c6a61 100644
--- a/e2e/cases/README.md
+++ b/e2e/cases/README.md
@@ -1,3 +1,3 @@
# Handwritten Cases
-Mostly for testing extensions.
\ No newline at end of file
+Mostly for testing extensions.
diff --git a/e2e/cases/liquidfill.js b/e2e/cases/liquidfill.js
index c219859..e257bb4 100644
--- a/e2e/cases/liquidfill.js
+++ b/e2e/cases/liquidfill.js
@@ -2,9 +2,11 @@
extension: echarts-liquidfill
*/
option = {
- series: [{
- type: 'liquidFill',
- data: [0.6],
- radius: '70%'
- }]
-};
\ No newline at end of file
+ series: [
+ {
+ type: 'liquidFill',
+ data: [0.6],
+ radius: '70%'
+ }
+ ]
+};
diff --git a/e2e/cases/wordcloud.js b/e2e/cases/wordcloud.js
index ee14f29..5c01bb8 100644
--- a/e2e/cases/wordcloud.js
+++ b/e2e/cases/wordcloud.js
@@ -2,120 +2,126 @@
extension: echarts-wordcloud
*/
option = {
- tooltip: {},
- series: [ {
- type: 'wordCloud',
- gridSize: 2,
- sizeRange: [12, 50],
- rotationRange: [-90, 90],
- shape: 'pentagon',
- width: 600,
- height: 400,
- drawOutOfBound: true,
+ tooltip: {},
+ series: [
+ {
+ type: 'wordCloud',
+ gridSize: 2,
+ sizeRange: [12, 50],
+ rotationRange: [-90, 90],
+ shape: 'pentagon',
+ width: 600,
+ height: 400,
+ drawOutOfBound: true,
+ textStyle: {
+ color: function () {
+ return (
+ 'rgb(' +
+ [
+ Math.round(Math.random() * 160),
+ Math.round(Math.random() * 160),
+ Math.round(Math.random() * 160)
+ ].join(',') +
+ ')'
+ );
+ }
+ },
+ emphasis: {
textStyle: {
- color: function () {
- return 'rgb(' + [
- Math.round(Math.random() * 160),
- Math.round(Math.random() * 160),
- Math.round(Math.random() * 160)
- ].join(',') + ')';
- }
- },
- emphasis: {
+ shadowBlur: 10,
+ shadowColor: '#333'
+ }
+ },
+ data: [
+ {
+ name: 'Sam S Club',
+ value: 10000,
+ textStyle: {
+ color: 'black'
+ },
+ emphasis: {
textStyle: {
- shadowBlur: 10,
- shadowColor: '#333'
+ color: 'red'
}
+ }
},
- data: [
- {
- name: 'Sam S Club',
- value: 10000,
- textStyle: {
- color: 'black'
- },
- emphasis: {
- textStyle: {
- color: 'red'
- }
- }
- },
- {
- name: 'Macys',
- value: 6181
- },
- {
- name: 'Amy Schumer',
- value: 4386
- },
- {
- name: 'Jurassic World',
- value: 4055
- },
- {
- name: 'Charter Communications',
- value: 2467
- },
- {
- name: 'Chick Fil A',
- value: 2244
- },
- {
- name: 'Planet Fitness',
- value: 1898
- },
- {
- name: 'Pitch Perfect',
- value: 1484
- },
- {
- name: 'Express',
- value: 1112
- },
- {
- name: 'Home',
- value: 965
- },
- {
- name: 'Johnny Depp',
- value: 847
- },
- {
- name: 'Lena Dunham',
- value: 582
- },
- {
- name: 'Lewis Hamilton',
- value: 555
- },
- {
- name: 'KXAN',
- value: 550
- },
- {
- name: 'Mary Ellen Mark',
- value: 462
- },
- {
- name: 'Farrah Abraham',
- value: 366
- },
- {
- name: 'Rita Ora',
- value: 360
- },
- {
- name: 'Serena Williams',
- value: 282
- },
- {
- name: 'NCAA baseball tournament',
- value: 273
- },
- {
- name: 'Point Break',
- value: 265
- }
- ]
- } ]
+ {
+ name: 'Macys',
+ value: 6181
+ },
+ {
+ name: 'Amy Schumer',
+ value: 4386
+ },
+ {
+ name: 'Jurassic World',
+ value: 4055
+ },
+ {
+ name: 'Charter Communications',
+ value: 2467
+ },
+ {
+ name: 'Chick Fil A',
+ value: 2244
+ },
+ {
+ name: 'Planet Fitness',
+ value: 1898
+ },
+ {
+ name: 'Pitch Perfect',
+ value: 1484
+ },
+ {
+ name: 'Express',
+ value: 1112
+ },
+ {
+ name: 'Home',
+ value: 965
+ },
+ {
+ name: 'Johnny Depp',
+ value: 847
+ },
+ {
+ name: 'Lena Dunham',
+ value: 582
+ },
+ {
+ name: 'Lewis Hamilton',
+ value: 555
+ },
+ {
+ name: 'KXAN',
+ value: 550
+ },
+ {
+ name: 'Mary Ellen Mark',
+ value: 462
+ },
+ {
+ name: 'Farrah Abraham',
+ value: 366
+ },
+ {
+ name: 'Rita Ora',
+ value: 360
+ },
+ {
+ name: 'Serena Williams',
+ value: 282
+ },
+ {
+ name: 'NCAA baseball tournament',
+ value: 273
+ },
+ {
+ name: 'Point Break',
+ value: 265
+ }
+ ]
+ }
+ ]
};
diff --git a/e2e/config.js b/e2e/config.js
index d377f17..61bbff2 100644
--- a/e2e/config.js
+++ b/e2e/config.js
@@ -1,32 +1,32 @@
const nodePath = require('path');
module.exports = {
- packages: [
- // Handwritten topological sort by the rule of dependency.
- {
- name: 'zrender', // package name
- dir: nodePath.resolve(__dirname, '../../zrender'),
- git: 'ecomfe/zrender#release'
- },
- {
- name: 'echarts',
- dir: nodePath.resolve(__dirname, '../../echarts'),
- git: 'apache/echarts#release'
- },
- {
- name: 'echarts-gl',
- dir: nodePath.resolve(__dirname, '../../echarts-gl'),
- git: 'ecomfe/echarts-gl#master'
- },
- {
- name: 'echarts-wordcloud',
- dir: nodePath.resolve(__dirname, '../../echarts-wordcloud'),
- git: 'ecomfe/echarts-wordcloud#master'
- },
- {
- name: 'echarts-liquidfill',
- dir: nodePath.resolve(__dirname, '../../echarts-liquidfill'),
- git: 'ecomfe/echarts-liquidfill#master'
- }
- ]
-}
\ No newline at end of file
+ packages: [
+ // Handwritten topological sort by the rule of dependency.
+ {
+ name: 'zrender', // package name
+ dir: nodePath.resolve(__dirname, '../../zrender'),
+ git: 'ecomfe/zrender#release'
+ },
+ {
+ name: 'echarts',
+ dir: nodePath.resolve(__dirname, '../../echarts'),
+ git: 'apache/echarts#release'
+ },
+ {
+ name: 'echarts-gl',
+ dir: nodePath.resolve(__dirname, '../../echarts-gl'),
+ git: 'ecomfe/echarts-gl#master'
+ },
+ {
+ name: 'echarts-wordcloud',
+ dir: nodePath.resolve(__dirname, '../../echarts-wordcloud'),
+ git: 'ecomfe/echarts-wordcloud#master'
+ },
+ {
+ name: 'echarts-liquidfill',
+ dir: nodePath.resolve(__dirname, '../../echarts-liquidfill'),
+ git: 'ecomfe/echarts-liquidfill#master'
+ }
+ ]
+};
diff --git a/e2e/main.js b/e2e/main.js
index c086f26..acc8517 100644
--- a/e2e/main.js
+++ b/e2e/main.js
@@ -2,7 +2,7 @@
const fs = require('fs');
const globby = require('globby');
-const {buildExampleCode, collectDeps} = require('../common/buildCode');
+const { buildExampleCode, collectDeps } = require('../common/buildCode');
const nodePath = require('path');
const { runTasks } = require('../common/task');
const fse = require('fs-extra');
@@ -11,37 +11,37 @@ const ts = require('typescript');
const chalk = require('chalk');
const nStatic = require('node-static');
const webpack = require('webpack');
-const {RawSource} = require('webpack-sources');
+const { RawSource } = require('webpack-sources');
const argparse = require('argparse');
const esbuild = require('esbuild');
const puppeteer = require('puppeteer');
const config = require('./config');
-const {compareImage} = require('../common/compareImage');
+const { compareImage } = require('../common/compareImage');
const shell = require('shelljs');
const downloadGit = require('download-git-repo');
-const {promisify} = require('util');
+const { promisify } = require('util');
const matter = require('gray-matter');
const minimatch = require('minimatch');
const parser = new argparse.ArgumentParser({
- addHelp: true
+ addHelp: true
});
parser.addArgument(['--bundler'], {
- help: 'Bundler, can be webpack or esbuild'
+ help: 'Bundler, can be webpack or esbuild'
});
parser.addArgument(['-m', '--minify'], {
- action: 'storeTrue',
- help: 'If minify'
+ action: 'storeTrue',
+ help: 'If minify'
});
parser.addArgument(['--local'], {
- action: 'storeTrue',
- help: `If use local repos. If so, don't forget to update the location of local repo in config.js.`
+ action: 'storeTrue',
+ help: `If use local repos. If so, don't forget to update the location of local repo in config.js.`
});
parser.addArgument(['--skip'], {
- help: 'If skip some stages to speed up the test. Can be npm,bundle,render,compare'
+ help: 'If skip some stages to speed up the test. Can be npm,bundle,render,compare'
});
parser.addArgument(['-t', '--tests'], {
- help: 'If use pattern to specify which tests to run'
+ help: 'If use pattern to specify which tests to run'
});
const args = parser.parseArgs();
@@ -63,7 +63,7 @@ const USE_WEBPACK = !(args.bundler === 'esbuild');
let testsPattern = args.tests;
if (testsPattern) {
- testsPattern = testsPattern.split(',');
+ testsPattern = testsPattern.split(',');
}
// Create a server
@@ -89,21 +89,23 @@ echarts.registerPreprocessor(function (option) {
});
}
});
-`
+`;
function buildPrepareCode(isESM, lang) {
- return `
+ return `
// @ts-ignore
-${isESM
+${
+ isESM
? `import _seedrandom from 'seedrandom';`
: `const _seedrandom = require('seedrandom');`
}
// Check if i18n will break the minimal imports.
-${lang
+${
+ lang
? isESM
- ? `import 'echarts/i18n/${lang}';`
- : `require('echarts/i18n/${lang}');`
+ ? `import 'echarts/i18n/${lang}';`
+ : `require('echarts/i18n/${lang}');`
: ''
}
// @ts-ignore
@@ -118,657 +120,767 @@ ${TEMPLATE_CODE}
}
async function prepare() {
- fse.removeSync(TMP_DIR);
- fse.removeSync(RUN_CODE_DIR);
- fse.removeSync(BUNDLE_DIR);
- fse.removeSync(SCREENSHOTS_DIR);
+ fse.removeSync(TMP_DIR);
+ fse.removeSync(RUN_CODE_DIR);
+ fse.removeSync(BUNDLE_DIR);
+ fse.removeSync(SCREENSHOTS_DIR);
- fse.removeSync(REPO_DIR);
- fse.removeSync(PACKAGE_DIR);
+ fse.removeSync(REPO_DIR);
+ fse.removeSync(PACKAGE_DIR);
- fse.ensureDirSync(TMP_DIR);
- fse.ensureDirSync(RUN_CODE_DIR);
- fse.ensureDirSync(BUNDLE_DIR);
- fse.ensureDirSync(SCREENSHOTS_DIR);
+ fse.ensureDirSync(TMP_DIR);
+ fse.ensureDirSync(RUN_CODE_DIR);
+ fse.ensureDirSync(BUNDLE_DIR);
+ fse.ensureDirSync(SCREENSHOTS_DIR);
- fse.ensureDirSync(REPO_DIR);
- fse.ensureDirSync(PACKAGE_DIR);
+ fse.ensureDirSync(REPO_DIR);
+ fse.ensureDirSync(PACKAGE_DIR);
}
async function downloadPackages(config) {
- for (let pkg of config.packages) {
- const pkgDownloadPath = nodePath.join(REPO_DIR, pkg.name);
- console.log(chalk.gray(`Downloading ${pkg.git}`))
- await promisify(downloadGit)(pkg.git, pkgDownloadPath);
- // Override the path
- pkg.dir = pkgDownloadPath;
- }
+ for (let pkg of config.packages) {
+ const pkgDownloadPath = nodePath.join(REPO_DIR, pkg.name);
+ console.log(chalk.gray(`Downloading ${pkg.git}`));
+ await promisify(downloadGit)(pkg.git, pkgDownloadPath);
+ // Override the path
+ pkg.dir = pkgDownloadPath;
+ }
}
async function installPackages(config) {
-
- const publishedPackages = {};
-
- function checkFolder(pkg) {
- const dir = pkg.dir;
- if (!fs.existsSync(dir)) {
- console.warn(chalk.yellow(`${dir} not exists. Please update it in e2e/config.js.`));
- return false;
- }
- if (!nodePath.isAbsolute(dir)) {
- console.warn(chalk.yellow(`${dir} is not an absolute path. Please update it in e2e/config.js.`));
- return false;
- }
- return true;
+ const publishedPackages = {};
+
+ function checkFolder(pkg) {
+ const dir = pkg.dir;
+ if (!fs.existsSync(dir)) {
+ console.warn(
+ chalk.yellow(`${dir} not exists. Please update it in e2e/config.js.`)
+ );
+ return false;
}
+ if (!nodePath.isAbsolute(dir)) {
+ console.warn(
+ chalk.yellow(
+ `${dir} is not an absolute path. Please update it in e2e/config.js.`
+ )
+ );
+ return false;
+ }
+ return true;
+ }
- function publishPackage(pkg) {
- console.log(chalk.gray(`Publishing ${pkg.dir}`))
-
- shell.cd(pkg.dir);
-
- const packageJson = JSON.parse(fs.readFileSync(nodePath.join(pkg.dir, 'package.json')));
- const tgzFileName = `${packageJson.name}-${packageJson.version}.tgz`;
- const targetTgzFilePath = nodePath.join(PACKAGE_DIR, tgzFileName);
-
- if (packageJson.dependencies) {
- for (let depPkgName in packageJson.dependencies) {
- const depPkg = config.packages.find(a => a.name === depPkgName);
- if (depPkg && !publishedPackages[depPkgName]) {
- publishPackage(depPkg);
- // Come back.
- shell.cd(pkg.dir);
- }
+ function publishPackage(pkg) {
+ console.log(chalk.gray(`Publishing ${pkg.dir}`));
- shell.exec(`npm install`);
+ shell.cd(pkg.dir);
- if (depPkg) {
- console.log(chalk.gray(`Installing dependency ${depPkgName} from "${publishedPackages[depPkgName]}" ...`));
- shell.exec(`npm install ${publishedPackages[depPkgName]} --no-save`);
- console.log(chalk.gray(`Install dependency ${depPkgName} done.`));
- }
- }
+ const packageJson = JSON.parse(
+ fs.readFileSync(nodePath.join(pkg.dir, 'package.json'))
+ );
+ const tgzFileName = `${packageJson.name}-${packageJson.version}.tgz`;
+ const targetTgzFilePath = nodePath.join(PACKAGE_DIR, tgzFileName);
+
+ if (packageJson.dependencies) {
+ for (let depPkgName in packageJson.dependencies) {
+ const depPkg = config.packages.find((a) => a.name === depPkgName);
+ if (depPkg && !publishedPackages[depPkgName]) {
+ publishPackage(depPkg);
+ // Come back.
+ shell.cd(pkg.dir);
}
- shell.exec(`npm pack`);
- fs.renameSync(nodePath.join(pkg.dir, tgzFileName), targetTgzFilePath);
- publishedPackages[packageJson.name] = targetTgzFilePath;
- }
+ shell.exec(`npm install`);
- for (let pkg of config.packages) {
- if (!checkFolder(pkg)) {
- return;
+ if (depPkg) {
+ console.log(
+ chalk.gray(
+ `Installing dependency ${depPkgName} from "${publishedPackages[depPkgName]}" ...`
+ )
+ );
+ shell.exec(`npm install ${publishedPackages[depPkgName]} --no-save`);
+ console.log(chalk.gray(`Install dependency ${depPkgName} done.`));
}
-
- publishPackage(pkg);
- };
-
- shell.cd(__dirname);
- for (let pkg of config.packages) {
- console.log(chalk.gray(`Installing ${pkg.name} from "${publishedPackages[pkg.name]}" ...`));
- shell.exec(`npm install ${publishedPackages[pkg.name]} --no-save`);
- console.log(chalk.gray(`Install ${pkg.name} done.`));
- }
-
- // Come back.
- shell.cd(process.cwd());
-}
-
-async function buildRunCode() {
- const files = await globby([
- `${EXAMPLE_DIR}/data/option/*.json`,
- `${EXAMPLE_DIR}/data-gl/option/*.json`
- ]);
-
- if (!files.length) {
- throw new Error('You need to run `node tool/build-example.js` before run this test.');
+ }
}
- async function addTestCase(testName, testCode, deps, checkTs, extraImports, extraRequire) {
- const ROOT_PATH = `${baseUrl}/public`;
+ shell.exec(`npm pack`);
+ fs.renameSync(nodePath.join(pkg.dir, tgzFileName), targetTgzFilePath);
+ publishedPackages[packageJson.name] = targetTgzFilePath;
+ }
- const fullCode = buildExampleCode(buildPrepareCode(true) + testCode, deps, {
- minimal: false,
- ts: checkTs,
- // Check if theme will break the minimal imports.
- theme: TEST_THEME,
- ROOT_PATH,
- extraImports
- });
- const minimalCode = buildExampleCode(buildPrepareCode(true) + testCode, deps, {
- minimal: true,
- ts: checkTs,
- theme: TEST_THEME,
- ROOT_PATH,
- extraImports
- });
- const legacyCode = buildExampleCode(buildPrepareCode(false) + testCode, deps, {
- minimal: true,
- esm: false,
- ts: false,
- theme: TEST_THEME,
- ROOT_PATH,
- extraImports: extraRequire
- });
-
- await fse.writeFile(
- nodePath.join(RUN_CODE_DIR, testName + (checkTs ? '.ts' : '.js')),
- prettier.format(fullCode, {
- singleQuote: true,
- parser: checkTs ? 'typescript' : 'babel'
- }), 'utf-8'
- );
- await fse.writeFile(
- nodePath.join(RUN_CODE_DIR, testName + `.${MINIMAL_POSTFIX}.${checkTs ? 'ts' : 'js'}`),
- prettier.format(minimalCode, {
- singleQuote: true,
- parser: checkTs ? 'typescript' : 'babel'
- }), 'utf-8'
- );
- await fse.writeFile(
- nodePath.join(RUN_CODE_DIR, testName + `.${MINIMAL_LEGACY_POSTFIX}.js`),
- prettier.format(legacyCode, {
- singleQuote: true,
- parser: 'babel'
- }), 'utf-8'
- );
- console.log(
- chalk.green('Generated: ', testName)
- );
+ for (let pkg of config.packages) {
+ if (!checkFolder(pkg)) {
+ return;
}
- const builtinTestCases = await runTasks(files, async (fileName) => {
- const isGL = fileName.startsWith(`${EXAMPLE_DIR}/data-gl`);
- const testName = nodePath.basename(fileName, '.json');
-
- if (testsPattern && !testsPattern.some(pattern => minimatch(testName, pattern))) {
- return;
- }
+ publishPackage(pkg);
+ }
- const optionCode = await fse.readFile(fileName, 'utf-8');
- let option;
- try {
- option = JSON.parse(optionCode);
- }
- catch (err) {
- console.error(`Parse JSON error: fileName: ${fileName} | fileContent: ${optionCode}`);
- throw err;
- }
- const testCode = await fse.readFile(nodePath.join(
- EXAMPLE_DIR, isGL ? 'data-gl' : 'data', testName + '.js'
- ), 'utf-8');
-
- // TODO Ignore case with extension.
-
- const deps = collectDeps(option).concat([
- // TODO SVG
- 'CanvasRenderer'
- ]);
-
- if (
- !(testName === 'map-HK' || testName === 'map-usa') // Only test these two map examples
- && (deps.includes('MapChart')
- || deps.includes('GeoComponent')
- || option.bmap)
- ) {
- console.warn(chalk.yellow(`Ignored map tests ${testName}`));
- return;
- }
+ shell.cd(__dirname);
+ for (let pkg of config.packages) {
+ console.log(
+ chalk.gray(
+ `Installing ${pkg.name} from "${publishedPackages[pkg.name]}" ...`
+ )
+ );
+ shell.exec(`npm install ${publishedPackages[pkg.name]} --no-save`);
+ console.log(chalk.gray(`Install ${pkg.name} done.`));
+ }
- // TODO: Don't support TypeScript in GL
- await addTestCase(testName, testCode, deps, !isGL);
+ // Come back.
+ shell.cd(process.cwd());
+}
- return testName;
- }, 20);
- const extensionTestCases = await runTasks(await globby(__dirname + '/cases/*.js'), async (fileName) => {
- const testName = nodePath.basename(fileName, '.js');
- if (testsPattern && !testsPattern.some(pattern => minimatch(testName, pattern))) {
- return;
- }
+async function buildRunCode() {
+ const files = await globby([
+ `${EXAMPLE_DIR}/data/option/*.json`,
+ `${EXAMPLE_DIR}/data-gl/option/*.json`
+ ]);
+
+ if (!files.length) {
+ throw new Error(
+ 'You need to run `node tool/build-example.js` before run this test.'
+ );
+ }
+
+ async function addTestCase(
+ testName,
+ testCode,
+ deps,
+ checkTs,
+ extraImports,
+ extraRequire
+ ) {
+ const ROOT_PATH = `${baseUrl}/public`;
+
+ const fullCode = buildExampleCode(buildPrepareCode(true) + testCode, deps, {
+ minimal: false,
+ ts: checkTs,
+ // Check if theme will break the minimal imports.
+ theme: TEST_THEME,
+ ROOT_PATH,
+ extraImports
+ });
+ const minimalCode = buildExampleCode(
+ buildPrepareCode(true) + testCode,
+ deps,
+ {
+ minimal: true,
+ ts: checkTs,
+ theme: TEST_THEME,
+ ROOT_PATH,
+ extraImports
+ }
+ );
+ const legacyCode = buildExampleCode(
+ buildPrepareCode(false) + testCode,
+ deps,
+ {
+ minimal: true,
+ esm: false,
+ ts: false,
+ theme: TEST_THEME,
+ ROOT_PATH,
+ extraImports: extraRequire
+ }
+ );
- const testCode = await fse.readFile(fileName, 'utf-8');
- let importsCode = '';
- let requireCode = '';
- try {
- const fmResult = matter(testCode, {
- delimiters: ['/*', '*/']
- });
- const extension = fmResult.data.extension;
- if (extension) {
- importsCode = `import '${extension}';`;
- requireCode = `require('${extension}');`;
- }
- }
- catch (e) {
+ await fse.writeFile(
+ nodePath.join(RUN_CODE_DIR, testName + (checkTs ? '.ts' : '.js')),
+ prettier.format(fullCode, {
+ singleQuote: true,
+ parser: checkTs ? 'typescript' : 'babel'
+ }),
+ 'utf-8'
+ );
+ await fse.writeFile(
+ nodePath.join(
+ RUN_CODE_DIR,
+ testName + `.${MINIMAL_POSTFIX}.${checkTs ? 'ts' : 'js'}`
+ ),
+ prettier.format(minimalCode, {
+ singleQuote: true,
+ parser: checkTs ? 'typescript' : 'babel'
+ }),
+ 'utf-8'
+ );
+ await fse.writeFile(
+ nodePath.join(RUN_CODE_DIR, testName + `.${MINIMAL_LEGACY_POSTFIX}.js`),
+ prettier.format(legacyCode, {
+ singleQuote: true,
+ parser: 'babel'
+ }),
+ 'utf-8'
+ );
+ console.log(chalk.green('Generated: ', testName));
+ }
+
+ const builtinTestCases = await runTasks(
+ files,
+ async (fileName) => {
+ const isGL = fileName.startsWith(`${EXAMPLE_DIR}/data-gl`);
+ const testName = nodePath.basename(fileName, '.json');
+
+ if (
+ testsPattern &&
+ !testsPattern.some((pattern) => minimatch(testName, pattern))
+ ) {
+ return;
+ }
+
+ const optionCode = await fse.readFile(fileName, 'utf-8');
+ let option;
+ try {
+ option = JSON.parse(optionCode);
+ } catch (err) {
+ console.error(
+ `Parse JSON error: fileName: ${fileName} | fileContent: ${optionCode}`
+ );
+ throw err;
+ }
+ const testCode = await fse.readFile(
+ nodePath.join(EXAMPLE_DIR, isGL ? 'data-gl' : 'data', testName + '.js'),
+ 'utf-8'
+ );
+
+ // TODO Ignore case with extension.
+
+ const deps = collectDeps(option).concat([
+ // TODO SVG
+ 'CanvasRenderer'
+ ]);
+
+ if (
+ !(testName === 'map-HK' || testName === 'map-usa') && // Only test these two map examples
+ (deps.includes('MapChart') ||
+ deps.includes('GeoComponent') ||
+ option.bmap)
+ ) {
+ console.warn(chalk.yellow(`Ignored map tests ${testName}`));
+ return;
+ }
+
+ // TODO: Don't support TypeScript in GL
+ await addTestCase(testName, testCode, deps, !isGL);
+
+ return testName;
+ },
+ 20
+ );
+ const extensionTestCases = await runTasks(
+ await globby(__dirname + '/cases/*.js'),
+ async (fileName) => {
+ const testName = nodePath.basename(fileName, '.js');
+ if (
+ testsPattern &&
+ !testsPattern.some((pattern) => minimatch(testName, pattern))
+ ) {
+ return;
+ }
+
+ const testCode = await fse.readFile(fileName, 'utf-8');
+ let importsCode = '';
+ let requireCode = '';
+ try {
+ const fmResult = matter(testCode, {
+ delimiters: ['/*', '*/']
+ });
+ const extension = fmResult.data.extension;
+ if (extension) {
+ importsCode = `import '${extension}';`;
+ requireCode = `require('${extension}');`;
}
- await addTestCase(testName, testCode, [], false, importsCode, requireCode);
-
- return testName;
- }, 20);
-
- return builtinTestCases.concat(extensionTestCases).filter(a => !!a);
+ } catch (e) {}
+ await addTestCase(
+ testName,
+ testCode,
+ [],
+ false,
+ importsCode,
+ requireCode
+ );
+
+ return testName;
+ },
+ 20
+ );
+
+ return builtinTestCases.concat(extensionTestCases).filter((a) => !!a);
}
async function compileTs(tsTestFiles, result) {
- const config = JSON.parse(fs.readFileSync(nodePath.join(__dirname, 'tsconfig.json'), 'utf-8'));
-
- const compilerOptions = {
- ...config.compilerOptions
- };
-
- const {options, errors} = ts.convertCompilerOptionsFromJson(compilerOptions, nodePath.resolve(__dirname));
-
- if (errors.length) {
- let errMsg = 'tsconfig parse failed: '
- + errors.map(error => error.messageText).join('. ')
- + '\n compilerOptions: \n' + JSON.stringify(config.compilerOptions, null, 4);
- assert(false, errMsg);
- }
-
- // Generate this config file for checking the source code in vscode.
- fs.writeFileSync(nodePath.join(RUN_CODE_DIR, 'tsconfig.json'), JSON.stringify({
+ const config = JSON.parse(
+ fs.readFileSync(nodePath.join(__dirname, 'tsconfig.json'), 'utf-8')
+ );
+
+ const compilerOptions = {
+ ...config.compilerOptions
+ };
+
+ const { options, errors } = ts.convertCompilerOptionsFromJson(
+ compilerOptions,
+ nodePath.resolve(__dirname)
+ );
+
+ if (errors.length) {
+ let errMsg =
+ 'tsconfig parse failed: ' +
+ errors.map((error) => error.messageText).join('. ') +
+ '\n compilerOptions: \n' +
+ JSON.stringify(config.compilerOptions, null, 4);
+ assert(false, errMsg);
+ }
+
+ // Generate this config file for checking the source code in vscode.
+ fs.writeFileSync(
+ nodePath.join(RUN_CODE_DIR, 'tsconfig.json'),
+ JSON.stringify(
+ {
compilerOptions
- }, null, 2), 'utf-8');
-
- // See: https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API
- let program = ts.createProgram(tsTestFiles, options);
- let emitResult = program.emit();
-
- let allDiagnostics = ts
- .getPreEmitDiagnostics(program)
- .concat(emitResult.diagnostics);
-
- allDiagnostics.forEach(diagnostic => {
- if (diagnostic.file) {
- let {line, character} = diagnostic.file.getLineAndCharacterOfPosition(diagnostic.start);
- let message = ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n');
-
- const compilerError = {
- location: [line + 1, character + 1],
- message
- };
- if (diagnostic.file.fileName.endsWith(`${MINIMAL_POSTFIX}.ts`)) {
- const basename = nodePath.basename(diagnostic.file.fileName, `.${MINIMAL_POSTFIX}.ts`);
- if (!result[basename]) {
- throw new Error(`${basename} does not exists in result.`);
- }
- result[basename].compileErrors.minimal.push(compilerError);
- }
- else {
- const basename = nodePath.basename(diagnostic.file.fileName, `.ts`);
- if (!result[basename]) {
- throw new Error(`${basename} does not exists in result.`);
- }
- result[basename].compileErrors.full.push(compilerError);
- }
- // console.log(chalk.red(`${diagnostic.file.fileName} (${line + 1},${character + 1})`));
- // console.log(chalk.gray(message));
+ },
+ null,
+ 2
+ ),
+ 'utf-8'
+ );
+
+ // See: https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API
+ let program = ts.createProgram(tsTestFiles, options);
+ let emitResult = program.emit();
+
+ let allDiagnostics = ts
+ .getPreEmitDiagnostics(program)
+ .concat(emitResult.diagnostics);
+
+ allDiagnostics.forEach((diagnostic) => {
+ if (diagnostic.file) {
+ let { line, character } = diagnostic.file.getLineAndCharacterOfPosition(
+ diagnostic.start
+ );
+ let message = ts.flattenDiagnosticMessageText(
+ diagnostic.messageText,
+ '\n'
+ );
+
+ const compilerError = {
+ location: [line + 1, character + 1],
+ message
+ };
+ if (diagnostic.file.fileName.endsWith(`${MINIMAL_POSTFIX}.ts`)) {
+ const basename = nodePath.basename(
+ diagnostic.file.fileName,
+ `.${MINIMAL_POSTFIX}.ts`
+ );
+ if (!result[basename]) {
+ throw new Error(`${basename} does not exists in result.`);
}
- else {
- console.log(chalk.red(ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n')));
+ result[basename].compileErrors.minimal.push(compilerError);
+ } else {
+ const basename = nodePath.basename(diagnostic.file.fileName, `.ts`);
+ if (!result[basename]) {
+ throw new Error(`${basename} does not exists in result.`);
}
- });
- // assert(!emitResult.emitSkipped, 'ts compile failed.');
+ result[basename].compileErrors.full.push(compilerError);
+ }
+ // console.log(chalk.red(`${diagnostic.file.fileName} (${line + 1},${character + 1})`));
+ // console.log(chalk.gray(message));
+ } else {
+ console.log(
+ chalk.red(ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n'))
+ );
+ }
+ });
+ // assert(!emitResult.emitSkipped, 'ts compile failed.');
}
async function webpackBundle(esbuildService, entry, result) {
- return new Promise((resolve) => {
- webpack({
- entry,
- output: {
- path: BUNDLE_DIR,
- filename: '[name].js'
- },
- // Use esbuild as minify, terser is tooooooo slow for so much tests.
- optimization: {
- minimizer: MINIFY_BUNDLE ? [{
- apply(compiler) {
- compiler.hooks.compilation.tap(
- 'ESBuild Minify',
- (compilation) => {
- compilation.hooks.optimizeChunkAssets.tapPromise(
- 'ESBuild Minify',
- async (chunks) => {
- for (const chunk of chunks) {
- for (const file of chunk.files) {
- const asset = compilation.assets[file];
- const { source } = asset.sourceAndMap();
- const result = await esbuildService.transform(source, {
- minify: true,
- sourcemap: false
- });
- compilation.updateAsset(file, () => {
- return new RawSource(result.code || '');
- });
- }
- }
- }
+ return new Promise((resolve) => {
+ webpack(
+ {
+ entry,
+ output: {
+ path: BUNDLE_DIR,
+ filename: '[name].js'
+ },
+ // Use esbuild as minify, terser is tooooooo slow for so much tests.
+ optimization: {
+ minimizer: MINIFY_BUNDLE
+ ? [
+ {
+ apply(compiler) {
+ compiler.hooks.compilation.tap(
+ 'ESBuild Minify',
+ (compilation) => {
+ compilation.hooks.optimizeChunkAssets.tapPromise(
+ 'ESBuild Minify',
+ async (chunks) => {
+ for (const chunk of chunks) {
+ for (const file of chunk.files) {
+ const asset = compilation.assets[file];
+ const { source } = asset.sourceAndMap();
+ const result = await esbuildService.transform(
+ source,
+ {
+ minify: true,
+ sourcemap: false
+ }
);
- },
- );
-
- }
- }] : []
- }
- }, (err, stats) => {
- if (err || stats.hasErrors()) {
- if (err) {
- console.error(err.stack || err);
- if (err.details) {
- console.error(err.details);
- }
- resolve();
- return;
- }
-
- const info = stats.toJson();
-
- if (stats.hasErrors()) {
- console.error(info.errors);
- }
-
- if (stats.hasWarnings()) {
- console.warn(info.warnings);
+ compilation.updateAsset(file, () => {
+ return new RawSource(result.code || '');
+ });
+ }
+ }
+ }
+ );
+ }
+ );
+ }
}
+ ]
+ : []
+ }
+ },
+ (err, stats) => {
+ if (err || stats.hasErrors()) {
+ if (err) {
+ console.error(err.stack || err);
+ if (err.details) {
+ console.error(err.details);
}
- else {
- console.log(chalk.green(`${Object.values(entry).map(a => `Bundled ${a}`).join('\n')}`));
- }
-
resolve();
- });
- })
+ return;
+ }
+
+ const info = stats.toJson();
+
+ if (stats.hasErrors()) {
+ console.error(info.errors);
+ }
+
+ if (stats.hasWarnings()) {
+ console.warn(info.warnings);
+ }
+ } else {
+ console.log(
+ chalk.green(
+ `${Object.values(entry)
+ .map((a) => `Bundled ${a}`)
+ .join('\n')}`
+ )
+ );
+ }
+
+ resolve();
+ }
+ );
+ });
}
function esbuildBundle(entry, result, minify) {
- return esbuild.build({
- entryPoints: entry,
- bundle: true,
- minify: minify,
- define: {
- 'process.env.NODE_ENV': JSON.stringify(minify ? 'production' : 'development')
- },
- outdir: BUNDLE_DIR
- });
+ return esbuild.build({
+ entryPoints: entry,
+ bundle: true,
+ minify: minify,
+ define: {
+ 'process.env.NODE_ENV': JSON.stringify(
+ minify ? 'production' : 'development'
+ )
+ },
+ outdir: BUNDLE_DIR
+ });
}
async function bundle(entryFiles, result) {
- if (USE_WEBPACK) {
- // Split to multiple buckets to seepup bundle
- // TODO Multiple entry may have effects on the final bundle.
- const BUCKET_SIZE = 1;
- const buckets = [];
- const esbuildService = await esbuild.startService();
- let count = 0;
- outer: while (true) {
- const bucket = {};
- for (let i = 0; i < BUCKET_SIZE; i++) {
- const filePath = entryFiles[count++];
- if (!filePath) {
- break outer;
- }
- const basename = nodePath.basename(filePath, '.js');
- bucket[basename] = filePath;
- }
- buckets.push(bucket);
- }
-
- // TODO Multiple thread.
- for (let bucket of buckets) {
- await webpackBundle(esbuildService, bucket, result);
+ if (USE_WEBPACK) {
+ // Split to multiple buckets to seepup bundle
+ // TODO Multiple entry may have effects on the final bundle.
+ const BUCKET_SIZE = 1;
+ const buckets = [];
+ const esbuildService = await esbuild.startService();
+ let count = 0;
+ outer: while (true) {
+ const bucket = {};
+ for (let i = 0; i < BUCKET_SIZE; i++) {
+ const filePath = entryFiles[count++];
+ if (!filePath) {
+ break outer;
}
+ const basename = nodePath.basename(filePath, '.js');
+ bucket[basename] = filePath;
+ }
+ buckets.push(bucket);
+ }
- esbuildService.stop();
+ // TODO Multiple thread.
+ for (let bucket of buckets) {
+ await webpackBundle(esbuildService, bucket, result);
}
- else {
- for (let file of entryFiles) {
- await esbuildBundle([file], result, MINIFY_BUNDLE);
- console.log(chalk.green(`Bundled ${file}`));
- }
+
+ esbuildService.stop();
+ } else {
+ for (let file of entryFiles) {
+ await esbuildBundle([file], result, MINIFY_BUNDLE);
+ console.log(chalk.green(`Bundled ${file}`));
}
+ }
}
function waitTime(time) {
- return new Promise((resolve) => setTimeout(resolve, time));
+ return new Promise((resolve) => setTimeout(resolve, time));
}
async function runExamples(jsFiles, result) {
- const fileServer = new nStatic.Server(__dirname + '/../');
- const server = require('http').createServer(function (request, response) {
- request.addListener('end', function () {
- fileServer.serve(request, response);
- }).resume();
- })
- server.listen(port);
+ const fileServer = new nStatic.Server(__dirname + '/../');
+ const server = require('http').createServer(function (request, response) {
+ request
+ .addListener('end', function () {
+ fileServer.serve(request, response);
+ })
+ .resume();
+ });
+ server.listen(port);
+
+ try {
+ const IGNORE_LOG = [
+ 'A cookie associated with a cross-site resource at',
+ 'A parser-blocking, cross site',
+ // For ECharts GL
+ 'RENDER WARNING',
+ 'GL ERROR',
+ 'GL_INVALID_OPERATION'
+ ];
+
+ const browser = await puppeteer.launch({
+ headless: false,
+ args: [
+ '--headless',
+ '--hide-scrollbars',
+ // https://github.com/puppeteer/puppeteer/issues/4913
+ '--use-gl=egl',
+ '--mute-audio'
+ ]
+ });
- try {
- const IGNORE_LOG = [
- 'A cookie associated with a cross-site resource at',
- 'A parser-blocking, cross site',
- // For ECharts GL
- 'RENDER WARNING',
- 'GL ERROR',
- 'GL_INVALID_OPERATION'
- ];
-
- const browser = await puppeteer.launch({
- headless: false,
- args: [
- '--headless',
- '--hide-scrollbars',
- // https://github.com/puppeteer/puppeteer/issues/4913
- '--use-gl=egl',
- '--mute-audio'
- ]
+ await runTasks(
+ jsFiles,
+ async (file) => {
+ const page = await browser.newPage();
+ const basename = nodePath.basename(file, '.js');
+ await page.setViewport({ width: 800, height: 600 });
+
+ page.on('pageerror', function (err) {
+ // TODO Record pageerror
+ console.error(chalk.red(`[PAGE ERROR] [${basename}]`));
+ console.error(chalk.red(err.toString()));
+ });
+ page.on('console', (msg) => {
+ const text = msg.text();
+ if (!IGNORE_LOG.find((a) => text.indexOf(a) >= 0)) {
+ console.log(chalk.gray(`[PAGE LOG] [${basename}]: ${text}`));
+ }
});
- await runTasks(jsFiles, async (file) => {
- const page = await browser.newPage();
- const basename = nodePath.basename(file, '.js');
- await page.setViewport({ width: 800, height: 600 });
-
- page.on('pageerror', function (err) {
- // TODO Record pageerror
- console.error(chalk.red(`[PAGE ERROR] [${basename}]`));
- console.error(chalk.red(err.toString()));
- });
- page.on('console', msg => {
- const text = msg.text();
- if (!IGNORE_LOG.find(a => text.indexOf(a) >= 0)) {
- console.log(chalk.gray(`[PAGE LOG] [${basename}]: ${text}`));
- }
- });
-
- await page.goto(`${baseUrl}/e2e/template.html`, {
- waitUntil: 'networkidle0',
- timeout: 10000
- });
- await page.addScriptTag({
- url: `${baseUrl}/e2e/tmp/bundles/${basename}.js`
- });
- await waitTime(200);
-
- await page.screenshot({
- type: 'png',
- path: nodePath.resolve(SCREENSHOTS_DIR, basename + '.png')
- });
-
- await page.close();
-
- console.log(chalk.green(`Rendered ${file}`));
- }, 8);
- }
- catch (e) {
- server.close();
- throw e;
- }
-}
+ await page.goto(`${baseUrl}/e2e/template.html`, {
+ waitUntil: 'networkidle0',
+ timeout: 10000
+ });
+ await page.addScriptTag({
+ url: `${baseUrl}/e2e/tmp/bundles/${basename}.js`
+ });
+ await waitTime(200);
+ await page.screenshot({
+ type: 'png',
+ path: nodePath.resolve(SCREENSHOTS_DIR, basename + '.png')
+ });
-async function compareExamples(testNames, result) {
+ await page.close();
- function writePNG(png, diffPath) {
- return new Promise(resolve => {
- const writer = fs.createWriteStream(diffPath);
- png.pack().pipe(writer);
- writer.on('finish', () => { resolve(); });
- });
- }
+ console.log(chalk.green(`Rendered ${file}`));
+ },
+ 8
+ );
+ } catch (e) {
+ server.close();
+ throw e;
+ }
+}
- for (let testName of testNames) {
- const diffMinimal = await compareImage(
- nodePath.resolve(SCREENSHOTS_DIR, testName + '.png'),
- nodePath.resolve(SCREENSHOTS_DIR, `${testName}.${MINIMAL_POSTFIX}.png`)
- );
- const diffMinimalLegacy = await compareImage(
- nodePath.resolve(SCREENSHOTS_DIR, testName + '.png'),
- nodePath.resolve(SCREENSHOTS_DIR, `${testName}.${MINIMAL_LEGACY_POSTFIX}.png`)
- );
+async function compareExamples(testNames, result) {
+ function writePNG(png, diffPath) {
+ return new Promise((resolve) => {
+ const writer = fs.createWriteStream(diffPath);
+ png.pack().pipe(writer);
+ writer.on('finish', () => {
+ resolve();
+ });
+ });
+ }
- const diffMinimalPNGPath = nodePath.resolve(SCREENSHOTS_DIR, `${testName}.${MINIMAL_POSTFIX}.diff.png`);
- const diffMinimalLegacyPNGPath = nodePath.resolve(SCREENSHOTS_DIR, `${testName}.${MINIMAL_LEGACY_POSTFIX}.diff.png`);
+ for (let testName of testNames) {
+ const diffMinimal = await compareImage(
+ nodePath.resolve(SCREENSHOTS_DIR, testName + '.png'),
+ nodePath.resolve(SCREENSHOTS_DIR, `${testName}.${MINIMAL_POSTFIX}.png`)
+ );
+ const diffMinimalLegacy = await compareImage(
+ nodePath.resolve(SCREENSHOTS_DIR, testName + '.png'),
+ nodePath.resolve(
+ SCREENSHOTS_DIR,
+ `${testName}.${MINIMAL_LEGACY_POSTFIX}.png`
+ )
+ );
- writePNG(diffMinimal.diffPNG, diffMinimalPNGPath);
- writePNG(diffMinimalLegacy.diffPNG, diffMinimalLegacyPNGPath);
+ const diffMinimalPNGPath = nodePath.resolve(
+ SCREENSHOTS_DIR,
+ `${testName}.${MINIMAL_POSTFIX}.diff.png`
+ );
+ const diffMinimalLegacyPNGPath = nodePath.resolve(
+ SCREENSHOTS_DIR,
+ `${testName}.${MINIMAL_LEGACY_POSTFIX}.diff.png`
+ );
- result[testName].screenshotDiff = {
- minimal: {
- ratio: diffMinimal.diffRatio,
- png: nodePath.basename(diffMinimalPNGPath)
- },
- minimalLegacy: {
- ratio: diffMinimalLegacy.diffRatio,
- png: nodePath.basename(diffMinimalLegacyPNGPath)
- }
- }
+ writePNG(diffMinimal.diffPNG, diffMinimalPNGPath);
+ writePNG(diffMinimalLegacy.diffPNG, diffMinimalLegacyPNGPath);
+
+ result[testName].screenshotDiff = {
+ minimal: {
+ ratio: diffMinimal.diffRatio,
+ png: nodePath.basename(diffMinimalPNGPath)
+ },
+ minimalLegacy: {
+ ratio: diffMinimalLegacy.diffRatio,
+ png: nodePath.basename(diffMinimalLegacyPNGPath)
+ }
+ };
- if (diffMinimal.diffRatio > 0 || diffMinimalLegacy.diffRatio > 0) {
- console.log(chalk.red(`Failed ${testName}`));
- }
- else {
- console.log(chalk.green(`Passed ${testName}`));
- }
+ if (diffMinimal.diffRatio > 0 || diffMinimalLegacy.diffRatio > 0) {
+ console.log(chalk.red(`Failed ${testName}`));
+ } else {
+ console.log(chalk.green(`Passed ${testName}`));
}
+ }
}
-
async function main() {
- let result;
-
- if (!args.skip && !args.tests) {
- // Don't clean up if skipping some of the stages.
- await prepare();
- result = {};
- }
- else {
- // Read result.
- try {
- result = JSON.parse(fs.readFileSync(__dirname + '/tmp/result.json', 'utf-8'));
- }
- catch (e) {
- console.error(e);
- throw 'Must run full e2e test without --skip and --tests at least once.';
- }
- }
-
- function isNotSkipped(stage) {
- return !((args.skip || '').indexOf(stage) >= 0);
+ let result;
+
+ if (!args.skip && !args.tests) {
+ // Don't clean up if skipping some of the stages.
+ await prepare();
+ result = {};
+ } else {
+ // Read result.
+ try {
+ result = JSON.parse(
+ fs.readFileSync(__dirname + '/tmp/result.json', 'utf-8')
+ );
+ } catch (e) {
+ console.error(e);
+ throw 'Must run full e2e test without --skip and --tests at least once.';
}
+ }
- // We don't have to test the npm if bundle is also skipped.
- if (isNotSkipped('npm') && isNotSkipped('bundle')) {
- if (!args.local) {
- console.log(chalk.gray('Downloading packages'));
- await downloadPackages(config);
- }
+ function isNotSkipped(stage) {
+ return !((args.skip || '').indexOf(stage) >= 0);
+ }
- console.log(chalk.gray('Installing packages'));
- await installPackages(config);
- }
- else {
- console.log(chalk.yellow('Skipped NPM.'));
+ // We don't have to test the npm if bundle is also skipped.
+ if (isNotSkipped('npm') && isNotSkipped('bundle')) {
+ if (!args.local) {
+ console.log(chalk.gray('Downloading packages'));
+ await downloadPackages(config);
}
-
- console.log(chalk.gray('Generating codes'));
- // Always build code.
- const testNames = await buildRunCode();
-
- for (let key of testNames) {
- result[key] = result[key] || {};
- }
-
- Object.keys(result).forEach(key => {
- // Always do TS check on all tests. So reset all compile errors.
- result[key].compileErrors = {
- full: [],
- minimal: [],
- minimalLegacy: []
- };
- });
-
- console.log('Compiling TypeScript');
- // Always run typescript check to generate the js code.
- await compileTs(
- (await globby(nodePath.join(RUN_CODE_DIR, '*.ts')))
- // No need to check types of the minimal legacy imports
- .filter(a => !a.endsWith(`${MINIMAL_LEGACY_POSTFIX}.ts`)),
- result
+ console.log(chalk.gray('Installing packages'));
+ await installPackages(config);
+ } else {
+ console.log(chalk.yellow('Skipped NPM.'));
+ }
+
+ console.log(chalk.gray('Generating codes'));
+ // Always build code.
+ const testNames = await buildRunCode();
+
+ for (let key of testNames) {
+ result[key] = result[key] || {};
+ }
+
+ Object.keys(result).forEach((key) => {
+ // Always do TS check on all tests. So reset all compile errors.
+ result[key].compileErrors = {
+ full: [],
+ minimal: [],
+ minimalLegacy: []
+ };
+ });
+
+ console.log('Compiling TypeScript');
+ // Always run typescript check to generate the js code.
+ await compileTs(
+ (
+ await globby(nodePath.join(RUN_CODE_DIR, '*.ts'))
+ )
+ // No need to check types of the minimal legacy imports
+ .filter((a) => !a.endsWith(`${MINIMAL_LEGACY_POSTFIX}.ts`)),
+ result
+ );
+
+ if (isNotSkipped('bundle')) {
+ console.log(
+ chalk.green(`Bundling with ${USE_WEBPACK ? 'webpack' : 'esbuild'}`)
);
-
- if (isNotSkipped('bundle')) {
- console.log(chalk.green(`Bundling with ${USE_WEBPACK ? 'webpack' : 'esbuild'}`));
- const jsFiles = [];
- for (let testName of testNames) {
- jsFiles.push(
- nodePath.join(RUN_CODE_DIR, `${testName}.js`),
- nodePath.join(RUN_CODE_DIR, `${testName}.${MINIMAL_POSTFIX}.js`),
- nodePath.join(RUN_CODE_DIR, `${testName}.${MINIMAL_LEGACY_POSTFIX}.js`)
- );
- }
- await bundle(jsFiles, result);
- }
- else {
- console.log(chalk.yellow('Skipped Bundle.'));
- }
-
- if (isNotSkipped('render')) {
- console.log(chalk.green('Running examples'));
- const bundleFiles = [];
- for (let testName of testNames) {
- bundleFiles.push(
- nodePath.join(BUNDLE_DIR, `${testName}.js`),
- nodePath.join(BUNDLE_DIR, `${testName}.${MINIMAL_POSTFIX}.js`),
- nodePath.join(BUNDLE_DIR, `${testName}.${MINIMAL_LEGACY_POSTFIX}.js`)
- );
- }
- await runExamples(bundleFiles, result);
- }
- else {
- console.log(chalk.yellow('Skipped Render.'));
- }
-
- if (isNotSkipped('compare')) {
- console.log(chalk.green('Comparing Results'));
- await compareExamples(testNames, result);
+ const jsFiles = [];
+ for (let testName of testNames) {
+ jsFiles.push(
+ nodePath.join(RUN_CODE_DIR, `${testName}.js`),
+ nodePath.join(RUN_CODE_DIR, `${testName}.${MINIMAL_POSTFIX}.js`),
+ nodePath.join(RUN_CODE_DIR, `${testName}.${MINIMAL_LEGACY_POSTFIX}.js`)
+ );
}
- else {
- console.log(chalk.yellow('Skipped Compare.'));
+ await bundle(jsFiles, result);
+ } else {
+ console.log(chalk.yellow('Skipped Bundle.'));
+ }
+
+ if (isNotSkipped('render')) {
+ console.log(chalk.green('Running examples'));
+ const bundleFiles = [];
+ for (let testName of testNames) {
+ bundleFiles.push(
+ nodePath.join(BUNDLE_DIR, `${testName}.js`),
+ nodePath.join(BUNDLE_DIR, `${testName}.${MINIMAL_POSTFIX}.js`),
+ nodePath.join(BUNDLE_DIR, `${testName}.${MINIMAL_LEGACY_POSTFIX}.js`)
+ );
}
-
- fs.writeFileSync(__dirname + '/tmp/result.json', JSON.stringify(
- result, null, 2
- ), 'utf-8');
+ await runExamples(bundleFiles, result);
+ } else {
+ console.log(chalk.yellow('Skipped Render.'));
+ }
+
+ if (isNotSkipped('compare')) {
+ console.log(chalk.green('Comparing Results'));
+ await compareExamples(testNames, result);
+ } else {
+ console.log(chalk.yellow('Skipped Compare.'));
+ }
+
+ fs.writeFileSync(
+ __dirname + '/tmp/result.json',
+ JSON.stringify(result, null, 2),
+ 'utf-8'
+ );
}
-main().catch(e => {
+main()
+ .catch((e) => {
console.error(e);
process.exit();
-}).then(() => {
+ })
+ .then(() => {
process.exit();
-});
+ });
-process.on('SIGINT', function() {
- console.log('Closing');
- // Close through ctrl + c;
- process.exit();
-});
\ No newline at end of file
+process.on('SIGINT', function () {
+ console.log('Closing');
+ // Close through ctrl + c;
+ process.exit();
+});
diff --git a/e2e/package.json b/e2e/package.json
index bb44880..5dbec9c 100644
--- a/e2e/package.json
+++ b/e2e/package.json
@@ -9,6 +9,5 @@
},
"author": "",
"license": "ISC",
- "dependencies": {
- }
+ "dependencies": {}
}
diff --git a/e2e/preview.html b/e2e/preview.html
index fb94486..46f4ad5 100644
--- a/e2e/preview.html
+++ b/e2e/preview.html
@@ -1,27 +1,34 @@
<!DOCTYPE html>
<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/dat.gui@0.6.5/build/dat.gui.min.js"></script>
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <script
+ type="text/javascript"
+ src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"
+ ></script>
+ <script
+ type="text/javascript"
+ src="https://cdn.jsdelivr.net/npm/dat.gui@0.6.5/build/dat.gui.min.js"
+ ></script>
<title>Test Container</title>
-</head>
-<body>
+ </head>
+ <body>
<style>
- html, body {
- margin: 0;
- overflow: hidden;
- }
- #main {
- position: absolute;
- left: 0px;
- top: 0px;
- right: 0px;
- bottom: 0px;
- }
+ html,
+ body {
+ margin: 0;
+ overflow: hidden;
+ }
+ #main {
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ right: 0px;
+ bottom: 0px;
+ }
</style>
<div id="main"></div>
<script src="tmp/bundles/graph-grid.js"></script>
-</body>
-</html>
\ No newline at end of file
+ </body>
+</html>
diff --git a/e2e/report.html b/e2e/report.html
index d4c44f2..edc4589 100644
--- a/e2e/report.html
+++ b/e2e/report.html
@@ -1,186 +1,209 @@
<!DOCTYPE html>
<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test Report</title>
- <link href="https://cdn.jsdelivr.net/npm/element-ui@2.14.1/lib/theme-chalk/index.css" rel="stylesheet" type="text/css">
+ <link
+ href="https://cdn.jsdelivr.net/npm/element-ui@2.14.1/lib/theme-chalk/index.css"
+ rel="stylesheet"
+ type="text/css"
+ />
<style>
- #app {
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
- }
+ #app {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ }
- .import-type-title {
- padding: 10px;
- }
+ .import-type-title {
+ padding: 10px;
+ }
- .import-type-title div {
- font-size: 14px;
- font-family:'Courier New', Courier, monospace;
- }
+ .import-type-title div {
+ font-size: 14px;
+ font-family: 'Courier New', Courier, monospace;
+ }
- .type-error-log {
- padding: 10px;
- color: red;
- font-family:'Courier New', Courier, monospace;
- }
- .type-error-log pre {
- margin: 5px 0;
- padding: 0;
- /* https://css-tricks.com/snippets/css/make-pre-text-wrap/ */
- white-space: pre-wrap;
- }
- .type-passed {
- font-size: 14px;
- color: green;
- font-family:'Courier New', Courier, monospace;
- padding: 10px;
- }
+ .type-error-log {
+ padding: 10px;
+ color: red;
+ font-family: 'Courier New', Courier, monospace;
+ }
+ .type-error-log pre {
+ margin: 5px 0;
+ padding: 0;
+ /* https://css-tricks.com/snippets/css/make-pre-text-wrap/ */
+ white-space: pre-wrap;
+ }
+ .type-passed {
+ font-size: 14px;
+ color: green;
+ font-family: 'Courier New', Courier, monospace;
+ padding: 10px;
+ }
</style>
-
-</head>
-<body>
+ </head>
+ <body>
<div id="app">
- <el-tabs v-model="tab" type="border-card">
- <el-tab-pane label="Type Checking" name="typechecking">
- <div v-for="item in typeCheckingResult">
- <h3>{{ item.testName }}({{item.compileErrorsCount}})</h3>
- <el-row :gutter="30">
- <el-col :span="12">
- <el-card :body-style="{ padding: '0px' }">
- <div class="import-type-title">
- <div>全量引入</div>
- <div>Full Import</div>
- </div>
- <div class="type-error-log" v-if="item.compileErrors.full.length">
- <div v-for="compileError in item.compileErrors.full">
- <pre>[{{compileError.location.join(', ')}}] {{compileError.message}}</pre>
- </div>
- </div>
- <div class="type-passed" v-else>
- No Error
- </div>
- </el-card>
- </el-col>
- <el-col :span="12">
- <el-card :body-style="{ padding: '0px' }">
- <div class="import-type-title">
- <div>按需引入</div>
- <div>Minimal Import </div>
- </div>
- <div class="type-error-log" v-if="item.compileErrors.minimal.length">
- <div v-for="compileError in item.compileErrors.minimal">
- <pre>[{{compileError.location.join(', ')}}] {{compileError.message}}</pre>
- </div>
- </div>
- <div class="type-passed" v-else>
- No Error
- </div>
- </el-card>
- </el-col>
- </el-row>
- </div>
- </el-tab-pane>
- <el-tab-pane label="Screenshots Compare" name="screenshots">
- <div v-for="item in screenshotsCompareResult">
- <h3>{{ item.testName }}({{item.screenshotDiffRatio}})</h3>
- <el-row :gutter="10">
- <el-col :span="4">
- <el-card :body-style="{ padding: '0px' }">
- <el-image :src="SCREENSHOT_ROOT + item.testName + '.png'"></el-image>
- <div class="import-type-title">
- <div>全量引入</div>
- <div>Full Import</div>
- </div>
- </el-card>
- </el-col>
- <el-col :span="4">
- <el-card :body-style="{ padding: '0px' }">
- <el-image :src="SCREENSHOT_ROOT + item.testName + '.minimal.png'"></el-image>
- <div class="import-type-title">
- <div>按需引入</div>
- <div>Minimal Import </div>
- </div>
- </el-card>
- </el-col>
- <el-col :span="4">
- <el-card :body-style="{ padding: '0px' }">
- <el-image :src="SCREENSHOT_ROOT + item.testName + '.minimal.legacy.png'"></el-image>
- <div class="import-type-title">
- <div>自注册方式按需引入</div>
- <div>Minimal Import with Self Registion</div>
- </div>
- </el-card>
- </el-col>
- <el-col :span="4">
- <el-card :body-style="{ padding: '0px' }">
- <el-image :src="SCREENSHOT_ROOT + item.testName + '.minimal.diff.png'"></el-image>
- <div class="import-type-title">
- <div>按需引入差异</div>
- <div>Diff of Minimal Import </div>
- </div>
- </el-card>
- </el-col>
- <el-col :span="4">
- <el-card :body-style="{ padding: '0px' }">
- <el-image :src="SCREENSHOT_ROOT + item.testName + '.minimal.legacy.diff.png'"></el-image>
- <div class="import-type-title">
- <div>自注册方式按需引入差异</div>
- <div>Diff of Minimal Import with Self Registion</div>
- </div>
- </el-card>
- </el-col>
- </el-row>
- </div>
- </el-tab-pane>
- </el-tabs>
+ <el-tabs v-model="tab" type="border-card">
+ <el-tab-pane label="Type Checking" name="typechecking">
+ <div v-for="item in typeCheckingResult">
+ <h3>{{ item.testName }}({{item.compileErrorsCount}})</h3>
+ <el-row :gutter="30">
+ <el-col :span="12">
+ <el-card :body-style="{ padding: '0px' }">
+ <div class="import-type-title">
+ <div>全量引入</div>
+ <div>Full Import</div>
+ </div>
+ <div
+ class="type-error-log"
+ v-if="item.compileErrors.full.length"
+ >
+ <div v-for="compileError in item.compileErrors.full">
+ <pre>
+[{{compileError.location.join(', ')}}] {{compileError.message}}</pre
+ >
+ </div>
+ </div>
+ <div class="type-passed" v-else>No Error</div>
+ </el-card>
+ </el-col>
+ <el-col :span="12">
+ <el-card :body-style="{ padding: '0px' }">
+ <div class="import-type-title">
+ <div>按需引入</div>
+ <div>Minimal Import</div>
+ </div>
+ <div
+ class="type-error-log"
+ v-if="item.compileErrors.minimal.length"
+ >
+ <div v-for="compileError in item.compileErrors.minimal">
+ <pre>
+[{{compileError.location.join(', ')}}] {{compileError.message}}</pre
+ >
+ </div>
+ </div>
+ <div class="type-passed" v-else>No Error</div>
+ </el-card>
+ </el-col>
+ </el-row>
+ </div>
+ </el-tab-pane>
+ <el-tab-pane label="Screenshots Compare" name="screenshots">
+ <div v-for="item in screenshotsCompareResult">
+ <h3>{{ item.testName }}({{item.screenshotDiffRatio}})</h3>
+ <el-row :gutter="10">
+ <el-col :span="4">
+ <el-card :body-style="{ padding: '0px' }">
+ <el-image
+ :src="SCREENSHOT_ROOT + item.testName + '.png'"
+ ></el-image>
+ <div class="import-type-title">
+ <div>全量引入</div>
+ <div>Full Import</div>
+ </div>
+ </el-card>
+ </el-col>
+ <el-col :span="4">
+ <el-card :body-style="{ padding: '0px' }">
+ <el-image
+ :src="SCREENSHOT_ROOT + item.testName + '.minimal.png'"
+ ></el-image>
+ <div class="import-type-title">
+ <div>按需引入</div>
+ <div>Minimal Import</div>
+ </div>
+ </el-card>
+ </el-col>
+ <el-col :span="4">
+ <el-card :body-style="{ padding: '0px' }">
+ <el-image
+ :src="SCREENSHOT_ROOT + item.testName + '.minimal.legacy.png'"
+ ></el-image>
+ <div class="import-type-title">
+ <div>自注册方式按需引入</div>
+ <div>Minimal Import with Self Registion</div>
+ </div>
+ </el-card>
+ </el-col>
+ <el-col :span="4">
+ <el-card :body-style="{ padding: '0px' }">
+ <el-image
+ :src="SCREENSHOT_ROOT + item.testName + '.minimal.diff.png'"
+ ></el-image>
+ <div class="import-type-title">
+ <div>按需引入差异</div>
+ <div>Diff of Minimal Import</div>
+ </div>
+ </el-card>
+ </el-col>
+ <el-col :span="4">
+ <el-card :body-style="{ padding: '0px' }">
+ <el-image
+ :src="SCREENSHOT_ROOT + item.testName + '.minimal.legacy.diff.png'"
+ ></el-image>
+ <div class="import-type-title">
+ <div>自注册方式按需引入差异</div>
+ <div>Diff of Minimal Import with Self Registion</div>
+ </div>
+ </el-card>
+ </el-col>
+ </el-row>
+ </div>
+ </el-tab-pane>
+ </el-tabs>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.14.1/lib/index.js"></script>
<script>
- const app = new Vue({
- el: '#app',
- data() {
- return {
- typeCheckingResult: [],
- screenshotsCompareResult: [],
+ const app = new Vue({
+ el: '#app',
+ data() {
+ return {
+ typeCheckingResult: [],
+ screenshotsCompareResult: [],
- SCREENSHOT_ROOT: './tmp/screenshots/',
+ SCREENSHOT_ROOT: './tmp/screenshots/',
- tab: 'screenshots',
- splitterModel: 10
- };
- }
- });
+ tab: 'screenshots',
+ splitterModel: 10
+ };
+ }
+ });
- fetch('./tmp/result.json')
- .then(response => response.json())
- .then(json => {
- const result = [];
- function getCompilerErrorsCount({ full, minimal, minimalLegacy }) {
- return full.length + minimal.length + minimalLegacy.length;
- }
- function getScreenshotDiffRatio({ minimal, minimalLegacy }) {
- return minimal.ratio + minimalLegacy.ratio;
- }
+ fetch('./tmp/result.json')
+ .then((response) => response.json())
+ .then((json) => {
+ const result = [];
+ function getCompilerErrorsCount({ full, minimal, minimalLegacy }) {
+ return full.length + minimal.length + minimalLegacy.length;
+ }
+ function getScreenshotDiffRatio({ minimal, minimalLegacy }) {
+ return minimal.ratio + minimalLegacy.ratio;
+ }
- Object.keys(json).forEach(key => {
- result.push({
- ...json[key],
- compileErrorsCount: getCompilerErrorsCount(json[key].compileErrors),
- screenshotDiffRatio: getScreenshotDiffRatio(json[key].screenshotDiff),
- testName: key
- });
- });
- app.typeCheckingResult = result.slice().sort((a, b) => {
- return b.compileErrorsCount - a.compileErrorsCount;
- });
- app.screenshotsCompareResult = result.slice().sort((a, b) => {
- return b.screenshotDiffRatio - a.screenshotDiffRatio;
- });
+ Object.keys(json).forEach((key) => {
+ result.push({
+ ...json[key],
+ compileErrorsCount: getCompilerErrorsCount(
+ json[key].compileErrors
+ ),
+ screenshotDiffRatio: getScreenshotDiffRatio(
+ json[key].screenshotDiff
+ ),
+ testName: key
});
+ });
+ app.typeCheckingResult = result.slice().sort((a, b) => {
+ return b.compileErrorsCount - a.compileErrorsCount;
+ });
+ app.screenshotsCompareResult = result.slice().sort((a, b) => {
+ return b.screenshotDiffRatio - a.screenshotDiffRatio;
+ });
+ });
</script>
-</body>
-</html>
\ No newline at end of file
+ </body>
+</html>
diff --git a/e2e/template.html b/e2e/template.html
index 71c3b5b..664924f 100644
--- a/e2e/template.html
+++ b/e2e/template.html
@@ -1,26 +1,33 @@
<!DOCTYPE html>
<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/dat.gui@0.6.5/build/dat.gui.min.js"></script>
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <script
+ type="text/javascript"
+ src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"
+ ></script>
+ <script
+ type="text/javascript"
+ src="https://cdn.jsdelivr.net/npm/dat.gui@0.6.5/build/dat.gui.min.js"
+ ></script>
<title>Test Container</title>
-</head>
-<body>
+ </head>
+ <body>
<style>
- html, body {
- margin: 0;
- overflow: hidden;
- }
- #main {
- position: absolute;
- left: 0px;
- top: 0px;
- right: 0px;
- bottom: 0px;
- }
+ html,
+ body {
+ margin: 0;
+ overflow: hidden;
+ }
+ #main {
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ right: 0px;
+ bottom: 0px;
+ }
</style>
<div id="main"></div>
-</body>
-</html>
\ No newline at end of file
+ </body>
+</html>
diff --git a/e2e/tsconfig.json b/e2e/tsconfig.json
index ad6231a..8c0fd90 100644
--- a/e2e/tsconfig.json
+++ b/e2e/tsconfig.json
@@ -1,13 +1,13 @@
{
- "compilerOptions": {
- "target": "ES6",
+ "compilerOptions": {
+ "target": "ES6",
- "strict": true,
+ "strict": true,
- "moduleResolution": "node",
- "pretty": true,
- "outDir": "tmp/tests",
+ "moduleResolution": "node",
+ "pretty": true,
+ "outDir": "tmp/tests",
- "baseUrl": "./"
- }
-}
\ No newline at end of file
+ "baseUrl": "./"
+ }
+}
diff --git a/e2e/webpack.config.js b/e2e/webpack.config.js
index 9d8c056..02610e6 100644
--- a/e2e/webpack.config.js
+++ b/e2e/webpack.config.js
@@ -1,20 +1,19 @@
const path = require('path');
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const BundleAnalyzerPlugin =
+ require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const config = require('./config');
module.exports = {
- entry: path.resolve(__dirname, 'tmp/tests/area-basic.minimal.js'),
- plugins: [
- new BundleAnalyzerPlugin()
- ],
- resolve: {
- alias: {
- echarts: config.echartsDir,
- zrender: config.zrenderDir
- }
- },
- output: {
- path: path.resolve(__dirname, 'tmp/bundles/'),
- filename: 'area-basic.minimal.js'
+ entry: path.resolve(__dirname, 'tmp/tests/area-basic.minimal.js'),
+ plugins: [new BundleAnalyzerPlugin()],
+ resolve: {
+ alias: {
+ echarts: config.echartsDir,
+ zrender: config.zrenderDir
}
-}
\ No newline at end of file
+ },
+ output: {
+ path: path.resolve(__dirname, 'tmp/bundles/'),
+ filename: 'area-basic.minimal.js'
+ }
+};
diff --git a/public/en/editor.html b/public/en/editor.html
index 2a92cdc..006c037 100644
--- a/public/en/editor.html
+++ b/public/en/editor.html
@@ -1,38 +1,45 @@
<!DOCTYPE html>
<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ECharts Examples</title>
<style>
- body {
- margin: 0;
- }
- ul, li {
- margin: 0;
- padding: 0;
- }
+ body {
+ margin: 0;
+ }
+ ul,
+ li {
+ margin: 0;
+ padding: 0;
+ }
</style>
- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css">
+ <link
+ rel="stylesheet"
+ href="//cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css"
+ />
+ <link
+ rel="stylesheet"
+ href="//cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"
+ />
<script src="//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script>
-</head>
-<body>
+ </head>
+ <body>
<div id="main"></div>
- <link rel="stylesheet" href="../css/example-bundle.css">
+ <link rel="stylesheet" href="../css/example-bundle.css" />
<script src="../js/example-bundle.js"></script>
<script>
- echartsExample.init(document.querySelector('#main'), {
- locale: 'en',
- cdnRoot: '../',
- page: 'editor',
- version: Date.now()
- });
+ echartsExample.init(document.querySelector('#main'), {
+ locale: 'en',
+ cdnRoot: '../',
+ page: 'editor',
+ version: Date.now()
+ });
</script>
-</body>
-</html>
\ No newline at end of file
+ </body>
+</html>
diff --git a/public/en/index.html b/public/en/index.html
index 31a4ee6..f70e34c 100644
--- a/public/en/index.html
+++ b/public/en/index.html
@@ -1,39 +1,45 @@
<!DOCTYPE html>
<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ECharts Examples</title>
<style>
- body {
- margin: 0;
- }
- ul, li {
- margin: 0;
- padding: 0;
- }
-
+ body {
+ margin: 0;
+ }
+ ul,
+ li {
+ margin: 0;
+ padding: 0;
+ }
</style>
- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css">
+ <link
+ rel="stylesheet"
+ href="//cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css"
+ />
+ <link
+ rel="stylesheet"
+ href="//cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"
+ />
<script src="//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script>
-</head>
-<body>
+ </head>
+ <body>
<div id="main"></div>
- <link rel="stylesheet" href="../css/example-bundle.css">
+ <link rel="stylesheet" href="../css/example-bundle.css" />
<script src="../js/example-bundle.js"></script>
<script>
- echartsExample.init(document.querySelector('#main'), {
- locale: 'en',
- cdnRoot: '../',
- page: 'explore',
- version: Date.now()
- });
+ echartsExample.init(document.querySelector('#main'), {
+ locale: 'en',
+ cdnRoot: '../',
+ page: 'explore',
+ version: Date.now()
+ });
</script>
-</body>
-</html>
\ No newline at end of file
+ </body>
+</html>
diff --git a/public/en/view.html b/public/en/view.html
index 1d1cc5a..a2e1d01 100644
--- a/public/en/view.html
+++ b/public/en/view.html
@@ -1,38 +1,45 @@
<!DOCTYPE html>
<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ECharts Examples</title>
<style>
- body {
- margin: 0;
- }
- ul, li {
- margin: 0;
- padding: 0;
- }
+ body {
+ margin: 0;
+ }
+ ul,
+ li {
+ margin: 0;
+ padding: 0;
+ }
</style>
- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css">
+ <link
+ rel="stylesheet"
+ href="//cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css"
+ />
+ <link
+ rel="stylesheet"
+ href="//cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"
+ />
<script src="//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script>
-</head>
-<body>
+ </head>
+ <body>
<div id="main"></div>
- <link rel="stylesheet" href="../css/example-bundle.css">
+ <link rel="stylesheet" href="../css/example-bundle.css" />
<script src="../js/example-bundle.js"></script>
<script>
- echartsExample.init(document.querySelector('#main'), {
- locale: 'en',
- cdnRoot: '../',
- page: 'view',
- version: Date.now()
- });
+ echartsExample.init(document.querySelector('#main'), {
+ locale: 'en',
+ cdnRoot: '../',
+ page: 'view',
+ version: Date.now()
+ });
</script>
-</body>
-</html>
\ No newline at end of file
+ </body>
+</html>
diff --git a/public/zh/editor.html b/public/zh/editor.html
index ce69154..65edec1 100644
--- a/public/zh/editor.html
+++ b/public/zh/editor.html
@@ -1,38 +1,45 @@
<!DOCTYPE html>
<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ECharts Examples</title>
<style>
- body {
- margin: 0;
- }
- ul, li {
- margin: 0;
- padding: 0;
- }
+ body {
+ margin: 0;
+ }
+ ul,
+ li {
+ margin: 0;
+ padding: 0;
+ }
</style>
- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css">
+ <link
+ rel="stylesheet"
+ href="//cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css"
+ />
+ <link
+ rel="stylesheet"
+ href="//cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"
+ />
<script src="//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script>
-</head>
-<body>
+ </head>
+ <body>
<div id="main"></div>
- <link rel="stylesheet" href="../css/example-bundle.css">
+ <link rel="stylesheet" href="../css/example-bundle.css" />
<script src="../js/example-bundle.js"></script>
<script>
- echartsExample.init(document.querySelector('#main'), {
- locale: 'zh',
- cdnRoot: '../',
- page: 'editor',
- version: Date.now()
- });
+ echartsExample.init(document.querySelector('#main'), {
+ locale: 'zh',
+ cdnRoot: '../',
+ page: 'editor',
+ version: Date.now()
+ });
</script>
-</body>
-</html>
\ No newline at end of file
+ </body>
+</html>
diff --git a/public/zh/index.html b/public/zh/index.html
index 4d534de..4012cfa 100644
--- a/public/zh/index.html
+++ b/public/zh/index.html
@@ -1,39 +1,45 @@
<!DOCTYPE html>
<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ECharts Examples</title>
<style>
- body {
- margin: 0;
- }
- ul, li {
- margin: 0;
- padding: 0;
- }
-
+ body {
+ margin: 0;
+ }
+ ul,
+ li {
+ margin: 0;
+ padding: 0;
+ }
</style>
- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css">
+ <link
+ rel="stylesheet"
+ href="//cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css"
+ />
+ <link
+ rel="stylesheet"
+ href="//cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"
+ />
<script src="//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script>
-</head>
-<body>
+ </head>
+ <body>
<div id="main"></div>
- <link rel="stylesheet" href="../css/example-bundle.css">
+ <link rel="stylesheet" href="../css/example-bundle.css" />
<script src="../js/example-bundle.js"></script>
<script>
- echartsExample.init(document.querySelector('#main'), {
- locale: 'zh',
- cdnRoot: '../',
- page: 'explore',
- version: Date.now()
- });
+ echartsExample.init(document.querySelector('#main'), {
+ locale: 'zh',
+ cdnRoot: '../',
+ page: 'explore',
+ version: Date.now()
+ });
</script>
-</body>
-</html>
\ No newline at end of file
+ </body>
+</html>
diff --git a/public/zh/view.html b/public/zh/view.html
index b3d3927..5edb35b 100644
--- a/public/zh/view.html
+++ b/public/zh/view.html
@@ -1,38 +1,45 @@
<!DOCTYPE html>
<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ECharts Examples</title>
<style>
- body {
- margin: 0;
- }
- ul, li {
- margin: 0;
- padding: 0;
- }
+ body {
+ margin: 0;
+ }
+ ul,
+ li {
+ margin: 0;
+ padding: 0;
+ }
</style>
- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css">
+ <link
+ rel="stylesheet"
+ href="//cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css"
+ />
+ <link
+ rel="stylesheet"
+ href="//cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"
+ />
<script src="//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script>
-</head>
-<body>
+ </head>
+ <body>
<div id="main"></div>
- <link rel="stylesheet" href="../css/example-bundle.css">
+ <link rel="stylesheet" href="../css/example-bundle.css" />
<script src="../js/example-bundle.js"></script>
<script>
- echartsExample.init(document.querySelector('#main'), {
- locale: 'zh',
- cdnRoot: '../',
- page: 'view',
- version: Date.now()
- });
+ echartsExample.init(document.querySelector('#main'), {
+ locale: 'zh',
+ cdnRoot: '../',
+ page: 'view',
+ version: Date.now()
+ });
</script>
-</body>
-</html>
\ No newline at end of file
+ </body>
+</html>
diff --git a/src/common/config.js b/src/common/config.js
index faab503..c737a41 100644
--- a/src/common/config.js
+++ b/src/common/config.js
@@ -1,134 +1,138 @@
-
export const EXAMPLE_CATEGORIES = [
- 'line',
- 'bar',
- 'pie',
- 'scatter',
- 'map',
- 'candlestick',
- 'radar',
- 'boxplot',
- 'heatmap',
- 'graph',
- 'lines',
- 'tree',
- 'treemap',
- 'sunburst',
- 'parallel',
- 'sankey',
- 'funnel',
- 'gauge',
- 'pictorialBar',
- 'themeRiver',
- 'calendar',
- 'custom',
+ 'line',
+ 'bar',
+ 'pie',
+ 'scatter',
+ 'map',
+ 'candlestick',
+ 'radar',
+ 'boxplot',
+ 'heatmap',
+ 'graph',
+ 'lines',
+ 'tree',
+ 'treemap',
+ 'sunburst',
+ 'parallel',
+ 'sankey',
+ 'funnel',
+ 'gauge',
+ 'pictorialBar',
+ 'themeRiver',
+ 'calendar',
+ 'custom',
- 'dataset',
- 'dataZoom',
- 'drag',
- 'rich',
+ 'dataset',
+ 'dataZoom',
+ 'drag',
+ 'rich',
- 'globe',
- 'bar3D',
- 'scatter3D',
- 'surface',
- 'map3D',
- 'lines3D',
- 'line3D',
- 'scatterGL',
- 'linesGL',
- 'flowGL',
- 'graphGL'
+ 'globe',
+ 'bar3D',
+ 'scatter3D',
+ 'surface',
+ 'map3D',
+ 'lines3D',
+ 'line3D',
+ 'scatterGL',
+ 'linesGL',
+ 'flowGL',
+ 'graphGL'
];
export const THEMES = {
- default: [
- '#5470c6',
- '#91cc75',
- '#fac858',
- '#ee6666',
- '#73c0de',
- '#3ba272',
- '#fc8452',
- '#9a60b4',
- '#ea7ccc'
- ],
- dark: [
- '#4992ff',
- '#7cffb2',
- '#fddd60',
- '#ff6e76',
- '#58d9f9',
- '#05c091',
- '#ff8a45',
- '#8d48e3',
- '#dd79ff'
- ]
+ default: [
+ '#5470c6',
+ '#91cc75',
+ '#fac858',
+ '#ee6666',
+ '#73c0de',
+ '#3ba272',
+ '#fc8452',
+ '#9a60b4',
+ '#ea7ccc'
+ ],
+ dark: [
+ '#4992ff',
+ '#7cffb2',
+ '#fddd60',
+ '#ff6e76',
+ '#58d9f9',
+ '#05c091',
+ '#ff8a45',
+ '#8d48e3',
+ '#dd79ff'
+ ]
};
export const BLACK_MAP = (function (list) {
- const map = {};
- for (var i = 0; i < list.length; i++) {
- map[list[i]] = 1;
- }
- return location.href.indexOf('github.io') >= 0 ? {} : map;
+ const map = {};
+ for (var i = 0; i < list.length; i++) {
+ map[list[i]] = 1;
+ }
+ return location.href.indexOf('github.io') >= 0 ? {} : map;
})([
- 'effectScatter-map',
- 'geo-lines',
- 'geo-map-scatter',
- 'heatmap-map',
- 'lines-airline',
- 'map-china',
- 'map-china-dataRange',
- 'map-labels',
- 'map-locate',
- 'map-province',
- 'map-world',
- 'map-world-dataRange',
- 'scatter-map',
- 'scatter-map-brush',
- 'scatter-weibo',
- 'scatter-world-population',
- 'geo3d',
- 'geo3d-with-different-height',
- 'globe-country-carousel',
- 'globe-with-echarts-surface',
- 'map3d-alcohol-consumption',
- 'map3d-wood-map',
- 'scattergl-weibo'
+ 'effectScatter-map',
+ 'geo-lines',
+ 'geo-map-scatter',
+ 'heatmap-map',
+ 'lines-airline',
+ 'map-china',
+ 'map-china-dataRange',
+ 'map-labels',
+ 'map-locate',
+ 'map-province',
+ 'map-world',
+ 'map-world-dataRange',
+ 'scatter-map',
+ 'scatter-map-brush',
+ 'scatter-weibo',
+ 'scatter-world-population',
+ 'geo3d',
+ 'geo3d-with-different-height',
+ 'globe-country-carousel',
+ 'globe-with-echarts-surface',
+ 'map3d-alcohol-consumption',
+ 'map3d-wood-map',
+ 'scattergl-weibo'
]);
-
const URL_PARAMS = {};
-(location.search || '').substr(1).split('&').forEach(function (item) {
+(location.search || '')
+ .substr(1)
+ .split('&')
+ .forEach(function (item) {
const kv = item.split('=');
URL_PARAMS[kv[0]] = kv[1];
-});
+ });
-export {URL_PARAMS};
+export { URL_PARAMS };
export const SUPPORT_WEBP = (function () {
- var elem = document.createElement('canvas');
- elem.width = elem.height = 1;
- if (!!(elem.getContext && elem.getContext('2d'))) {
- // was able or not to get WebP representation
- return elem.toDataURL('image/webp').indexOf('data:image/webp') === 0;
- }
- // very old browser like IE 8, canvas not supported
- return false;
+ var elem = document.createElement('canvas');
+ elem.width = elem.height = 1;
+ if (!!(elem.getContext && elem.getContext('2d'))) {
+ // was able or not to get WebP representation
+ return elem.toDataURL('image/webp').indexOf('data:image/webp') === 0;
+ }
+ // very old browser like IE 8, canvas not supported
+ return false;
})();
export const SCRIPT_URLS = {
- echartsMinJS: 'https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js',
- echartsDir: 'https://cdn.jsdelivr.net/npm/echarts@5',
+ echartsMinJS: 'https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js',
+ echartsDir: 'https://cdn.jsdelivr.net/npm/echarts@5',
- localEChartsMinJS: 'http://localhost/echarts/dist/echarts.js',
- localEChartsDir: 'http://localhost/echarts',
+ localEChartsMinJS: 'http://localhost/echarts/dist/echarts.js',
+ localEChartsDir: 'http://localhost/echarts',
- echartsStatMinJS: 'https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js',
- // echartsGLMinJS: 'http://localhost/echarts-gl/dist/echarts-gl.min.js',
- echartsGLMinJS: 'https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js',
- datGUIMinJS: 'https://cdn.jsdelivr.net/npm/dat.gui@0.6.5/build/dat.gui.min.js',
- monacoDir: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.21.2/min/vs',
- aceDir: 'https://cdn.jsdelivr.net/npm/ace-builds@1.4.12/src-min-noconflict'
+ echartsStatMinJS:
+ 'https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js',
+ // echartsGLMinJS: 'http://localhost/echarts-gl/dist/echarts-gl.min.js',
+ echartsGLMinJS:
+ 'https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js',
+ datGUIMinJS:
+ 'https://cdn.jsdelivr.net/npm/dat.gui@0.6.5/build/dat.gui.min.js',
+ monacoDir: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.21.2/min/vs',
+ aceDir: 'https://cdn.jsdelivr.net/npm/ace-builds@1.4.12/src-min-noconflict'
};
diff --git a/src/common/helper.js b/src/common/helper.js
index ac4397a..811442e 100644
--- a/src/common/helper.js
+++ b/src/common/helper.js
@@ -1,60 +1,59 @@
-
const promisesCache = {};
export function loadScriptsAsync(scripts) {
- return Promise.all(scripts.map(function (scriptUrl) {
- if (typeof scriptUrl === 'string') {
- scriptUrl = {
- url: scriptUrl,
- // TODO Not supported type
- type: scriptUrl.match(/\.css$/) ? 'css' : 'js'
- };
- }
- if (promisesCache[scriptUrl.url]) {
- return promisesCache[scriptUrl.url];
+ return Promise.all(
+ scripts.map(function (scriptUrl) {
+ if (typeof scriptUrl === 'string') {
+ scriptUrl = {
+ url: scriptUrl,
+ // TODO Not supported type
+ type: scriptUrl.match(/\.css$/) ? 'css' : 'js'
+ };
+ }
+ if (promisesCache[scriptUrl.url]) {
+ return promisesCache[scriptUrl.url];
+ }
+ const promise = new Promise((resolve, reject) => {
+ if (scriptUrl.type === 'js') {
+ const script = document.createElement('script');
+ script.src = scriptUrl.url;
+ script.async = false;
+ script.onload = function () {
+ resolve();
+ };
+ script.onerror = function () {
+ reject();
+ };
+ document.body.appendChild(script);
+ } else if (scriptUrl.type === 'css') {
+ const link = document.createElement('link');
+ link.rel = 'stylesheet';
+ link.href = scriptUrl.url;
+ link.onload = function () {
+ resolve();
+ };
+ link.onerror = function () {
+ reject();
+ };
+ document.body.appendChild(link);
}
- const promise = new Promise((resolve, reject) => {
- if (scriptUrl.type === 'js') {
- const script = document.createElement('script');
- script.src = scriptUrl.url;
- script.async = false;
- script.onload = function () {
- resolve();
- };
- script.onerror = function () {
- reject();
- };
- document.body.appendChild(script);
- }
- else if (scriptUrl.type === 'css') {
- const link = document.createElement('link');
- link.rel = 'stylesheet';
- link.href = scriptUrl.url;
- link.onload = function () {
- resolve();
- };
- link.onerror = function () {
- reject();
- };
- document.body.appendChild(link);
- }
- });
- promisesCache[scriptUrl.url] = promise;
- return promise;
- }));
+ });
+ promisesCache[scriptUrl.url] = promise;
+ return promise;
+ })
+ );
}
export function downloadBlob(blob, fileName) {
- // for IE
- if (typeof window.navigator.msSaveBlob === 'function') {
- window.navigator.msSaveOrOpenBlob(blob, fileName);
- }
- else {
- const a = document.createElement('a');
- a.href = URL.createObjectURL(blob);
- a.download = fileName;
- a.click();
- // should revoke the blob url after the download
- URL.revokeObjectURL(a.href);
- }
-}
\ No newline at end of file
+ // for IE
+ if (typeof window.navigator.msSaveBlob === 'function') {
+ window.navigator.msSaveOrOpenBlob(blob, fileName);
+ } else {
+ const a = document.createElement('a');
+ a.href = URL.createObjectURL(blob);
+ a.download = fileName;
+ a.click();
+ // should revoke the blob url after the download
+ URL.revokeObjectURL(a.href);
+ }
+}
diff --git a/src/common/i18n.js b/src/common/i18n.js
index 369cba4..88e6493 100644
--- a/src/common/i18n.js
+++ b/src/common/i18n.js
@@ -1,135 +1,135 @@
export default {
- en: {
- editor: {
- run: 'Run',
- errorInEditor: 'Errors exist in code!',
- chartOK: 'Chart has been generated successfully, ',
+ en: {
+ editor: {
+ run: 'Run',
+ errorInEditor: 'Errors exist in code!',
+ chartOK: 'Chart has been generated successfully, ',
- darkMode: 'Dark Mode',
- enableDecal: 'Decal Pattern',
- // lightMode: 'Light Mode',
+ darkMode: 'Dark Mode',
+ enableDecal: 'Decal Pattern',
+ // lightMode: 'Light Mode',
- renderCfgTitle: 'Render',
- renderer: 'Renderer',
- useDirtyRect: 'Use Dirty Rect',
+ renderCfgTitle: 'Render',
+ renderer: 'Renderer',
+ useDirtyRect: 'Use Dirty Rect',
- download: 'Download',
+ download: 'Download',
- edit: 'Edit',
- monacoMode: 'Enable Type Checking',
+ edit: 'Edit',
+ monacoMode: 'Enable Type Checking',
- tabEditor: 'Edit Example',
- tabFullCodePreview: 'Full Code',
- tabOptionPreview: 'Option Preview',
- minimalBundle: 'Minimal Bundle'
- },
+ tabEditor: 'Edit Example',
+ tabFullCodePreview: 'Full Code',
+ tabOptionPreview: 'Option Preview',
+ minimalBundle: 'Minimal Bundle'
+ },
- chartTypes: {
- line: 'Line',
- bar: 'Bar',
- pie: 'Pie',
- scatter: 'Scatter',
- map: 'GEO/Map',
- candlestick: 'Candlestick',
- radar: 'Radar',
- boxplot: 'Boxplot',
- heatmap: 'Heatmap',
- graph: 'Graph',
- lines: 'Lines',
- tree: 'Tree',
- treemap: 'Treemap',
- sunburst: 'Sunburst',
- parallel: 'Parallel',
- sankey: 'Sankey',
- funnel: 'Funnel',
- gauge: 'Gauge',
- pictorialBar: 'PictorialBar',
- themeRiver: 'ThemeRiver',
- calendar: 'Calendar',
- custom: 'Custom',
+ chartTypes: {
+ line: 'Line',
+ bar: 'Bar',
+ pie: 'Pie',
+ scatter: 'Scatter',
+ map: 'GEO/Map',
+ candlestick: 'Candlestick',
+ radar: 'Radar',
+ boxplot: 'Boxplot',
+ heatmap: 'Heatmap',
+ graph: 'Graph',
+ lines: 'Lines',
+ tree: 'Tree',
+ treemap: 'Treemap',
+ sunburst: 'Sunburst',
+ parallel: 'Parallel',
+ sankey: 'Sankey',
+ funnel: 'Funnel',
+ gauge: 'Gauge',
+ pictorialBar: 'PictorialBar',
+ themeRiver: 'ThemeRiver',
+ calendar: 'Calendar',
+ custom: 'Custom',
- dataset: 'Dataset',
- dataZoom: 'DataZoom',
- drag: 'Drag',
- rich: 'Rich Text',
+ dataset: 'Dataset',
+ dataZoom: 'DataZoom',
+ drag: 'Drag',
+ rich: 'Rich Text',
- globe: '3D Globe',
- bar3D: '3D Bar',
- scatter3D: '3D Scatter',
- surface: '3D Surface',
- map3D: '3D Map',
- lines3D: '3D Lines',
- line3D: '3D Line',
- scatterGL: 'Scatter GL',
- linesGL: 'Lines GL',
- flowGL: 'Flow GL',
- graphGL: 'Graph GL'
- }
- },
- zh: {
- editor: {
- run: '运行',
- errorInEditor: '编辑器内容有误！',
- chartOK: '图表已生成, ',
+ globe: '3D Globe',
+ bar3D: '3D Bar',
+ scatter3D: '3D Scatter',
+ surface: '3D Surface',
+ map3D: '3D Map',
+ lines3D: '3D Lines',
+ line3D: '3D Line',
+ scatterGL: 'Scatter GL',
+ linesGL: 'Lines GL',
+ flowGL: 'Flow GL',
+ graphGL: 'Graph GL'
+ }
+ },
+ zh: {
+ editor: {
+ run: '运行',
+ errorInEditor: '编辑器内容有误！',
+ chartOK: '图表已生成, ',
- darkMode: '深色模式',
- enableDecal: '无障碍花纹',
- // lightMode: '浅色模式',
+ darkMode: '深色模式',
+ enableDecal: '无障碍花纹',
+ // lightMode: '浅色模式',
- renderCfgTitle: '渲染设置',
- useDirtyRect: '开启脏矩形优化',
- renderer: '渲染模式',
- download: '下载示例',
+ renderCfgTitle: '渲染设置',
+ useDirtyRect: '开启脏矩形优化',
+ renderer: '渲染模式',
+ download: '下载示例',
- edit: '编辑',
- monacoMode: '开启类型检查',
+ edit: '编辑',
+ monacoMode: '开启类型检查',
- tabEditor: '示例编辑',
- tabFullCodePreview: '完整代码',
- tabOptionPreview: '配置项',
- minimalBundle: '按需引入'
- },
+ tabEditor: '示例编辑',
+ tabFullCodePreview: '完整代码',
+ tabOptionPreview: '配置项',
+ minimalBundle: '按需引入'
+ },
- chartTypes: {
- line: '折线图',
- bar: '柱状图',
- pie: '饼图',
- scatter: '散点图',
- map: '地理坐标/地图',
- candlestick: 'K 线图',
- radar: '雷达图',
- boxplot: '盒须图',
- heatmap: '热力图',
- graph: '关系图',
- lines: '路径图',
- tree: '树图',
- treemap: '矩形树图',
- sunburst: '旭日图',
- parallel: '平行坐标系',
- sankey: '桑基图',
- funnel: '漏斗图',
- gauge: '仪表盘',
- pictorialBar: '象形柱图',
- themeRiver: '主题河流图',
- calendar: '日历坐标系',
- custom: '自定义系列',
+ chartTypes: {
+ line: '折线图',
+ bar: '柱状图',
+ pie: '饼图',
+ scatter: '散点图',
+ map: '地理坐标/地图',
+ candlestick: 'K 线图',
+ radar: '雷达图',
+ boxplot: '盒须图',
+ heatmap: '热力图',
+ graph: '关系图',
+ lines: '路径图',
+ tree: '树图',
+ treemap: '矩形树图',
+ sunburst: '旭日图',
+ parallel: '平行坐标系',
+ sankey: '桑基图',
+ funnel: '漏斗图',
+ gauge: '仪表盘',
+ pictorialBar: '象形柱图',
+ themeRiver: '主题河流图',
+ calendar: '日历坐标系',
+ custom: '自定义系列',
- dataset: '数据集',
- dataZoom: '数据区域缩放',
- drag: '拖拽',
- rich: '富文本',
+ dataset: '数据集',
+ dataZoom: '数据区域缩放',
+ drag: '拖拽',
+ rich: '富文本',
- globe: '3D 地球',
- bar3D: '3D 柱状图',
- scatter3D: '3D 散点图',
- surface: '3D 曲面',
- map3D: '3D 地图',
- lines3D: '3D 路径图',
- line3D: '3D 折线图',
- scatterGL: 'GL 散点图',
- linesGL: 'GL 路径图',
- flowGL: 'GL 矢量场图',
- graphGL: 'GL 关系图'
- }
+ globe: '3D 地球',
+ bar3D: '3D 柱状图',
+ scatter3D: '3D 散点图',
+ surface: '3D 曲面',
+ map3D: '3D 地图',
+ lines3D: '3D 路径图',
+ line3D: '3D 折线图',
+ scatterGL: 'GL 散点图',
+ linesGL: 'GL 路径图',
+ flowGL: 'GL 矢量场图',
+ graphGL: 'GL 关系图'
}
-};
\ No newline at end of file
+ }
+};
diff --git a/src/common/store.js b/src/common/store.js
index 95a0d0f..54cc80a 100644
--- a/src/common/store.js
+++ b/src/common/store.js
@@ -1,58 +1,60 @@
-
// import * as matter from 'gray-matter';
-import {URL_PARAMS} from '../common/config';
+import { URL_PARAMS } from '../common/config';
export const store = {
- cdnRoot: '',
- version: '',
- locale: '',
+ cdnRoot: '',
+ version: '',
+ locale: '',
- darkMode: URL_PARAMS.theme === 'dark',
- enableDecal: 'decal' in URL_PARAMS,
- renderer: URL_PARAMS.renderer || 'canvas',
+ darkMode: URL_PARAMS.theme === 'dark',
+ enableDecal: 'decal' in URL_PARAMS,
+ renderer: URL_PARAMS.renderer || 'canvas',
- typeCheck: URL_PARAMS.editor === 'monaco',
- useDirtyRect: 'useDirtyRect' in URL_PARAMS,
+ typeCheck: URL_PARAMS.editor === 'monaco',
+ useDirtyRect: 'useDirtyRect' in URL_PARAMS,
- runCode: '',
- sourceCode: '',
+ runCode: '',
+ sourceCode: '',
- runHash: '',
+ runHash: '',
- isMobile: window.innerWidth < 600,
+ isMobile: window.innerWidth < 600,
- editorStatus: {
- type: '',
- message: ''
- }
+ editorStatus: {
+ type: '',
+ message: ''
+ }
};
export function loadExampleCode() {
- return new Promise(resolve => {
- const dataRoot = URL_PARAMS.gl ? 'data-gl' : 'data';
- $.ajax(
- store.typeCheck
- ? `${store.cdnRoot}/examples/ts/${URL_PARAMS.c}.ts?_v_${store.version}`
- : `${store.cdnRoot}/${dataRoot}/${URL_PARAMS.c}.js?_v_${store.version}`,
- {
- dataType: 'text',
- success: (data) => {
- resolve(data);
- }
- }
- );
- });
+ return new Promise((resolve) => {
+ const dataRoot = URL_PARAMS.gl ? 'data-gl' : 'data';
+ $.ajax(
+ store.typeCheck
+ ? `${store.cdnRoot}/examples/ts/${URL_PARAMS.c}.ts?_v_${store.version}`
+ : `${store.cdnRoot}/${dataRoot}/${URL_PARAMS.c}.js?_v_${store.version}`,
+ {
+ dataType: 'text',
+ success: (data) => {
+ resolve(data);
+ }
+ }
+ );
+ });
}
export function parseSourceCode(code) {
- return code
- // remove front matter
- .replace(/\/\*[\w\W]*?\*\//, '').trim()
- // ts code needs add `export {}` to be a module. remove it.
- .replace(/export\s+\{\s*\}\s*;?$/g, '');
+ return (
+ code
+ // remove front matter
+ .replace(/\/\*[\w\W]*?\*\//, '')
+ .trim()
+ // ts code needs add `export {}` to be a module. remove it.
+ .replace(/export\s+\{\s*\}\s*;?$/g, '')
+ );
}
let hashId = 123;
export function updateRunHash() {
- store.runHash = hashId++;
-}
\ No newline at end of file
+ store.runHash = hashId++;
+}
diff --git a/src/dep/showDebugDirtyRect.js b/src/dep/showDebugDirtyRect.js
index fcd6e64..5ee3204 100644
--- a/src/dep/showDebugDirtyRect.js
+++ b/src/dep/showDebugDirtyRect.js
@@ -1,79 +1,83 @@
var DebugRect = (function () {
- function DebugRect(style) {
- var dom = this.dom = document.createElement('div');
- dom.className = 'ec-debug-dirty-rect';
- style = Object.assign({}, style);
- Object.assign(style, {
- backgroundColor: 'rgba(0, 0, 255, 0.2)',
- border: '1px solid #00f'
- });
- dom.style.cssText = "\nposition: absolute;\nopacity: 0;\ntransition: opacity 0.5s linear;\npointer-events: none;\n";
- for (var key in style) {
- if (style.hasOwnProperty(key)) {
- dom.style[key] = style[key];
- }
- }
+ function DebugRect(style) {
+ var dom = (this.dom = document.createElement('div'));
+ dom.className = 'ec-debug-dirty-rect';
+ style = Object.assign({}, style);
+ Object.assign(style, {
+ backgroundColor: 'rgba(0, 0, 255, 0.2)',
+ border: '1px solid #00f'
+ });
+ dom.style.cssText =
+ '\nposition: absolute;\nopacity: 0;\ntransition: opacity 0.5s linear;\npointer-events: none;\n';
+ for (var key in style) {
+ if (style.hasOwnProperty(key)) {
+ dom.style[key] = style[key];
+ }
}
- DebugRect.prototype.update = function (rect) {
- var domStyle = this.dom.style;
- domStyle.width = rect.width + 'px';
- domStyle.height = rect.height + 'px';
- domStyle.left = rect.x + 'px';
- domStyle.top = rect.y + 'px';
- };
- DebugRect.prototype.hide = function () {
- this.dom.style.opacity = '0';
- };
- DebugRect.prototype.show = function () {
- var _this = this;
- clearTimeout(this._hideTimeout);
- this.dom.style.opacity = '1';
- this._hideTimeout = setTimeout(function () {
- _this.hide();
- }, 500);
- };
- return DebugRect;
-}());
+ }
+ DebugRect.prototype.update = function (rect) {
+ var domStyle = this.dom.style;
+ domStyle.width = rect.width + 'px';
+ domStyle.height = rect.height + 'px';
+ domStyle.left = rect.x + 'px';
+ domStyle.top = rect.y + 'px';
+ };
+ DebugRect.prototype.hide = function () {
+ this.dom.style.opacity = '0';
+ };
+ DebugRect.prototype.show = function () {
+ var _this = this;
+ clearTimeout(this._hideTimeout);
+ this.dom.style.opacity = '1';
+ this._hideTimeout = setTimeout(function () {
+ _this.hide();
+ }, 500);
+ };
+ return DebugRect;
+})();
export default function (zr, opts) {
- opts = opts || {};
- var painter = zr.painter;
- if (!painter.getLayers) {
- throw new Error('Debug dirty rect can only been used on canvas renderer.');
- }
- if (painter.isSingleCanvas()) {
- throw new Error('Debug dirty rect can only been used on zrender inited with container.');
- }
- var debugViewRoot = document.createElement('div');
- debugViewRoot.style.cssText = "\nposition:absolute;\nleft:0;\ntop:0;\nright:0;\nbottom:0;\npointer-events:none;\n";
- debugViewRoot.className = 'ec-debug-dirty-rect-container';
- var debugRects = [];
- var dom = zr.dom;
- dom.appendChild(debugViewRoot);
- var computedStyle = getComputedStyle(dom);
- if (computedStyle.position === 'static') {
- dom.style.position = 'relative';
- }
- zr.on('rendered', function () {
- if (painter.getLayers) {
- var idx_1 = 0;
- painter.eachBuiltinLayer(function (layer) {
- if (!layer.debugGetPaintRects) {
- return;
- }
- var paintRects = layer.debugGetPaintRects();
- for (var i = 0; i < paintRects.length; i++) {
- if (!debugRects[idx_1]) {
- debugRects[idx_1] = new DebugRect(opts.style);
- debugViewRoot.appendChild(debugRects[idx_1].dom);
- }
- debugRects[idx_1].show();
- debugRects[idx_1].update(paintRects[i]);
- idx_1++;
- }
- });
- for (var i = idx_1; i < debugRects.length; i++) {
- debugRects[i].hide();
- }
+ opts = opts || {};
+ var painter = zr.painter;
+ if (!painter.getLayers) {
+ throw new Error('Debug dirty rect can only been used on canvas renderer.');
+ }
+ if (painter.isSingleCanvas()) {
+ throw new Error(
+ 'Debug dirty rect can only been used on zrender inited with container.'
+ );
+ }
+ var debugViewRoot = document.createElement('div');
+ debugViewRoot.style.cssText =
+ '\nposition:absolute;\nleft:0;\ntop:0;\nright:0;\nbottom:0;\npointer-events:none;\n';
+ debugViewRoot.className = 'ec-debug-dirty-rect-container';
+ var debugRects = [];
+ var dom = zr.dom;
+ dom.appendChild(debugViewRoot);
+ var computedStyle = getComputedStyle(dom);
+ if (computedStyle.position === 'static') {
+ dom.style.position = 'relative';
+ }
+ zr.on('rendered', function () {
+ if (painter.getLayers) {
+ var idx_1 = 0;
+ painter.eachBuiltinLayer(function (layer) {
+ if (!layer.debugGetPaintRects) {
+ return;
}
- });
+ var paintRects = layer.debugGetPaintRects();
+ for (var i = 0; i < paintRects.length; i++) {
+ if (!debugRects[idx_1]) {
+ debugRects[idx_1] = new DebugRect(opts.style);
+ debugViewRoot.appendChild(debugRects[idx_1].dom);
+ }
+ debugRects[idx_1].show();
+ debugRects[idx_1].update(paintRects[i]);
+ idx_1++;
+ }
+ });
+ for (var i = idx_1; i < debugRects.length; i++) {
+ debugRects[i].hide();
+ }
+ }
+ });
}
diff --git a/src/editor/CodeAce.vue b/src/editor/CodeAce.vue
index ef2a34c..72258ca 100644
--- a/src/editor/CodeAce.vue
+++ b/src/editor/CodeAce.vue
@@ -1,116 +1,115 @@
<template>
-<div class="ace-editor-main" v-loading="loading"></div>
+ <div class="ace-editor-main" v-loading="loading"></div>
</template>
<script>
-
-import {keywords} from '../data/option-keywords';
-import {loadScriptsAsync} from '../common/helper';
-import {store} from '../common/store';
-import {SCRIPT_URLS} from '../common/config';
+import { keywords } from '../data/option-keywords';
+import { loadScriptsAsync } from '../common/helper';
+import { store } from '../common/store';
+import { SCRIPT_URLS } from '../common/config';
function ensureACE() {
- if (typeof ace === 'undefined') {
- return loadScriptsAsync([
- SCRIPT_URLS.aceDir + '/ace.js',
- SCRIPT_URLS.aceDir + '/ext-language_tools.js'
- ]).then(function () {
- const lnTools = ace.require('ace/ext/language_tools');
-
- const completions = [];
- keywords.forEach(keyword => {
- completions.push({
- caption: keyword.name,
- value: keyword.name,
- score: keyword.count,
- metal: 'local'
- });
- });
+ if (typeof ace === 'undefined') {
+ return loadScriptsAsync([
+ SCRIPT_URLS.aceDir + '/ace.js',
+ SCRIPT_URLS.aceDir + '/ext-language_tools.js'
+ ]).then(function () {
+ const lnTools = ace.require('ace/ext/language_tools');
+
+ const completions = [];
+ keywords.forEach((keyword) => {
+ completions.push({
+ caption: keyword.name,
+ value: keyword.name,
+ score: keyword.count,
+ metal: 'local'
+ });
+ });
- lnTools.addCompleter({
- getCompletions: function (editor, session, pos, prefix, callback) {
- callback(null, completions);
- }
- });
- })
- }
- return Promise.resolve();
+ lnTools.addCompleter({
+ getCompletions: function (editor, session, pos, prefix, callback) {
+ callback(null, completions);
+ }
+ });
+ });
+ }
+ return Promise.resolve();
}
export default {
-
- props: ['initialCode'],
-
- data() {
- return {
- shared: store,
- loading: false
- }
- },
-
- mounted() {
- this.loading = true;
- ensureACE().then(() => {
- this.loading = false;
- const editor = ace.edit(this.$el);
- editor.getSession().setMode('ace/mode/javascript');
- editor.setOptions({
- enableBasicAutocompletion: true,
- enableSnippets: true,
- enableLiveAutocompletion: true
- });
-
- this._editor = editor;
-
- editor.on('change', () => {
- store.sourceCode =
- store.runCode = editor.getValue();
- });
-
- if (this.initialCode) {
- this.setInitialCode(this.initialCode);
- }
+ props: ['initialCode'],
+
+ data() {
+ return {
+ shared: store,
+ loading: false
+ };
+ },
+
+ mounted() {
+ this.loading = true;
+ ensureACE().then(() => {
+ this.loading = false;
+ const editor = ace.edit(this.$el);
+ editor.getSession().setMode('ace/mode/javascript');
+ editor.setOptions({
+ enableBasicAutocompletion: true,
+ enableSnippets: true,
+ enableLiveAutocompletion: true
+ });
+
+ this._editor = editor;
+
+ editor.on('change', () => {
+ store.sourceCode = store.runCode = editor.getValue();
+ });
+
+ if (this.initialCode) {
+ this.setInitialCode(this.initialCode);
+ }
+ });
+ },
+
+ methods: {
+ setInitialCode(code) {
+ if (this._editor && code) {
+ this._editor.setValue(code || '');
+ this._editor.selection.setSelectionRange({
+ start: {
+ row: 1,
+ column: 4
+ },
+ end: {
+ row: 1,
+ column: 4
+ }
});
- },
-
- methods: {
- setInitialCode(code) {
- if (this._editor && code) {
- this._editor.setValue(code || '');
- this._editor.selection.setSelectionRange({
- start: {
- row:1,
- column: 4
- }, end: {
- row:1,
- column: 4
- }
- });
- }
- }
- },
+ }
+ }
+ },
- watch: {
- initialCode(newVal) {
- this.setInitialCode(newVal);
- }
+ watch: {
+ initialCode(newVal) {
+ this.setInitialCode(newVal);
}
-}
+ }
+};
</script>
<style lang="scss">
.ace-editor-main {
- font-family: 'Source Code Pro', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
- font-size: 12px;
- line-height: 18px;
- padding: 10px;
- // height: 100%;
-
- // Fix safari
- position: absolute;
- left: 0;
- top: 0;
- bottom: 0;
- right: 0;
+ font-family: 'Source Code Pro', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas',
+ monospace;
+ font-size: 12px;
+ line-height: 18px;
+ padding: 10px;
+ // height: 100%;
+
+ // Fix safari
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ right: 0;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/editor/CodeMonaco.vue b/src/editor/CodeMonaco.vue
index 128c900..695af20 100644
--- a/src/editor/CodeMonaco.vue
+++ b/src/editor/CodeMonaco.vue
@@ -1,53 +1,56 @@
<template>
-<div class="monaco-editor-main" v-loading="loading"></div>
+ <div class="monaco-editor-main" v-loading="loading"></div>
</template>
<script>
-
-import {loadScriptsAsync} from '../common/helper';
-import {store} from '../common/store';
-import {SCRIPT_URLS, URL_PARAMS} from '../common/config';
+import { loadScriptsAsync } from '../common/helper';
+import { store } from '../common/store';
+import { SCRIPT_URLS, URL_PARAMS } from '../common/config';
import { ensureECharts } from './Preview.vue';
function loadTypes() {
- return fetch(
- ('local' in URL_PARAMS
- ? SCRIPT_URLS.localEChartsDir : SCRIPT_URLS.echartsDir) + '/types/dist/echarts.d.ts', {
- mode: 'cors'
- }).then(response => response.text()).then(code => {
-
- // validation settings
- monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
- noSemanticValidation: false,
- noSyntaxValidation: false
- });
-
- // compiler options
- monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
- target: monaco.languages.typescript.ScriptTarget.ES6,
- allowNonTsExtensions: true,
- noResolve: false
- });
-
- // console.log('file:///node_modules/@types/' + res[i].path);
- monaco.languages.typescript.typescriptDefaults.addExtraLib(
- code,
- // https://github.com/microsoft/monaco-editor/issues/667#issuecomment-468164794
- 'file:///node_modules/@types/echarts/echarts.d.ts'
- );
-
- monaco.languages.typescript.typescriptDefaults.addExtraLib(
- `
+ return fetch(
+ ('local' in URL_PARAMS
+ ? SCRIPT_URLS.localEChartsDir
+ : SCRIPT_URLS.echartsDir) + '/types/dist/echarts.d.ts',
+ {
+ mode: 'cors'
+ }
+ )
+ .then((response) => response.text())
+ .then((code) => {
+ // validation settings
+ monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+ noSemanticValidation: false,
+ noSyntaxValidation: false
+ });
+
+ // compiler options
+ monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+ target: monaco.languages.typescript.ScriptTarget.ES6,
+ allowNonTsExtensions: true,
+ noResolve: false
+ });
+
+ // console.log('file:///node_modules/@types/' + res[i].path);
+ monaco.languages.typescript.typescriptDefaults.addExtraLib(
+ code,
+ // https://github.com/microsoft/monaco-editor/issues/667#issuecomment-468164794
+ 'file:///node_modules/@types/echarts/echarts.d.ts'
+ );
+
+ monaco.languages.typescript.typescriptDefaults.addExtraLib(
+ `
import * as echarts from './echarts';
// Export for UMD module.
export as namespace echarts
export = echarts;`,
- // https://github.com/microsoft/monaco-editor/issues/667#issuecomment-468164794
- 'file:///node_modules/@types/echarts/index.d.ts'
- );
+ // https://github.com/microsoft/monaco-editor/issues/667#issuecomment-468164794
+ 'file:///node_modules/@types/echarts/index.d.ts'
+ );
- monaco.languages.typescript.typescriptDefaults.addExtraLib(
-`import * as echarts from 'echarts';
+ monaco.languages.typescript.typescriptDefaults.addExtraLib(
+ `import * as echarts from 'echarts';
// Declare to global namespace.
declare global {
const ROOT_PATH: string
@@ -76,117 +79,115 @@ declare global {
const echarts: typeof echarts
}
`,
- 'file:///example.d.ts'
- );
- return;
+ 'file:///example.d.ts'
+ );
+ return;
});
}
function ensureMonacoAndTsTransformer() {
- function loadMonaco() {
- if (typeof monaco === 'undefined') {
- return loadScriptsAsync([
- SCRIPT_URLS.monacoDir + '/loader.js',
- // Prebuilt TS transformer with surcrase
- store.cdnRoot + '/js/example-transform-ts-bundle.js'
- ]).then(function () {
- window.require.config({ paths: { 'vs': SCRIPT_URLS.monacoDir }});
- return new Promise(resolve => {
- window.require([
- 'vs/editor/editor.main'
- ], function () {
- loadTypes().then(() => {
- resolve();
- });
- })
- });
- })
- }
- return Promise.resolve();
+ function loadMonaco() {
+ if (typeof monaco === 'undefined') {
+ return loadScriptsAsync([
+ SCRIPT_URLS.monacoDir + '/loader.js',
+ // Prebuilt TS transformer with surcrase
+ store.cdnRoot + '/js/example-transform-ts-bundle.js'
+ ]).then(function () {
+ window.require.config({ paths: { vs: SCRIPT_URLS.monacoDir } });
+ return new Promise((resolve) => {
+ window.require(['vs/editor/editor.main'], function () {
+ loadTypes().then(() => {
+ resolve();
+ });
+ });
+ });
+ });
}
+ return Promise.resolve();
+ }
- // Must load echarts before monaco. Or the AMD loader will affect loading of echarts.
- return ensureECharts().then(loadMonaco);
+ // Must load echarts before monaco. Or the AMD loader will affect loading of echarts.
+ return ensureECharts().then(loadMonaco);
}
export default {
+ props: ['initialCode'],
- props: ['initialCode'],
-
- data() {
- return {
- shared: store,
- loading: false
- }
- },
-
- mounted() {
- this.loading = true;
- ensureMonacoAndTsTransformer().then(() => {
- this.loading = false;
- const model = monaco.editor.createModel(
- this.initialCode || '',
- 'typescript',
- // Should also be a file path so it can resolve the lib.
- monaco.Uri.parse('file:///main.ts')
- );
- const editor = monaco.editor.create(this.$el, {
- model,
- fontFamily: `'Source Code Pro', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace`,
- minimap: {
- enabled: false
- },
- automaticLayout: true
- });
+ data() {
+ return {
+ shared: store,
+ loading: false
+ };
+ },
+
+ mounted() {
+ this.loading = true;
+ ensureMonacoAndTsTransformer().then(() => {
+ this.loading = false;
+ const model = monaco.editor.createModel(
+ this.initialCode || '',
+ 'typescript',
+ // Should also be a file path so it can resolve the lib.
+ monaco.Uri.parse('file:///main.ts')
+ );
+ const editor = monaco.editor.create(this.$el, {
+ model,
+ fontFamily: `'Source Code Pro', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace`,
+ minimap: {
+ enabled: false
+ },
+ automaticLayout: true
+ });
+
+ this._editor = editor;
+
+ if (this.initialCode) {
+ store.sourceCode = this.initialCode;
+ store.runCode = echartsExampleTransformTs(store.sourceCode);
+ }
+ editor.onDidChangeModelContent(() => {
+ store.sourceCode = editor.getValue();
+ store.runCode = echartsExampleTransformTs(store.sourceCode);
+ });
+ });
+ },
- this._editor = editor;
+ destroyed() {
+ if (this._editor) {
+ this._editor.getModel().dispose();
+ this._editor.dispose();
+ }
+ },
- if (this.initialCode) {
- store.sourceCode = this.initialCode;
- store.runCode = echartsExampleTransformTs(store.sourceCode);
- }
- editor.onDidChangeModelContent(() => {
- store.sourceCode = editor.getValue();
- store.runCode = echartsExampleTransformTs(store.sourceCode);
- });
- });
- },
-
- destroyed() {
- if (this._editor) {
- this._editor.getModel().dispose();
- this._editor.dispose();
- }
- },
-
- methods: {
- setInitialCode(code) {
- if (this._editor && code) {
- this._editor.setValue(code || '');
- }
- }
- },
+ methods: {
+ setInitialCode(code) {
+ if (this._editor && code) {
+ this._editor.setValue(code || '');
+ }
+ }
+ },
- watch: {
- initialCode(newVal) {
- this.setInitialCode(newVal);
- }
+ watch: {
+ initialCode(newVal) {
+ this.setInitialCode(newVal);
}
-}
+ }
+};
</script>
<style lang="scss">
.monaco-editor-main {
- font-family: 'Source Code Pro', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
- font-size: 12px;
- padding: 0;
- overflow-y: hidden;
- // height: 100%;
- // Fix safari
- position: absolute;
- left: 0;
- top: 0;
- bottom: 0;
- right: 0;
+ font-family: 'Source Code Pro', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas',
+ monospace;
+ font-size: 12px;
+ padding: 0;
+ overflow-y: hidden;
+ // height: 100%;
+ // Fix safari
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ right: 0;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/editor/Editor.vue b/src/editor/Editor.vue
index fe5532d..284487c 100644
--- a/src/editor/Editor.vue
+++ b/src/editor/Editor.vue
@@ -1,236 +1,264 @@
<template>
-<div id="main-container">
- <div id="editor-left-container" :style="{width: leftContainerSize + '%'}" v-if="!shared.isMobile">
- <el-tabs v-model="currentTab" type="border-card">
- <el-tab-pane :label="$t('editor.tabEditor')" name="code-editor">
- <el-container>
- <el-header id="editor-control-panel">
- <div id="code-info">
- <template v-if="shared.editorStatus.message">
- <span class="code-info-time">{{currentTime}}</span>
- <span :class="'code-info-type-' + shared.editorStatus.type">{{shared.editorStatus.message}}</span>
- </template>
- </div>
- <div class="editor-controls">
- <!-- <el-switch v-model="shared.typeCheck"
+ <div id="main-container">
+ <div
+ id="editor-left-container"
+ :style="{ width: leftContainerSize + '%' }"
+ v-if="!shared.isMobile"
+ >
+ <el-tabs v-model="currentTab" type="border-card">
+ <el-tab-pane :label="$t('editor.tabEditor')" name="code-editor">
+ <el-container>
+ <el-header id="editor-control-panel">
+ <div id="code-info">
+ <template v-if="shared.editorStatus.message">
+ <span class="code-info-time">{{ currentTime }}</span>
+ <span :class="'code-info-type-' + shared.editorStatus.type">{{
+ shared.editorStatus.message
+ }}</span>
+ </template>
+ </div>
+ <div class="editor-controls">
+ <!-- <el-switch v-model="shared.typeCheck"
:active-text="$t('editor.monacoMode')"
:inactive-text="''"
></el-switch> -->
- <a href="javascript:;" class='btn btn-default btn-sm' @click='disposeAndRun'>{{$t('editor.run')}}</a>
- </div>
- </el-header>
- <el-main>
- <CodeMonaco v-if="shared.typeCheck" id="code-panel" :initialCode="initialCode"></CodeMonaco>
- <CodeAce v-else id="code-panel" :initialCode="initialCode"></CodeAce>
- </el-main>
- </el-container>
- </el-tab-pane>
-
- <el-tab-pane :label="$t('editor.tabFullCodePreview')" name="full-code" :lazy="true">
- <el-container style="width: 100%; height: 100%">
- <el-header id="full-code-generate-config">
- <span class="full-code-generate-config-label">
- <!-- <i class="el-icon-setting"></i> 配置 -->
- </span>
- <el-switch
- class="enable-decal"
- v-model="fullCodeConfig.minimal"
- :active-text="$t('editor.minimalBundle')"
- :inactive-text="''">
- </el-switch>
- <el-switch
- class="enable-decal"
- v-model="fullCodeConfig.esm"
- active-text="ES Modules"
- :inactive-text="''">
- </el-switch>
- </el-header>
- <el-main>
- <FullCodePreview :code="fullCode"></FullCodePreview>
- </el-main>
- </el-container>
- </el-tab-pane>
- <el-tab-pane :label="$t('editor.tabOptionPreview')" name="full-option">
- <div id="option-outline"></div>
- </el-tab-pane>
- </el-tabs>
+ <a
+ href="javascript:;"
+ class="btn btn-default btn-sm"
+ @click="disposeAndRun"
+ >{{ $t('editor.run') }}</a
+ >
+ </div>
+ </el-header>
+ <el-main>
+ <CodeMonaco
+ v-if="shared.typeCheck"
+ id="code-panel"
+ :initialCode="initialCode"
+ ></CodeMonaco>
+ <CodeAce
+ v-else
+ id="code-panel"
+ :initialCode="initialCode"
+ ></CodeAce>
+ </el-main>
+ </el-container>
+ </el-tab-pane>
+
+ <el-tab-pane
+ :label="$t('editor.tabFullCodePreview')"
+ name="full-code"
+ :lazy="true"
+ >
+ <el-container style="width: 100%; height: 100%">
+ <el-header id="full-code-generate-config">
+ <span class="full-code-generate-config-label">
+ <!-- <i class="el-icon-setting"></i> 配置 -->
+ </span>
+ <el-switch
+ class="enable-decal"
+ v-model="fullCodeConfig.minimal"
+ :active-text="$t('editor.minimalBundle')"
+ :inactive-text="''"
+ >
+ </el-switch>
+ <el-switch
+ class="enable-decal"
+ v-model="fullCodeConfig.esm"
+ active-text="ES Modules"
+ :inactive-text="''"
+ >
+ </el-switch>
+ </el-header>
+ <el-main>
+ <FullCodePreview :code="fullCode"></FullCodePreview>
+ </el-main>
+ </el-container>
+ </el-tab-pane>
+ <el-tab-pane :label="$t('editor.tabOptionPreview')" name="full-option">
+ <div id="option-outline"></div>
+ </el-tab-pane>
+ </el-tabs>
</div>
- <div class="handler" id="h-handler" @mousedown="onSplitterDragStart" :style="{left: leftContainerSize + '%'}" v-if="!shared.isMobile"></div>
- <Preview :inEditor="true" class="right-container" ref="preview" :style="{
- width: (100 - leftContainerSize) + '%',
+ <div
+ class="handler"
+ id="h-handler"
+ @mousedown="onSplitterDragStart"
+ :style="{ left: leftContainerSize + '%' }"
+ v-if="!shared.isMobile"
+ ></div>
+ <Preview
+ :inEditor="true"
+ class="right-container"
+ ref="preview"
+ :style="{
+ width: 100 - leftContainerSize + '%',
left: leftContainerSize + '%'
- }"></Preview>
-</div>
+ }"
+ ></Preview>
+ </div>
</template>
<script>
-
import CodeAce from './CodeAce.vue';
import CodeMonaco from './CodeMonaco.vue';
import FullCodePreview from './FullCodePreview.vue';
import Preview from './Preview.vue';
-import {store, loadExampleCode, parseSourceCode} from '../common/store';
-import {collectDeps, buildExampleCode} from '../../common/buildCode';
-import { mount } from "@lang/object-visualizer";
+import { store, loadExampleCode, parseSourceCode } from '../common/store';
+import { collectDeps, buildExampleCode } from '../../common/buildCode';
+import { mount } from '@lang/object-visualizer';
import './object-visualizer.css';
export default {
- components: {
- CodeAce,
- CodeMonaco,
- FullCodePreview,
- Preview
- },
-
- data() {
- return {
- mousedown: false,
- leftContainerSize: 40,
- mobileMode: false,
- shared: store,
- initialCode: '',
-
- currentTab: 'code-editor',
+ components: {
+ CodeAce,
+ CodeMonaco,
+ FullCodePreview,
+ Preview
+ },
+
+ data() {
+ return {
+ mousedown: false,
+ leftContainerSize: 40,
+ mobileMode: false,
+ shared: store,
+ initialCode: '',
+
+ currentTab: 'code-editor',
+
+ fullCode: '',
+
+ fullCodeConfig: {
+ mimimal: false,
+ esm: true,
+ node: false // If is in node
+ }
+ };
+ },
+
+ computed: {
+ currentTime() {
+ // Update time when message updated.
+ const message = this.shared.message;
+
+ const time = new Date();
+ const digits = [time.getHours(), time.getMinutes(), time.getSeconds()];
+ let timeStr = '';
+ for (let i = 0, len = digits.length; i < len; ++i) {
+ timeStr += (digits[i] < 10 ? '0' : '') + digits[i];
+ if (i < len - 1) {
+ timeStr += ':';
+ }
+ }
+ return timeStr;
+ }
+ },
+
+ mounted() {
+ if (store.isMobile) {
+ this.leftContainerSize = 0;
+ loadExampleCode().then((code) => {
+ // No editor available. Set to runCode directly.
+ store.runCode = parseSourceCode(code);
+ });
+ } else {
+ loadExampleCode().then((code) => {
+ // Only set the code in editor. editor will sync to the store.
+ this.initialCode = parseSourceCode(code);
+ });
+
+ window.addEventListener('mousemove', (e) => {
+ if (this.mousedown) {
+ let percentage = e.clientX / window.innerWidth;
+ percentage = Math.min(0.9, Math.max(0.1, percentage));
+ this.leftContainerSize = percentage * 100;
+ }
+ });
- fullCode: '',
+ window.addEventListener('mouseup', (e) => {
+ this.mousedown = false;
+ });
+ }
+ },
- fullCodeConfig: {
- mimimal: false,
- esm: true,
- node: false // If is in node
- }
- };
+ methods: {
+ onSplitterDragStart() {
+ this.mousedown = true;
},
-
- computed: {
- currentTime() {
- // Update time when message updated.
- const message = this.shared.message;
-
- const time = new Date();
- const digits = [time.getHours(), time.getMinutes(), time.getSeconds()];
- let timeStr = '';
- for (let i = 0, len = digits.length; i < len; ++i) {
- timeStr += (digits[i] < 10 ? '0' : '') + digits[i];
- if (i < len - 1) {
- timeStr += ':';
- }
- }
- return timeStr;
- }
+ disposeAndRun() {
+ this.$refs.preview.refreshAll();
},
-
- mounted() {
-
- if (store.isMobile) {
- this.leftContainerSize = 0;
- loadExampleCode().then(code => {
- // No editor available. Set to runCode directly.
- store.runCode = parseSourceCode(code);
- });
- }
- else {
- loadExampleCode().then(code => {
- // Only set the code in editor. editor will sync to the store.
- this.initialCode = parseSourceCode(code);
- });
-
- window.addEventListener('mousemove', (e) => {
- if (this.mousedown) {
- let percentage = e.clientX / window.innerWidth;
- percentage = Math.min(0.9, Math.max(0.1, percentage));
- this.leftContainerSize = percentage * 100;
- }
- });
-
- window.addEventListener('mouseup', (e) => {
- this.mousedown = false;
- });
- }
+ updateFullCode() {
+ const option = this.$refs.preview.getOption();
+ if (!option) {
+ return;
+ }
+ const deps = collectDeps(option);
+ deps.push(store.renderer === 'svg' ? 'SVGRenderer' : 'CanvasRenderer');
+ this.fullCode = buildExampleCode(store.sourceCode, deps, {
+ minimal: this.fullCodeConfig.minimal,
+ ts: false,
+ esm: this.fullCodeConfig.esm,
+ // legacy: true,
+ theme: store.darkMode ? 'dark' : '',
+ ROOT_PATH: store.cdnRoot
+ });
},
-
- methods: {
- onSplitterDragStart() {
- this.mousedown = true;
- },
- disposeAndRun() {
- this.$refs.preview.refreshAll();
- },
- updateFullCode() {
- const option = this.$refs.preview.getOption();
- if (!option) {
- return;
- }
- const deps = collectDeps(option);
- deps.push(store.renderer === 'svg' ? 'SVGRenderer' : 'CanvasRenderer');
- this.fullCode = buildExampleCode(store.sourceCode, deps, {
- minimal: this.fullCodeConfig.minimal,
- ts: false,
- esm: this.fullCodeConfig.esm,
- // legacy: true,
- theme: store.darkMode ? 'dark' : '',
- ROOT_PATH: store.cdnRoot
- });
- },
- updateOptionOutline() {
- const option = Object.freeze(this.$refs.preview.getOption());
- if (!option) {
- return;
+ updateOptionOutline() {
+ const option = Object.freeze(this.$refs.preview.getOption());
+ if (!option) {
+ return;
+ }
+ mount(option, this.$el.querySelector('#option-outline'), {
+ getKeys(object, path) {
+ return Object.keys(object).filter((key) => {
+ if (Array.isArray(object[key]) && !object[key].length) {
+ return false;
}
- mount(
- option,
- this.$el.querySelector('#option-outline'),
- {
- getKeys(object, path) {
- return Object.keys(object).filter(key => {
- if (Array.isArray(object[key]) && !object[key].length) {
- return false;
- }
- return true;
- });
- },
- expandOnCreatedAndUpdated(path) {
- return path.length === 0
- || (path[0] === 'series' && path.length <= 1);
- },
- }
- );
+ return true;
+ });
},
- updateTabContent(tab) {
- if (tab === 'full-code') {
- this.updateFullCode();
- }
- else if (tab === 'full-option') {
- this.updateOptionOutline();
- }
+ expandOnCreatedAndUpdated(path) {
+ return (
+ path.length === 0 || (path[0] === 'series' && path.length <= 1)
+ );
}
+ });
},
+ updateTabContent(tab) {
+ if (tab === 'full-code') {
+ this.updateFullCode();
+ } else if (tab === 'full-option') {
+ this.updateOptionOutline();
+ }
+ }
+ },
- watch: {
- 'shared.typeCheck'(enableTypeCheck) {
- // Update initialCode to avoid code changed when switching editor
- this.initialCode = store.sourceCode;
- this.updateFullCode();
- },
- 'currentTab'(tab) {
- this.updateTabContent(tab);
- },
- 'shared.runHash'() {
- this.updateTabContent(this.currentTab);
- },
- fullCodeConfig: {
- deep: true,
- handler() {
- this.updateFullCode();
- }
- }
+ watch: {
+ 'shared.typeCheck'(enableTypeCheck) {
+ // Update initialCode to avoid code changed when switching editor
+ this.initialCode = store.sourceCode;
+ this.updateFullCode();
+ },
+ currentTab(tab) {
+ this.updateTabContent(tab);
+ },
+ 'shared.runHash'() {
+ this.updateTabContent(this.currentTab);
+ },
+ fullCodeConfig: {
+ deep: true,
+ handler() {
+ this.updateFullCode();
+ }
}
-}
+ }
+};
</script>
<style lang="scss">
-
@import '../style/color.scss';
$code-info-height: 25px;
@@ -239,215 +267,215 @@ $pd-basic: 10px;
$handler-width: 5px;
#main-container {
- .handler {
- position: absolute;
- left: 50%;
-
- top: 0;
- bottom: 0;
- width: $handler-width;
-
- cursor: col-resize;
- z-index: 100;
- background-color: transparent;
- border-left: 1px solid #ececec;
- // border-right: 1px solid $clr-border;
- }
+ .handler {
+ position: absolute;
+ left: 50%;
+ top: 0;
+ bottom: 0;
+ width: $handler-width;
+
+ cursor: col-resize;
+ z-index: 100;
+ background-color: transparent;
+ border-left: 1px solid #ececec;
+ // border-right: 1px solid $clr-border;
+ }
}
#editor-left-container {
- position: absolute;
- left: 0;
- bottom: 0;
- top: 0;
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ top: 0;
- width: 50%;
+ width: 50%;
- .el-tab-pane {
- height: 100%;
-
- .el-container {
- width: 100%;
- height: 100%;
- }
-
- .el-header {
- height: $control-panel-height!important;
- position: relative;
- z-index: 10;
- padding: 0;
- }
- .el-main {
- padding: 0;
- position: relative;
-
- ::-webkit-scrollbar {
- height:8px;
- width:8px;
- transition:all 0.3s ease-in-out;
- border-radius:2px;
- }
-
- ::-webkit-scrollbar-button {
- display:none;
- }
-
- ::-webkit-scrollbar-thumb {
- width:8px;
- min-height:15px;
- background:rgba(50, 50, 50, 0.6) !important;
- transition:all 0.3s ease-in-out;border-radius:2px;
- }
-
- ::-webkit-scrollbar-thumb:hover {
- background:rgba(0, 0, 0, 0.5) !important;
- }
- }
- }
+ .el-tab-pane {
+ height: 100%;
- .el-tabs {
- box-shadow: none;
+ .el-container {
+ width: 100%;
+ height: 100%;
}
- .el-tabs--border-card>.el-tabs__header {
- border-bottom: none;
+ .el-header {
+ height: $control-panel-height !important;
+ position: relative;
+ z-index: 10;
+ padding: 0;
}
-
- .el-tabs__content {
- position: absolute;
- top: 34px;
- left: 0;
- right: 0;
- bottom: 0;
- padding: 0;
+ .el-main {
+ padding: 0;
+ position: relative;
+
+ ::-webkit-scrollbar {
+ height: 8px;
+ width: 8px;
+ transition: all 0.3s ease-in-out;
+ border-radius: 2px;
+ }
+
+ ::-webkit-scrollbar-button {
+ display: none;
+ }
+
+ ::-webkit-scrollbar-thumb {
+ width: 8px;
+ min-height: 15px;
+ background: rgba(50, 50, 50, 0.6) !important;
+ transition: all 0.3s ease-in-out;
+ border-radius: 2px;
+ }
+
+ ::-webkit-scrollbar-thumb:hover {
+ background: rgba(0, 0, 0, 0.5) !important;
+ }
}
+ }
- .el-tabs__item {
- height: 34px;
- line-height: 34px;
- }
-}
+ .el-tabs {
+ box-shadow: none;
+ }
-#editor-control-panel, #full-code-generate-config {
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-}
+ .el-tabs--border-card > .el-tabs__header {
+ border-bottom: none;
+ }
-#option-outline {
- // height: 100%;
- // Fix safari
+ .el-tabs__content {
position: absolute;
+ top: 34px;
left: 0;
- top: 0;
- bottom: 0;
right: 0;
+ bottom: 0;
+ padding: 0;
+ }
- font-size: 13px;
-
- font-family: 'Source Code Pro', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
+ .el-tabs__item {
+ height: 34px;
+ line-height: 34px;
+ }
}
+#editor-control-panel,
#full-code-generate-config {
- .full-code-generate-config-label {
- height: $control-panel-height;
- line-height: $control-panel-height;
- vertical-align: middle;
- margin: 0 0 0 20px;
- }
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
- .el-switch {
- margin-right: 10px;
- }
+#option-outline {
+ // height: 100%;
+ // Fix safari
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ right: 0;
+
+ font-size: 13px;
+
+ font-family: 'Source Code Pro', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas',
+ monospace;
+}
- .el-switch__label {
- margin-left: 8px;
- margin-top: -2px;
- }
- .el-switch__label * {
- font-size: 12px;
- }
+#full-code-generate-config {
+ .full-code-generate-config-label {
+ height: $control-panel-height;
+ line-height: $control-panel-height;
+ vertical-align: middle;
+ margin: 0 0 0 20px;
+ }
+
+ .el-switch {
+ margin-right: 10px;
+ }
+
+ .el-switch__label {
+ margin-left: 8px;
+ margin-top: -2px;
+ }
+ .el-switch__label * {
+ font-size: 12px;
+ }
}
#editor-control-panel {
- .setting-panel {
- display: inline-block;
+ .setting-panel {
+ display: inline-block;
- .btn-group + .btn-group {
- margin-left: $pd-basic;
- }
+ .btn-group + .btn-group {
+ margin-left: $pd-basic;
}
+ }
- .editor-controls {
- float: right;
+ .editor-controls {
+ float: right;
- .el-switch__label {
- margin-top: -3px;
- }
- .el-switch__label * {
- font-size: 12px;
- }
-
- .btn {
- color: #FFF;
- border-radius: 0;
- background-color: #409eff;
- margin-left: $pd-basic;
- border: none;
- height: 30px;
- width: 50px;
- }
- .btn:hover {
- background-color: lighten($color: #409eff, $amount: 5);
- }
+ .el-switch__label {
+ margin-top: -3px;
}
-}
-
-#code-info {
- position: absolute;
- bottom: 0;
- overflow: hidden;
-
- height: $control-panel-height;
- line-height: $control-panel-height;
- padding: 0px 10px;
-
- // border-top: 1px solid $clr-border;
- font-size: 0.9rem;
-
- .code-info-time {
- color: $clr-text;
- display: inline-block;
- margin-right: 10px;
- font-size: 12px;
+ .el-switch__label * {
+ font-size: 12px;
}
- .code-info-type-info {
- color: $clr-text;
- font-size: 12px;
+ .btn {
+ color: #fff;
+ border-radius: 0;
+ background-color: #409eff;
+ margin-left: $pd-basic;
+ border: none;
+ height: 30px;
+ width: 50px;
}
-
- .code-info-type-warn {
- color: $clr-warn;
+ .btn:hover {
+ background-color: lighten($color: #409eff, $amount: 5);
}
+ }
+}
- .code-info-type-error {
- color: $clr-error;
- }
+#code-info {
+ position: absolute;
+ bottom: 0;
+ overflow: hidden;
+
+ height: $control-panel-height;
+ line-height: $control-panel-height;
+ padding: 0px 10px;
+
+ // border-top: 1px solid $clr-border;
+ font-size: 0.9rem;
+
+ .code-info-time {
+ color: $clr-text;
+ display: inline-block;
+ margin-right: 10px;
+ font-size: 12px;
+ }
+
+ .code-info-type-info {
+ color: $clr-text;
+ font-size: 12px;
+ }
+
+ .code-info-type-warn {
+ color: $clr-warn;
+ }
+
+ .code-info-type-error {
+ color: $clr-error;
+ }
}
.right-container {
- position: absolute;
- right: 0;
+ position: absolute;
+ right: 0;
- width: 50%;
- height: 100%;
- padding: 0;
- padding-left: $handler-width;
- border: none;
- z-index: 30;
+ width: 50%;
+ height: 100%;
+ padding: 0;
+ padding-left: $handler-width;
+ border: none;
+ z-index: 30;
- background: $clr-bg;
+ background: $clr-bg;
}
-
-
-</style>
\ No newline at end of file
+</style>
diff --git a/src/editor/FullCodePreview.vue b/src/editor/FullCodePreview.vue
index e2f1c3f..19fce17 100644
--- a/src/editor/FullCodePreview.vue
+++ b/src/editor/FullCodePreview.vue
@@ -1,94 +1,91 @@
<template>
-<div class="full-code-preview" v-loading="loading"></div>
+ <div class="full-code-preview" v-loading="loading"></div>
</template>
<script>
-
-import {loadScriptsAsync} from '../common/helper';
-import {store} from '../common/store';
-import {SCRIPT_URLS} from '../common/config';
+import { loadScriptsAsync } from '../common/helper';
+import { store } from '../common/store';
+import { SCRIPT_URLS } from '../common/config';
function ensureACE() {
- if (typeof ace === 'undefined') {
- return loadScriptsAsync([
- SCRIPT_URLS.aceDir + '/ace.js'
- ]);
- }
- return Promise.resolve();
+ if (typeof ace === 'undefined') {
+ return loadScriptsAsync([SCRIPT_URLS.aceDir + '/ace.js']);
+ }
+ return Promise.resolve();
}
export default {
+ props: ['code'],
- props: ['code'],
-
- data() {
- return {
- shared: store,
- loading: false
- }
- },
+ data() {
+ return {
+ shared: store,
+ loading: false
+ };
+ },
- mounted() {
- this.loading = true;
- ensureACE().then(() => {
- this.loading = false;
- const editor = ace.edit(this.$el);
- editor.getSession().setMode('ace/mode/javascript');
- // https://stackoverflow.com/questions/32806060/is-there-a-programmatic-way-to-hide-the-cursor-in-ace-editor
- editor.setOptions({
- readOnly: true,
- showLineNumbers: false,
- showFoldWidgets: false,
- highlightActiveLine: false,
- highlightGutterLine: false
- });
- // editor.renderer.setShowGutter(false);
- editor.renderer.$cursorLayer.element.style.display = 'none';
+ mounted() {
+ this.loading = true;
+ ensureACE().then(() => {
+ this.loading = false;
+ const editor = ace.edit(this.$el);
+ editor.getSession().setMode('ace/mode/javascript');
+ // https://stackoverflow.com/questions/32806060/is-there-a-programmatic-way-to-hide-the-cursor-in-ace-editor
+ editor.setOptions({
+ readOnly: true,
+ showLineNumbers: false,
+ showFoldWidgets: false,
+ highlightActiveLine: false,
+ highlightGutterLine: false
+ });
+ // editor.renderer.setShowGutter(false);
+ editor.renderer.$cursorLayer.element.style.display = 'none';
- this._editor = editor;
+ this._editor = editor;
- this.setCode(this.code);
+ this.setCode(this.code);
+ });
+ },
+ methods: {
+ setCode(code) {
+ if (this._editor) {
+ this._editor.setValue(code);
+ this._editor.selection.setSelectionRange({
+ start: {
+ row: 1,
+ column: 4
+ },
+ end: {
+ row: 1,
+ column: 4
+ }
});
- },
-
- methods: {
- setCode(code) {
- if (this._editor) {
- this._editor.setValue(code);
- this._editor.selection.setSelectionRange({
- start: {
- row:1,
- column: 4
- }, end: {
- row:1,
- column: 4
- }
- });
- }
- }
- },
+ }
+ }
+ },
- watch: {
- code(newVal) {
- this.setCode(newVal);
- }
+ watch: {
+ code(newVal) {
+ this.setCode(newVal);
}
-}
+ }
+};
</script>
<style lang="scss">
.full-code-preview {
- font-family: 'Source Code Pro', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
- font-size: 12px;
- line-height: 18px;
- // height: 100%;
+ font-family: 'Source Code Pro', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas',
+ monospace;
+ font-size: 12px;
+ line-height: 18px;
+ // height: 100%;
- // Fix safari
- position: absolute;
- left: 0;
- top: 0;
- bottom: 0;
- right: 0;
+ // Fix safari
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ right: 0;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/editor/Preview.vue b/src/editor/Preview.vue
index 7903283..3d27e1d 100644
--- a/src/editor/Preview.vue
+++ b/src/editor/Preview.vue
@@ -1,424 +1,446 @@
<template>
-<div :class="[(inEditor && !shared.isMobile) ? '' : 'full']">
- <div v-loading="loading"
- class="right-panel"
- id="chart-panel"
- :style="{background: backgroundColor}"
+ <div :class="[inEditor && !shared.isMobile ? '' : 'full']">
+ <div
+ v-loading="loading"
+ class="right-panel"
+ id="chart-panel"
+ :style="{ background: backgroundColor }"
>
- <div class="chart-container"></div>
+ <div class="chart-container"></div>
</div>
<div id="tool-panel">
- <div class="left-panel">
- <el-switch
- class="dark-mode"
- v-model="shared.darkMode"
- active-color="#181432"
- :active-text="$t('editor.darkMode')"
- :inactive-text="''">
- </el-switch>
- <el-switch
- v-if="!isGL"
-
- class="enable-decal"
- v-model="shared.enableDecal"
- :active-text="$t('editor.enableDecal')"
- :inactive-text="''">
- </el-switch>
-
- <el-popover
- placement="bottom"
- width="450"
- trigger="click"
- style="margin-top:3px;"
-
- v-if="!isGL"
- >
- <div class="render-config-container">
- <el-row :gutter="2" type="flex" align="middle">
- <el-col :span="12">
- <label class="tool-label">{{ $t('editor.renderer') }}</label>
- <el-radio-group v-model="shared.renderer" size="mini" style="text-transform: uppercase">
- <el-radio-button label="svg"></el-radio-button>
- <el-radio-button label="canvas"></el-radio-button>
- </el-radio-group>
- </el-col>
- <el-col :span="12">
- <el-switch
- v-if="shared.renderer==='canvas'"
- v-model="shared.useDirtyRect"
- :active-text="$t('editor.useDirtyRect')"
- :inactive-text="''">
- </el-switch>
- </el-col>
- </el-row>
- </div>
- <span class="render-config-trigger" slot="reference"><i class="el-icon-setting el-icon--left"></i>{{$t('editor.renderCfgTitle')}}</span>
- </el-popover>
- </div>
- <template v-if="inEditor">
- <button v-if="!shared.isMobile" class="download btn btn-sm" @click="downloadExample">{{ $t('editor.download') }}</button>
- <a class="screenshot" @click="screenshot" target="_blank"><i class="el-icon-camera-solid"></i></a>
- </template>
- <a :href="editLink" target="_blank" v-else class="edit btn btn-sm">{{ $t('editor.edit') }}</a>
+ <div class="left-panel">
+ <el-switch
+ class="dark-mode"
+ v-model="shared.darkMode"
+ active-color="#181432"
+ :active-text="$t('editor.darkMode')"
+ :inactive-text="''"
+ >
+ </el-switch>
+ <el-switch
+ v-if="!isGL"
+ class="enable-decal"
+ v-model="shared.enableDecal"
+ :active-text="$t('editor.enableDecal')"
+ :inactive-text="''"
+ >
+ </el-switch>
+
+ <el-popover
+ placement="bottom"
+ width="450"
+ trigger="click"
+ style="margin-top: 3px"
+ v-if="!isGL"
+ >
+ <div class="render-config-container">
+ <el-row :gutter="2" type="flex" align="middle">
+ <el-col :span="12">
+ <label class="tool-label">{{ $t('editor.renderer') }}</label>
+ <el-radio-group
+ v-model="shared.renderer"
+ size="mini"
+ style="text-transform: uppercase"
+ >
+ <el-radio-button label="svg"></el-radio-button>
+ <el-radio-button label="canvas"></el-radio-button>
+ </el-radio-group>
+ </el-col>
+ <el-col :span="12">
+ <el-switch
+ v-if="shared.renderer === 'canvas'"
+ v-model="shared.useDirtyRect"
+ :active-text="$t('editor.useDirtyRect')"
+ :inactive-text="''"
+ >
+ </el-switch>
+ </el-col>
+ </el-row>
+ </div>
+ <span class="render-config-trigger" slot="reference"
+ ><i class="el-icon-setting el-icon--left"></i
+ >{{ $t('editor.renderCfgTitle') }}</span
+ >
+ </el-popover>
+ </div>
+ <template v-if="inEditor">
+ <button
+ v-if="!shared.isMobile"
+ class="download btn btn-sm"
+ @click="downloadExample"
+ >
+ {{ $t('editor.download') }}
+ </button>
+ <a class="screenshot" @click="screenshot" target="_blank"
+ ><i class="el-icon-camera-solid"></i
+ ></a>
+ </template>
+ <a :href="editLink" target="_blank" v-else class="edit btn btn-sm">{{
+ $t('editor.edit')
+ }}</a>
</div>
-</div>
+ </div>
</template>
<script>
-
-import {store, updateRunHash} from '../common/store';
-import {SCRIPT_URLS, URL_PARAMS} from '../common/config';
-import {loadScriptsAsync} from '../common/helper';
-import {createSandbox} from './sandbox';
+import { store, updateRunHash } from '../common/store';
+import { SCRIPT_URLS, URL_PARAMS } from '../common/config';
+import { loadScriptsAsync } from '../common/helper';
+import { createSandbox } from './sandbox';
import debounce from 'lodash/debounce';
import { addListener, removeListener } from 'resize-detector';
import CHART_LIST from '../data/chart-list-data';
import CHART_LIST_GL from '../data/chart-list-data-gl';
-import {download} from './downloadExample';
+import { download } from './downloadExample';
function findExample(item) {
- return URL_PARAMS.c === item.id;
+ return URL_PARAMS.c === item.id;
}
const example = CHART_LIST.concat(CHART_LIST_GL).find(findExample);
const isGL = CHART_LIST_GL.find(findExample);
function addDecalIfNecessary(option) {
- if (store.enableDecal) {
- option.aria = option.aria || {};
- option.aria.decal = option.aria.decal || {};
- option.aria.decal.show = true;
- option.aria.show = option.aria.enabled = true;
- }
+ if (store.enableDecal) {
+ option.aria = option.aria || {};
+ option.aria.decal = option.aria.decal || {};
+ option.aria.decal.show = true;
+ option.aria.show = option.aria.enabled = true;
+ }
}
export function ensureECharts() {
- if (typeof echarts === 'undefined') {
-
- const hasBmap = example && example.tags.indexOf('bmap') >= 0;
-
- // Code from https://api.map.baidu.com/api?v=2.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu
- if (hasBmap) {
- window.HOST_TYPE = "2";
- window.BMap_loadScriptTime = (new Date).getTime();
- }
+ if (typeof echarts === 'undefined') {
+ const hasBmap = example && example.tags.indexOf('bmap') >= 0;
- return loadScriptsAsync([
- SCRIPT_URLS.datGUIMinJS,
- 'local' in URL_PARAMS
- ? SCRIPT_URLS.localEChartsMinJS : SCRIPT_URLS.echartsMinJS,
- SCRIPT_URLS.echartsDir + '/dist/extension/dataTool.js',
- 'https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js',
- SCRIPT_URLS.echartsStatMinJS,
- ...URL_PARAMS.gl ? [SCRIPT_URLS.echartsGLMinJS] : [],
- ...hasBmap ? [
- 'https://api.map.baidu.com/getscript?v=3.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu&services=&t=20200327103013',
- SCRIPT_URLS.echartsDir + '/dist/extension/bmap.js'
- ] : []
- ]).then(() => {
- echarts.registerPreprocessor(addDecalIfNecessary)
- });
+ // Code from https://api.map.baidu.com/api?v=2.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu
+ if (hasBmap) {
+ window.HOST_TYPE = '2';
+ window.BMap_loadScriptTime = new Date().getTime();
}
- return Promise.resolve();
-}
+ return loadScriptsAsync([
+ SCRIPT_URLS.datGUIMinJS,
+ 'local' in URL_PARAMS
+ ? SCRIPT_URLS.localEChartsMinJS
+ : SCRIPT_URLS.echartsMinJS,
+ SCRIPT_URLS.echartsDir + '/dist/extension/dataTool.js',
+ 'https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js',
+ SCRIPT_URLS.echartsStatMinJS,
+ ...(URL_PARAMS.gl ? [SCRIPT_URLS.echartsGLMinJS] : []),
+ ...(hasBmap
+ ? [
+ 'https://api.map.baidu.com/getscript?v=3.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu&services=&t=20200327103013',
+ SCRIPT_URLS.echartsDir + '/dist/extension/bmap.js'
+ ]
+ : [])
+ ]).then(() => {
+ echarts.registerPreprocessor(addDecalIfNecessary);
+ });
+ }
+ return Promise.resolve();
+}
function log(text, type) {
- if (type !== 'warn' && type !== 'error') {
- type = 'info';
- }
- store.editorStatus.message = text;
- store.editorStatus.type = type;
+ if (type !== 'warn' && type !== 'error') {
+ type = 'info';
+ }
+ store.editorStatus.message = text;
+ store.editorStatus.type = type;
}
-
function run() {
-
- if (typeof echarts === 'undefined') {
- return;
- }
- if (!this.sandbox) {
- this.sandbox = createSandbox((chart) => {
- const option = chart.getOption();
- if (typeof option.backgroundColor === 'string' && option.backgroundColor !== 'transparent') {
- this.backgroundColor = option.backgroundColor;
- }
- else {
- this.backgroundColor = '#fff';
- }
+ if (typeof echarts === 'undefined') {
+ return;
+ }
+ if (!this.sandbox) {
+ this.sandbox = createSandbox((chart) => {
+ const option = chart.getOption();
+ if (
+ typeof option.backgroundColor === 'string' &&
+ option.backgroundColor !== 'transparent'
+ ) {
+ this.backgroundColor = option.backgroundColor;
+ } else {
+ this.backgroundColor = '#fff';
+ }
+ });
+ }
+
+ try {
+ const updateTime = this.sandbox.run(
+ this.$el.querySelector('.chart-container'),
+ store
+ );
+
+ log(this.$t('editor.chartOK') + updateTime + 'ms');
+
+ // Find the appropriate throttle time
+ const debounceTime = 500;
+ const debounceTimeQuantities = [0, 500, 2000, 5000, 10000];
+ for (let i = debounceTimeQuantities.length - 1; i >= 0; i--) {
+ const quantity = debounceTimeQuantities[i];
+ const preferredDebounceTime = debounceTimeQuantities[i + 1] || 1000000;
+ if (
+ updateTime >= quantity &&
+ this.debouncedTime !== preferredDebounceTime
+ ) {
+ this.debouncedRun = debounce(run, preferredDebounceTime, {
+ trailing: true
});
+ this.debouncedTime = preferredDebounceTime;
+ break;
+ }
}
- try {
- const updateTime = this.sandbox.run(this.$el.querySelector('.chart-container'), store);
-
- log(this.$t('editor.chartOK') + updateTime + 'ms');
-
- // Find the appropriate throttle time
- const debounceTime = 500;
- const debounceTimeQuantities = [0, 500, 2000, 5000, 10000];
- for (let i = debounceTimeQuantities.length - 1; i >= 0; i--) {
- const quantity = debounceTimeQuantities[i];
- const preferredDebounceTime = debounceTimeQuantities[i + 1] || 1000000;
- if (updateTime >= quantity && this.debouncedTime !== preferredDebounceTime) {
- this.debouncedRun = debounce(run, preferredDebounceTime, {
- trailing: true
- });
- this.debouncedTime = preferredDebounceTime;
- break;
- }
- }
-
- // Update run hash to let others known chart has been changed.
- updateRunHash();
-
- }
- catch (e) {
- log(this.$t('editor.errorInEditor'), 'error');
- console.error(e);
- }
+ // Update run hash to let others known chart has been changed.
+ updateRunHash();
+ } catch (e) {
+ log(this.$t('editor.errorInEditor'), 'error');
+ console.error(e);
+ }
}
-
export default {
-
- props: ['inEditor'],
-
- data() {
- return {
- shared: store,
- debouncedTime: undefined,
- backgroundColor: '',
- autoRun: true,
- loading: false,
-
- isGL
+ props: ['inEditor'],
+
+ data() {
+ return {
+ shared: store,
+ debouncedTime: undefined,
+ backgroundColor: '',
+ autoRun: true,
+ loading: false,
+
+ isGL
+ };
+ },
+
+ mounted() {
+ this.loading = true;
+ ensureECharts().then(() => {
+ this.loading = false;
+ if (store.runCode) {
+ this.run();
+ }
+ });
+
+ addListener(this.$el, () => {
+ if (this.sandbox) {
+ this.sandbox.resize();
+ }
+ });
+ },
+
+ computed: {
+ editLink() {
+ const params = ['c=' + URL_PARAMS.c];
+ if (URL_PARAMS.theme) {
+ params.push(['theme=' + URL_PARAMS.theme]);
+ }
+ if (URL_PARAMS.gl) {
+ params.push(['gl=' + URL_PARAMS.gl]);
+ }
+ return './editor.html?' + params.join('&');
+ }
+ },
+
+ watch: {
+ 'shared.runCode'(val) {
+ if (this.autoRun || !this.sandbox) {
+ if (!this.debouncedRun) {
+ // First run
+ this.run();
+ } else {
+ this.debouncedRun();
}
+ }
},
-
- mounted() {
- this.loading = true;
- ensureECharts().then(() => {
- this.loading = false;
- if (store.runCode) {
- this.run();
- }
- });
-
- addListener(this.$el, () => {
- if (this.sandbox) {
- this.sandbox.resize();
- }
- })
+ 'shared.renderer'() {
+ this.refreshAll();
},
-
- computed: {
- editLink() {
- const params = ['c=' + URL_PARAMS.c];
- if (URL_PARAMS.theme) {
- params.push(['theme=' + URL_PARAMS.theme]);
- }
- if (URL_PARAMS.gl) {
- params.push(['gl=' + URL_PARAMS.gl]);
- }
- return './editor.html?' + params.join('&');
- }
+ 'shared.darkMode'() {
+ this.refreshAll();
},
-
- watch: {
- 'shared.runCode'(val) {
- if (this.autoRun || !this.sandbox) {
- if (!this.debouncedRun) {
- // First run
- this.run();
- }
- else {
- this.debouncedRun();
- }
- }
- },
- 'shared.renderer'() {
- this.refreshAll();
- },
- 'shared.darkMode'() {
- this.refreshAll();
- },
- 'shared.enableDecal'() {
- this.refreshAll();
- },
- 'shared.useDirtyRect'() {
- this.refreshAll();
- }
+ 'shared.enableDecal'() {
+ this.refreshAll();
},
-
- methods: {
- run,
- // debouncedRun will be created at first run
- // debouncedRun: null,
- refreshAll() {
- this.dispose();
- this.run();
- },
- dispose() {
- if (this.sandbox) {
- this.sandbox.dispose();
- }
- },
- downloadExample() {
- download();
- },
- screenshot() {
- if (this.sandbox) {
- const url = this.sandbox.getDataURL();
- const $a = document.createElement('a');
- $a.download = URL_PARAMS.c + '.' + (store.renderer === 'svg' ? 'svg' : 'png');
- $a.target = '_blank';
- $a.href = url;
- const evt = new MouseEvent('click', {
- bubbles: true,
- cancelable: false
- });
- $a.dispatchEvent(evt);
- }
- },
- getOption() {
- return this.sandbox && this.sandbox.getOption();
- }
- // hasEditorError() {
- // const annotations = this.editor.getSession().getAnnotations();
- // for (let aid = 0, alen = annotations.length; aid < alen; ++aid) {
- // if (annotations[aid].type === 'error') {
- // return true;
- // }
- // }
- // return false;
- // }
+ 'shared.useDirtyRect'() {
+ this.refreshAll();
}
-}
+ },
+
+ methods: {
+ run,
+ // debouncedRun will be created at first run
+ // debouncedRun: null,
+ refreshAll() {
+ this.dispose();
+ this.run();
+ },
+ dispose() {
+ if (this.sandbox) {
+ this.sandbox.dispose();
+ }
+ },
+ downloadExample() {
+ download();
+ },
+ screenshot() {
+ if (this.sandbox) {
+ const url = this.sandbox.getDataURL();
+ const $a = document.createElement('a');
+ $a.download =
+ URL_PARAMS.c + '.' + (store.renderer === 'svg' ? 'svg' : 'png');
+ $a.target = '_blank';
+ $a.href = url;
+ const evt = new MouseEvent('click', {
+ bubbles: true,
+ cancelable: false
+ });
+ $a.dispatchEvent(evt);
+ }
+ },
+ getOption() {
+ return this.sandbox && this.sandbox.getOption();
+ }
+ // hasEditorError() {
+ // const annotations = this.editor.getSession().getAnnotations();
+ // for (let aid = 0, alen = annotations.length; aid < alen; ++aid) {
+ // if (annotations[aid].type === 'error') {
+ // return true;
+ // }
+ // }
+ // return false;
+ // }
+ }
+};
</script>
<style lang="scss">
-
#chart-panel {
- position: absolute;
- // top: $control-panel-height;
- top: 42px;
- right: 15px;
- bottom: 15px;
- left: 15px;
- box-sizing: border-box;
- box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px;
- border-radius: 5px;
- background: #fff;
- overflow: hidden;
-
- padding: 10px;
-
- .ec-debug-dirty-rect-container {
- left: 10px!important;
- top: 10px!important;
- right: 10px!important;
- bottom: 10px!important;
-
- .ec-debug-dirty-rect {
- background-color: rgba(255, 0, 0, 0.2)!important;
- border: 1px solid red!important;
- }
+ position: absolute;
+ // top: $control-panel-height;
+ top: 42px;
+ right: 15px;
+ bottom: 15px;
+ left: 15px;
+ box-sizing: border-box;
+ box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px;
+ border-radius: 5px;
+ background: #fff;
+ overflow: hidden;
+
+ padding: 10px;
+
+ .ec-debug-dirty-rect-container {
+ left: 10px !important;
+ top: 10px !important;
+ right: 10px !important;
+ bottom: 10px !important;
+
+ .ec-debug-dirty-rect {
+ background-color: rgba(255, 0, 0, 0.2) !important;
+ border: 1px solid red !important;
}
+ }
- .chart-container {
- position: relative;
- height: 100%;
- }
+ .chart-container {
+ position: relative;
+ height: 100%;
+ }
}
.render-config-container {
- .el-radio-group {
- label {
- margin-bottom: 0;
- }
+ .el-radio-group {
+ label {
+ margin-bottom: 0;
}
+ }
}
#tool-panel {
- position: absolute;
- top: 0;
- right: 0;
- left: 0;
- padding-top: 5px;
- padding-left: 15px;
-
- // .el-switch__label * {
- // font-size: 12px;
- // }
-
- .render-config-trigger {
- margin-left: 10px;
- cursor: pointer;
- font-weight: 500;
- // font-size: 12px;
- }
-
- label {
- margin-bottom: 0;
- }
-
- .left-panel {
- float: left;
- }
-
- .left-panel>* {
- vertical-align: middle;
- display: inline-block;
- }
-
- .tool-label {
- font-weight: bold;
- text-transform: uppercase;
- margin-left: 20px;
- }
-
- .screenshot, .download, .edit {
- float: right;
- margin-right: 15px;
- cursor: pointer;
- }
- .screenshot {
- font-size: 22px;
- margin-right: 10px;
- }
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ padding-top: 5px;
+ padding-left: 15px;
+
+ // .el-switch__label * {
+ // font-size: 12px;
+ // }
+
+ .render-config-trigger {
+ margin-left: 10px;
+ cursor: pointer;
+ font-weight: 500;
+ // font-size: 12px;
+ }
+
+ label {
+ margin-bottom: 0;
+ }
+
+ .left-panel {
+ float: left;
+ }
+
+ .left-panel > * {
+ vertical-align: middle;
+ display: inline-block;
+ }
+
+ .tool-label {
+ font-weight: bold;
+ text-transform: uppercase;
+ margin-left: 20px;
+ }
+
+ .screenshot,
+ .download,
+ .edit {
+ float: right;
+ margin-right: 15px;
+ cursor: pointer;
+ }
+ .screenshot {
+ font-size: 22px;
+ margin-right: 10px;
+ }
}
.full {
- #chart-panel {
- top: 40px;
- right: 5px;
- bottom: 5px;
- left: 5px;
- box-shadow: rgba(10, 9, 9, 0.1) 0px 0px 5px;
- }
- #tool-panel {
- padding-left: 5px;
- .download, .edit {
- margin-right: 5px;
- }
+ #chart-panel {
+ top: 40px;
+ right: 5px;
+ bottom: 5px;
+ left: 5px;
+ box-shadow: rgba(10, 9, 9, 0.1) 0px 0px 5px;
+ }
+ #tool-panel {
+ padding-left: 5px;
+ .download,
+ .edit {
+ margin-right: 5px;
}
+ }
}
.dg.main * {
- box-sizing: content-box;
+ box-sizing: content-box;
}
.dg.main input {
- line-height: normal;
+ line-height: normal;
}
.dg.main.a {
- overflow-x: visible;
+ overflow-x: visible;
}
.dg.main .c {
- select {
- color: #000;
- }
+ select {
+ color: #000;
+ }
}
-
-</style>
\ No newline at end of file
+</style>
diff --git a/src/editor/View.vue b/src/editor/View.vue
index f6abe53..a8b1ca1 100644
--- a/src/editor/View.vue
+++ b/src/editor/View.vue
@@ -1,25 +1,22 @@
<template>
-<preview></Preview>
+ <preview></preview>
</template>
<script>
-
import Preview from './Preview.vue';
-import {store, loadExampleCode, parseSourceCode} from '../common/store';
+import { store, loadExampleCode, parseSourceCode } from '../common/store';
export default {
- components: {
- Preview
- },
+ components: {
+ Preview
+ },
- mounted() {
- loadExampleCode().then(code => {
- store.runCode = parseSourceCode(code);
- });
- }
-}
+ mounted() {
+ loadExampleCode().then((code) => {
+ store.runCode = parseSourceCode(code);
+ });
+ }
+};
</script>
-<style lang="scss">
-
-</style>
\ No newline at end of file
+<style lang="scss"></style>
diff --git a/src/editor/downloadExample.js b/src/editor/downloadExample.js
index b9f1a48..d4235df 100644
--- a/src/editor/downloadExample.js
+++ b/src/editor/downloadExample.js
@@ -1,12 +1,12 @@
-import {store} from '../common/store';
-import {URL_PARAMS, SCRIPT_URLS} from '../common/config';
-import {downloadBlob} from '../common/helper';
+import { store } from '../common/store';
+import { URL_PARAMS, SCRIPT_URLS } from '../common/config';
+import { downloadBlob } from '../common/helper';
const hasRootPath = store.sourceCode.indexOf('ROOT_PATH') >= 0;
const rootPathCode = hasRootPath ? `var ROOT_PATH = '${store.cdnRoot}'` : '';
export function download() {
- const code = `<!--
+ const code = `<!--
THIS EXAMPLE WAS DOWNLOADED FROM ${window.location.href}
-->
<!DOCTYPE html>
@@ -55,10 +55,10 @@ if (option && typeof option === 'object') {
</body>
</html>
`;
- const file = new Blob([code], {
- type: 'text/html;charset=UTF-8',
- encoding: 'UTF-8'
- });
- // download the blob
- downloadBlob(file, URL_PARAMS.c + '.html');
-}
\ No newline at end of file
+ const file = new Blob([code], {
+ type: 'text/html;charset=UTF-8',
+ encoding: 'UTF-8'
+ });
+ // download the blob
+ downloadBlob(file, URL_PARAMS.c + '.html');
+}
diff --git a/src/editor/object-visualizer.css b/src/editor/object-visualizer.css
index 372a9fd..f135039 100644
--- a/src/editor/object-visualizer.css
+++ b/src/editor/object-visualizer.css
@@ -1,72 +1,72 @@
.object-visualizer {
- border-radius: 4px;
- overflow-x: auto;
- margin: 0;
- padding: 10px;
- /* font-family: Menlo; */
- font-size: 0.6em;
- line-height: 1.7;
- }
+ border-radius: 4px;
+ overflow-x: auto;
+ margin: 0;
+ padding: 10px;
+ /* font-family: Menlo; */
+ font-size: 0.6em;
+ line-height: 1.7;
+}
- .array > .value,
- .object > .value {
- display: flex;
- flex-direction: column;
- margin-left: 2em;
- }
+.array > .value,
+.object > .value {
+ display: flex;
+ flex-direction: column;
+ margin-left: 2em;
+}
- .key {
- /* color: #4078f2; */
- color: #111;
- user-select: none;
- }
+.key {
+ /* color: #4078f2; */
+ color: #111;
+ user-select: none;
+}
- .string > .value {
- color: #50a14f;
- }
+.string > .value {
+ color: #50a14f;
+}
- .boolean > .value,
- .number > .value {
- color: #d19a66;
- }
+.boolean > .value,
+.number > .value {
+ color: #d19a66;
+}
- .null > .value,
- .undefined > .value {
- color: hsl(0, 0%, 40%);
- }
+.null > .value,
+.undefined > .value {
+ color: hsl(0, 0%, 40%);
+}
- .separator {
- cursor: pointer;
- font-size: 0.8em;
- user-select: none;
- color: hsl(0, 0%, 30%);
- }
+.separator {
+ cursor: pointer;
+ font-size: 0.8em;
+ user-select: none;
+ color: hsl(0, 0%, 30%);
+}
- .indicator {
- cursor: pointer;
- font-size: 0.8em;
- padding-right: 0.5em;
- user-select: none;
- vertical-align: text-bottom;
- color: hsl(0, 0%, 30%);
- }
+.indicator {
+ cursor: pointer;
+ font-size: 0.8em;
+ padding-right: 0.5em;
+ user-select: none;
+ vertical-align: text-bottom;
+ color: hsl(0, 0%, 30%);
+}
- .array > .key,
- .object > .key {
- cursor: pointer;
- }
+.array > .key,
+.object > .key {
+ cursor: pointer;
+}
- .value > .array,
- .value > .object {
- position: relative;
- left: -0.8em;
- }
+.value > .array,
+.value > .object {
+ position: relative;
+ left: -0.8em;
+}
- .count,
- .preview,
- .quotes {
- cursor: pointer;
- font-size: 0.8em;
- user-select: none;
- color: hsl(0, 0%, 30%);
- }
+.count,
+.preview,
+.quotes {
+ cursor: pointer;
+ font-size: 0.8em;
+ user-select: none;
+ color: hsl(0, 0%, 30%);
+}
diff --git a/src/editor/sandbox.js b/src/editor/sandbox.js
index 4786d75..de496c5 100644
--- a/src/editor/sandbox.js
+++ b/src/editor/sandbox.js
@@ -1,190 +1,210 @@
import showDebugDirtyRect from '../dep/showDebugDirtyRect';
export function createSandbox(optionUpdated) {
- let appEnv = {};
- let gui;
-
- let _intervalIdList = [];
- let _timeoutIdList = [];
-
- const _oldSetTimeout = window.setTimeout;
- const _oldSetInterval = window.setInterval;
-
- function setTimeout(func, delay) {
- var id = _oldSetTimeout(func, delay);
- _timeoutIdList.push(id);
- return id;
+ let appEnv = {};
+ let gui;
+
+ let _intervalIdList = [];
+ let _timeoutIdList = [];
+
+ const _oldSetTimeout = window.setTimeout;
+ const _oldSetInterval = window.setInterval;
+
+ function setTimeout(func, delay) {
+ var id = _oldSetTimeout(func, delay);
+ _timeoutIdList.push(id);
+ return id;
+ }
+ function setInterval(func, gap) {
+ var id = _oldSetInterval(func, gap);
+ _intervalIdList.push(id);
+ return id;
+ }
+ function _clearTimeTickers() {
+ for (var i = 0; i < _intervalIdList.length; i++) {
+ clearInterval(_intervalIdList[i]);
+ }
+ for (var i = 0; i < _timeoutIdList.length; i++) {
+ clearTimeout(_timeoutIdList[i]);
+ }
+ _intervalIdList = [];
+ _timeoutIdList = [];
+ }
+ const _events = [];
+ function _wrapOnMethods(chart) {
+ const oldOn = chart.on;
+ const oldSetOption = chart.setOption;
+ chart.on = function (eventName) {
+ const res = oldOn.apply(chart, arguments);
+ _events.push(eventName);
+ return res;
};
- function setInterval(func, gap) {
- var id = _oldSetInterval(func, gap);
- _intervalIdList.push(id);
- return id;
+ chart.setOption = function () {
+ const res = oldSetOption.apply(this, arguments);
+ optionUpdated && optionUpdated(chart);
+ return res;
};
- function _clearTimeTickers() {
- for (var i = 0; i < _intervalIdList.length; i++) {
- clearInterval(_intervalIdList[i]);
- }
- for (var i = 0; i < _timeoutIdList.length; i++) {
- clearTimeout(_timeoutIdList[i]);
+ }
+
+ function _clearChartEvents(chart) {
+ _events.forEach(function (eventName) {
+ if (chart) {
+ chart.off(eventName);
+ }
+ });
+
+ _events.length = 0;
+ }
+
+ let chartInstance;
+
+ return {
+ resize() {
+ if (chartInstance) {
+ chartInstance.resize();
+ }
+ },
+
+ dispose() {
+ if (chartInstance) {
+ chartInstance.dispose();
+ chartInstance = null;
+ }
+ },
+
+ getDataURL() {
+ return chartInstance.getDataURL({
+ pixelRatio: 2,
+ excludeComponents: ['toolbox']
+ });
+ },
+
+ getOption() {
+ return chartInstance.getOption();
+ },
+
+ run(el, store) {
+ if (!chartInstance) {
+ chartInstance = echarts.init(el, store.darkMode ? 'dark' : '', {
+ renderer: store.renderer,
+ useDirtyRect: store.useDirtyRect
+ });
+ if (store.useDirtyRect && store.renderer === 'canvas') {
+ try {
+ showDebugDirtyRect(chartInstance.getZr(), {
+ autoHideDelay: 500
+ });
+ } catch (e) {
+ console.error(e);
+ }
}
- _intervalIdList = [];
- _timeoutIdList = [];
- }
- const _events = [];
- function _wrapOnMethods(chart) {
- const oldOn = chart.on;
- const oldSetOption = chart.setOption;
- chart.on = function (eventName) {
- const res = oldOn.apply(chart, arguments);
- _events.push(eventName);
- return res;
- };
- chart.setOption = function () {
- const res = oldSetOption.apply(this, arguments);
- optionUpdated && optionUpdated(chart);
- return res;
- };
- }
-
- function _clearChartEvents(chart) {
- _events.forEach(function (eventName) {
- if (chart) {
- chart.off(eventName);
- }
+ _wrapOnMethods(chartInstance);
+ }
+
+ // if (this.hasEditorError()) {
+ // log(this.$t('editor.errorInEditor'), 'error');
+ // return;
+ // }
+
+ // TODO Scope the variables in component.
+ _clearTimeTickers();
+ _clearChartEvents(chartInstance);
+ // Reset
+ appEnv.config = null;
+
+ // run the code
+
+ const compiledCode = store.runCode;
+
+ const func = new Function(
+ 'myChart',
+ 'app',
+ 'setTimeout',
+ 'setInterval',
+ 'ROOT_PATH',
+ 'var option;\n' + compiledCode + '\nreturn option;'
+ );
+ const option = func(
+ chartInstance,
+ appEnv,
+ setTimeout,
+ setInterval,
+ store.cdnRoot
+ );
+ let updateTime = 0;
+
+ if (option && typeof option === 'object') {
+ const startTime = +new Date();
+ chartInstance.setOption(option, true);
+ const endTime = +new Date();
+ updateTime = endTime - startTime;
+ }
+
+ if (gui) {
+ $(gui.domElement).remove();
+ gui.destroy();
+ gui = null;
+ }
+
+ if (appEnv.config) {
+ gui = new dat.GUI({
+ autoPlace: false
});
-
- _events.length = 0;
- }
-
- let chartInstance;
-
- return {
- resize() {
- if (chartInstance) {
- chartInstance.resize();
- }
- },
-
- dispose() {
- if (chartInstance) {
- chartInstance.dispose();
- chartInstance = null;
+ $(gui.domElement).css({
+ position: 'absolute',
+ right: 5,
+ top: 0,
+ zIndex: 1000
+ });
+ $('.right-container').append(gui.domElement);
+
+ var configParameters = appEnv.configParameters || {};
+ for (var name in appEnv.config) {
+ var value = appEnv.config[name];
+ if (name !== 'onChange' && name !== 'onFinishChange') {
+ var isColor = false;
+ // var value = obj;
+ var controller = null;
+ if (configParameters[name]) {
+ if (configParameters[name].options) {
+ controller = gui.add(
+ appEnv.config,
+ name,
+ configParameters[name].options
+ );
+ } else if (configParameters[name].min != null) {
+ controller = gui.add(
+ appEnv.config,
+ name,
+ configParameters[name].min,
+ configParameters[name].max
+ );
+ }
}
- },
-
- getDataURL() {
- return chartInstance.getDataURL({
- pixelRatio: 2,
- excludeComponents: ['toolbox']
- });
- },
-
- getOption() {
- return chartInstance.getOption();
- },
-
- run(el, store) {
-
- if (!chartInstance) {
- chartInstance = echarts.init(el, store.darkMode ? 'dark' : '', {
- renderer: store.renderer,
- useDirtyRect: store.useDirtyRect
- });
- if (store.useDirtyRect && store.renderer === 'canvas') {
- try {
- showDebugDirtyRect(chartInstance.getZr(), {
- autoHideDelay: 500
- });
- }
- catch (e) {
- console.error(e);
- }
+ if (typeof obj === 'string') {
+ try {
+ var colorArr = echarts.color.parse(value);
+ isColor = !!colorArr;
+ if (isColor) {
+ value = echarts.color.stringify(colorArr, 'rgba');
}
- _wrapOnMethods(chartInstance);
- }
-
- // if (this.hasEditorError()) {
- // log(this.$t('editor.errorInEditor'), 'error');
- // return;
- // }
-
- // TODO Scope the variables in component.
- _clearTimeTickers();
- _clearChartEvents(chartInstance);
- // Reset
- appEnv.config = null;
-
- // run the code
-
- const compiledCode = store.runCode;
-
- const func = new Function(
- 'myChart', 'app', 'setTimeout', 'setInterval', 'ROOT_PATH',
- 'var option;\n' + compiledCode + '\nreturn option;'
- );
- const option = func(chartInstance, appEnv, setTimeout, setInterval, store.cdnRoot);
- let updateTime = 0;
-
- if (option && typeof option === 'object') {
- const startTime = +new Date();
- chartInstance.setOption(option, true);
- const endTime = +new Date();
- updateTime = endTime - startTime;
+ } catch (e) {}
}
-
- if (gui) {
- $(gui.domElement).remove();
- gui.destroy();
- gui = null;
+ if (!controller) {
+ controller = gui[isColor ? 'addColor' : 'add'](
+ appEnv.config,
+ name
+ );
}
-
- if (appEnv.config) {
- gui = new dat.GUI({
- autoPlace: false
- });
- $(gui.domElement).css({
- position: 'absolute',
- right: 5,
- top: 0,
- zIndex: 1000
- });
- $('.right-container').append(gui.domElement);
-
- var configParameters = appEnv.configParameters || {};
- for (var name in appEnv.config) {
- var value = appEnv.config[name];
- if (name !== 'onChange' && name !== 'onFinishChange') {
- var isColor = false;
- // var value = obj;
- var controller = null;
- if (configParameters[name]) {
- if (configParameters[name].options) {
- controller = gui.add(appEnv.config, name, configParameters[name].options);
- }
- else if (configParameters[name].min != null) {
- controller = gui.add(appEnv.config, name, configParameters[name].min, configParameters[name].max);
- }
- }
- if (typeof obj === 'string') {
- try {
- var colorArr = echarts.color.parse(value);
- isColor = !!colorArr;
- if (isColor) {
- value = echarts.color.stringify(colorArr, 'rgba');
- }
- }
- catch (e) {}
- }
- if (!controller) {
- controller = gui[isColor ? 'addColor' : 'add'](appEnv.config, name);
- }
- appEnv.config.onChange && controller.onChange(appEnv.config.onChange);
- appEnv.config.onFinishChange && controller.onFinishChange(appEnv.config.onFinishChange);
- }
- }
- }
-
- return updateTime;
+ appEnv.config.onChange &&
+ controller.onChange(appEnv.config.onChange);
+ appEnv.config.onFinishChange &&
+ controller.onFinishChange(appEnv.config.onFinishChange);
+ }
}
- };
-};
\ No newline at end of file
+ }
+
+ return updateTime;
+ }
+ };
+}
diff --git a/src/editor/transformTs.js b/src/editor/transformTs.js
index b47973e..cb2cb1c 100644
--- a/src/editor/transformTs.js
+++ b/src/editor/transformTs.js
@@ -1,7 +1,7 @@
-import {transform} from 'sucrase';
+import { transform } from 'sucrase';
export default function (code) {
- return transform(code, {
- transforms: ['typescript']
- }).code.trim();
-}
\ No newline at end of file
+ return transform(code, {
+ transforms: ['typescript']
+ }).code.trim();
+}
diff --git a/src/explore/ExampleCard.vue b/src/explore/ExampleCard.vue
index bd465b8..17d6959 100644
--- a/src/explore/ExampleCard.vue
+++ b/src/explore/ExampleCard.vue
@@ -1,140 +1,144 @@
<template>
-<div class="example-list-item">
+ <div class="example-list-item">
<a target="_blank" class="example-link" :href="exampleLink">
- <img class="chart-area" src="../asset/placeholder.jpg" :data-src="screenshotURL" />
- <h4 class="example-title">{{title}}</h4>
- <h5 class="example-subtitle" v-if="showSubtitle">{{subtitle}}</h5>
+ <img
+ class="chart-area"
+ src="../asset/placeholder.jpg"
+ :data-src="screenshotURL"
+ />
+ <h4 class="example-title">{{ title }}</h4>
+ <h5 class="example-subtitle" v-if="showSubtitle">{{ subtitle }}</h5>
</a>
-</div>
+ </div>
</template>
<script>
-
-import {store} from '../common/store';
-import {SUPPORT_WEBP, URL_PARAMS} from '../common/config';
+import { store } from '../common/store';
+import { SUPPORT_WEBP, URL_PARAMS } from '../common/config';
export default {
- props: ['example'],
-
- computed: {
-
- title() {
- return (store.locale === 'zh' ? this.example.titleCN : this.example.title)
- || this.example.title || '';
- },
-
- showSubtitle() {
- return store.locale === 'zh';
- },
-
- subtitle() {
- return this.example.title || '';
- },
-
- exampleTheme() {
- const example = this.example;
- return example.theme || (store.darkMode ? 'dark' : '');
- },
-
- exampleLink() {
- const example = this.example;
- const hash = ['c=' + example.id];
- const exampleTheme = this.exampleTheme;
- if (example.isGL) {
- hash.push('gl=1');
- }
- if (exampleTheme) {
- hash.push('theme=' + exampleTheme);
- }
- if ('local' in URL_PARAMS) {
- hash.push('local');
- }
- if ('useDirtyRect' in URL_PARAMS) {
- hash.push('useDirtyRect');
- }
- return './editor.html?' + hash.join('&');
- },
-
- screenshotURL() {
- const example = this.example;
- const themePostfix = this.exampleTheme ? ('-' + this.exampleTheme) : '';
- const ext = SUPPORT_WEBP ? 'webp' : 'png';
- const folder = example.isGL ? 'data-gl' : 'data';
- return `${store.cdnRoot}/${folder}/thumb${themePostfix}/${example.id}.${ext}?_v_=${store.version}`;
- }
+ props: ['example'],
+
+ computed: {
+ title() {
+ return (
+ (store.locale === 'zh' ? this.example.titleCN : this.example.title) ||
+ this.example.title ||
+ ''
+ );
+ },
+
+ showSubtitle() {
+ return store.locale === 'zh';
+ },
+
+ subtitle() {
+ return this.example.title || '';
+ },
+
+ exampleTheme() {
+ const example = this.example;
+ return example.theme || (store.darkMode ? 'dark' : '');
+ },
+
+ exampleLink() {
+ const example = this.example;
+ const hash = ['c=' + example.id];
+ const exampleTheme = this.exampleTheme;
+ if (example.isGL) {
+ hash.push('gl=1');
+ }
+ if (exampleTheme) {
+ hash.push('theme=' + exampleTheme);
+ }
+ if ('local' in URL_PARAMS) {
+ hash.push('local');
+ }
+ if ('useDirtyRect' in URL_PARAMS) {
+ hash.push('useDirtyRect');
+ }
+ return './editor.html?' + hash.join('&');
+ },
+
+ screenshotURL() {
+ const example = this.example;
+ const themePostfix = this.exampleTheme ? '-' + this.exampleTheme : '';
+ const ext = SUPPORT_WEBP ? 'webp' : 'png';
+ const folder = example.isGL ? 'data-gl' : 'data';
+ return `${store.cdnRoot}/${folder}/thumb${themePostfix}/${example.id}.${ext}?_v_=${store.version}`;
}
-}
+ }
+};
</script>
<style lang="scss">
-
-@import "../style/color.scss";
+@import '../style/color.scss';
.example-list-item {
- width: 100%;
- max-width: 350px;
- margin-bottom: 30px;
-
- border-radius: 2px;
-
- .example-link {
- position: relative;
- display: block;
-
- .chart-area {
- width: 100%;
- height: 100%;
- border-radius: 5px;
- box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
- margin-top: 10px;
- }
-
- .example-title {
- color: $clr-primary;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-
- padding: 10px 10px 2px 10px;
- margin: 0;
- font-weight: normal;
- font-size: 14px;
- text-align: center;
- }
-
- .example-subtitle {
- font-size: 12px;
- text-align: center;
- color: #aaa;
- font-weight: normal;
- // font-weight: 200;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- margin: 3px 0 0 0;
- }
+ width: 100%;
+ max-width: 350px;
+ margin-bottom: 30px;
+
+ border-radius: 2px;
+
+ .example-link {
+ position: relative;
+ display: block;
+
+ .chart-area {
+ width: 100%;
+ height: 100%;
+ border-radius: 5px;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
+ margin-top: 10px;
+ }
+
+ .example-title {
+ color: $clr-primary;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+
+ padding: 10px 10px 2px 10px;
+ margin: 0;
+ font-weight: normal;
+ font-size: 14px;
+ text-align: center;
+ }
+
+ .example-subtitle {
+ font-size: 12px;
+ text-align: center;
+ color: #aaa;
+ font-weight: normal;
+ // font-weight: 200;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ margin: 3px 0 0 0;
}
+ }
- .example-info {
- padding: 5px 0;
+ .example-info {
+ padding: 5px 0;
- font-weight: bold;
+ font-weight: bold;
- .chart-icon {
- float: right;
+ .chart-icon {
+ float: right;
- .chart-delete {
- display: none;
+ .chart-delete {
+ display: none;
- transition: 1s;
- }
- }
+ transition: 1s;
+ }
}
+ }
- &:hover .example-info .chart-icon .chart-delete {
- display: block;
+ &:hover .example-info .chart-icon .chart-delete {
+ display: block;
- text-decoration: none;
- }
+ text-decoration: none;
+ }
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/explore/Explore.vue b/src/explore/Explore.vue
index 873674e..cd81d4c 100644
--- a/src/explore/Explore.vue
+++ b/src/explore/Explore.vue
@@ -1,209 +1,251 @@
<template>
-<div id="example-explore">
+ <div id="example-explore">
<div id="left-container">
- <div id="left-chart-nav">
- <scrollactive
- active-class="active"
- :offset="80"
- :duration="500"
- :scroll-container-selector="'#example-explore'"
- bezier-easing-value=".5,0,.35,1"
- @itemchanged="onActiveNavChanged"
- >
- <ul>
- <li v-for="category in EXAMPLE_CATEGORIES" :key="category">
- <a class="left-chart-nav-link scrollactive-item" :id="'left-chart-nav-' + category"
- :href="'#chart-type-' + category"
- >
- <span class="chart-icon" v-html="icons[category]"></span>
- <span class="chart-name">{{$t('chartTypes.' + category)}}</span>
- </a>
- </li>
- </ul>
- </scrollactive>
- </div>
+ <div id="left-chart-nav">
+ <scrollactive
+ active-class="active"
+ :offset="80"
+ :duration="500"
+ :scroll-container-selector="'#example-explore'"
+ bezier-easing-value=".5,0,.35,1"
+ @itemchanged="onActiveNavChanged"
+ >
+ <ul>
+ <li v-for="category in EXAMPLE_CATEGORIES" :key="category">
+ <a
+ class="left-chart-nav-link scrollactive-item"
+ :id="'left-chart-nav-' + category"
+ :href="'#chart-type-' + category"
+ >
+ <span class="chart-icon" v-html="icons[category]"></span>
+ <span class="chart-name">{{
+ $t('chartTypes.' + category)
+ }}</span>
+ </a>
+ </li>
+ </ul>
+ </scrollactive>
+ </div>
</div>
<div id="explore-container">
- <div class="example-list-panel">
- <div v-for="categoryObj in exampleList" :key="categoryObj.category">
- <h3 class="chart-type-head" :id="'chart-type-' + categoryObj.category">
- {{$t('chartTypes.' + categoryObj.category)}}
- <span>{{categoryObj.category}}</span>
- </h3>
-
- <div class="row" :id="'chart-row-' + categoryObj.category">
- <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6"
- v-for="exampleItem in categoryObj.examples"
- :key="exampleItem.id"
- >
- <ExampleCard :example="exampleItem"></ExampleCard>
- </div>
- </div>
+ <div class="example-list-panel">
+ <div v-for="categoryObj in exampleList" :key="categoryObj.category">
+ <h3
+ class="chart-type-head"
+ :id="'chart-type-' + categoryObj.category"
+ >
+ {{ $t('chartTypes.' + categoryObj.category) }}
+ <span>{{ categoryObj.category }}</span>
+ </h3>
+
+ <div class="row" :id="'chart-row-' + categoryObj.category">
+ <div
+ class="col-xl-2 col-lg-3 col-md-4 col-sm-6"
+ v-for="exampleItem in categoryObj.examples"
+ :key="exampleItem.id"
+ >
+ <ExampleCard :example="exampleItem"></ExampleCard>
</div>
+ </div>
</div>
+ </div>
</div>
<div id="toolbar">
- <el-switch
- v-model="shared.darkMode"
- active-color="#181432"
- :active-text="$t('editor.darkMode')"
- :inactive-text="''">
- </el-switch>
+ <el-switch
+ v-model="shared.darkMode"
+ active-color="#181432"
+ :active-text="$t('editor.darkMode')"
+ :inactive-text="''"
+ >
+ </el-switch>
</div>
-</div>
+ </div>
</template>
<script>
-
import CHART_LIST from '../data/chart-list-data';
import CHART_LIST_GL from '../data/chart-list-data-gl';
-import {EXAMPLE_CATEGORIES, BLACK_MAP, URL_PARAMS} from '../common/config';
-import {store} from '../common/store';
+import { EXAMPLE_CATEGORIES, BLACK_MAP, URL_PARAMS } from '../common/config';
+import { store } from '../common/store';
import ExampleCard from './ExampleCard.vue';
import LazyLoad from 'vanilla-lazyload/dist/lazyload.esm';
// import scrollIntoView from 'scroll-into-view';
const icons = {};
-['line', 'bar', 'scatter', 'pie', 'radar', 'funnel', 'gauge', 'map',
- 'graph', 'treemap', 'parallel', 'sankey', 'candlestick', 'boxplot', 'heatmap',
- 'pictorialBar', 'themeRiver', 'calendar', 'custom', 'sunburst', 'tree', 'dataset', 'geo', 'lines',
- 'dataZoom', 'rich', 'drag'
+[
+ 'line',
+ 'bar',
+ 'scatter',
+ 'pie',
+ 'radar',
+ 'funnel',
+ 'gauge',
+ 'map',
+ 'graph',
+ 'treemap',
+ 'parallel',
+ 'sankey',
+ 'candlestick',
+ 'boxplot',
+ 'heatmap',
+ 'pictorialBar',
+ 'themeRiver',
+ 'calendar',
+ 'custom',
+ 'sunburst',
+ 'tree',
+ 'dataset',
+ 'geo',
+ 'lines',
+ 'dataZoom',
+ 'rich',
+ 'drag'
].forEach(function (category) {
- icons[category] = require('../asset/icon/' + category + '.svg');
+ icons[category] = require('../asset/icon/' + category + '.svg');
});
const glIcon = require('../asset/icon/gl.svg');
-['globe', 'bar3D', 'scatter3D', 'surface', 'map3D', 'lines3D', 'line3D',
- 'scatterGL', 'linesGL', 'flowGL', 'graphGL', 'geo3D'].forEach(function (category) {
- icons[category] = glIcon;
+[
+ 'globe',
+ 'bar3D',
+ 'scatter3D',
+ 'surface',
+ 'map3D',
+ 'lines3D',
+ 'line3D',
+ 'scatterGL',
+ 'linesGL',
+ 'flowGL',
+ 'graphGL',
+ 'geo3D'
+].forEach(function (category) {
+ icons[category] = glIcon;
});
const LAZY_LOADED_CLASS = 'ec-shot-loaded';
export default {
+ components: {
+ ExampleCard
+ },
+
+ data() {
+ const exampleListByCategory = {};
+
+ function addExamples(list, isGL) {
+ let categoryOrder = 0;
+ // Add by category order in each example.
+ do {
+ let added = false;
+ for (let i = 0; i < list.length; i++) {
+ const example = list[i];
+ if (BLACK_MAP.hasOwnProperty(example.id)) {
+ continue;
+ }
+ if (typeof example.category === 'string') {
+ example.category = [example.category];
+ }
+
+ const categoryStr = (example.category || [])[categoryOrder];
+ if (categoryStr) {
+ added = true;
+ let categoryObj = exampleListByCategory[categoryStr];
+ if (!categoryObj) {
+ categoryObj = {
+ category: categoryStr,
+ examples: []
+ };
+ exampleListByCategory[categoryStr] = categoryObj;
+ }
+ example.isGL = isGL;
- components: {
- ExampleCard
- },
-
- data() {
- const exampleListByCategory = {};
-
- function addExamples(list, isGL) {
- let categoryOrder = 0;
- // Add by category order in each example.
- do {
- let added = false;
- for (let i = 0; i < list.length; i++) {
- const example = list[i];
- if (BLACK_MAP.hasOwnProperty(example.id)) {
- continue;
- }
- if (typeof example.category === 'string') {
- example.category = [example.category];
- }
-
- const categoryStr = (example.category || [])[categoryOrder];
- if (categoryStr) {
- added = true;
- let categoryObj = exampleListByCategory[categoryStr];
- if (!categoryObj) {
- categoryObj = {
- category: categoryStr,
- examples: []
- }
- exampleListByCategory[categoryStr] = categoryObj;
- }
- example.isGL = isGL;
-
- categoryObj.examples.push(example);
- }
- }
-
- if (!added) {
- break;
- }
- } while (++categoryOrder && categoryOrder < 4) // At most 4 category
+ categoryObj.examples.push(example);
+ }
}
- addExamples(CHART_LIST, false);
- addExamples(CHART_LIST_GL, true);
-
- return {
- shared: store,
-
- icons,
-
- EXAMPLE_CATEGORIES,
- // [{
- // category: '',
- // isGL: false
- // examples: []
- // }]
- exampleListByCategory
- }
- },
-
- watch: {
- "shared.darkMode"() {
- const imgs = this.$el.querySelectorAll('img.chart-area');
- for (let i = 0; i < imgs.length; i++) {
- // Force lazyload to update
- imgs[i].classList.remove(LAZY_LOADED_CLASS);
- imgs[i].setAttribute('data-was-processed', 'false');
- }
- this._lazyload.update();
+ if (!added) {
+ break;
}
- },
-
- computed: {
- exampleList() {
- const list = [];
- for (let i = 0; i < EXAMPLE_CATEGORIES.length; i++) {
- const category = EXAMPLE_CATEGORIES[i];
- const categoryObj = this.exampleListByCategory[category];
- if (categoryObj && categoryObj.examples.length > 0) {
- list.push({
- category,
- examples: categoryObj.examples
- });
- }
- }
- return list;
- }
- },
-
- mounted() {
- this._lazyload = new LazyLoad({
- // Container should be the scroll viewport.
- // container: this.$el.querySelector('#explore-container .example-list-panel'),
- elements_selector: 'img.chart-area',
- load_delay: 400,
- class_loaded: LAZY_LOADED_CLASS
- });
- },
-
- methods: {
- onActiveNavChanged(event, currentItem, lastActiveItem) {
- // currentItem && currentItem.scrollIntoView && currentItem.parentNode.scrollIntoView();
- // scrollIntoView(currentItem, {
- // time: 100,
- // cancellable: false,
- // align: {
- // top: 0,
- // topOffset: 50
- // }
- // });
+ } while (++categoryOrder && categoryOrder < 4); // At most 4 category
+ }
+
+ addExamples(CHART_LIST, false);
+ addExamples(CHART_LIST_GL, true);
+
+ return {
+ shared: store,
+
+ icons,
+
+ EXAMPLE_CATEGORIES,
+ // [{
+ // category: '',
+ // isGL: false
+ // examples: []
+ // }]
+ exampleListByCategory
+ };
+ },
+
+ watch: {
+ 'shared.darkMode'() {
+ const imgs = this.$el.querySelectorAll('img.chart-area');
+ for (let i = 0; i < imgs.length; i++) {
+ // Force lazyload to update
+ imgs[i].classList.remove(LAZY_LOADED_CLASS);
+ imgs[i].setAttribute('data-was-processed', 'false');
+ }
+ this._lazyload.update();
+ }
+ },
+
+ computed: {
+ exampleList() {
+ const list = [];
+ for (let i = 0; i < EXAMPLE_CATEGORIES.length; i++) {
+ const category = EXAMPLE_CATEGORIES[i];
+ const categoryObj = this.exampleListByCategory[category];
+ if (categoryObj && categoryObj.examples.length > 0) {
+ list.push({
+ category,
+ examples: categoryObj.examples
+ });
}
+ }
+ return list;
}
-}
+ },
+
+ mounted() {
+ this._lazyload = new LazyLoad({
+ // Container should be the scroll viewport.
+ // container: this.$el.querySelector('#explore-container .example-list-panel'),
+ elements_selector: 'img.chart-area',
+ load_delay: 400,
+ class_loaded: LAZY_LOADED_CLASS
+ });
+ },
+
+ methods: {
+ onActiveNavChanged(event, currentItem, lastActiveItem) {
+ // currentItem && currentItem.scrollIntoView && currentItem.parentNode.scrollIntoView();
+ // scrollIntoView(currentItem, {
+ // time: 100,
+ // cancellable: false,
+ // align: {
+ // top: 0,
+ // topOffset: 50
+ // }
+ // });
+ }
+ }
+};
</script>
<style lang="scss">
-
-@import "../style/color.scss";
-@import "../style/config.xl.scss";
+@import '../style/color.scss';
+@import '../style/config.xl.scss';
$chart-nav-width: 200px;
$chart-icon-width: 25px;
@@ -212,10 +254,10 @@ $chart-icon-border: 1px;
$toolbar-height: 30px;
$nav-height: 50px;
-$nav-active-bg: #5470C6;
+$nav-active-bg: #5470c6;
$nav-hover-border: $nav-active-bg;
-$nav-text-color: #6E7079;
+$nav-text-color: #6e7079;
$nav-hover-text-color: #464646;
$pd-basic: 10px;
@@ -223,178 +265,176 @@ $pd-sm: 6px;
$pd-lg: 20px;
#example-explore {
- background: $clr-bg;
-
- // Use this as scrollable viewport insteadof window because echarts-www has a viewport.
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- overflow-y: auto;
-
- ::-webkit-scrollbar {
- height: 4px;
- width: 4px;
- -webkit-transition: all 0.3s ease-in-out;
- transition: all 0.3s ease-in-out;
- border-radius: 2px;
- background: #fff;
- }
-
- ::-webkit-scrollbar-button {
- display: none
- }
-
- ::-webkit-scrollbar-thumb {
- width: 4px;
- min-height: 15px;
- background: rgba(50, 50, 50, 0.2) !important;
- -webkit-transition: all 0.3s ease-in-out;
- transition: all 0.3s ease-in-out;
- border-radius: 2px
- }
-
- ::-webkit-scrollbar-thumb:hover {
- background: rgba(0, 0, 0, 0.5) !important
- }
+ background: $clr-bg;
+
+ // Use this as scrollable viewport insteadof window because echarts-www has a viewport.
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ overflow-y: auto;
+
+ ::-webkit-scrollbar {
+ height: 4px;
+ width: 4px;
+ -webkit-transition: all 0.3s ease-in-out;
+ transition: all 0.3s ease-in-out;
+ border-radius: 2px;
+ background: #fff;
+ }
+
+ ::-webkit-scrollbar-button {
+ display: none;
+ }
+
+ ::-webkit-scrollbar-thumb {
+ width: 4px;
+ min-height: 15px;
+ background: rgba(50, 50, 50, 0.2) !important;
+ -webkit-transition: all 0.3s ease-in-out;
+ transition: all 0.3s ease-in-out;
+ border-radius: 2px;
+ }
+
+ ::-webkit-scrollbar-thumb:hover {
+ background: rgba(0, 0, 0, 0.5) !important;
+ }
}
#explore-container {
- margin-left: $chart-nav-width + 20px;
- padding: 10px 10px;
- // background-color: $clr-bg;
+ margin-left: $chart-nav-width + 20px;
+ padding: 10px 10px;
+ // background-color: $clr-bg;
}
.example-list-panel {
- margin: 30px 15px 30px 15px;
-
- h3 {
- margin-bottom: 20px;
- padding-bottom: 10px;
- border-bottom: 1px solid #E1E5F2;
- font-weight: normal;
- color: #464646;
- font-size: 20px;
- }
- .chart-type-head span {
- font-size: 16px;
- padding-left: 5px;
- color: #949CB1;
- font-weight: 200;
- }
+ margin: 30px 15px 30px 15px;
+
+ h3 {
+ margin-bottom: 20px;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #e1e5f2;
+ font-weight: normal;
+ color: #464646;
+ font-size: 20px;
+ }
+ .chart-type-head span {
+ font-size: 16px;
+ padding-left: 5px;
+ color: #949cb1;
+ font-weight: 200;
+ }
}
#left-container {
- position: sticky;
- left: 0;
- top: 0;
- float: left;
- height: calc(100%);
- width: $chart-nav-width;
- box-shadow: 0 0 10px rgba(0,0,0,0.1);
- overflow-y: auto;
-
+ position: sticky;
+ left: 0;
+ top: 0;
+ float: left;
+ height: calc(100%);
+ width: $chart-nav-width;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+ overflow-y: auto;
}
#toolbar {
- position: fixed;
- right: 30px;
- top: 20px;
- height: $toolbar-height;
- background-color: #fff;
- border-radius: $toolbar-height / 2;
+ position: fixed;
+ right: 30px;
+ top: 20px;
+ height: $toolbar-height;
+ background-color: #fff;
+ border-radius: $toolbar-height / 2;
+ // color: #fff;
+ padding: 4px 15px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+ .el-switch__label * {
+ font-size: 12px;
// color: #fff;
- padding: 4px 15px;
- box-shadow: 0 0 10px rgba(0,0,0,0.1);
-
- .el-switch__label * {
- font-size: 12px;
- // color: #fff;
- text-transform: uppercase;
- }
- .el-switch__label.is-active {
- color: #181432;
- }
+ text-transform: uppercase;
+ }
+ .el-switch__label.is-active {
+ color: #181432;
+ }
}
#left-chart-nav {
- background-color: #fff;
- overflow-y: hidden;
- color: #111;
- box-shadow: 0 0 20px rgba(0,0,0,0.2);
+ background-color: #fff;
+ overflow-y: hidden;
+ color: #111;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
- &:hover {
- overflow-y: auto;
+ &:hover {
+ overflow-y: auto;
- a {
- text-decoration: none;
- }
+ a {
+ text-decoration: none;
}
+ }
+
+ li {
+ // transition: background-color 0.5s;
+ cursor: pointer;
+
+ a {
+ height: 45px;
+ padding: 10px 0 10px 20px;
+ display: block;
+ // transition: background-color 0.5s;
+ text-decoration: none;
+ color: $nav-text-color;
+
+ .chart-name {
+ display: inline-block;
+ position: relative;
+ vertical-align: middle;
+ margin-left: 10px;
+ }
+
+ .chart-icon {
+ content: '';
+ width: 20px;
+ display: inline-block;
+ border-radius: 50%;
+ vertical-align: middle;
+
+ svg {
+ width: 100% !important;
+ height: auto !important;
+ }
+ }
- li {
- // transition: background-color 0.5s;
- cursor: pointer;
-
- a {
- height: 45px;
- padding: 10px 0 10px 20px;
- display: block;
- // transition: background-color 0.5s;
- text-decoration: none;
- color: $nav-text-color;
-
- .chart-name {
- display: inline-block;
- position: relative;
- vertical-align: middle;
- margin-left: 10px;
- }
-
- .chart-icon {
- content: '';
- width: 20px;
- display: inline-block;
- border-radius: 50%;
- vertical-align: middle;
-
- svg {
- width: 100%!important;
- height: auto!important;
- }
- }
-
- &.active {
- background-color: $nav-active-bg;
- color: #fff;
-
- .chart-icon * {
- fill: #fff;
- }
- }
+ &.active {
+ background-color: $nav-active-bg;
+ color: #fff;
- &.active:hover {
- color: #fff;
- }
+ .chart-icon * {
+ fill: #fff;
}
+ }
- &:hover {
- border-right: 4px solid $nav-hover-border;
+ &.active:hover {
+ color: #fff;
+ }
+ }
- a {
- color: $nav-hover-text-color;
- }
- }
+ &:hover {
+ border-right: 4px solid $nav-hover-border;
+
+ a {
+ color: $nav-hover-text-color;
+ }
}
+ }
}
@media (max-width: 768px) {
- #left-container {
- display: none;
- }
- #explore-container {
- margin-left: 0;
- }
+ #left-container {
+ display: none;
+ }
+ #explore-container {
+ margin-left: 0;
+ }
}
-
-</style>
\ No newline at end of file
+</style>
diff --git a/src/main.js b/src/main.js
index bcb7e55..7f6bcf2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,7 +4,7 @@ import messages from './common/i18n';
import EditorPage from './editor/Editor.vue';
import ExplorePage from './explore/Explore.vue';
import ViewPage from './editor/View.vue';
-import {store} from './common/store';
+import { store } from './common/store';
import VueScrollactive from 'vue-scrollactive';
Vue.use(VueScrollactive);
@@ -19,35 +19,36 @@ Vue.use(VueScrollactive);
* @param {string} [option.version]
*/
export function init(el, option) {
- const i18n = new VueI18n({
- locale: option.locale,
- fallbackLocale: 'en',
- messages
- });
- store.cdnRoot = option.cdnRoot;
- store.version = option.version;
- store.locale = option.locale || 'en';
+ const i18n = new VueI18n({
+ locale: option.locale,
+ fallbackLocale: 'en',
+ messages
+ });
+ store.cdnRoot = option.cdnRoot;
+ store.version = option.version;
+ store.locale = option.locale || 'en';
+ if (typeof el === 'string') {
+ el = document.querySelector(el);
+ }
+ if (!el) {
+ throw new Error("Can't find el.");
+ }
- if (typeof el === 'string') {
- el = document.querySelector(el);
- }
- if (!el) {
- throw new Error('Can\'t find el.');
- }
+ const container = document.createElement('div');
+ el.appendChild(container);
- const container = document.createElement('div');
- el.appendChild(container);
-
- new Vue({
- i18n,
- el: container,
- render: h => {
- return h(({
- editor: EditorPage,
- explore: ExplorePage,
- view: ViewPage
- })[option.page] || ExplorePage);
- }
- });
-}
\ No newline at end of file
+ new Vue({
+ i18n,
+ el: container,
+ render: (h) => {
+ return h(
+ {
+ editor: EditorPage,
+ explore: ExplorePage,
+ view: ViewPage
+ }[option.page] || ExplorePage
+ );
+ }
+ });
+}
diff --git a/src/style/color.scss b/src/style/color.scss
index fda7835..62ed085 100644
--- a/src/style/color.scss
+++ b/src/style/color.scss
@@ -1,38 +1,36 @@
-$clr-primary: #293c55;
-$clr-primary-light: #849dbe;
-$clr-primary-dark: #162436;
+$clr-primary: #293c55;
+$clr-primary-light: #849dbe;
+$clr-primary-dark: #162436;
$clr-primary-darker: #0e151f;
-$clr-primary-home: #333743;
-$clr-text-home: #9297A3;
+$clr-primary-home: #333743;
+$clr-text-home: #9297a3;
-$clr-secondary: #a9334c;
+$clr-secondary: #a9334c;
$clr-secondary-dark: darken($clr-secondary, 10%);
-$clr-contrast: #e43c59;
-$clr-contrast-dark: #bf465b;
+$clr-contrast: #e43c59;
+$clr-contrast-dark: #bf465b;
-$clr-darkest: #000;
-$clr-darker: #333;
-$clr-dark: #666;
-$clr-light: #999;
-$clr-lighter: #eee;
-$clr-lightest: #f9f9f9;
+$clr-darkest: #000;
+$clr-darker: #333;
+$clr-dark: #666;
+$clr-light: #999;
+$clr-lighter: #eee;
+$clr-lightest: #f9f9f9;
-$clr-thirdary: #40A7DC;
+$clr-thirdary: #40a7dc;
$clr-thirdary-light: lighten($clr-thirdary, 10%);
$clr-border: rgba(78, 97, 118, 0.45);
$clr-border-light: rgba(78, 97, 118, 0.25);
-$clr-gray: #ccc;
-$clr-gray-dark: #999;
-$clr-gray-light: #f3f3f3;
-
-$clr-warn: #f93;
-$clr-error: $clr-contrast;
-
+$clr-gray: #ccc;
+$clr-gray-dark: #999;
+$clr-gray-light: #f3f3f3;
+$clr-warn: #f93;
+$clr-error: $clr-contrast;
$clr-bg: #f3f4fa;
$clr-text: $clr-dark;
diff --git a/src/style/config.xl.scss b/src/style/config.xl.scss
index 678b094..37e7de6 100644
--- a/src/style/config.xl.scss
+++ b/src/style/config.xl.scss
@@ -18,607 +18,676 @@
Fix visible-lg and hidden-lg for resolutions over 1600px
Remove if don't want to use
========================================================================== */
- @media (min-width: 1600px) {
- .visible-lg {
- display: none !important;
- }
- .hidden-lg {
- display: block !important;
- }
- table.hidden-lg {
- display: table;
- }
- tr.hidden-lg {
- display: table-row !important;
- }
- th.hidden-lg,
- td.hidden-lg {
- display: table-cell !important;
- }
+@media (min-width: 1600px) {
+ .visible-lg {
+ display: none !important;
+ }
+ .hidden-lg {
+ display: block !important;
+ }
+ table.hidden-lg {
+ display: table;
}
+ tr.hidden-lg {
+ display: table-row !important;
+ }
+ th.hidden-lg,
+ td.hidden-lg {
+ display: table-cell !important;
+ }
+}
- /* ==========================================================================
+/* ==========================================================================
Set containers fixed sizes for >1600px, >1920px, >2560px
Remove all if don't want to use big fixed sizes for all blocks
You still can use cols with .container-fluid blocks
========================================================================== */
- @media (min-width: 1600px) {
- .container {
- width: 1530px;
- }
+@media (min-width: 1600px) {
+ .container {
+ width: 1530px;
}
- @media (min-width: 1920px) {
- .container {
- width: 1830px;
- }
+}
+@media (min-width: 1920px) {
+ .container {
+ width: 1830px;
}
- @media (min-width: 2560px) {
- .container {
- width: 2490px;
- }
+}
+@media (min-width: 2560px) {
+ .container {
+ width: 2490px;
}
+}
- /* ==========================================================================
+/* ==========================================================================
col-xl, col-xxl, col-xxxl setup.
Don't remove anything below this line
========================================================================== */
- .col-xl-1, .col-xxl-1, .col-xxxl-1, .col-xl-2, .col-xxl-2, .col-md-2, .col-xxxl-2, .col-xl-3, .col-xxl-3, .col-md-3, .col-xxxl-3, .col-xl-4, .col-xxl-4, .col-md-4, .col-xxxl-4, .col-xl-5, .col-xxl-5, .col-md-5, .col-xxxl-5, .col-xl-6, .col-xxl-6, .col-md-6, .col-xxxl-6, .col-xl-7, .col-xxl-7, .col-md-7, .col-xxxl-7, .col-xl-8, .col-xxl-8, .col-md-8, .col-xxxl-8, .col-xl-9, .col-xxl-9, .col-md-9, .col-xxxl-9, .col-xl-10, .col-xxl-100, .col-xxxl-10, .col-xl-11, .col-xxl-111, .col-xxxl-11 [...]
- position: relative;
- min-height: 1px;
- padding-right: 15px;
- padding-left: 15px;
- }
- @media (min-width: 1600px) {
- .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
- float: left;
- }
- .col-xl-12 {
- width: 100%;
- }
- .col-xl-11 {
- width: 91.66666667%;
- }
- .col-xl-10 {
- width: 83.33333333%;
- }
- .col-xl-9 {
- width: 75%;
- }
- .col-xl-8 {
- width: 66.66666667%;
- }
- .col-xl-7 {
- width: 58.33333333%;
- }
- .col-xl-6 {
- width: 50%;
- }
- .col-xl-5 {
- width: 41.66666667%;
- }
- .col-xl-4 {
- width: 33.33333333%;
- }
- .col-xl-3 {
- width: 25%;
- }
- .col-xl-2 {
- width: 16.66666667%;
- }
- .col-xl-1 {
- width: 8.33333333%;
- }
- .col-xl-pull-12 {
- right: 100%;
- }
- .col-xl-pull-11 {
- right: 91.66666667%;
- }
- .col-xl-pull-10 {
- right: 83.33333333%;
- }
- .col-xl-pull-9 {
- right: 75%;
- }
- .col-xl-pull-8 {
- right: 66.66666667%;
- }
- .col-xl-pull-7 {
- right: 58.33333333%;
- }
- .col-xl-pull-6 {
- right: 50%;
- }
- .col-xl-pull-5 {
- right: 41.66666667%;
- }
- .col-xl-pull-4 {
- right: 33.33333333%;
- }
- .col-xl-pull-3 {
- right: 25%;
- }
- .col-xl-pull-2 {
- right: 16.66666667%;
- }
- .col-xl-pull-1 {
- right: 8.33333333%;
- }
- .col-xl-pull-0 {
- right: 0;
- }
- .col-xl-push-12 {
- left: 100%;
- }
- .col-xl-push-11 {
- left: 91.66666667%;
- }
- .col-xl-push-10 {
- left: 83.33333333%;
- }
- .col-xl-push-9 {
- left: 75%;
- }
- .col-xl-push-8 {
- left: 66.66666667%;
- }
- .col-xl-push-7 {
- left: 58.33333333%;
- }
- .col-xl-push-6 {
- left: 50%;
- }
- .col-xl-push-5 {
- left: 41.66666667%;
- }
- .col-xl-push-4 {
- left: 33.33333333%;
- }
- .col-xl-push-3 {
- left: 25%;
- }
- .col-xl-push-2 {
- left: 16.66666667%;
- }
- .col-xl-push-1 {
- left: 8.33333333%;
- }
- .col-xl-push-0 {
- left: 0;
- }
- .col-xl-offset-12 {
- margin-left: 100%;
- }
- .col-xl-offset-11 {
- margin-left: 91.66666667%;
- }
- .col-xl-offset-10 {
- margin-left: 83.33333333%;
- }
- .col-xl-offset-9 {
- margin-left: 75%;
- }
- .col-xl-offset-8 {
- margin-left: 66.66666667%;
- }
- .col-xl-offset-7 {
- margin-left: 58.33333333%;
- }
- .col-xl-offset-6 {
- margin-left: 50%;
- }
- .col-xl-offset-5 {
- margin-left: 41.66666667%;
- }
- .col-xl-offset-4 {
- margin-left: 33.33333333%;
- }
- .col-xl-offset-3 {
- margin-left: 25%;
- }
- .col-xl-offset-2 {
- margin-left: 16.66666667%;
- }
- .col-xl-offset-1 {
- margin-left: 8.33333333%;
- }
- .col-xl-offset-0 {
- margin-left: 0;
- }
+.col-xl-1,
+.col-xxl-1,
+.col-xxxl-1,
+.col-xl-2,
+.col-xxl-2,
+.col-md-2,
+.col-xxxl-2,
+.col-xl-3,
+.col-xxl-3,
+.col-md-3,
+.col-xxxl-3,
+.col-xl-4,
+.col-xxl-4,
+.col-md-4,
+.col-xxxl-4,
+.col-xl-5,
+.col-xxl-5,
+.col-md-5,
+.col-xxxl-5,
+.col-xl-6,
+.col-xxl-6,
+.col-md-6,
+.col-xxxl-6,
+.col-xl-7,
+.col-xxl-7,
+.col-md-7,
+.col-xxxl-7,
+.col-xl-8,
+.col-xxl-8,
+.col-md-8,
+.col-xxxl-8,
+.col-xl-9,
+.col-xxl-9,
+.col-md-9,
+.col-xxxl-9,
+.col-xl-10,
+.col-xxl-100,
+.col-xxxl-10,
+.col-xl-11,
+.col-xxl-111,
+.col-xxxl-11,
+.col-xl-12,
+.col-xxl-122,
+.col-xxxl-12 {
+ position: relative;
+ min-height: 1px;
+ padding-right: 15px;
+ padding-left: 15px;
+}
+@media (min-width: 1600px) {
+ .col-xl-1,
+ .col-xl-2,
+ .col-xl-3,
+ .col-xl-4,
+ .col-xl-5,
+ .col-xl-6,
+ .col-xl-7,
+ .col-xl-8,
+ .col-xl-9,
+ .col-xl-10,
+ .col-xl-11,
+ .col-xl-12 {
+ float: left;
}
-
- @media (min-width: 1920px) {
- .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
- float: left;
- }
- .col-xxl-12 {
- width: 100%;
- }
- .col-xxl-11 {
- width: 91.66666667%;
- }
- .col-xxl-10 {
- width: 83.33333333%;
- }
- .col-xxl-9 {
- width: 75%;
- }
- .col-xxl-8 {
- width: 66.66666667%;
- }
- .col-xxl-7 {
- width: 58.33333333%;
- }
- .col-xxl-6 {
- width: 50%;
- }
- .col-xxl-5 {
- width: 41.66666667%;
- }
- .col-xxl-4 {
- width: 33.33333333%;
- }
... 2617 lines suppressed ...
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-examples] 01/15: compile ts to js files
Posted by sh...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
commit 424edd89bb70f7bc4ff887498c478ed04adecad5
Author: pissang <bm...@gmail.com>
AuthorDate: Mon Sep 6 12:35:21 2021 +0800
compile ts to js files
---
README.md | 8 +-
_config.yml | 2 -
package-lock.json | 196 ++-
package.json | 6 +-
public/data/area-basic.js | 22 -
public/data/area-pieces.js | 66 -
public/data/area-rainfall.js | 188 ---
public/data/area-simple.js | 78 --
public/data/area-stack-gradient.js | 174 ---
public/data/area-stack.js | 103 --
public/data/area-time-axis.js | 67 -
public/data/bar-animation-delay.js | 70 --
public/data/bar-background.js | 24 -
public/data/bar-brush.js | 114 --
public/data/bar-data-color.js | 25 -
public/data/bar-drilldown.js | 99 --
public/data/bar-gradient.js | 96 --
public/data/bar-histogram.js | 126 --
public/data/bar-label-rotation.js | 166 ---
public/data/bar-large.js | 93 --
public/data/bar-negative.js | 77 --
public/data/bar-negative2.js | 66 -
public/data/bar-polar-label-radial.js | 30 -
public/data/bar-polar-label-tangential.js | 30 -
public/data/bar-polar-real-estate.js | 101 --
public/data/bar-polar-stack-radial.js | 49 -
public/data/bar-polar-stack.js | 50 -
public/data/bar-race-country.js | 142 ---
public/data/bar-race.js | 65 -
public/data/bar-rich-text.js | 151 ---
public/data/bar-simple.js | 20 -
public/data/bar-stack.js | 125 --
public/data/bar-tick-align.js | 43 -
public/data/bar-waterfall.js | 66 -
public/data/bar-waterfall2.js | 91 --
public/data/bar-y-category-stack.js | 92 --
public/data/bar-y-category.js | 48 -
public/data/bar1.js | 74 --
public/data/boxplot-light-velocity.js | 84 --
public/data/boxplot-light-velocity2.js | 87 --
public/data/boxplot-multi.js | 106 --
public/data/bubble-gradient.js | 109 --
public/data/calendar-charts.js | 193 ---
public/data/calendar-effectscatter.js | 167 ---
public/data/calendar-graph.js | 126 --
public/data/calendar-heatmap.js | 54 -
public/data/calendar-horizontal.js | 72 --
public/data/calendar-lunar.js | 468 -------
public/data/calendar-pie.js | 116 --
public/data/calendar-simple.js | 37 -
public/data/calendar-vertical.js | 78 --
public/data/candlestick-brush.js | 264 ----
public/data/candlestick-large.js | 208 ----
public/data/candlestick-sh-2015.js | 134 --
public/data/candlestick-sh.js | 324 -----
public/data/candlestick-simple.js | 22 -
public/data/candlestick-touch.js | 245 ----
public/data/circle-packing-with-d3.js | 219 ----
public/data/confidence-band.js | 113 --
public/data/covid-america.js | 404 ------
public/data/custom-bar-trend.js | 115 --
public/data/custom-calendar-icon.js | 119 --
public/data/data-transform-filter.js | 81 --
public/data/data-transform-multiple-pie.js | 80 --
public/data/data-transform-sort-bar.js | 38 -
public/data/dataset-default.js | 50 -
public/data/dataset-encode0.js | 49 -
public/data/dataset-encode1.js | 98 --
public/data/dataset-link.js | 73 --
public/data/dataset-series-layout-by.js | 42 -
public/data/dataset-simple0.js | 29 -
public/data/dataset-simple1.js | 29 -
public/data/dynamic-data.js | 132 --
public/data/dynamic-data2.js | 77 --
public/data/effectScatter-bmap.js | 575 ---------
public/data/effectScatter-map.js | 503 --------
public/data/funnel-align.js | 114 --
public/data/funnel-customize.js | 88 --
public/data/funnel-mutiple.js | 103 --
public/data/funnel.js | 72 --
public/data/gauge-barometer.js | 122 --
public/data/gauge-car.js | 575 ---------
public/data/gauge-clock.js | 230 ----
public/data/gauge-grade.js | 88 --
public/data/gauge-multi-title.js | 85 --
public/data/gauge-progress.js | 93 --
public/data/gauge-ring.js | 102 --
public/data/gauge-simple.js | 29 -
public/data/gauge-speed.js | 55 -
public/data/gauge-stage.js | 61 -
public/data/gauge-temperature.js | 125 --
public/data/gauge.js | 23 -
public/data/geo-beef-cuts.js | 74 --
public/data/geo-seatmap-flight.js | 93 --
public/data/geo-svg-lines.js | 84 --
public/data/geo-svg-map.js | 202 ---
public/data/geo-svg-scatter-simple.js | 54 -
public/data/geo-svg-traffic.js | 167 ---
public/data/graph-circular-layout.js | 59 -
public/data/graph-force-dynamic.js | 57 -
public/data/graph-force.js | 48 -
public/data/graph-force2.js | 64 -
public/data/graph-grid.js | 50 -
public/data/graph-label-overlap.js | 49 -
public/data/graph-life-expectancy.js | 103 --
public/data/graph-npm.js | 54 -
public/data/graph-simple.js | 87 --
public/data/graph-webkit-dep.js | 43 -
public/data/graph.js | 61 -
public/data/grid-multiple.js | 174 ---
public/data/heatmap-cartesian.js | 65 -
public/data/line-aqi.js | 99 --
public/data/line-draggable.js | 139 ---
public/data/line-easing.js | 233 ----
public/data/line-function.js | 72 --
public/data/line-gradient.js | 74 --
public/data/line-graphic.js | 125 --
public/data/line-in-cartesian-coordinate-system.js | 15 -
public/data/line-log.js | 57 -
public/data/line-marker.js | 88 --
public/data/line-markline.js | 78 --
public/data/line-pen.js | 73 --
public/data/line-polar.js | 42 -
public/data/line-polar2.js | 47 -
public/data/line-race.js | 90 --
public/data/line-sections.js | 86 --
public/data/line-simple.js | 20 -
public/data/line-smooth.js | 21 -
public/data/line-stack.js | 69 --
public/data/line-step.js | 56 -
public/data/line-style.js | 32 -
public/data/line-tooltip-touch.js | 151 ---
public/data/line-y-category.js | 53 -
public/data/lines-airline.js | 64 -
public/data/lines-bmap-bus.js | 148 ---
public/data/lines-bmap-effect.js | 195 ---
public/data/lines-bmap.js | 133 --
public/data/lines-ny.js | 91 --
public/data/map-HK.js | 98 --
public/data/map-bar-morph.js | 147 ---
public/data/map-usa.js | 137 ---
public/data/mix-line-bar.js | 78 --
public/data/mix-zoom-on-value.js | 101 --
public/data/multiple-x-axis.js | 96 --
public/data/multiple-y-axis.js | 111 --
public/data/parallel-aqi.js | 224 ----
public/data/parallel-nutrients.js | 186 ---
public/data/parallel-simple.js | 31 -
public/data/pictorialBar-bar-transition.js | 144 ---
public/data/pictorialBar-body-fill.js | 146 ---
public/data/pictorialBar-dotted.js | 111 --
public/data/pictorialBar-forest.js | 111 --
public/data/pictorialBar-hill.js | 113 --
public/data/pictorialBar-spirit.js | 114 --
public/data/pictorialBar-vehicle.js | 113 --
public/data/pictorialBar-velocity.js | 100 --
public/data/pie-alignTo.js | 94 --
public/data/pie-borderRadius.js | 50 -
public/data/pie-custom.js | 70 --
public/data/pie-doughnut.js | 45 -
public/data/pie-labelLine-adjust.js | 95 --
public/data/pie-legend.js | 81 --
public/data/pie-nest.js | 87 --
public/data/pie-parliament-transition.js | 141 ---
public/data/pie-pattern.js | 63 -
public/data/pie-rich-text.js | 135 ---
public/data/pie-roseType-simple.js | 44 -
public/data/pie-roseType.js | 82 --
public/data/pie-simple.js | 42 -
public/data/polar-roundCap.js | 49 -
public/data/radar-aqi.js | 222 ----
public/data/radar-custom.js | 138 ---
public/data/radar-multiple.js | 97 --
public/data/radar.js | 40 -
public/data/radar2.js | 73 --
public/data/sankey-energy.js | 35 -
public/data/sankey-itemstyle.js | 1281 --------------------
public/data/sankey-levels.js | 71 --
public/data/sankey-nodeAlign-left.js | 37 -
public/data/sankey-nodeAlign-right.js | 38 -
public/data/sankey-simple.js | 54 -
public/data/sankey-vertical.js | 47 -
public/data/scatter-aggregate-bar.js | 187 ---
public/data/scatter-anscombe-quartet.js | 145 ---
public/data/scatter-aqi-color.js | 261 ----
public/data/scatter-clustering.js | 131 --
public/data/scatter-effect.js | 78 --
public/data/scatter-exponential-regression.js | 84 --
public/data/scatter-label-align-right.js | 57 -
public/data/scatter-label-align-top.js | 51 -
public/data/scatter-large.js | 74 --
public/data/scatter-linear-regression.js | 267 ----
public/data/scatter-logarithmic-regression.js | 133 --
public/data/scatter-map-brush.js | 652 ----------
public/data/scatter-matrix.js | 300 -----
public/data/scatter-nebula.js | 76 --
public/data/scatter-nutrients-matrix.js | 422 -------
public/data/scatter-nutrients.js | 177 ---
public/data/scatter-painter-choice.js | 61 -
public/data/scatter-polar-punchCard.js | 65 -
public/data/scatter-polynomial-regression.js | 84 --
public/data/scatter-punchCard.js | 70 --
public/data/scatter-simple.js | 39 -
public/data/scatter-single-axis.js | 56 -
public/data/scatter-stream-visual.js | 60 -
public/data/scatter-symbol-morph.js | 133 --
public/data/scatter-weibo.js | 103 --
public/data/scatter-weight.js | 264 ----
public/data/sunburst-borderRadius.js | 65 -
public/data/sunburst-drink.js | 723 -----------
public/data/sunburst-label-rotate.js | 95 --
public/data/sunburst-monochrome.js | 175 ---
public/data/sunburst-simple.js | 64 -
public/data/sunburst-visualMap.js | 94 --
public/data/themeRiver-basic.js | 100 --
public/data/themeRiver-lastfm.js | 80 --
public/data/tree-basic.js | 58 -
public/data/tree-legend.js | 260 ----
public/data/tree-orient-bottom-top.js | 59 -
public/data/tree-orient-right-left.js | 64 -
public/data/tree-polyline.js | 179 ---
public/data/tree-radial.js | 41 -
public/data/tree-vertical.js | 54 -
public/data/treemap-disk.js | 87 --
public/data/treemap-drill-down.js | 85 --
public/data/treemap-obama.js | 226 ----
public/data/treemap-show-parent.js | 103 --
public/data/treemap-simple.js | 33 -
public/data/treemap-sunburst-transition.js | 56 -
public/data/treemap-visual.js | 144 ---
public/data/watermark.js | 218 ----
public/data/wind-barb.js | 272 -----
public/examples/ts/README.md | 3 +
.../ts}/archive/custom-aggregate-scatter-bar.js | 0
.../archive/custom-aggregate-scatter-cluster.js | 0
.../ts}/archive/custom-aggregate-scatter-pie.js | 0
.../ts}/archive/custom-combine-separate-morph.js | 0
.../ts}/archive/custom-one-to-one-morph.js | 0
.../ts}/archive/custom-story-transition.js | 0
.../ts}/custom-cartesian-polygon.js | 0
public/{data => examples/ts}/custom-error-bar.js | 0
.../{data => examples/ts}/custom-error-scatter.js | 0
.../{data => examples/ts}/custom-gantt-flight.js | 0
public/{data => examples/ts}/custom-gauge.js | 0
public/{data => examples/ts}/custom-hexbin.js | 0
public/{data => examples/ts}/custom-ohlc.js | 0
.../{data => examples/ts}/custom-polar-heatmap.js | 0
public/{data => examples/ts}/custom-profile.js | 0
public/{data => examples/ts}/custom-profit.js | 0
public/{data => examples/ts}/custom-spiral-race.js | 0
public/{data => examples/ts}/custom-wind.js | 0
public/{data => examples/ts}/cycle-plot.js | 0
.../ts}/data-transform-aggregate.js | 0
.../ts}/doc-example/aria-decal-newspaper.js | 0
.../ts}/doc-example/aria-decal-simple.js | 0
.../ts}/doc-example/aria-decal.js | 0
.../{data => examples/ts}/doc-example/aria-pie.js | 0
.../ts}/doc-example/axisPointer-handle-image.js | 0
.../ts}/doc-example/bar-dataZoom-filterMode.js | 0
.../{data => examples/ts}/doc-example/bar-large.js | 0
.../ts}/doc-example/bar-media-timeline.js | 0
.../ts}/doc-example/barGrid-barGap.js | 0
.../ts}/doc-example/candlestick-axisPointer.js | 0
.../ts}/doc-example/canvas-vs-svg-en.js | 0
.../ts}/doc-example/canvas-vs-svg.js | 0
.../ts}/doc-example/custom-transition-simple.js | 0
.../data-transform-multiple-sort-bar.js | 0
.../ts}/doc-example/dataset-encode-simple0.js | 2 +-
.../ts}/doc-example/geo-svg-label-basic.js | 0
.../ts}/doc-example/geo-svg-layout-basic.js | 0
.../ts}/doc-example/geo-svg-named-basic.js | 0
.../ts}/doc-example/getting-started.js | 0
.../ts}/doc-example/graphic-bounding.js | 0
.../ts}/doc-example/label-position.js | 0
.../ts}/doc-example/line-stack-tiled.js | 0
.../ts}/doc-example/map-example.js | 0
.../doc-example/map-visualMap-continuous-text.js | 0
.../ts}/doc-example/map-visualMap-continuous.js | 0
.../ts}/doc-example/map-visualMap-pieces.js | 0
.../doc-example/map-visualMap-piecewise-text.js | 0
.../ts}/doc-example/mix-timeline-all.js | 0
.../ts}/doc-example/parallel-all.js | 0
.../ts}/doc-example/pictorialBar-clip.js | 0
.../ts}/doc-example/pictorialBar-graphicType.js | 0
.../ts}/doc-example/pictorialBar-patternSize.js | 0
.../ts}/doc-example/pictorialBar-position.js | 0
.../ts}/doc-example/pictorialBar-repeat.js | 0
.../doc-example/pictorialBar-repeatDirection.js | 0
.../ts}/doc-example/pictorialBar-repeatLayout.js | 0
.../pictorialBar-symbolBoundingDataArray.js | 0
.../ts}/doc-example/pictorialBar-symbolSize.js | 0
.../ts}/doc-example/pie-highlight.js | 0
.../ts}/doc-example/pie-label-bleedMargin.js | 0
.../doc-example/pie-label-distanceToLabelLine.js | 0
.../ts}/doc-example/pie-label-margin.js | 0
.../{data => examples/ts}/doc-example/pie-media.js | 0
.../ts}/doc-example/polar-anticlockwise.js | 0
.../ts}/doc-example/polar-start-angle.js | 0
public/{data => examples/ts}/doc-example/radar.js | 0
.../ts}/doc-example/scatter-dataZoom-all.js | 0
.../ts}/doc-example/scatter-tutorial-dataZoom-1.js | 0
.../ts}/doc-example/scatter-tutorial-dataZoom-2.js | 0
.../ts}/doc-example/scatter-tutorial-dataZoom-3.js | 0
.../doc-example/scatter-visualMap-categories.js | 0
.../ts}/doc-example/scatter-visualMap-piecewise.js | 0
.../ts}/doc-example/sunburst-color.js | 2 +-
.../ts}/doc-example/sunburst-highlight-ancestor.js | 0
.../doc-example/sunburst-highlight-descendant.js | 0
.../ts}/doc-example/sunburst-label-align.js | 0
.../ts}/doc-example/sunburst-simple.js | 2 +-
.../ts}/doc-example/text-block-fragment.js | 0
.../ts}/doc-example/text-fregment-align.js | 0
.../ts}/doc-example/text-options.js | 0
.../ts}/doc-example/timeline-dynamic-series.js | 2 +-
.../ts}/doc-example/title-block.js | 0
.../ts}/doc-example/treemap-borderColor.js | 0
.../ts}/doc-example/tutorial-async.js | 0
.../ts}/doc-example/tutorial-dynamic-data.js | 0
.../ts}/doc-example/tutorial-loading.js | 0
.../ts}/doc-example/tutorial-styling-step0.js | 0
.../ts}/doc-example/tutorial-styling-step1.js | 0
.../ts}/doc-example/tutorial-styling-step2.js | 0
.../ts}/doc-example/tutorial-styling-step3.js | 0
.../ts}/doc-example/tutorial-styling-step4.js | 0
.../ts}/doc-example/tutorial-styling-step5.js | 0
.../ts}/doc-example/value-animation-simple.js | 0
public/{data => examples/ts}/geo-lines.js | 0
public/{data => examples/ts}/geo-map-scatter.js | 0
public/{data => examples/ts}/geo-organ.js | 0
public/{data => examples/ts}/heatmap-bmap.js | 0
.../ts}/heatmap-large-piecewise.js | 0
public/{data => examples/ts}/heatmap-large.js | 0
public/{data => examples/ts}/heatmap-map.js | 0
public/examples/ts/line-gradient.ts | 2 +-
public/{data => examples/ts}/map-bin.js | 0
.../{data => examples/ts}/map-china-dataRange.js | 0
public/{data => examples/ts}/map-china.js | 0
public/{data => examples/ts}/map-labels.js | 2 +-
public/{data => examples/ts}/map-locate.js | 0
public/{data => examples/ts}/map-polygon.js | 0
public/{data => examples/ts}/map-province.js | 0
.../{data => examples/ts}/map-world-dataRange.js | 0
public/{data => examples/ts}/map-world.js | 0
.../{data => examples/ts}/mix-timeline-finance.js | 0
.../ts}/scatter-clustering-process.js | 0
.../ts}/scatter-life-expectancy-timeline.js | 0
public/{data => examples/ts}/scatter-map.js | 0
.../ts}/scatter-world-population.js | 0
public/{data => examples/ts}/sunburst-book.js | 38 +-
public/examples/ts/watermark.ts | 2 +-
public/examples/tsconfig.json | 9 +-
public/examples/types/example.d.ts | 46 +-
tool/build-example.js | 1 -
353 files changed, 243 insertions(+), 27272 deletions(-)
diff --git a/README.md b/README.md
index b56d153..5891e3f 100644
--- a/README.md
+++ b/README.md
@@ -28,7 +28,7 @@ It will copy all the build resources to echarts-website/next/examples
## Edit example
-All test cases are in the `public/data` folder. The comment in the header
+All test cases are in the `public/examples/ts` folder. The comment in the header
```js
/*
@@ -53,6 +53,12 @@ videoEnd: 6000
*/
```
+Most of examples are written in `TypeScript`. You need to comile it to `JavaScript` by using command:
+
+```shell
+npm run compile:example
+```
+
## Some built-in features available in examples
diff --git a/_config.yml b/_config.yml
deleted file mode 100644
index a98ff5b..0000000
--- a/_config.yml
+++ /dev/null
@@ -1,2 +0,0 @@
-# Handling Reading
-markdown_ext: "markdown,mkdown,mkdn,mkd"
diff --git a/package-lock.json b/package-lock.json
index fc83889..215c765 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1251,6 +1251,15 @@
"@types/node": "*"
}
},
+ "@types/jquery": {
+ "version": "3.5.6",
+ "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.6.tgz",
+ "integrity": "sha512-SmgCQRzGPId4MZQKDj9Hqc6kSXFNWZFHpELkyK8AQhf8Zr6HKfCzFv9ZC1Fv3FyQttJZOlap3qYb12h61iZAIg==",
+ "dev": true,
+ "requires": {
+ "@types/sizzle": "*"
+ }
+ },
"@types/json-schema": {
"version": "7.0.5",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.5.tgz",
@@ -1269,6 +1278,12 @@
"integrity": "sha1-bRGowtWEBbPbk4irdAEGy/pkw8k=",
"dev": true
},
+ "@types/sizzle": {
+ "version": "2.3.3",
+ "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
+ "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==",
+ "dev": true
+ },
"@typescript-eslint/types": {
"version": "4.12.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.12.0.tgz",
@@ -3116,6 +3131,124 @@
}
}
},
+ "download-git-repo": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/download-git-repo/-/download-git-repo-3.0.2.tgz",
+ "integrity": "sha512-N8hWXD4hXqmEcNoR8TBYFntaOcYvEQ7Bz90mgm3bZRTuteGQqwT32VDMnTyD0KTEvb8BWrMc1tVmzuV9u/WrAg==",
+ "dev": true,
+ "requires": {
+ "download": "^7.1.0",
+ "git-clone": "^0.1.0",
+ "rimraf": "^3.0.0"
+ },
+ "dependencies": {
+ "download": {
+ "version": "7.1.0",
+ "resolved": "https://registry.npmjs.org/download/-/download-7.1.0.tgz",
+ "integrity": "sha512-xqnBTVd/E+GxJVrX5/eUJiLYjCGPwMpdL+jGhGU57BvtcA7wwhtHVbXBeUk51kOpW3S7Jn3BQbN9Q1R1Km2qDQ==",
+ "dev": true,
+ "requires": {
+ "archive-type": "^4.0.0",
+ "caw": "^2.0.1",
+ "content-disposition": "^0.5.2",
+ "decompress": "^4.2.0",
+ "ext-name": "^5.0.0",
+ "file-type": "^8.1.0",
+ "filenamify": "^2.0.0",
+ "get-stream": "^3.0.0",
+ "got": "^8.3.1",
+ "make-dir": "^1.2.0",
+ "p-event": "^2.1.0",
+ "pify": "^3.0.0"
+ }
+ },
+ "get-stream": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+ "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
+ "dev": true
+ },
+ "got": {
+ "version": "8.3.2",
+ "resolved": "https://registry.npmjs.org/got/-/got-8.3.2.tgz",
+ "integrity": "sha512-qjUJ5U/hawxosMryILofZCkm3C84PLJS/0grRIpjAwu+Lkxxj5cxeCU25BG0/3mDSpXKTyZr8oh8wIgLaH0QCw==",
+ "dev": true,
+ "requires": {
+ "@sindresorhus/is": "^0.7.0",
+ "cacheable-request": "^2.1.1",
+ "decompress-response": "^3.3.0",
+ "duplexer3": "^0.1.4",
+ "get-stream": "^3.0.0",
+ "into-stream": "^3.1.0",
+ "is-retry-allowed": "^1.1.0",
+ "isurl": "^1.0.0-alpha5",
+ "lowercase-keys": "^1.0.0",
+ "mimic-response": "^1.0.0",
+ "p-cancelable": "^0.4.0",
+ "p-timeout": "^2.0.1",
+ "pify": "^3.0.0",
+ "safe-buffer": "^5.1.1",
+ "timed-out": "^4.0.1",
+ "url-parse-lax": "^3.0.0",
+ "url-to-options": "^1.0.1"
+ }
+ },
+ "make-dir": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
+ "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
+ "dev": true,
+ "requires": {
+ "pify": "^3.0.0"
+ }
+ },
+ "p-cancelable": {
+ "version": "0.4.1",
+ "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-0.4.1.tgz",
+ "integrity": "sha512-HNa1A8LvB1kie7cERyy21VNeHb2CWJJYqyyC2o3klWFfMGlFmWv2Z7sFgZH8ZiaYL95ydToKTFVXgMV/Os0bBQ==",
+ "dev": true
+ },
+ "p-event": {
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/p-event/-/p-event-2.3.1.tgz",
+ "integrity": "sha512-NQCqOFhbpVTMX4qMe8PF8lbGtzZ+LCiN7pcNrb/413Na7+TRoe1xkKUzuWa/YEJdGQ0FvKtj35EEbDoVPO2kbA==",
+ "dev": true,
+ "requires": {
+ "p-timeout": "^2.0.1"
+ }
+ },
+ "p-timeout": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-2.0.1.tgz",
+ "integrity": "sha512-88em58dDVB/KzPEx1X0N3LwFfYZPyDc4B6eF38M1rk9VTZMbxXXgjugz8mmwpS9Ox4BDZ+t6t3QP5+/gazweIA==",
+ "dev": true,
+ "requires": {
+ "p-finally": "^1.0.0"
+ }
+ },
+ "pify": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+ "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+ "dev": true
+ },
+ "prepend-http": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
+ "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=",
+ "dev": true
+ },
+ "url-parse-lax": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
+ "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=",
+ "dev": true,
+ "requires": {
+ "prepend-http": "^2.0.0"
+ }
+ }
+ }
+ },
"duplexer": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -3129,19 +3262,19 @@
"dev": true
},
"echarts": {
- "version": "5.0.0",
- "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.0.0.tgz",
- "integrity": "sha512-6SDcJbLVOcfQyjPg+spNU1+JVrkU1B9fzUa5tpbP/mMNUPyigCOJwcEIQAJSbp9jt5UP3EXvQR0vtYXIo9AjyA==",
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.2.0.tgz",
+ "integrity": "sha512-7CrCKGRjFdpLIJ/Yt1gpHeqs5PiCem2GHPdWZPwKl7WSYeZu0Qzm1bcCFe9/b4dfVaL1zlY4JmdzaVwKksVeqg==",
"dev": true,
"requires": {
- "tslib": "1.10.0",
- "zrender": "5.0.1"
+ "tslib": "2.3.0",
+ "zrender": "5.2.0"
},
"dependencies": {
"tslib": {
- "version": "1.10.0",
- "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
- "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==",
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+ "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
"dev": true
}
}
@@ -3221,6 +3354,12 @@
"is-arrayish": "^0.2.1"
}
},
+ "esbuild": {
+ "version": "0.8.57",
+ "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.8.57.tgz",
+ "integrity": "sha512-j02SFrUwFTRUqiY0Kjplwjm1psuzO1d6AjaXKuOR9hrY0HuPsT6sV42B6myW34h1q4CRy+Y3g4RU/cGJeI/nNA==",
+ "dev": true
+ },
"escalade": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.0.2.tgz",
@@ -3427,6 +3566,12 @@
"schema-utils": "^2.5.0"
}
},
+ "file-type": {
+ "version": "8.1.0",
+ "resolved": "https://registry.npmjs.org/file-type/-/file-type-8.1.0.tgz",
+ "integrity": "sha512-qyQ0pzAy78gVoJsmYeNgl8uH8yKhr1lVhW7JbzJmnlRi0I4R2eEDEJZVKG8agpDnLpacwNbDhLNG/LMdxHD2YQ==",
+ "dev": true
+ },
"filename-reserved-regex": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
@@ -3574,6 +3719,12 @@
"pinkie-promise": "^2.0.0"
}
},
+ "git-clone": {
+ "version": "0.1.0",
+ "resolved": "https://registry.npmjs.org/git-clone/-/git-clone-0.1.0.tgz",
+ "integrity": "sha1-DXYWN3gJOu9/HDAjjyqe8/B6Lrk=",
+ "dev": true
+ },
"github-from-package": {
"version": "0.0.0",
"resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
@@ -5367,9 +5518,9 @@
"dev": true
},
"prettier": {
- "version": "2.2.1",
- "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz",
- "integrity": "sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==",
+ "version": "2.3.2",
+ "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz",
+ "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==",
"dev": true
},
"process-nextick-args": {
@@ -5643,6 +5794,15 @@
"integrity": "sha1-kNo4Kx4SbvwCFG6QhFqI2xKSXXY=",
"dev": true
},
+ "rimraf": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+ "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+ "dev": true,
+ "requires": {
+ "glob": "^7.1.3"
+ }
+ },
"run-parallel": {
"version": "1.1.9",
"resolved": "https://registry.npm.taobao.org/run-parallel/download/run-parallel-1.1.9.tgz",
@@ -7161,18 +7321,18 @@
"dev": true
},
"zrender": {
- "version": "5.0.1",
- "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.0.1.tgz",
- "integrity": "sha512-i8FNCKAKfF0EfZFJ6w2p30umBrCyy481/PePFQqPdtNgCl5Hp5z7/dovqb7soEoFkhNvhjJ/J4W9zFALeae6yA==",
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.2.0.tgz",
+ "integrity": "sha512-87v3gvB0lcWy48ObA/DwrhQ95ADMMRhECVrXmHDFCBNvbxHFfEDZtrZh4VmVjLAeFAjimY4PyZ65rbLCivdszA==",
"dev": true,
"requires": {
- "tslib": "1.10.0"
+ "tslib": "2.3.0"
},
"dependencies": {
"tslib": {
- "version": "1.10.0",
- "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
- "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==",
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+ "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
"dev": true
}
}
diff --git a/package.json b/package.json
index 39e45f0..8fe1fee 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
"release": "npm run build && node build/copyResource.js --env asf",
"dev": "npx concurrently --kill-others \"npm:watch\" \"npm:server\"",
"build:example": "node tool/build-example.js && node tool/build-example.js --source data-gl",
+ "compile:example": "tsc --project public/examples/tsconfig.json",
"test:e2e": "node e2e/main.js --bundler webpack -m",
"test:e2e:local": "node e2e/main.js --bundler webpack -m --local",
"test:e2e:esbuild": "node e2e/main.js --bundler esbuild -m",
@@ -20,6 +21,7 @@
"@babel/preset-env": "^7.10.2",
"@ffmpeg/core": "^0.10.0",
"@ffmpeg/ffmpeg": "^0.10.1",
+ "@types/jquery": "^3.5.6",
"@typescript-eslint/typescript-estree": "^4.10.0",
"argparse": "^1.0.9",
"babel-loader": "^8.1.0",
@@ -28,7 +30,7 @@
"css-loader": "^3.5.3",
"cwebp-bin": "^6.1.1",
"download-git-repo": "^3.0.2",
- "echarts": "^5.0.0",
+ "echarts": "^5.2.0",
"echarts-stat": "^1.2.0",
"esbuild": "^0.8.34",
"file-loader": "^4.3.0",
@@ -42,7 +44,7 @@
"open": "^7.1.0",
"pixelmatch": "^5.2.1",
"pngjs": "^6.0.0",
- "prettier": "^2.2.1",
+ "prettier": "^2.3.2",
"sass.js": "^0.11.1",
"sassjs-loader": "^2.0.0",
"seedrandom": "^3.0.5",
diff --git a/public/data/area-basic.js b/public/data/area-basic.js
deleted file mode 100644
index 6200298..0000000
--- a/public/data/area-basic.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
-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: {}
- }]
-};
diff --git a/public/data/area-pieces.js b/public/data/area-pieces.js
deleted file mode 100644
index a6cb4a1..0000000
--- a/public/data/area-pieces.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/*
-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]
- ]
- }
- ]
-};
\ No newline at end of file
diff --git a/public/data/area-rainfall.js b/public/data/area-rainfall.js
deleted file mode 100644
index 1ca5bc9..0000000
--- a/public/data/area-rainfall.js
+++ /dev/null
@@ -1,188 +0,0 @@
-/*
-title: Rainfall
-titleCN: 雨量流量关系图
-category: line
-difficulty: 5
-*/
-
-option = {
- title: {
- text: '雨量流量关系图',
- subtext: '数据来自西安兰特水电测控技术有限公司',
- left: 'center',
- align: 'right'
- },
- grid: {
- bottom: 80
- },
- toolbox: {
- feature: {
- dataZoom: {
- yAxisIndex: 'none'
- },
- restore: {},
- saveAsImage: {}
- }
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross',
- animation: false,
- label: {
- backgroundColor: '#505765'
- }
- }
- },
- legend: {
- data: ['流量', '降雨量'],
- 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: '流量(m^3/s)',
- type: 'value',
- max: 500
- },
- {
- name: '降雨量(mm)',
- nameLocation: 'start',
- max: 5,
- type: 'value',
- inverse: true
- }
- ],
- series: [
- {
- name: '流量',
- 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: '降雨量',
- 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 [...]
- ]
- }
- ]
-};
diff --git a/public/data/area-simple.js b/public/data/area-simple.js
deleted file mode 100644
index 84b9682..0000000
--- a/public/data/area-simple.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/*
-title: Large scale area chart
-titleCN: 大数据量面积图
-category: 'line, dataZoom'
-difficulty: 4
-*/
-
-var base = +new Date(1968, 9, 3);
-var oneDay = 24 * 3600 * 1000;
-var date = [];
-
-var data = [Math.random() * 300];
-
-for (var 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: '大数据量面积图',
- },
- 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: '模拟数据',
- 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
- }
- ]
-};
diff --git a/public/data/area-stack-gradient.js b/public/data/area-stack-gradient.js
deleted file mode 100644
index 320f241..0000000
--- a/public/data/area-stack-gradient.js
+++ /dev/null
@@ -1,174 +0,0 @@
-/*
-title: Gradient Stacked area chart
-titleCN: 渐变堆叠面积图
-category: line
-difficulty: 2
-*/
-
-option = {
- color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
- title: {
- text: '渐变堆叠面积图'
- },
- 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: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
- }
- ],
- yAxis: [
- {
- type: 'value'
- }
- ],
- series: [
- {
- name: 'Line 1',
- type: 'line',
- stack: '总量',
- 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: '总量',
- 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: '总量',
- 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: '总量',
- 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: '总量',
- 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]
- }
- ]
-};
\ No newline at end of file
diff --git a/public/data/area-stack.js b/public/data/area-stack.js
deleted file mode 100644
index f229254..0000000
--- a/public/data/area-stack.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/*
-title: Stacked area chart
-titleCN: 堆叠面积图
-category: line
-difficulty: 2
-*/
-
-option = {
- title: {
- text: '堆叠区域图'
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross',
- label: {
- backgroundColor: '#6a7985'
- }
- }
- },
- legend: {
- data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
- },
- toolbox: {
- feature: {
- saveAsImage: {}
- }
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: [
- {
- type: 'category',
- boundaryGap: false,
- data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
- }
- ],
- yAxis: [
- {
- type: 'value'
- }
- ],
- series: [
- {
- name: '邮件营销',
- type: 'line',
- stack: '总量',
- areaStyle: {},
- emphasis: {
- focus: 'series'
- },
- data: [120, 132, 101, 134, 90, 230, 210]
- },
- {
- name: '联盟广告',
- type: 'line',
- stack: '总量',
- areaStyle: {},
- emphasis: {
- focus: 'series'
- },
- data: [220, 182, 191, 234, 290, 330, 310]
- },
- {
- name: '视频广告',
- type: 'line',
- stack: '总量',
- areaStyle: {},
- emphasis: {
- focus: 'series'
- },
- data: [150, 232, 201, 154, 190, 330, 410]
- },
- {
- name: '直接访问',
- type: 'line',
- stack: '总量',
- areaStyle: {},
- emphasis: {
- focus: 'series'
- },
- data: [320, 332, 301, 334, 390, 330, 320]
- },
- {
- name: '搜索引擎',
- type: 'line',
- stack: '总量',
- label: {
- show: true,
- position: 'top'
- },
- areaStyle: {},
- emphasis: {
- focus: 'series'
- },
- data: [820, 932, 901, 934, 1290, 1330, 1320]
- }
- ]
-};
diff --git a/public/data/area-time-axis.js b/public/data/area-time-axis.js
deleted file mode 100644
index c17d393..0000000
--- a/public/data/area-time-axis.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/*
-title: Area Chart with Time Axis
-titleCN: 时间轴折线图
-category: line
-difficulty: 5
-*/
-
-var base = +new Date(1988, 9, 3);
-var oneDay = 24 * 3600 * 1000;
-
-var data = [[base, Math.random() * 300]];
-
-for (var i = 1; i < 20000; i++) {
- var now = new Date(base += oneDay);
- data.push([
- [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
- 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: '大数据量面积图',
- },
- 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: '模拟数据',
- type: 'line',
- smooth: true,
- symbol: 'none',
- areaStyle: {},
- data: data
- }
- ]
-};
\ No newline at end of file
diff --git a/public/data/bar-animation-delay.js b/public/data/bar-animation-delay.js
deleted file mode 100644
index e06247a..0000000
--- a/public/data/bar-animation-delay.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/*
-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: '柱状图动画延迟'
- },
- legend: {
- data: ['bar', 'bar2']
- },
- toolbox: {
- // y: 'bottom',
- feature: {
- magicType: {
- type: ['stack', 'tiled']
- },
- 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/public/data/bar-background.js b/public/data/bar-background.js
deleted file mode 100644
index 74d9ce0..0000000
--- a/public/data/bar-background.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/*
-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)'
- }
- }]
-};
diff --git a/public/data/bar-brush.js b/public/data/bar-brush.js
deleted file mode 100644
index 82f6178..0000000
--- a/public/data/bar-brush.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/*
-title: Brush Select on Column Chart
-titleCN: 柱状图框选
-category: bar
-difficulty: 4
-*/
-
-var xAxisData = [];
-var data1 = [];
-var data2 = [];
-var data3 = [];
-var data4 = [];
-
-for (var 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', 'tiled']
- },
- 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', renderBrushed);
-
-function renderBrushed(params) {
- 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({
- title: {
- backgroundColor: '#333',
- text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
- bottom: 0,
- right:'10%',
- width: 100,
- textStyle: {
- fontSize: 12,
- color: '#fff'
- }
- }
- });
-}
\ No newline at end of file
diff --git a/public/data/bar-data-color.js b/public/data/bar-data-color.js
deleted file mode 100644
index f6e42c7..0000000
--- a/public/data/bar-data-color.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
-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'
- }]
-};
\ No newline at end of file
diff --git a/public/data/bar-drilldown.js b/public/data/bar-drilldown.js
deleted file mode 100644
index 8a95a53..0000000
--- a/public/data/bar-drilldown.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/*
-title: Bar Chart Drilldown Animation.
-category: bar
-titleCN: 柱状图下钻动画
-difficulty: 5
-*/
-
-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'
- }],
- universalTransition: {
- enabled: true,
- divideShape: 'clone'
- }
- }
-};
-
-var 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.groupId;
- });
- if (!subData) {
- return;
- }
- myChart.setOption({
- 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(option);
- }
- }]
- });
- }
-});
\ No newline at end of file
diff --git a/public/data/bar-gradient.js b/public/data/bar-gradient.js
deleted file mode 100644
index a98dd16..0000000
--- a/public/data/bar-gradient.js
+++ /dev/null
@@ -1,96 +0,0 @@
-/*
-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,
- textStyle: {
- color: '#fff'
- }
- },
- axisTick: {
- show: false
- },
- axisLine: {
- show: false
- },
- z: 10
- },
- yAxis: {
- axisLine: {
- show: false
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- textStyle: {
- 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)]
- });
-});
\ No newline at end of file
diff --git a/public/data/bar-histogram.js b/public/data/bar-histogram.js
deleted file mode 100644
index 9a5d405..0000000
--- a/public/data/bar-histogram.js
+++ /dev/null
@@ -1,126 +0,0 @@
-/*
-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'
- }
- }, {
- 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/public/data/bar-label-rotation.js b/public/data/bar-label-rotation.js
deleted file mode 100644
index 141a643..0000000
--- a/public/data/bar-label-rotation.js
+++ /dev/null
@@ -1,166 +0,0 @@
-/*
-title: Bar Label Rotation
-titleCN: 柱状图标签旋转
-category: bar
-difficulty: 3
-*/
-
-var posList = [
- 'left', 'right', 'top', 'bottom',
- 'inside',
- 'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
- 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
-];
-
-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;
- }, {})
- },
- 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({
- series: [{
- label: labelOption
- }, {
- label: labelOption
- }, {
- label: labelOption
- }, {
- label: labelOption
- }]
- });
- }
-};
-
-
-var labelOption = {
- show: true,
- position: app.config.position,
- distance: app.config.distance,
- align: app.config.align,
- verticalAlign: app.config.verticalAlign,
- rotate: app.config.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', 'tiled']},
- 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/public/data/bar-large.js b/public/data/bar-large.js
deleted file mode 100644
index 926c0ee..0000000
--- a/public/data/bar-large.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/*
-title: Large Scale Bar Chart
-category: bar
-titleCN: 大数据量柱图
-difficulty: 5
-*/
-
-
-var dataCount = 5e5;
-var data = generateData(dataCount);
-
-var 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) {
- var baseValue = Math.random() * 1000;
- var time = +new Date(2011, 0, 1);
- var smallBaseValue;
-
- function next(idx) {
- 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
- );
- }
-
- var categoryData = [];
- var valueData = [];
-
- for (var i = 0; i < count; i++) {
- categoryData.push(echarts.format.formatTime('yyyy-MM-dd\nhh:mm:ss', time));
- valueData.push(next(i).toFixed(2));
- time += 1000;
- }
-
- return {
- categoryData: categoryData,
- valueData: valueData
- };
-}
diff --git a/public/data/bar-negative.js b/public/data/bar-negative.js
deleted file mode 100644
index 8cfd1c6..0000000
--- a/public/data/bar-negative.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/*
-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: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
- }
- ],
- series: [
- {
- name: '利润',
- type: 'bar',
- label: {
- show: true,
- position: 'inside'
- },
- emphasis: {
- focus: 'series'
- },
- data: [200, 170, 240, 244, 200, 220, 210]
- },
- {
- name: '收入',
- type: 'bar',
- stack: '总量',
- label: {
- show: true
- },
- emphasis: {
- focus: 'series'
- },
- data: [320, 302, 341, 374, 390, 450, 420]
- },
- {
- name: '支出',
- type: 'bar',
- stack: '总量',
- label: {
- show: true,
- position: 'left'
- },
- emphasis: {
- focus: 'series'
- },
- data: [-120, -132, -101, -134, -190, -230, -210]
- }
- ]
-};
diff --git a/public/data/bar-negative2.js b/public/data/bar-negative2.js
deleted file mode 100644
index 64fcde9..0000000
--- a/public/data/bar-negative2.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/*
-title: Bar Chart with Negative Value
-titleCN: 交错正负轴标签
-category: bar
-difficulty: 2
-*/
-
-var labelRight = {
- position: 'right'
-};
-option = {
- title: {
- text: '交错正负轴标签',
- subtext: 'From ExcelHome',
- sublink: 'http://e.weibo.com/1341556070/AjwF2AgQm'
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: { // 坐标轴指示器，坐标轴触发有效
- type: 'shadow' // 默认为直线，可选为：'line' | '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: '生活费',
- type: 'bar',
- stack: '总量',
- 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
- ]
- }
- ]
-};
diff --git a/public/data/bar-polar-label-radial.js b/public/data/bar-polar-label-radial.js
deleted file mode 100644
index f5c9054..0000000
--- a/public/data/bar-polar-label-radial.js
+++ /dev/null
@@ -1,30 +0,0 @@
-option = {
- title: [{
- text: 'Radial Polar Bar Label Position (middle)'
- }],
- polar: {
- radius: [30, '80%']
- },
- radiusAxis: {
- max: 4,
- startAngle: 75
- },
- 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: 0
-};
diff --git a/public/data/bar-polar-label-tangential.js b/public/data/bar-polar-label-tangential.js
deleted file mode 100644
index db37d3b..0000000
--- a/public/data/bar-polar-label-tangential.js
+++ /dev/null
@@ -1,30 +0,0 @@
-option = {
- title: [{
- text: 'Radial Polar Bar Label Position (middle)'
- }],
- polar: {
- radius: [30, '80%']
- },
- angleAxis: {
- max: 4,
- startAngle: 75
- },
- radiusAxis: {
- 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: 0
-};
diff --git a/public/data/bar-polar-real-estate.js b/public/data/bar-polar-real-estate.js
deleted file mode 100644
index 31fc51d..0000000
--- a/public/data/bar-polar-real-estate.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/*
-title: Bar Chart on Polar
-category: bar
-difficulty: 7
-shotWidth: 800
-*/
-
-var 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]
-];
-var cities = ['北京', '上海', '深圳', '广州', '苏州', '杭州', '南京', '福州', '青岛', '济南', '长春', '大连', '温州', '郑州', '武汉', '成都', '东莞', '沈阳', '烟台'];
-var barHeight = 50;
-
-option = {
- title: {
- text: '在中国租个房子有多贵？',
- subtext: '市中心一室月租费（数据来源：https://www.numbeo.com）'
- },
- legend: {
- show: true,
- data: ['价格范围', '均值']
- },
- grid: {
- top: 100
- },
- angleAxis: {
- type: 'category',
- data: cities
- },
- tooltip: {
- show: true,
- formatter: function (params) {
- var id = params.dataIndex;
- return cities[id] + '<br>最低：' + data[id][0] + '<br>最高：' + data[id][1] + '<br>平均：' + data[id][2];
- }
- },
- radiusAxis: {
- },
- polar: {
- },
- series: [{
- type: 'bar',
- itemStyle: {
- color: 'transparent'
- },
- data: data.map(function (d) {
- return d[0];
- }),
- coordinateSystem: 'polar',
- stack: '最大最小值',
- silent: true
- }, {
- type: 'bar',
- data: data.map(function (d) {
- return d[1] - d[0];
- }),
- coordinateSystem: 'polar',
- name: '价格范围',
- stack: '最大最小值'
- }, {
- type: 'bar',
- itemStyle: {
- color: 'transparent'
- },
- data: data.map(function (d) {
- return d[2] - barHeight;
- }),
- coordinateSystem: 'polar',
- stack: '均值',
- silent: true,
- z: 10
- }, {
- type: 'bar',
- data: data.map(function (d) {
- return barHeight * 2;
- }),
- coordinateSystem: 'polar',
- name: '均值',
- stack: '均值',
- barGap: '-100%',
- z: 10
- }]
-};
diff --git a/public/data/bar-polar-stack-radial.js b/public/data/bar-polar-stack-radial.js
deleted file mode 100644
index f076e6f..0000000
--- a/public/data/bar-polar-stack-radial.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
-title: Stacked Bar Chart on Polar(Radial)
-titleCN: 极坐标系下的堆叠柱状图
-category: bar
-difficulty: 7
-*/
-
-option = {
- angleAxis: {
- type: 'category',
- data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
- },
- 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']
- }
-};
diff --git a/public/data/bar-polar-stack.js b/public/data/bar-polar-stack.js
deleted file mode 100644
index 8812346..0000000
--- a/public/data/bar-polar-stack.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
-title: Stacked Bar Chart on Polar
-titleCN: 极坐标系下的堆叠柱状图
-category: bar
-difficulty: 7
-*/
-
-option = {
- angleAxis: {
- },
- radiusAxis: {
- type: 'category',
- data: ['周一', '周二', '周三', '周四'],
- 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']
- }
-};
diff --git a/public/data/bar-race-country.js b/public/data/bar-race-country.js
deleted file mode 100644
index 1dcc988..0000000
--- a/public/data/bar-race-country.js
+++ /dev/null
@@ -1,142 +0,0 @@
-/*
-title: Bar Race
-titleCN: 动态排序柱状图 - 人均收入
-category: bar
-difficulty: 6
-videoStart: 1000
-videoEnd: 6000
-*/
-
-
-var updateFrequency = 2000;
-var dimension = 0;
-
-var countryColors = {"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) {
- var flags = res0[0];
- var data = res1[0];
- var years = [];
- 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) {
- if (!countryName) {
- return '';
- }
- return (flags.find(function (item) {
- return item.name === countryName;
- }) || {}).emoji;
- }
- var startIndex = 10;
- var startYear = years[startIndex];
-
- var option = {
- grid: {
- top: 10,
- bottom: 30,
- left: 150,
- right: 80
- },
- xAxis: {
- max: 'dataMax',
- label: {
- formatter: function (n) {
- 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,
- textStyle: {
- fontSize: 14
- },
- formatter: function (value) {
- 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) {
- 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(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) {
- 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(option);
- }
-})
\ No newline at end of file
diff --git a/public/data/bar-race.js b/public/data/bar-race.js
deleted file mode 100644
index 21f76bf..0000000
--- a/public/data/bar-race.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/*
-title: Bar Race
-titleCN: 动态排序柱状图
-category: bar
-difficulty: 5
-videoStart: 1000
-videoEnd: 6000
-*/
-
-var data = [];
-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 () {
- var data = option.series[0].data;
- 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(option);
-}
-
-setTimeout(function() {
- run();
-}, 0);
-setInterval(function () {
- run();
-}, 3000);
diff --git a/public/data/bar-rich-text.js b/public/data/bar-rich-text.js
deleted file mode 100644
index d0c35d4..0000000
--- a/public/data/bar-rich-text.js
+++ /dev/null
@@ -1,151 +0,0 @@
-/*
-title: Wheater Statistics
-category: 'bar, rich'
-titleCN: 天气统计（富文本）
-difficulty: 6
-*/
-
-
-var 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'
-};
-
-var seriesLabel = {
- show: true
-}
-
-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]
- }
- ]
-};
diff --git a/public/data/bar-simple.js b/public/data/bar-simple.js
deleted file mode 100644
index 6a584f3..0000000
--- a/public/data/bar-simple.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
-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'
- }]
-};
diff --git a/public/data/bar-stack.js b/public/data/bar-stack.js
deleted file mode 100644
index 8d87101..0000000
--- a/public/data/bar-stack.js
+++ /dev/null
@@ -1,125 +0,0 @@
-/*
-title: Stacked Column Chart
-titleCN: 堆叠柱状图
-category: bar
-difficulty: 3
-*/
-
-option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: { // 坐标轴指示器，坐标轴触发有效
- type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
- }
- },
- legend: {
- data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: [
- {
- type: 'category',
- data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
- }
- ],
- yAxis: [
- {
- type: 'value'
- }
- ],
- series: [
- {
- name: '直接访问',
- type: 'bar',
- emphasis: {
- focus: 'series'
- },
- data: [320, 332, 301, 334, 390, 330, 320]
- },
- {
- name: '邮件营销',
- type: 'bar',
- stack: '广告',
- emphasis: {
- focus: 'series'
- },
- data: [120, 132, 101, 134, 90, 230, 210]
- },
- {
- name: '联盟广告',
- type: 'bar',
- stack: '广告',
- emphasis: {
- focus: 'series'
- },
- data: [220, 182, 191, 234, 290, 330, 310]
- },
- {
- name: '视频广告',
- type: 'bar',
- stack: '广告',
- emphasis: {
- focus: 'series'
- },
- data: [150, 232, 201, 154, 190, 330, 410]
- },
- {
- name: '搜索引擎',
- type: 'bar',
- data: [862, 1018, 964, 1026, 1679, 1600, 1570],
- emphasis: {
- focus: 'series'
- },
- markLine: {
- lineStyle: {
- type: 'dashed'
- },
- data: [
- [{type: 'min'}, {type: 'max'}]
- ]
- }
- },
- {
- name: '百度',
- type: 'bar',
- barWidth: 5,
- stack: '搜索引擎',
- emphasis: {
- focus: 'series'
- },
- data: [620, 732, 701, 734, 1090, 1130, 1120]
- },
- {
- name: '谷歌',
- type: 'bar',
- stack: '搜索引擎',
- emphasis: {
- focus: 'series'
- },
- data: [120, 132, 101, 134, 290, 230, 220]
- },
- {
- name: '必应',
- type: 'bar',
- stack: '搜索引擎',
- emphasis: {
- focus: 'series'
- },
- data: [60, 72, 71, 74, 190, 130, 110]
- },
- {
- name: '其他',
- type: 'bar',
- stack: '搜索引擎',
- emphasis: {
- focus: 'series'
- },
- data: [62, 82, 91, 84, 109, 110, 120]
- }
- ]
-};
diff --git a/public/data/bar-tick-align.js b/public/data/bar-tick-align.js
deleted file mode 100644
index 7707cd0..0000000
--- a/public/data/bar-tick-align.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
-title: Axis Align with Tick
-titleCN: 坐标轴刻度与标签对齐
-category: bar
-difficulty: 0
-*/
-
-option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: { // 坐标轴指示器，坐标轴触发有效
- type: 'shadow' // 默认为直线，可选为：'line' | '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: '直接访问',
- type: 'bar',
- barWidth: '60%',
- data: [10, 52, 200, 334, 390, 330, 220]
- }
- ]
-};
diff --git a/public/data/bar-waterfall.js b/public/data/bar-waterfall.js
deleted file mode 100644
index 5e03b5c..0000000
--- a/public/data/bar-waterfall.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/*
-title: Waterfall Chart
-titleCN: 瀑布图（柱状图模拟）
-category: bar
-difficulty: 1
-*/
-
-option = {
- title: {
- text: '深圳月最低生活费组成（单位:元）',
- subtext: 'From ExcelHome',
- sublink: 'http://e.weibo.com/1341556070/AjQH99che'
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: { // 坐标轴指示器，坐标轴触发有效
- type: 'shadow' // 默认为直线，可选为：'line' | '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: ['总费用', '房租', '水电费', '交通费', '伙食费', '日用品数']
- },
- yAxis: {
- type: 'value'
- },
- series: [
- {
- name: '辅助',
- type: 'bar',
- stack: '总量',
- itemStyle: {
- barBorderColor: 'rgba(0,0,0,0)',
- color: 'rgba(0,0,0,0)'
- },
- emphasis: {
- itemStyle: {
- barBorderColor: 'rgba(0,0,0,0)',
- color: 'rgba(0,0,0,0)'
- }
- },
- data: [0, 1700, 1400, 1200, 300, 0]
- },
- {
- name: '生活费',
- type: 'bar',
- stack: '总量',
- label: {
- show: true,
- position: 'inside'
- },
- data: [2900, 1200, 300, 200, 900, 300]
- }
- ]
-};
diff --git a/public/data/bar-waterfall2.js b/public/data/bar-waterfall2.js
deleted file mode 100644
index d661a64..0000000
--- a/public/data/bar-waterfall2.js
+++ /dev/null
@@ -1,91 +0,0 @@
-/*
-title: Waterfall Chart
-titleCN: 阶梯瀑布图（柱状图模拟）
-category: bar
-difficulty: 3
-*/
-
-option = {
- title: {
- text: '阶梯瀑布图',
- subtext: 'From ExcelHome',
- sublink: 'http://e.weibo.com/1341556070/Aj1J2x5a5'
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: { // 坐标轴指示器，坐标轴触发有效
- type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
- },
- formatter: function (params) {
- var 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: '总量',
- itemStyle: {
- barBorderColor: 'rgba(0,0,0,0)',
- color: 'rgba(0,0,0,0)'
- },
- emphasis: {
- itemStyle: {
- barBorderColor: 'rgba(0,0,0,0)',
- color: 'rgba(0,0,0,0)'
- }
- },
- data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292]
- },
- {
- name: '收入',
- type: 'bar',
- stack: '总量',
- label: {
- show: true,
- position: 'top'
- },
- data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-']
- },
- {
- name: '支出',
- type: 'bar',
- stack: '总量',
- label: {
- show: true,
- position: 'bottom'
- },
- data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203]
- }
- ]
-};
diff --git a/public/data/bar-y-category-stack.js b/public/data/bar-y-category-stack.js
deleted file mode 100644
index 9bc05e6..0000000
--- a/public/data/bar-y-category-stack.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/*
-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]
- }
- ]
-};
diff --git a/public/data/bar-y-category.js b/public/data/bar-y-category.js
deleted file mode 100644
index 514c798..0000000
--- a/public/data/bar-y-category.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/*
-title: World Total Population
-category: bar
-titleCN: 世界人口总量 - 条形图
-difficulty: 2
-*/
-
-option = {
- title: {
- text: '世界人口总量',
- subtext: '数据来自网络'
- },
- 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: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
- },
- series: [
- {
- name: '2011年',
- type: 'bar',
- data: [18203, 23489, 29034, 104970, 131744, 630230]
- },
- {
- name: '2012年',
- type: 'bar',
- data: [19325, 23438, 31000, 121594, 134141, 681807]
- }
- ]
-};
diff --git a/public/data/bar1.js b/public/data/bar1.js
deleted file mode 100644
index a4fd5f4..0000000
--- a/public/data/bar1.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/*
-title: Rainfall and Evaporation
-category: bar
-titleCN: 某地区蒸发量和降水量
-difficulty: 4
-*/
-
-option = {
- title: {
- text: '某地区蒸发量和降水量',
- subtext: '纯属虚构'
- },
- tooltip: {
- trigger: 'axis'
- },
- legend: {
- data: ['蒸发量', '降水量']
- },
- 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: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
- }
- ],
- yAxis: [
- {
- type: 'value'
- }
- ],
- series: [
- {
- name: '蒸发量',
- 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: '最大值'},
- {type: 'min', name: '最小值'}
- ]
- },
- markLine: {
- data: [
- {type: 'average', name: '平均值'}
- ]
- }
- },
- {
- name: '降水量',
- 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: '平均值'}
- ]
- }
- }
- ]
-};
diff --git a/public/data/boxplot-light-velocity.js b/public/data/boxplot-light-velocity.js
deleted file mode 100644
index e475ca3..0000000
--- a/public/data/boxplot-light-velocity.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/*
-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
- }
- ]
-};
\ No newline at end of file
diff --git a/public/data/boxplot-light-velocity2.js b/public/data/boxplot-light-velocity2.js
deleted file mode 100644
index a4af14d..0000000
--- a/public/data/boxplot-light-velocity2.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/*
-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) {
- 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
- }
- ]
-};
\ No newline at end of file
diff --git a/public/data/boxplot-multi.js b/public/data/boxplot-multi.js
deleted file mode 100644
index 44e6177..0000000
--- a/public/data/boxplot-multi.js
+++ /dev/null
@@ -1,106 +0,0 @@
-/*
-title: Multiple Categories
-category: boxplot
-titleCN: 多系列盒须图
-*/
-
-
-// Generate data.
-function makeData() {
- var data = [];
- for (var i = 0; i < 18; i++) {
- var cate = [];
- for (var j = 0; j < 100; j++) {
- cate.push(Math.random() * 200);
- }
- data.push(cate);
- }
- return data;
-}
-var data0 = makeData();
-var data1 = makeData();
-var 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
- }]
-};
diff --git a/public/data/bubble-gradient.js b/public/data/bubble-gradient.js
deleted file mode 100644
index 9ab5549..0000000
--- a/public/data/bubble-gradient.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/*
-title: Bubble Chart
-category: scatter
-titleCN: 气泡图
-difficulty: 6
-*/
-
-var 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: '1990 与 2015 年各国家人均寿命与 GDP' ,
- 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)'
- }])
- }
- }]
-};
\ No newline at end of file
diff --git a/public/data/calendar-charts.js b/public/data/calendar-charts.js
deleted file mode 100644
index 9b0cbd2..0000000
--- a/public/data/calendar-charts.js
+++ /dev/null
@@ -1,193 +0,0 @@
-/*
-title: Calendar Charts
-category: 'calendar, scatter'
-titleCN: 日历图
-shotWidth: 1000
-difficulty: 11
-*/
-
-function getVirtulData(year) {
- 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)
- ]);
- }
- console.log(data[data.length - 1]);
- return data;
-}
-
-
-
-var graphData = [
- [
- '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-02-27',
- 985
- ]
-];
-
-var links = graphData.map(function (item, idx) {
- return {
- source: idx,
- target: idx + 1
- };
-});
-links.pop();
-
-option = {
- tooltip: {
- position: 'top'
- },
-
- visualMap: [{
- min: 0,
- max: 1000,
- calculable: true,
- seriesIndex: [2, 3, 4],
- orient: 'horizontal',
- left: '55%',
- bottom: 20
- }, {
- min: 0,
- max: 1000,
- inRange: {
- color: ['grey'],
- opacity: [0, 0.3]
- },
- controller: {
- inRange: {
- opacity: [0.3, 0.6]
- },
- outOfRange: {
- color: '#ccc'
- }
- },
- seriesIndex: [1],
- orient: 'horizontal',
- left: '10%',
- bottom: 20
- }],
-
- calendar: [{
- orient: 'vertical',
- yearLabel: {
- margin: 40
- },
- monthLabel: {
- nameMap: 'cn',
- margin: 20
- },
- dayLabel: {
- firstDay: 1,
- nameMap: 'cn'
- },
- cellSize: 40,
- range: '2017-02'
- },
- {
- orient: 'vertical',
- yearLabel: {
- margin: 40
- },
- monthLabel: {
- margin: 20
- },
- cellSize: 40,
- left: 460,
- range: '2017-01'
- },
- {
- orient: 'vertical',
- yearLabel: {
- margin: 40
- },
- monthLabel: {
- margin: 20
- },
- cellSize: 40,
- top: 350,
- range: '2017-03'
- },
- {
- orient: 'vertical',
- yearLabel: {
- margin: 40
- },
- dayLabel: {
- firstDay: 1,
- nameMap: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
- },
- monthLabel: {
- nameMap: 'cn',
- margin: 20
- },
- cellSize: 40,
- top: 350,
- left: 460,
- range: '2017-04'
- }],
-
- series: [{
- type: 'graph',
- edgeSymbol: ['none', 'arrow'],
- coordinateSystem: 'calendar',
- links: links,
- symbolSize: 10,
- calendarIndex: 0,
- data: graphData
- }, {
- type: 'heatmap',
- coordinateSystem: 'calendar',
- data: getVirtulData(2017)
- }, {
- type: 'effectScatter',
- coordinateSystem: 'calendar',
- calendarIndex: 1,
- symbolSize: function (val) {
- return val[1] / 40;
- },
- data: getVirtulData(2017)
- }, {
- type: 'scatter',
- coordinateSystem: 'calendar',
- calendarIndex: 2,
- symbolSize: function (val) {
- return val[1] / 60;
- },
- data: getVirtulData(2017)
- }, {
- type: 'heatmap',
- coordinateSystem: 'calendar',
- calendarIndex: 3,
- data: getVirtulData(2017)
- }]
-};
diff --git a/public/data/calendar-effectscatter.js b/public/data/calendar-effectscatter.js
deleted file mode 100644
index df84192..0000000
--- a/public/data/calendar-effectscatter.js
+++ /dev/null
@@ -1,167 +0,0 @@
-/*
-title: Calendar Effectscatter
-category: calendar
-titleCN: 热力特效散点图
-difficulty:3
-*/
-
-function getVirtulData(year) {
- 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() * 10000)
- ]);
- }
- return data;
-}
-
-var data = getVirtulData(2016);
-
-option = {
- backgroundColor: '#404a59',
-
- title: {
- top: 30,
- text: '2016年某人每天的步数',
- subtext: '数据纯属虚构',
- left: 'center',
- textStyle: {
- color: '#fff'
- }
- },
- tooltip: {
- trigger: 'item'
- },
- legend: {
- top: '30',
- left: '100',
- data: ['步数', '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',
- textStyle: {
- 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',
- textStyle: {
- color: '#fff'
- }
- },
- itemStyle: {
- color: '#323c48',
- borderWidth: 1,
- borderColor: '#111'
- }
- }],
- series: [
- {
- name: '步数',
- type: 'scatter',
- coordinateSystem: 'calendar',
- data: data,
- symbolSize: function (val) {
- return val[1] / 500;
- },
- itemStyle: {
- color: '#ddb926'
- }
- },
- {
- name: '步数',
- 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'
- },
- hoverAnimation: true,
- 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'
- },
- hoverAnimation: true,
- itemStyle: {
- color: '#f4e925',
- shadowBlur: 10,
- shadowColor: '#333'
- },
- zlevel: 1
- }
- ]
-};
diff --git a/public/data/calendar-graph.js b/public/data/calendar-graph.js
deleted file mode 100644
index 7dd07ab..0000000
--- a/public/data/calendar-graph.js
+++ /dev/null
@@ -1,126 +0,0 @@
-/*
-title: Calendar Graph
-category: 'calendar, graph'
-titleCN: 日历关系图
-difficulty: 4
-*/
-
-var graphData = [
- [
- '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
- ]
-];
-
-var links = graphData.map(function (item, idx) {
- return {
- source: idx,
- target: idx + 1
- };
-});
-links.pop();
-
-function getVirtulData(year) {
- 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,
- textStyle: {
- 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)
- }]
-};
diff --git a/public/data/calendar-heatmap.js b/public/data/calendar-heatmap.js
deleted file mode 100644
index 4540da6..0000000
--- a/public/data/calendar-heatmap.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
-title: Calendar Heatmap
-category: 'calendar, heatmap'
-titleCN: 日历热力图
-difficulty: 1
-*/
-
-function getVirtulData(year) {
- 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() * 10000)
- ]);
- }
- return data;
-}
-
-option = {
- title: {
- top: 30,
- left: 'center',
- text: '2016年某人每天的步数'
- },
- 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)
- }
-};
diff --git a/public/data/calendar-horizontal.js b/public/data/calendar-horizontal.js
deleted file mode 100644
index c9d9015..0000000
--- a/public/data/calendar-horizontal.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/*
-title: Calendar Heatmap Horizontal
-category: calendar
-titleCN: 横向日历图
-shotWidth: 900
-difficulty: 2
-*/
-
-function getVirtulData(year) {
- 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: {
- position: 'top'
- },
- visualMap: {
- min: 0,
- max: 1000,
- calculable: true,
- orient: 'horizontal',
- left: 'center',
- top: 'top'
- },
-
- calendar: [{
- range: '2017',
- cellSize: ['auto', 20]
- },
- {
- top: 260,
- range: '2016',
- cellSize: ['auto', 20]
- },
- {
- top: 450,
- range: '2015',
- cellSize: ['auto', 20],
- right: 5
- }],
-
- series: [{
- type: 'heatmap',
- coordinateSystem: 'calendar',
- calendarIndex: 0,
- data: getVirtulData(2017)
- }, {
- type: 'heatmap',
- coordinateSystem: 'calendar',
- calendarIndex: 1,
- data: getVirtulData(2016)
- }, {
- type: 'heatmap',
- coordinateSystem: 'calendar',
- calendarIndex: 2,
- data: getVirtulData(2015)
- }]
-
-};
diff --git a/public/data/calendar-lunar.js b/public/data/calendar-lunar.js
deleted file mode 100644
index 16856cd..0000000
--- a/public/data/calendar-lunar.js
+++ /dev/null
@@ -1,468 +0,0 @@
-/*
-title: Calendar Lunar
-category: calendar
-titleCN: 农历日历图
-difficulty: 4
-*/
-
-var 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', '十四']
-];
-
-var heatmapData = [];
-var lunarData = [];
-for (var 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
- }]
-};
\ No newline at end of file
diff --git a/public/data/calendar-pie.js b/public/data/calendar-pie.js
deleted file mode 100644
index 6097b0c..0000000
--- a/public/data/calendar-pie.js
+++ /dev/null
@@ -1,116 +0,0 @@
-/*
-title: Calendar Pie
-category: 'calendar, pie'
-titleCN: 日历饼图
-difficulty: 6
-*/
-
-var cellSize = [80, 80];
-var pieRadius = 30;
-
-function getVirtulData() {
- var date = +echarts.number.parseDate('2017-02-01');
- var end = +echarts.number.parseDate('2017-03-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() * 10000)
- ]);
- }
- return data;
-}
-
-function getPieSeries(scatterData, chart) {
- 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, chart) {
- 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: ['工作', '娱乐', '睡觉'],
- bottom: 20
- },
- calendar: {
- top: 'middle',
- left: 'center',
- orient: 'vertical',
- cellSize: cellSize,
- yearLabel: {
- show: false,
- fontSize: 30
- },
- dayLabel: {
- margin: 20,
- firstDay: 1,
- nameMap: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
- },
- 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
- }]
-};
-
-var pieInitialized;
-setTimeout(function () {
- pieInitialized = true;
- myChart.setOption({
- series: getPieSeries(scatterData, myChart)
- });
-}, 10);
-
-app.onresize = function () {
- if (pieInitialized) {
- myChart.setOption({
- series: getPieSeriesUpdate(scatterData, myChart)
- });
- }
-};
\ No newline at end of file
diff --git a/public/data/calendar-simple.js b/public/data/calendar-simple.js
deleted file mode 100644
index 0d628bb..0000000
--- a/public/data/calendar-simple.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
-title: Simple Calendar
-titleCN: 基础日历图
-category: calendar
-difficulty: 0
-*/
-
-function getVirtulData(year) {
- 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)
- }
-};
diff --git a/public/data/calendar-vertical.js b/public/data/calendar-vertical.js
deleted file mode 100644
index 3b27d7a..0000000
--- a/public/data/calendar-vertical.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/*
-title: Calendar Heatmap Vertical
-category: 'calendar, heatmap'
-titleCN: 纵向日历图
-shotWidth: 900
-difficulty: 1
-*/
-
-function getVirtulData(year) {
- 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: {
- 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: 'vertical',
- left: '670',
- top: 'center'
- },
-
- calendar: [{
- orient: 'vertical',
- range: '2015'
- },
- {
- left: 300,
- orient: 'vertical',
- range: '2016'
- },
- {
- left: 520,
- cellSize: [20, 'auto'],
- bottom: 10,
- orient: 'vertical',
- range: '2017',
- dayLabel: {
- margin: 5
- }
- }],
-
- series: [{
- type: 'heatmap',
- coordinateSystem: 'calendar',
- calendarIndex: 0,
- data: getVirtulData(2015)
- }, {
- type: 'heatmap',
- coordinateSystem: 'calendar',
- calendarIndex: 1,
- data: getVirtulData(2016)
- }, {
- type: 'heatmap',
- coordinateSystem: 'calendar',
- calendarIndex: 2,
- data: getVirtulData(2017)
- }]
-};
diff --git a/public/data/candlestick-brush.js b/public/data/candlestick-brush.js
deleted file mode 100644
index 36c4da7..0000000
--- a/public/data/candlestick-brush.js
+++ /dev/null
@@ -1,264 +0,0 @@
-/*
-title: Candlestick Brush
-category: candlestick
-titleCN: 日历图刷选
-*/
-
-var upColor = '#00da3c';
-var downColor = '#ec0000';
-
-
-function splitData(rawData) {
- var categoryData = [];
- var values = [];
- var volumes = [];
- for (var 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]);
- }
-
- return {
- categoryData: categoryData,
- values: values,
- volumes: volumes
- };
-}
-
-function calculateMA(dayCount, data) {
- var result = [];
- for (var i = 0, len = data.values.length; i < len; i++) {
- if (i < dayCount) {
- result.push('-');
- continue;
- }
- var sum = 0;
- for (var j = 0; j < dayCount; j++) {
- sum += data.values[i - j][1];
- }
- result.push(+(sum / dayCount).toFixed(3));
- }
- return result;
-}
-
-$.get(ROOT_PATH + '/data/asset/data/stock-DJI.json', function (rawData) {
-
- var data = splitData(rawData);
-
- myChart.setOption(option = {
- animation: false,
- legend: {
- bottom: 10,
- left: 'center',
- data: ['Dow-Jones index', 'MA5', 'MA10', 'MA20', 'MA30']
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross'
- },
- borderWidth: 1,
- borderColor: '#ccc',
- padding: 10,
- textStyle: {
- color: '#000'
- },
- position: function (pos, params, el, elRect, size) {
- var obj = {top: 10};
- obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
- return obj;
- }
- // extraCssText: 'width: 170px'
- },
- axisPointer: {
- link: {xAxisIndex: 'all'},
- label: {
- backgroundColor: '#777'
- }
- },
- toolbox: {
- feature: {
- dataZoom: {
- yAxisIndex: false
- },
- brush: {
- type: ['lineX', 'clear']
- }
- }
- },
- brush: {
- xAxisIndex: 'all',
- brushLink: 'all',
- outOfBrush: {
- colorAlpha: 0.1
- }
- },
- visualMap: {
- show: false,
- seriesIndex: 5,
- dimension: 2,
- pieces: [{
- value: 1,
- color: downColor
- }, {
- value: -1,
- color: upColor
- }]
- },
- grid: [
- {
- left: '10%',
- right: '8%',
- height: '50%'
- },
- {
- left: '10%',
- right: '8%',
- top: '63%',
- height: '16%'
- }
- ],
- xAxis: [
- {
- type: 'category',
- data: data.categoryData,
- scale: true,
- boundaryGap: false,
- axisLine: {onZero: false},
- splitLine: {show: false},
- splitNumber: 20,
- min: 'dataMin',
- max: 'dataMax',
- axisPointer: {
- z: 100
- }
- },
- {
- type: 'category',
- gridIndex: 1,
- data: data.categoryData,
- 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: 98,
- end: 100
- },
- {
- show: true,
- xAxisIndex: [0, 1],
- type: 'slider',
- top: '85%',
- start: 98,
- end: 100
- }
- ],
- series: [
- {
- name: 'Dow-Jones index',
- type: 'candlestick',
- data: data.values,
- itemStyle: {
- color: upColor,
- color0: downColor,
- borderColor: null,
- borderColor0: null
- },
- tooltip: {
- formatter: function (param) {
- param = param[0];
- return [
- 'Date: ' + param.name + '<hr size=1 style="margin: 3px 0">',
- 'Open: ' + param.data[0] + '<br/>',
- 'Close: ' + param.data[1] + '<br/>',
- 'Lowest: ' + param.data[2] + '<br/>',
- 'Highest: ' + param.data[3] + '<br/>'
- ].join('');
- }
- }
- },
- {
- name: 'MA5',
- type: 'line',
- data: calculateMA(5, data),
- smooth: true,
- lineStyle: {
- opacity: 0.5
- }
- },
- {
- name: 'MA10',
- type: 'line',
- data: calculateMA(10, data),
- smooth: true,
- lineStyle: {
- opacity: 0.5
- }
- },
- {
- name: 'MA20',
- type: 'line',
- data: calculateMA(20, data),
- smooth: true,
- lineStyle: {
- opacity: 0.5
- }
- },
- {
- name: 'MA30',
- type: 'line',
- data: calculateMA(30, data),
- smooth: true,
- lineStyle: {
- opacity: 0.5
- }
- },
- {
- name: 'Volume',
- type: 'bar',
- xAxisIndex: 1,
- yAxisIndex: 1,
- data: data.volumes
- }
- ]
- }, true);
-
- myChart.dispatchAction({
- type: 'brush',
- areas: [
- {
- brushType: 'lineX',
- coordRange: ['2016-06-02', '2016-06-20'],
- xAxisIndex: 0
- }
- ]
- });
-});
\ No newline at end of file
diff --git a/public/data/candlestick-large.js b/public/data/candlestick-large.js
deleted file mode 100644
index b1c942f..0000000
--- a/public/data/candlestick-large.js
+++ /dev/null
@@ -1,208 +0,0 @@
-/*
-title: Large Scale Candlestick
-category: candlestick
-titleCN: 大数据量K线图
-difficulty: 3
-*/
-
-var upColor = '#ec0000';
-var upBorderColor = '#8A0000';
-var downColor = '#00da3c';
-var downBorderColor = '#008F28';
-
-var dataCount = 2e5;
-var data = generateOHLC(dataCount);
-
-var 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
- }
- }
- ]
-};
-
-function generateOHLC(count) {
- var data = [];
-
- var xValue = +new Date(2011, 0, 1);
- var minute = 60 * 1000;
- var baseValue = Math.random() * 12000;
- var boxVals = new Array(4);
- var dayRange = 12;
-
- for (var i = 0; i < count; i++) {
- baseValue = baseValue + Math.random() * 20 - 10;
-
- for (var j = 0; j < 4; j++) {
- boxVals[j] = (Math.random() - 0.5) * dayRange + baseValue;
- }
- boxVals.sort();
-
- var openIdx = Math.round(Math.random() * 3);
- var closeIdx = Math.round(Math.random() * 2);
- if (closeIdx === openIdx) {
- closeIdx++;
- }
- var 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, dataIndex, openVal, closeVal, closeDimIdx) {
- 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;
- }
-}
diff --git a/public/data/candlestick-sh-2015.js b/public/data/candlestick-sh-2015.js
deleted file mode 100644
index 7dec204..0000000
--- a/public/data/candlestick-sh-2015.js
+++ /dev/null
@@ -1,134 +0,0 @@
-/*
-title: 'ShangHai Index, 2015'
-category: candlestick
-titleCN: 2015 年上证指数
-*/
-
-var 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','2 [...]
-
-function calculateMA(dayCount, data) {
- 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;
-}
-
-
-var dates = rawData.map(function (item) {
- return item[0];
-});
-
-var data = rawData.map(function (item) {
- return [+item[1], +item[2], +item[5], +item[6]];
-});
-var 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: '日K',
- 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
- }
- }
- ]
-};
\ No newline at end of file
diff --git a/public/data/candlestick-sh.js b/public/data/candlestick-sh.js
deleted file mode 100644
index 3563bd4..0000000
--- a/public/data/candlestick-sh.js
+++ /dev/null
@@ -1,324 +0,0 @@
-/*
-title: ShangHai Index
-category: candlestick
-titleCN: 上证指数
-difficulty: 2
-*/
-
-var upColor = '#ec0000';
-var upBorderColor = '#8A0000';
-var downColor = '#00da3c';
-var downBorderColor = '#008F28';
-
-
-// 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
-var 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) {
- var categoryData = [];
- var 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) {
- 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: {
- normal: {
- formatter: function (param) {
- return param != null ? Math.round(param.value) : '';
- }
- }
- },
- data: [
- {
- name: 'XX标点',
- 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
- }
- },
-
- ]
-};
-
diff --git a/public/data/candlestick-simple.js b/public/data/candlestick-simple.js
deleted file mode 100644
index a5dbdff..0000000
--- a/public/data/candlestick-simple.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
-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: 'k',
- data: [
- [20, 34, 10,38],
- [40, 35, 30, 50],
- [31, 38, 33, 44],
- [38, 15, 5, 42]
- ]
- }]
-};
diff --git a/public/data/candlestick-touch.js b/public/data/candlestick-touch.js
deleted file mode 100644
index 70c338f..0000000
--- a/public/data/candlestick-touch.js
+++ /dev/null
@@ -1,245 +0,0 @@
-/*
-title: Axis Pointer Link and Touch
-category: candlestick
-titleCN: 触屏上的坐标轴指示器
-difficulty: 4
-*/
-
-
-var rawData = [["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","45864804","- [...]
-var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];
-var labelFont = 'bold 12px Sans-serif';
-
-function calculateMA(dayCount, data) {
- 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).toFixed(2));
- }
- return result;
-}
-
-
-var 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", "20 [...]
-var 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,1 [...]
-var 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,6969 [...]
-
-var dataMA5 = calculateMA(5, data);
-var dataMA10 = calculateMA(10, data);
-var dataMA20 = calculateMA(20, data);
-
-
-option = {
- animation: false,
- color: colorList,
- title: {
- left: 'center',
- text: '移动端 K线图'
- },
- 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) {
- var obj = {
- 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
- }
- }]
-};
diff --git a/public/data/circle-packing-with-d3.js b/public/data/circle-packing-with-d3.js
deleted file mode 100644
index 4cedb94..0000000
--- a/public/data/circle-packing-with-d3.js
+++ /dev/null
@@ -1,219 +0,0 @@
-/*
-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) {
-
- var dataWrap = prepareData(rawData);
-
- initChart(dataWrap.seriesData, dataWrap.maxDepth);
-}
-
-function prepareData(rawData) {
- var seriesData = [];
- var maxDepth = 0;
-
- function convert(source, basePath, depth) {
- 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, maxDepth) {
- 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;
- });
- }
-
- function renderItem(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)'
- }
- }
- };
- }
-
- var 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(option);
-
- myChart.on('click', { seriesIndex: 0 }, function (params) {
- drillDown(params.data.id);
- });
-
- function drillDown(targetNodeId) {
- 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({
- dataset: {
- source: seriesData
- }
- });
- }
-
- // Reset: click on the blank area.
- myChart.getZr().on('click', function (event) {
- if (!event.target) {
- drillDown();
- }
- });
-}
diff --git a/public/data/confidence-band.js b/public/data/confidence-band.js
deleted file mode 100644
index 1cf5bb7..0000000
--- a/public/data/confidence-band.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/*
-title: Confidence Band
-category: line
-titleCN: Confidence Band
-difficulty: 4
-*/
-
-myChart.showLoading();
-$.get(ROOT_PATH + '/data/asset/data/confidence-band.json', function (data) {
- myChart.hideLoading();
-
- var base = -data.reduce(function (min, val) {
- return Math.floor(Math.min(min, val.l));
- }, Infinity);
- myChart.setOption(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) {
- 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;
- }),
- hoverAnimation: false,
- symbolSize: 6,
- itemStyle: {
- color: '#333'
- },
- showSymbol: false
- }]
- });
-});
diff --git a/public/data/covid-america.js b/public/data/covid-america.js
deleted file mode 100644
index 27d2049..0000000
--- a/public/data/covid-america.js
+++ /dev/null
@@ -1,404 +0,0 @@
-// https://www.makeapie.com/editor.html?c=x02yMqYpqC
-// 作品源于社区作者: 电***n
-
-// Do not prepared to expose.
-
-
-var _timelineDuration = 500;
-var _barDurationUpdate = 490;
-var _axisDurationUpdate = null;
-// var _timelineDuration = 5500;
-// var _barDurationUpdate = 5490;
-// var _axisDurationUpdate = 5000;
-
-$.get(ROOT_PATH + '/data/asset/geo/USA.json', function (usaJson) {
-
- echarts.registerMap('USA', usaJson, {
- 'Alaska': {
- left: -123,
- top: 20,
- width: 15
- },
- 'Hawaii': {
- left: -95,
- top: 20,
- width: 5
- },
- 'Puerto Rico': {
- left: -85,
- top: 22,
- width: 2
- }
- });
-
- run();
-
-});
-
-
-function run() {
-
- var days = ['1/22/20', '1/23/20', '1/24/20', '1/25/20', '1/26/20', '1/27/20', '1/28/20', '1/29/20', '1/30/20', '1/31/20', '2/1/20', '2/2/20', '2/3/20', '2/4/20', '2/5/20', '2/6/20', '2/7/20', '2/8/20', '2/9/20', '2/10/20', '2/11/20', '2/12/20', '2/13/20', '2/14/20', '2/15/20', '2/16/20', '2/17/20', '2/18/20', '2/19/20', '2/20/20', '2/21/20', '2/22/20', '2/23/20', '2/24/20', '2/25/20', '2/26/20', '2/27/20', '2/28/20', '2/29/20', '3/1/20', '3/2/20', '3/3/20', '3/4/20', '3/5/20', '3/6/2 [...]
-
- var _country = ['Alabama', 'Alaska', 'American Samoa', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Diamond Princess', 'District of Columbia', 'Florida', 'Georgia', 'Grand Princess', 'Guam', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', [...]
-
- var rawData = [
- [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, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 10, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 10, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 10, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 10, 0, 0, 0, 36, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 10, 0, 0, 0, 36, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 10, 0, 0, 0, 42, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 11, 0, 0, 0, 42, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 11, 0, 0, 0, 44, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 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, 1, 0, 0, 0],
- [0, 0, 0, 1, 0, 12, 0, 0, 0, 44, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 0, 0, 0],
- [0, 0, 0, 1, 0, 12, 0, 0, 0, 44, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 11, 0, 0, 0],
- [0, 0, 0, 1, 0, 21, 0, 0, 0, 45, 0, 1, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 3, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 18, 0, 0, 0],
- [0, 0, 0, 1, 0, 25, 0, 0, 0, 45, 0, 2, 2, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 2, 1, 0, 0, 0, 0, 3, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 27, 0, 0, 0],
- [0, 0, 0, 1, 0, 35, 0, 0, 0, 45, 0, 2, 2, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 11, 1, 0, 0, 0, 0, 3, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 39, 0, 0, 0],
- [0, 0, 0, 1, 0, 51, 0, 0, 0, 45, 0, 3, 2, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 1, 2, 2, 0, 23, 1, 0, 0, 0, 0, 3, 0, 0, 2, 0, 0, 1, 3, 0, 0, 0, 0, 70, 0, 0, 0],
- [0, 0, 0, 2, 0, 59, 3, 0, 0, 45, 0, 3, 3, 0, 0, 0, 0, 5, 1, 0, 0, 1, 0, 0, 3, 6, 0, 1, 0, 0, 0, 1, 2, 2, 2, 0, 31, 2, 0, 0, 0, 0, 3, 2, 0, 2, 0, 0, 1, 4, 0, 0, 0, 0, 78, 0, 0, 0],
- [0, 0, 0, 4, 0, 81, 7, 0, 0, 45, 0, 7, 5, 21, 0, 1, 0, 6, 1, 0, 0, 1, 0, 0, 3, 6, 0, 1, 0, 0, 0, 1, 2, 2, 4, 0, 76, 2, 0, 0, 0, 1, 6, 2, 0, 3, 2, 0, 1, 8, 1, 0, 0, 0, 102, 0, 0, 0],
- [0, 0, 0, 4, 0, 95, 7, 0, 0, 45, 2, 10, 5, 21, 0, 1, 0, 7, 2, 0, 1, 1, 0, 0, 5, 22, 0, 1, 0, 1, 0, 1, 4, 4, 5, 0, 106, 2, 0, 0, 0, 1, 14, 6, 0, 3, 2, 0, 3, 11, 1, 1, 0, 2, 122, 0, 0, 0],
- [0, 0, 0, 4, 0, 101, 7, 0, 0, 45, 2, 13, 10, 21, 0, 1, 0, 7, 3, 3, 1, 4, 1, 0, 5, 22, 0, 2, 0, 1, 0, 3, 4, 4, 5, 0, 142, 2, 0, 0, 0, 1, 14, 7, 0, 3, 3, 0, 3, 13, 1, 1, 0, 2, 122, 0, 0, 0],
- [0, 0, 0, 6, 0, 144, 15, 2, 0, 46, 5, 15, 17, 21, 0, 2, 0, 12, 6, 8, 1, 6, 1, 0, 8, 92, 0, 3, 0, 1, 0, 3, 4, 4, 15, 0, 173, 7, 0, 0, 3, 2, 15, 12, 0, 3, 7, 0, 7, 13, 2, 1, 0, 7, 267, 0, 3, 0],
- [0, 0, 0, 9, 1, 177, 34, 3, 1, 46, 10, 28, 23, 21, 0, 2, 0, 25, 11, 13, 1, 8, 6, 0, 9, 95, 2, 5, 0, 1, 1, 5, 7, 5, 23, 3, 220, 7, 0, 0, 4, 2, 19, 16, 0, 5, 10, 8, 9, 21, 3, 1, 0, 9, 366, 0, 6, 0],
- [0, 0, 0, 9, 6, 221, 45, 5, 1, 46, 10, 35, 31, 21, 0, 2, 0, 32, 13, 16, 1, 10, 19, 0, 12, 108, 2, 9, 1, 1, 1, 10, 14, 6, 29, 5, 328, 15, 1, 0, 5, 2, 24, 22, 0, 5, 12, 8, 18, 27, 5, 2, 0, 17, 442, 0, 8, 1],
- [5, 1, 0, 9, 6, 282, 49, 11, 4, 46, 10, 50, 42, 21, 0, 2, 1, 46, 13, 17, 5, 14, 36, 1, 18, 123, 16, 14, 1, 2, 1, 13, 17, 6, 29, 10, 421, 17, 1, 0, 13, 2, 30, 41, 0, 14, 13, 8, 26, 43, 9, 2, 0, 30, 568, 0, 19, 1],
- [6, 1, 0, 12, 12, 340, 101, 22, 6, 46, 10, 76, 66, 21, 0, 4, 2, 64, 16, 17, 8, 14, 77, 3, 26, 138, 25, 21, 6, 4, 5, 14, 21, 7, 69, 10, 525, 24, 1, 0, 26, 4, 32, 47, 3, 20, 19, 9, 32, 57, 10, 5, 1, 41, 572, 0, 27, 2],
- [12, 1, 0, 13, 16, 426, 131, 24, 7, 46, 16, 115, 99, 21, 3, 6, 5, 93, 20, 18, 8, 20, 91, 12, 32, 164, 33, 35, 10, 5, 7, 17, 24, 13, 98, 13, 732, 33, 1, 0, 37, 7, 36, 66, 5, 20, 28, 9, 39, 72, 28, 8, 1, 45, 643, 0, 32, 3],
- [29, 1, 0, 18, 22, 557, 160, 30, 8, 47, 22, 155, 121, 20, 3, 7, 5, 105, 25, 23, 11, 21, 136, 17, 41, 197, 53, 54, 13, 6, 7, 18, 45, 17, 178, 17, 967, 38, 1, 0, 50, 10, 39, 77, 5, 21, 33, 10, 52, 85, 39, 12, 1, 49, 904, 0, 47, 3],
- [39, 3, 0, 20, 22, 698, 160, 68, 16, 47, 22, 216, 146, 21, 3, 10, 8, 161, 30, 23, 18, 26, 196, 32, 60, 218, 65, 60, 21, 11, 9, 21, 56, 26, 267, 23, 1706, 64, 3, 0, 67, 19, 66, 112, 5, 23, 47, 11, 74, 110, 51, 12, 2, 67, 1076, 1, 72, 11],
- [46, 6, 0, 27, 33, 751, 184, 68, 19, 47, 31, 314, 199, 21, 5, 14, 9, 162, 39, 29, 18, 27, 257, 42, 85, 218, 83, 77, 34, 18, 11, 24, 55, 26, 267, 23, 2495, 70, 6, 0, 86, 19, 68, 152, 5, 33, 47, 11, 79, 173, 51, 18, 2, 77, 1014, 1, 92, 15],
- [78, 9, 0, 45, 62, 952, 277, 159, 30, 47, 40, 417, 287, 22, 12, 16, 11, 422, 60, 44, 34, 37, 392, 52, 107, 328, 334, 89, 50, 31, 11, 29, 95, 44, 742, 35, 5365, 123, 18, 0, 119, 44, 88, 206, 5, 44, 81, 11, 154, 260, 80, 22, 3, 99, 1376, 2, 159, 18],
- [83, 12, 0, 78, 96, 1177, 363, 194, 38, 49, 71, 563, 420, 23, 14, 26, 23, 585, 86, 45, 44, 47, 538, 56, 149, 413, 552, 115, 80, 53, 15, 37, 114, 44, 890, 43, 8310, 172, 19, 0, 173, 49, 114, 303, 14, 54, 126, 14, 233, 394, 78, 29, 3, 122, 1524, 7, 207, 19],
- [131, 15, 0, 118, 122, 1364, 390, 194, 45, 49, 77, 659, 507, 23, 15, 37, 36, 753, 128, 68, 57, 87, 585, 70, 193, 525, 788, 138, 140, 74, 21, 38, 161, 55, 1327, 43, 11710, 253, 28, 0, 248, 53, 114, 396, 21, 66, 171, 14, 371, 581, 136, 29, 3, 156, 1793, 8, 282, 23],
- [157, 20, 0, 152, 165, 1646, 591, 327, 56, 49, 204, 1004, 621, 30, 27, 53, 42, 1049, 204, 90, 65, 103, 837, 89, 244, 646, 1035, 167, 207, 87, 34, 51, 190, 74, 1914, 57, 15800, 305, 28, 0, 356, 67, 161, 509, 23, 83, 196, 21, 505, 643, 162, 52, 6, 220, 1997, 16, 381, 26],
- [196, 30, 0, 235, 192, 2108, 704, 415, 68, 49, 120, 1227, 772, 28, 29, 56, 68, 1285, 270, 105, 84, 123, 1172, 107, 290, 777, 1329, 234, 249, 187, 34, 51, 245, 101, 2844, 83, 20884, 353, 30, 0, 443, 81, 191, 698, 31, 106, 298, 28, 614, 758, 257, 75, 7, 254, 2221, 16, 425, 26],
- [242, 34, 0, 326, 219, 2538, 723, 618, 104, 49, 141, 1412, 1026, 28, 32, 90, 81, 1537, 368, 124, 100, 162, 1388, 118, 349, 1159, 1793, 261, 320, 257, 51, 66, 278, 101, 3675, 100, 25681, 495, 36, 0, 567, 106, 210, 946, 39, 124, 342, 30, 772, 955, 298, 95, 17, 293, 2328, 22, 481, 29],
- [381, 41, 0, 401, 280, 2998, 1021, 875, 119, 49, 187, 1682, 1247, 28, 37, 91, 91, 1865, 477, 146, 134, 197, 1795, 142, 425, 1838, 2296, 286, 377, 354, 65, 71, 323, 108, 4402, 113, 30841, 590, 45, 0, 704, 164, 266, 1260, 51, 132, 424, 41, 916, 1229, 340, 125, 17, 396, 2591, 39, 621, 44],
- [517, 56, 0, 508, 335, 3899, 1430, 1012, 130, 49, 231, 2357, 1525, 28, 45, 95, 146, 2538, 645, 179, 172, 247, 2304, 155, 583, 2417, 2845, 344, 485, 520, 90, 74, 420, 137, 6876, 113, 37877, 738, 51, 0, 868, 248, 316, 1795, 64, 165, 424, 46, 1097, 1563, 396, 158, 17, 466, 3207, 52, 728, 53],
- [587, 58, 0, 665, 381, 4657, 1433, 1291, 163, 49, 271, 2900, 2000, 28, 51, 106, 205, 3024, 979, 235, 206, 301, 2744, 168, 775, 3240, 3634, 396, 579, 666, 109, 82, 536, 158, 8825, 136, 44876, 887, 68, 0, 1137, 322, 416, 2345, 79, 203, 542, 58, 1318, 1937, 472, 184, 19, 607, 3477, 76, 926, 70],
- [694, 85, 0, 773, 409, 5095, 1740, 1524, 214, 49, 304, 3763, 2366, 103, 55, 149, 234, 3491, 1233, 298, 266, 380, 3315, 211, 995, 4257, 4650, 441, 663, 836, 129, 96, 626, 187, 11124, 208, 52410, 1020, 94, 0, 1406, 377, 479, 2845, 100, 239, 660, 68, 1511, 2455, 602, 211, 22, 740, 4030, 96, 1055, 82],
- [825, 102, 0, 919, 426, 5852, 2307, 1993, 232, 49, 342, 4246, 2651, 103, 56, 149, 281, 4596, 1513, 336, 330, 438, 3540, 253, 1239, 4955, 5488, 503, 759, 915, 154, 108, 920, 214, 13386, 237, 59648, 1191, 98, 0, 1653, 429, 548, 3432, 127, 294, 774, 90, 1720, 2792, 720, 235, 23, 890, 4465, 113, 1164, 86],
- [899, 114, 0, 1157, 473, 7138, 2311, 2571, 264, 49, 401, 5473, 2808, 103, 58, 175, 340, 5056, 1786, 424, 372, 479, 4025, 275, 1413, 5752, 6498, 576, 847, 1051, 171, 145, 1012, 314, 16636, 237, 66663, 1313, 109, 0, 1933, 481, 606, 4155, 174, 408, 925, 101, 1917, 3147, 798, 256, 30, 1020, 4923, 145, 1230, 94],
- [987, 119, 0, 1289, 523, 8210, 2966, 3128, 319, 49, 495, 6741, 3929, 103, 69, 204, 515, 5994, 2158, 497, 434, 628, 5237, 303, 1660, 6620, 7615, 629, 937, 1357, 198, 172, 1114, 357, 18696, 315, 75833, 1535, 122, 2, 2199, 568, 690, 4963, 239, 488, 1083, 108, 2391, 3809, 888, 293, 30, 1249, 5432, 162, 1412, 109],
- [1060, 132, 0, 1530, 584, 9399, 2982, 3557, 368, 49, 586, 6956, 4638, 103, 77, 224, 566, 6980, 2564, 547, 485, 632, 6424, 303, 1986, 7738, 9315, 689, 1073, 1613, 208, 210, 1279, 367, 22255, 340, 83948, 1675, 142, 6, 2547, 721, 736, 6009, 286, 566, 1293, 129, 2933, 4355, 888, 321, 30, 1483, 5608, 191, 1556, 130],
- [1233, 143, 0, 1715, 643, 10773, 3342, 3824, 393, 49, 653, 9008, 5348, 103, 82, 256, 776, 7695, 3038, 614, 553, 770, 9149, 376, 2331, 8966, 10791, 742, 1177, 1857, 241, 246, 1463, 316, 25590, 388, 92506, 1977, 159, 6, 2901, 881, 826, 7268, 316, 645, 1554, 165, 3013, 5069, 1092, 338, 30, 1706, 6389, 216, 1748, 150],
- [1495, 157, 0, 1937, 704, 12004, 3742, 4914, 450, 49, 757, 10268, 5831, 103, 84, 319, 891, 8904, 3437, 699, 629, 770, 10297, 432, 2758, 10402, 12744, 788, 1358, 1864, 243, 279, 1514, 479, 29895, 534, 102987, 2251, 173, 8, 3312, 990, 899, 8570, 316, 711, 1700, 187, 3067, 5734, 1255, 389, 37, 2012, 6846, 237, 2012, 162],
- [1614, 171, 0, 2187, 743, 12837, 4188, 5276, 593, 49, 902, 11537, 6160, 103, 93, 351, 1022, 10357, 3953, 787, 698, 917, 12496, 456, 3125, 11736, 14225, 865, 1455, 2310, 265, 321, 1742, 540, 34124, 534, 113833, 2486, 186, 8, 3739, 1161, 899, 10444, 452, 806, 1917, 212, 3322, 6567, 1435, 461, 40, 2407, 7247, 282, 2030, 187],
- [1765, 185, 0, 2486, 837, 15034, 4950, 5675, 673, 49, 1002, 12350, 6647, 103, 112, 371, 1078, 11259, 4411, 869, 751, 955, 13010, 470, 3617, 12500, 15718, 935, 1638, 2347, 286, 364, 1855, 621, 37505, 670, 123160, 2649, 207, 8, 4043, 1254, 1068, 11589, 475, 922, 2049, 240, 3633, 7209, 1608, 512, 42, 2640, 7825, 324, 2320, 197],
- [1952, 190, 0, 2732, 875, 16019, 5183, 6906, 783, 49, 1097, 13324, 7314, 103, 113, 387, 1101, 12262, 4956, 946, 849, 955, 14867, 499, 4045, 13837, 17221, 986, 1738, 2736, 299, 417, 1953, 715, 41090, 757, 131815, 2962, 225, 8, 4453, 1329, 1068, 13127, 513, 1082, 2232, 288, 3802, 8043, 1685, 543, 43, 2878, 8311, 345, 2449, 210],
- [2169, 213, 0, 2870, 946, 17351, 5429, 7781, 928, 49, 1211, 14545, 8822, 103, 121, 410, 1170, 12271, 5510, 1046, 912, 1149, 16284, 519, 4371, 15202, 18970, 1069, 1915, 3130, 319, 447, 2124, 715, 44416, 876, 139875, 3299, 237, 8, 4782, 1474, 1132, 14853, 573, 1229, 2417, 320, 4139, 8925, 1746, 575, 43, 3335, 8692, 412, 2578, 216],
- [2328, 226, 0, 3036, 1000, 18897, 5655, 7781, 1116, 49, 1440, 15456, 9901, 103, 121, 410, 1210, 15078, 5943, 1145, 1046, 1149, 17030, 537, 5529, 16790, 20346, 1154, 2003, 3209, 332, 519, 2259, 747, 47437, 902, 151061, 3499, 251, 11, 5148, 1526, 1181, 16631, 620, 1450, 2417, 393, 4363, 9777, 1855, 605, 45, 3645, 9276, 483, 2710, 221],
- [2703, 235, 0, 3018, 1119, 19710, 5655, 9784, 1209, 49, 1523, 16364, 10566, 103, 128, 442, 1232, 15079, 6351, 1270, 1116, 1341, 18283, 560, 6185, 18941, 21504, 1240, 2260, 3432, 354, 568, 2456, 819, 51027, 865, 161779, 3736, 269, 11, 5512, 1686, 1321, 18300, 683, 1727, 2793, 447, 4634, 11208, 1856, 628, 45, 4042, 9639, 514, 2886, 230],
- [2947, 246, 0, 3112, 1171, 21081, 6202, 10538, 1326, 49, 1660, 17531, 11485, 103, 130, 442, 1354, 17887, 6907, 1388, 1117, 1693, 19253, 586, 6968, 20974, 22434, 1336, 2469, 3897, 365, 635, 2722, 819, 54588, 1081, 172348, 3965, 278, 11, 5878, 1794, 1322, 20051, 725, 1727, 3067, 536, 4891, 12105, 2103, 679, 50, 4509, 10119, 574, 3068, 239],
- [3217, 257, 0, 3393, 1228, 21706, 6513, 11510, 1479, 49, 1778, 18494, 12159, 103, 133, 465, 1396, 19180, 7435, 1510, 1275, 1693, 20014, 616, 7694, 22860, 23605, 1427, 2642, 4108, 377, 699, 2702, 885, 58151, 1091, 181026, 4354, 293, 11, 6250, 1868, 1371, 21719, 788, 2349, 3211, 626, 5132, 13023, 2207, 711, 51, 5077, 10434, 577, 3213, 261],
- [3563, 272, 0, 3542, 1280, 22795, 7307, 12035, 1625, 49, 1875, 19895, 12452, 103, 133, 499, 1407, 20852, 7928, 1587, 1344, 1963, 20595, 633, 8225, 25475, 24244, 1621, 2781, 4269, 387, 791, 2836, 929, 61850, 1245, 189033, 4570, 308, 11, 6604, 1970, 1527, 22938, 897, 2665, 3320, 730, 5508, 13677, 2303, 727, 51, 5274, 10609, 593, 3341, 270],
- [3734, 277, 0, 3705, 1410, 23931, 7691, 13381, 1758, 49, 1955, 21019, 13315, 103, 133, 504, 1426, 22025, 8359, 1710, 1390, 2018, 21016, 698, 8936, 26867, 25635, 1621, 2942, 4515, 394, 814, 2990, 985, 64584, 1262, 195749, 4886, 331, 11, 6975, 2069, 1584, 24292, 903, 2665, 3391, 868, 5610, 14275, 2363, 748, 51, 5747, 10635, 611, 3428, 275],
- [3953, 285, 0, 3809, 1498, 25356, 7950, 13989, 1926, 49, 2058, 21628, 14578, 103, 133, 511, 1464, 23248, 8527, 1899, 1441, 2048, 21518, 735, 9472, 28164, 27001, 1695, 3087, 4746, 399, 897, 3134, 922, 68824, 1345, 203020, 5113, 341, 11, 7285, 2184, 1633, 25465, 923, 3251, 3553, 988, 5827, 15006, 2417, 752, 51, 6182, 10799, 640, 3555, 282],
- [4075, 293, 0, 3964, 1569, 26686, 7956, 14755, 2014, 49, 2197, 22511, 14987, 103, 135, 524, 1473, 24593, 8960, 1995, 1504, 2210, 21951, 770, 10032, 29918, 28059, 1809, 3360, 4791, 404, 901, 3211, 1139, 71030, 1484, 214454, 5340, 365, 13, 7794, 2263, 1663, 26753, 974, 3251, 3656, 1168, 5827, 15907, 2548, 759, 51, 6500, 10942, 702, 3721, 287],
- [4345, 300, 0, 4237, 1620, 27677, 8286, 15884, 2070, 49, 2350, 23343, 15669, 103, 135, 530, 1587, 25734, 9542, 2141, 1615, 2435, 22532, 796, 10784, 32181, 28809, 1809, 3624, 5174, 415, 952, 3214, 1139, 75317, 1484, 223691, 5639, 393, 13, 8414, 2357, 1736, 28258, 1043, 3529, 3931, 1311, 6375, 16876, 2683, 774, 51, 6889, 11057, 728, 3875, 296],
- [4571, 309, 0, 4511, 1695, 29157, 8691, 16809, 2317, 49, 2476, 24759, 17194, 103, 136, 541, 1609, 27578, 10154, 2332, 1730, 2522, 23118, 827, 11572, 34402, 30023, 2070, 3793, 5371, 422, 1066, 3524, 1287, 78467, 1597, 230597, 6045, 393, 13, 9107, 2465, 1785, 29888, 1068, 4177, 4099, 1411, 6263, 17849, 2793, 779, 51, 7491, 11517, 775, 4053, 305],
- [4712, 314, 0, 4724, 1744, 30491, 9047, 17550, 2538, 49, 2666, 25492, 17669, 103, 136, 574, 1655, 29160, 10641, 2513, 1821, 2707, 23580, 847, 12326, 36372, 30791, 2209, 3974, 5579, 426, 1249, 3626, 1342, 81420, 1798, 241712, 6328, 528, 14, 10222, 2465, 1844, 31652, 1118, 4491, 4248, 1542, 6589, 18704, 2917, 803, 53, 8053, 11776, 785, 4199, 309],
- [4888, 319, 0, 4933, 1781, 31431, 9730, 17962, 2538, 49, 2793, 26314, 18301, 103, 136, 580, 1668, 30357, 11211, 2902, 1905, 2960, 23928, 867, 12847, 38077, 31424, 2356, 4274, 5743, 433, 1474, 3728, 1390, 85301, 1845, 247815, 6601, 585, 14, 11602, 2567, 1910, 32902, 1213, 4706, 4377, 1635, 7070, 19260, 3069, 813, 53, 8542, 12255, 890, 4346, 313],
- [5079, 321, 0, 5068, 1973, 33686, 9730, 19815, 2745, 49, 2927, 27059, 19407, 103, 136, 584, 1672, 31513, 11688, 3159, 2048, 3050, 24523, 875, 13684, 38077, 32000, 2470, 4512, 5890, 433, 1648, 3830, 1447, 88722, 1971, 253060, 6895, 627, 14, 12919, 2680, 1957, 33914, 1252, 5090, 4446, 1685, 7238, 19751, 3213, 816, 53, 8990, 12114, 902, 4499, 317],
- [5317, 329, 0, 5256, 1990, 35465, 10473, 20360, 2931, 49, 3098, 27869, 19881, 103, 136, 586, 1736, 33059, 12097, 3641, 2164, 3204, 24854, 888, 14193, 41199, 32667, 2567, 4716, 6066, 437, 1685, 3937, 1490, 92387, 1971, 258361, 7134, 644, 14, 13725, 2807, 2004, 35249, 1298, 5500, 4439, 1755, 7394, 20574, 3297, 818, 53, 9630, 12392, 908, 4625, 443],
- [5593, 335, 0, 5473, 2276, 37344, 10891, 22469, 3200, 49, 3206, 28309, 21214, 103, 136, 592, 1766, 35107, 12438, 3748, 2331, 3378, 25258, 907, 14775, 42944, 33966, 2722, 4894, 6277, 439, 1813, 4081, 1588, 95914, 2210, 263292, 7495, 679, 14, 14117, 2894, 2059, 36082, 1252, 5841, 4761, 1858, 7394, 21321, 3445, 823, 54, 10266, 12596, 939, 4845, 447],
- [5832, 337, 0, 5772, 2599, 39561, 11278, 23100, 3308, 49, 3361, 29648, 21883, 103, 139, 596, 1836, 36937, 13039, 3924, 2721, 3479, 25739, 937, 15737, 46023, 35296, 2942, 5153, 6506, 442, 2202, 4208, 1670, 100025, 2379, 263460, 7820, 709, 14, 14694, 3017, 2127, 38379, 1416, 6256, 4917, 1956, 8266, 22650, 3612, 825, 54, 10998, 12753, 981, 5052, 453],
- [6026, 339, 0, 6045, 2810, 41355, 12256, 23936, 3442, 49, 3528, 30533, 22491, 103, 141, 601, 1870, 39658, 13681, 4445, 2959, 3779, 26140, 965, 16616, 50969, 36641, 3185, 5434, 6788, 444, 2424, 4398, 1720, 102196, 2521, 271590, 8290, 748, 14, 15169, 3121, 2177, 40208, 1276, 6699, 5070, 2040, 8728, 23642, 3782, 827, 54, 11594, 12977, 1010, 5356, 473],
- [6026, 339, 0, 6286, 2911, 42368, 12968, 24583, 3576, 49, 3699, 30839, 23222, 103, 141, 605, 1887, 41777, 14399, 5092, 3135, 3915, 26512, 965, 17766, 53348, 37074, 3446, 5718, 6935, 445, 2719, 4539, 1797, 105498, 2660, 282143, 8768, 803, 14, 15587, 3194, 2253, 41153, 1307, 7129, 5253, 2147, 9189, 24153, 3948, 843, 55, 12366, 13319, 1010, 5687, 491],
- [6421, 340, 0, 6534, 3001, 43558, 13441, 25269, 4034, 49, 3841, 31532, 23486, 103, 141, 606, 1897, 43903, 15012, 5476, 3277, 4085, 26773, 1015, 18581, 54938, 37778, 3602, 5911, 7120, 448, 3028, 4734, 1864, 109038, 2726, 288045, 8997, 867, 14, 15972, 3254, 2311, 42616, 1371, 7439, 5498, 2212, 9667, 24967, 4123, 851, 57, 12970, 13521, 1055, 5912, 502],
- [6539, 345, 0, 6725, 3069, 44966, 13879, 25997, 4162, 49, 3892, 32138, 24302, 103, 141, 607, 1897, 45883, 15961, 5868, 3473, 4156, 27068, 1023, 19487, 56462, 38210, 3811, 6094, 7305, 449, 3358, 4700, 1938, 111188, 2825, 291996, 9428, 942, 14, 16325, 3281, 2354, 43558, 1389, 7708, 5613, 2244, 9918, 25321, 4236, 855, 57, 13538, 13686, 1063, 6081, 520],
- [6750, 351, 0, 6955, 3127, 46164, 14316, 26312, 4575, 49, 3994, 32848, 24922, 103, 141, 609, 1952, 48102, 16588, 6376, 3652, 4375, 27286, 1040, 20113, 58302, 39262, 4181, 6342, 7450, 451, 3517, 4821, 2010, 113856, 2974, 295106, 9755, 991, 14, 16769, 3410, 2385, 45137, 1400, 7927, 5735, 2313, 10052, 26357, 4345, 862, 57, 14339, 13842, 1095, 6289, 536],
- [6912, 355, 0, 7209, 3193, 48747, 14758, 26767, 4655, 49, 4106, 33193, 25775, 103, 141, 613, 1952, 50358, 17182, 6843, 3839, 4537, 27660, 1056, 20849, 60265, 40399, 4644, 6569, 7660, 451, 3851, 4934, 2058, 116365, 3213, 299691, 10180, 1033, 14, 17303, 3473, 2446, 46327, 1433, 8247, 5882, 2373, 10366, 27257, 4497, 862, 57, 14962, 14070, 1110, 6520, 545],
- [7088, 355, 0, 7655, 3281, 50130, 15284, 27700, 4734, 49, 4323, 33690, 26264, 103, 145, 618, 1984, 52918, 17835, 7145, 4413, 4708, 28001, 1095, 21742, 62205, 41379, 5136, 6815, 7818, 453, 4281, 5053, 2146, 118652, 3411, 304372, 10754, 1067, 14, 18027, 3618, 2510, 47971, 1539, 8621, 6095, 2449, 10735, 28727, 4672, 866, 66, 15847, 14327, 1125, 6854, 559],
- [7294, 364, 0, 7969, 3337, 52026, 15793, 28764, 4918, 49, 4658, 34728, 27489, 103, 145, 619, 2015, 56055, 18630, 7884, 4634, 4882, 28711, 1123, 23472, 64311, 42356, 5730, 7212, 8067, 453, 5008, 5248, 2310, 121190, 3513, 308314, 11070, 1107, 14, 18743, 3748, 2579, 49579, 1575, 8962, 6258, 2525, 11891, 29692, 4828, 879, 66, 16902, 14637, 1152, 7314, 566],
- [7611, 365, 0, 8364, 3372, 53347, 16225, 29287, 5038, 49, 4797, 35463, 28331, 103, 145, 620, 2061, 58505, 19295, 8643, 4885, 4879, 29140, 1153, 24473, 66263, 43207, 6232, 7441, 8356, 455, 5317, 5389, 2429, 123717, 3732, 312977, 11588, 1153, 14, 19335, 3851, 2635, 50494, 1757, 9289, 6489, 2588, 12661, 30917, 4985, 886, 66, 17738, 15003, 1185, 7660, 579],
- [7888, 368, 0, 8640, 3437, 54903, 16635, 29287, 5208, 49, 5016, 36078, 28665, 103, 145, 620, 2061, 61499, 19933, 9175, 5156, 5130, 29340, 1185, 25462, 68087, 43801, 6663, 7550, 8618, 455, 5661, 5472, 2518, 126744, 3850, 316415, 11770, 1191, 14, 19914, 3972, 2680, 51225, 1808, 9477, 6626, 2631, 13177, 31998, 5175, 897, 66, 18672, 15185, 1195, 7964, 586],
- [8112, 370, 0, 8924, 3491, 55884, 16918, 29973, 5288, 49, 5170, 36897, 29451, 103, 145, 621, 2106, 63777, 20507, 9703, 5383, 5245, 29673, 1205, 26408, 69087, 43990, 7234, 7877, 8946, 457, 6037, 5630, 2588, 128269, 4031, 318953, 11971, 1225, 14, 20474, 4044, 2759, 52816, 1843, 9652, 6757, 2668, 13571, 32783, 5317, 902, 66, 19493, 15462, 1224, 8236, 596],
- [8437, 371, 0, 9305, 3525, 58456, 17367, 30621, 5371, 49, 5322, 37439, 29998, 103, 145, 625, 2127, 65889, 21033, 10111, 5648, 5822, 29996, 1226, 27117, 70271, 44451, 7851, 8207, 9121, 456, 6373, 5660, 2636, 130593, 4138, 321192, 12510, 1266, 14, 20969, 4127, 2839, 53864, 1924, 9933, 6841, 2721, 13690, 33912, 5449, 907, 66, 20257, 15594, 1246, 8566, 604],
- [8691, 372, 0, 9707, 3611, 60616, 17832, 30995, 5778, 49, 5461, 38002, 30743, 103, 149, 626, 2158, 68232, 21870, 10404, 5993, 5934, 30399, 1254, 28163, 72025, 45179, 8579, 8424, 9323, 456, 6689, 5741, 2741, 131890, 4291, 323978, 13053, 1323, 15, 21576, 4202, 2916, 54800, 1968, 10205, 6936, 2780, 13938, 34928, 5595, 908, 66, 20257, 15905, 1242, 8901, 631],
- [9046, 374, 0, 9945, 3703, 62148, 18370, 31784, 5939, 49, 5654, 38828, 31618, 103, 149, 629, 2178, 70871, 22503, 11059, 6332, 6129, 30652, 1330, 29374, 73721, 45745, 9365, 8686, 9581, 456, 7334, 5855, 2843, 133991, 4493, 327469, 13540, 1371, 15, 22131, 4330, 2989, 55956, 2031, 10530, 7142, 2906, 14096, 36036, 5724, 916, 66, 21570, 16231, 1287, 9215, 635],
- [9385, 377, 0, 10526, 3747, 63779, 18827, 32411, 6111, 49, 5899, 39199, 32181, 103, 151, 629, 2178, 73760, 23146, 11457, 6667, 6288, 30855, 1374, 30485, 75333, 46386, 10088, 9090, 9733, 458, 7818, 5920, 2947, 135840, 4673, 330407, 14006, 1425, 15, 23016, 4424, 3068, 57371, 2156, 10779, 7367, 3145, 14441, 37246, 5919, 919, 68, 22342, 16388, 1323, 9590, 644],
- [9668, 378, 0, 10960, 3747, 66558, 19375, 32984, 6277, 49, 6102, 40001, 32588, 103, 151, 631, 2205, 76085, 23732, 11671, 6829, 6440, 31417, 1408, 31534, 76743, 46815, 10790, 9378, 9911, 458, 8093, 6171, 3011, 137397, 4778, 333122, 14478, 1464, 16, 23697, 4490, 3160, 58560, 2173, 10989, 7531, 3393, 14768, 38394, 6103, 921, 68, 23196, 16674, 1323, 9939, 653],
- [9889, 379, 0, 11119, 4012, 67600, 19703, 33554, 6277, 49, 6272, 40596, 33580, 103, 151, 632, 2230, 77741, 24126, 11959, 6951, 6440, 31600, 1436, 32587, 77793, 47182, 11271, 9501, 10068, 458, 8171, 6120, 3071, 138754, 4863, 335395, 14938, 1491, 16, 24081, 4589, 3228, 59939, 2198, 11274, 7653, 3517, 14985, 39258, 6251, 927, 69, 24081, 16891, 1360, 10219, 662],
- [10164, 379, 0, 11383, 4043, 69329, 19879, 33765, 6565, 49, 6389, 40982, 34002, 103, 151, 634, 2260, 79007, 24627, 12373, 7159, 6677, 31815, 1462, 33373, 78462, 47552, 11799, 9674, 10157, 459, 8407, 6152, 3160, 140206, 5069, 337055, 15274, 1518, 19, 24777, 4613, 3286, 60459, 2256, 11450, 7792, 3614, 15544, 40555, 6362, 926, 69, 25070, 17122, 1366, 10418, 669],
- [10464, 383, 0, 11736, 4164, 70978, 20157, 34333, 6741, 49, 6485, 41923, 34924, 103, 152, 635, 2293, 83021, 25127, 12912, 7240, 6853, 32050, 1477, 34061, 79332, 48021, 12494, 9908, 10269, 461, 8532, 6313, 3239, 140917, 5212, 338485, 15622, 1571, 19, 25250, 4732, 3358, 61310, 2299, 11614, 7927, 3663, 16111, 41432, 6432, 927, 69, 25800, 17330, 1378, 10611, 675],
- [10700, 383, 0, 12216, 4236, 72798, 20475, 34855, 6952, 49, 6584, 42402, 35427, 103, 152, 638, 2293, 84694, 25473, 13289, 7518, 6853, 32662, 1515, 34812, 80497, 48391, 12917, 10090, 10404, 462, 8912, 6476, 3299, 141560, 5364, 340661, 16352, 1647, 19, 25721, 4858, 3416, 62101, 2329, 11835, 8030, 3732, 16370, 43020, 6620, 929, 69, 26746, 17512, 1398, 10902, 688],
- [11101, 383, 0, 12674, 4366, 74871, 20838, 35464, 7223, 49, 6736, 43210, 35977, 103, 152, 637, 2351, 87937, 26053, 13675, 7705, 7225, 33489, 1565, 35903, 82182, 49582, 13435, 10483, 10594, 462, 9260, 6504, 3382, 142704, 5503, 343051, 16968, 1712, 19, 26357, 4963, 3479, 63105, 2427, 12016, 8189, 3792, 16699, 44480, 6749, 932, 69, 27813, 17773, 1427, 11275, 701],
- [11373, 388, 0, 13169, 4463, 76693, 21232, 36085, 7373, 49, 6871, 44138, 36772, 103, 154, 638, 2351, 90369, 26656, 14049, 7886, 7444, 33837, 1603, 36986, 83421, 50079, 14240, 10801, 10766, 466, 9610, 6733, 3453, 143984, 5662, 345813, 17494, 1761, 19, 26954, 5087, 3541, 64136, 2542, 12219, 8407, 3887, 16960, 45721, 6913, 933, 69, 28672, 17951, 1447, 11685, 716],
- [11674, 388, 0, 13666, 4578, 78725, 21633, 36703, 7547, 49, 7042, 44811, 37212, 103, 154, 639, 2419, 92457, 27280, 14328, 7939, 7688, 34117, 1648, 37968, 84933, 50538, 14969, 11123, 10959, 468, 10220, 6813, 3556, 145089, 5847, 348232, 18130, 1848, 21, 27474, 5237, 3612, 65185, 2589, 12434, 8661, 3959, 17263, 47452, 7068, 934, 69, 29683, 18288, 1470, 12187, 741],
- [11771, 388, 0, 13945, 4759, 80166, 21938, 37419, 7670, 49, 7123, 45588, 37579, 103, 154, 640, 2419, 94191, 27778, 14651, 7953, 7688, 34432, 1687, 38804, 86010, 51142, 15668, 11296, 11108, 468, 10177, 6949, 3596, 146504, 5938, 350121, 18673, 1900, 21, 27923, 5310, 3623, 65700, 2646, 12674, 8816, 3987, 17359, 48396, 7238, 940, 69, 30388, 18433, 1492, 12543, 754],
- [12086, 388, 0, 14208, 4813, 81457, 22202, 38116, 7869, 49, 7270, 46442, 38283, 103, 154, 640, 2455, 96485, 28255, 14955, 8303, 7935, 34709, 1713, 39762, 87052, 51915, 16372, 11432, 11242, 470, 10625, 7061, 3652, 148240, 6096, 351371, 19207, 1931, 21, 28454, 5398, 3687, 66669, 2710, 12795, 8942, 4027, 18011, 49177, 7384, 940, 69, 31140, 18611, 1502, 12687, 766],
- [12376, 400, 0, 14576, 4923, 83752, 22482, 38430, 8037, 49, 7434, 46944, 38855, 103, 154, 641, 2455, 98030, 28705, 15296, 8353, 8069, 35038, 1741, 41546, 87925, 52350, 17029, 11704, 11393, 471, 10854, 7096, 3721, 149356, 6192, 352845, 19239, 1994, 21, 28952, 5489, 3726, 67311, 2805, 12951, 9056, 4085, 18412, 50552, 7518, 944, 69, 32145, 18811, 1502, 12885, 776],
- [13052, 401, 0, 14906, 5003, 85997, 22797, 39017, 8194, 49, 7551, 47471, 39801, 103, 154, 643, 2506, 100418, 29274, 15620, 8507, 8167, 35316, 1819, 42323, 88970, 53009, 17670, 11967, 11528, 478, 11122, 7388, 3868, 150776, 6317, 354370, 20262, 2095, 21, 29436, 5532, 3801, 68126, 2866, 13356, 9175, 4177, 18412, 51673, 7710, 944, 69, 32908, 18971, 1567, 13413, 787],
- [13288, 401, 0, 15348, 5458, 88031, 23191, 39208, 8386, 49, 7788, 48675, 40663, 103, 165, 647, 2506, 102688, 29936, 16170, 8625, 8286, 36504, 1877, 43531, 90084, 53510, 18200, 12222, 11689, 479, 11427, 7400, 3935, 151586, 6472, 356458, 20512, 2229, 22, 30167, 5680, 3817, 69252, 2913, 13571, 9381, 4177, 18961, 53053, 7874, 950, 69, 34137, 19117, 1593, 13885, 801],
- [13670, 403, 0, 15624, 5612, 90252, 23487, 39640, 8529, 49, 7893, 49451, 41482, 103, 165, 642, 2595, 105444, 30409, 16492, 8909, 8426, 36925, 1948, 44424, 90889, 53913, 19005, 12625, 11836, 479, 11662, 7525, 4014, 152579, 6625, 358154, 22110, 2317, 22, 30794, 5849, 3864, 70211, 3030, 13736, 9638, 4356, 19394, 53539, 8057, 952, 69, 34950, 19265, 1705, 14396, 803],
- [14117, 407, 0, 16053, 5775, 92539, 23964, 40022, 8529, 49, 7966, 50127, 42242, 103, 165, 643, 2595, 107796, 30901, 16898, 8946, 8571, 36925, 2013, 45495, 91662, 54365, 19845, 13005, 11966, 479, 11963, 7526, 4089, 153140, 6625, 359926, 22864, 2365, 22, 31408, 5960, 3888, 71009, 3100, 13952, 9895, 4464, 19785, 54776, 8260, 954, 69, 35749, 19265, 1705, 14877, 813],
- [14478, 407, 0, 16377, 5922, 94020, 24174, 40468, 8809, 49, 8110, 50867, 42902, 103, 166, 643, 2626, 110304, 31376, 17251, 9004, 8571, 37169, 2055, 46313, 92675, 54679, 20573, 13260, 12149, 479, 12134, 7881, 4149, 154154, 6943, 361515, 23365, 2418, 22, 31911, 6037, 3927, 71563, 3189, 14065, 10096, 4563, 20111, 55861, 8392, 956, 69, 36244, 19828, 1759, 15277, 838],
- [14986, 408, 0, 16575, 6029, 96400, 24256, 40873, 8965, 49, 8225, 51746, 43400, 103, 166, 643, 2626, 112017, 31715, 17557, 9125, 8571, 37809, 2074, 47152, 93271, 54881, 21315, 13458, 12476, 479, 12362, 7956, 4197, 155092, 7026, 362764, 24057, 2457, 22, 32477, 6090, 3949, 71925, 3260, 14065, 10178, 4586, 20535, 56409, 8521, 962, 69, 37727, 20065, 1774, 15584, 843],
- [15650, 410, 0, 16864, 6180, 99387, 24552, 41303, 9066, 49, 8334, 52255, 43983, 103, 167, 643, 2626, 113195, 32078, 17703, 9199, 8951, 38054, 2109, 47687, 93693, 55104, 21960, 13731, 12579, 479, 12619, 8057, 4231, 155764, 7130, 363836, 24455, 2422, 22, 33006, 6138, 3967, 72778, 3324, 14210, 10416, 4653, 20895, 57230, 8620, 967, 69, 39342, 20181, 1774, 15863, 850],
- [16032, 411, 0, 17318, 6277, 101050, 24754, 41288, 9096, 49, 8406, 52634, 44638, 103, 170, 644, 2699, 114306, 32437, 18369, 9291, 9077, 38497, 2137, 48423, 94220, 55608, 22464, 14044, 12816, 481, 12984, 8150, 4286, 156628, 7252, 364965, 24916, 2439, 22, 33439, 6229, 4038, 73557, 3397, 14353, 10623, 4710, 21285, 58542, 8706, 971, 69, 40249, 20406, 1899, 16462, 860],
- [16530, 424, 0, 17877, 6538, 103813, 25107, 41559, 9171, 49, 8492, 53285, 45266, 103, 171, 647, 2770, 115833, 33068, 18586, 9371, 9185, 38802, 2189, 49709, 94895, 56014, 22947, 14372, 12981, 485, 13249, 8248, 4389, 157185, 7364, 366733, 25800, 2481, 22, 33915, 6273, 4086, 74220, 3486, 14494, 10788, 4793, 21679, 60395, 8921, 974, 69, 41401, 20764, 1935, 16974, 876],
- [17031, 429, 0, 18472, 6777, 106622, 25598, 41762, 9236, 49, 8538, 54497, 45881, 103, 172, 649, 2770, 117455, 33558, 18957, 9662, 9464, 38802, 2226, 50988, 95512, 56621, 23531, 14793, 13084, 493, 13648, 8376, 4492, 158844, 7493, 368284, 26885, 2520, 22, 34566, 6338, 4131, 74984, 3647, 14635, 11131, 4866, 22063, 60901, 9264, 975, 69, 42533, 21071, 1951, 17707, 891],
- [17359, 433, 0, 19258, 7013, 109895, 26084, 42022, 9422, 49, 8717, 55424, 46331, 103, 172, 651, 2803, 118917, 34211, 19244, 9690, 9704, 39577, 2282, 52015, 96301, 56969, 24190, 15229, 13298, 505, 13905, 8517, 4492, 159608, 7624, 369660, 27794, 2554, 22, 35033, 6418, 4185, 75697, 3718, 14819, 11394, 4960, 22566, 62675, 9533, 977, 69, 43611, 21349, 1989, 18230, 898],
- [17952, 459, 0, 19936, 7253, 111951, 26364, 42201, 9498, 49, 8801, 56163, 47063, 103, 172, 652, 2839, 120260, 34574, 19552, 9700, 9704, 39916, 2325, 52778, 96965, 57397, 24850, 15523, 13438, 515, 14101, 8628, 4651, 160445, 7689, 370770, 28785, 2577, 22, 35513, 6418, 4243, 76129, 3776, 14928, 11861, 4993, 22566, 64652, 9797, 981, 69, 44607, 21702, 2010, 18403, 903],
- [18630, 466, 0, 20129, 7443, 114733, 26563, 42740, 9605, 49, 8857, 56830, 47902, 103, 175, 652, 2839, 121234, 34830, 19699, 9920, 10046, 40341, 2349, 53327, 100805, 57532, 25208, 15752, 13724, 519, 14345, 8702, 4685, 160918, 7800, 371711, 29592, 2625, 22, 35984, 6573, 4302, 76646, 3873, 14991, 12148, 5034, 22566, 65593, 9999, 983, 70, 45398, 21977, 2028, 18543, 910],
- [18766, 486, 0, 21264, 7818, 117215, 26774, 42979, 9685, 49, 8886, 57447, 48207, 103, 175, 653, 2933, 122848, 35237, 20019, 9965, 10185, 40746, 2377, 54175, 101163, 57731, 25508, 16041, 14015, 523, 14616, 8858, 4749, 161545, 8024, 373040, 30023, 2646, 23, 36350, 6692, 4335, 77225, 3935, 15112, 12415, 5067, 24342, 67310, 10202, 988, 70, 46239, 22157, 2056, 18917, 912],
- [18851, 504, 0, 22356, 8067, 119348, 27046, 43091, 9712, 49, 9016, 58764, 48894, 103, 177, 653, 2933, 123830, 35712, 20300, 10092, 10410, 41133, 2418, 54982, 101592, 58035, 25870, 16322, 14189, 525, 14885, 8951, 4795, 162068, 8140, 374085, 31276, 2679, 24, 36792, 6805, 4399, 77780, 4023, 15219, 12415, 5162, 24833, 68877, 10497, 990, 70, 46905, 22484, 2077, 19400, 915],
- [19072, 512, 0, 22886, 8425, 122168, 27346, 43239, 9746, 49, 9120, 60183, 49859, 103, 179, 655, 2990, 124759, 36096, 20806, 10167, 10705, 41562, 2446, 55858, 102063, 58241, 26273, 16560, 14438, 539, 15139, 9129, 4876, 162530, 8353, 375133, 32075, 2706, 26, 37282, 6907, 4474, 78335, 4508, 15325, 12415, 5247, 25190, 70555, 10813, 1026, 71, 47856, 22729, 2102, 19892, 921],
- [19387, 523, 0, 24439, 8651, 125738, 27601, 43460, 9773, 49, 9199, 61488, 50621, 103, 179, 664, 3111, 125915, 36578, 21154, 10306, 10977, 41989, 2482, 56770, 102557, 63777, 26980, 16769, 14572, 541, 15406, 9309, 4953, 163336, 8672, 376208, 33295, 2745, 26, 37758, 7007, 4570, 78815, 4620, 15441, 13453, 5277, 25664, 72548, 11252, 1027, 71, 48532, 22993, 2119, 20249, 933],
- [20043, 535, 0, 25451, 9101, 128593, 27834, 43818, 9845, 49, 9269, 62758, 51359, 103, 179, 673, 3139, 126890, 36997, 21478, 10361, 11287, 42486, 2524, 57482, 103132, 64229, 27501, 17039, 14951, 540, 15572, 9491, 5019, 163893, 8800, 377316, 34718, 2816, 26, 38111, 7059, 4570, 79505, 4915, 15441, 13453, 5367, 26177, 74470, 11798, 1046, 71, 49397, 23442, 2136, 20571, 939],
- [20500, 543, 0, 26989, 9426, 130615, 27987, 43968, 9942, 49, 9332, 63938, 51898, 103, 179, 675, 3139, 127757, 37397, 21712, 10406, 11287, 42816, 2570, 57973, 103436, 64648, 27886, 17270, 15023, 545, 15664, 9669, 5043, 164164, 8940, 378097, 35625, 2861, 27, 38476, 7150, 4662, 79908, 4985, 15441, 14286, 5438, 26493, 75408, 12066, 1063, 71, 50679, 23729, 2144, 20835, 947],
- [20925, 562, 0, 27678, 9740, 133816, 28169, 44092, 9972, 49, 9389, 64904, 52497, 103, 179, 676, 3189, 128415, 37623, 22007, 10544, 11476, 43050, 2588, 58404, 103626, 64944, 28224, 17768, 15158, 548, 15786, 9816, 5079, 164497, 9062, 378799, 36517, 2880, 28, 38837, 7205, 4922, 80339, 5046, 15642, 14800, 5471, 27005, 76463, 12322, 1075, 71, 51251, 24041, 2161, 21038, 960],
- [21422, 572, 0, 28296, 10080, 136641, 28333, 44179, 10020, 49, 9474, 66000, 53249, 103, 180, 682, 3221, 129212, 38033, 22237, 10609, 11707, 43612, 2606, 58904, 103889, 64998, 28523, 18123, 15352, 554, 15918, 10045, 5079, 164796, 9105, 379482, 37227, 2901, 30, 39162, 7363, 4988, 80870, 5185, 15691, 15228, 5523, 27575, 78208, 12559, 1084, 71, 51738, 24354, 2169, 21308, 970],
- [21989, 592, 0, 29852, 10368, 139715, 28484, 44347, 10056, 49, 9537, 67371, 53980, 103, 180, 685, 3260, 129837, 38337, 22626, 10750, 11883, 44030, 2637, 59465, 104156, 65182, 28869, 18483, 15512, 561, 16058, 10218, 5178, 165346, 9250, 380156, 38473, 2941, 30, 39575, 7483, 5060, 81316, 5329, 15756, 15759, 5604, 27930, 80777, 12864, 1095, 72, 52177, 24354, 2194, 21593, 980],
- [22845, 609, 0, 31267, 10816, 143377, 28632, 44461, 10106, 49, 9589, 69069, 54973, 103, 183, 692, 3260, 130603, 38748, 22973, 10823, 11945, 44472, 2667, 60197, 104667, 65449, 29316, 18483, 15699, 563, 16315, 10473, 5209, 165816, 9367, 380892, 39584, 2980, 30, 40004, 7626, 5237, 81848, 5352, 15862, 16441, 5665, 28340, 82658, 13252, 1110, 72, 52647, 24779, 2217, 21926, 1009],
- [23710, 624, 0, 33039, 11547, 146659, 28807, 44689, 10173, 49, 9654, 70971, 55783, 103, 183, 706, 3353, 131198, 39146, 23350, 10973, 12166, 44995, 2721, 60613, 105059, 65672, 29795, 19091, 15997, 573, 16522, 10704, 5251, 166164, 9526, 381714, 41417, 3016, 30, 40424, 7849, 5377, 82481, 5536, 15947, 17170, 5742, 29118, 84927, 13577, 1119, 72, 53211, 25171, 2249, 22246, 1027],
- [24601, 653, 0, 34660, 12095, 150018, 29002, 44994, 10229, 49, 9709, 73552, 56804, 103, 183, 723, 3353, 131871, 39543, 23717, 11020, 12445, 46283, 2757, 61305, 105395, 65836, 30172, 19348, 16232, 588, 16640, 10997, 5299, 166605, 9621, 382630, 42845, 3058, 30, 40851, 8073, 5377, 82944, 5690, 15947, 17955, 5833, 29549, 86915, 13981, 1125, 72, 53869, 25538, 2274, 22518, 1050],
- [25615, 660, 0, 35706, 12501, 152300, 29115, 45088, 10264, 49, 9767, 75568, 57681, 103, 183, 728, 3399, 132543, 39909, 23926, 11101, 12445, 46619, 2793, 61701, 105603, 66054, 30471, 19516, 16262, 601, 16730, 11201, 5318, 166881, 9723, 383324, 44264, 3080, 30, 41148, 8231, 5377, 83203, 5811, 15947, 18795, 5898, 30343, 88523, 14313, 1127, 72, 54506, 25834, 2290, 22758, 1060],
- [26272, 663, 0, 36844, 12917, 155726, 29284, 45235, 10340, 49, 9799, 77326, 58414, 103, 185, 736, 3399, 133016, 40430, 24082, 11319, 12647, 47172, 2810, 62032, 105690, 66085, 30693, 19799, 16611, 609, 16851, 11315, 5345, 167103, 9845, 383944, 45114, 3101, 30, 41576, 8417, 5820, 83589, 5890, 16093, 19378, 5928, 31004, 90211, 14608, 1128, 72, 54886, 26158, 2322, 22932, 1079],
- [26912, 675, 0, 39185, 13191, 158961, 29427, 45349, 10403, 49, 9818, 80109, 59078, 103, 186, 736, 3462, 133639, 40786, 24179, 11411, 12647, 47706, 2819, 62409, 105885, 66269, 30882, 20152, 16857, 614, 17038, 11683, 5364, 167426, 9933, 384575, 45907, 3124, 30, 42010, 8645, 6098, 83978, 5951, 16164, 19990, 5966, 31751, 93569, 14937, 1131, 72, 55331, 26531, 2341, 23198, 1089],
- [27312, 695, 0, 40937, 13606, 162798, 29656, 45429, 10444, 49, 9847, 82719, 60030, 103, 188, 744, 3632, 134185, 41013, 24460, 11644, 12995, 48634, 2836, 62969, 106151, 66497, 31296, 20641, 17069, 630, 17231, 11854, 5436, 167703, 10065, 385142, 46934, 3166, 30, 42422, 8904, 6218, 84289, 6003, 16213, 20556, 6050, 32114, 97699, 15344, 1130, 73, 55775, 26784, 2376, 23456, 1114]
- ];
-
- var option = {
- baseOption: {
- timeline: {
- axisType: 'category',
- // realtime: false,
- // loop: false,
- autoPlay: true,
- playInterval: _timelineDuration,
- symbolSize: 1,
- left: '5%',
- right: '5%',
- bottom: '0%',
- width: '90%',
- controlStyle: {
- show: false
- },
- data: days,
- tooltip: {
- formatter: days
- }
- },
-
- tooltip: {
- show: true,
- formatter: function(params) {
- return params.name + '：' + params.value
- },
- },
- visualMap: {
- type: 'piecewise',
- pieces: [{
- min: 100001,
- color: '#BB0000'
- }, {
- min: 50001,
- max: 100000,
- color: '#C62B2B'
- }, {
- min: 25001,
- max: 50000,
- color: '#D25555'
- }, {
- min: 1001,
- max: 25000,
- color: '#DD8080'
- }, {
- min: 11,
- max: 1000,
- color: '#E8AAAA'
- }, {
- min: 1,
- max: 10,
- color: '#F4D5D5'
- }, {
- value: 0,
- color: '#eee'
- }],
- orient: 'vertical',
- itemWidth: 25,
- itemHeight: 15,
- showLabel: true,
- seriesIndex: [0, 1],
- textStyle: {
- color: '#999'
- },
- bottom: '10%',
- left: '5%',
- },
- grid: {
- right: '5%',
- top: '17%',
- bottom: '10%',
- width: '32%'
- },
- xAxis: {
- show: false
- },
- yAxis: [{
- inverse: true,
- type: 'category',
- max: 9,
- nameTextStyle: {
- color: '#fff'
- },
- animationDurationUpdate: _axisDurationUpdate,
- axisTick: {
- show: false,
- },
- axisLabel: {
- textStyle: {
- fontSize: 14,
- color: '#000000',
- },
- interval: 0
- },
- axisLine: {
- show: false,
- lineStyle: {
- color: '#333'
- },
- },
- splitLine: {
- show: false,
- lineStyle: {
- color: '#333'
- }
- },
- }],
- geo: {
- map: 'USA',
- top: '28%',
- right: '50%',
- left: '5%',
- emphasis: {
- show: false,
- itemStyle: {
- areaColor: '#90EE90'
- }
- }
- },
- series: [{
- type: 'map',
- map: 'USA',
- roam: false,
- geoIndex: 0,
- datasetIndex: 0,
- label: {
- show: false,
- },
- }, {
- type: 'bar',
- realtimeSort: true,
- barWidth: '40%',
- datasetIndex: 0,
- animationDurationUpdate: _barDurationUpdate,
- animationEasingUpdate: 'linear',
- label: {
- valueAnimation: true,
- show: true,
- fontSize: 14,
- position: 'right',
- formatter: '{@[1]}'
- },
- }],
-
- },
- animationDurationUpdate: 3000,
- animationEasingUpdate: 'quinticInOut',
- options: []
- };
-
- for (var n = 0; n < days.length; n++) {
-
- var res = [];
- for (var j = 0; j < rawData[n].length; j++) {
- res.push([
- _country[j],
- rawData[n][j]
- ]);
- }
-
- option.options.push({
- dataset: {
- source: res
- },
- title: [{
- text: '美国疫情地图',
- textStyle: {
- color: '#2D3E53',
- fontSize: 28
- },
- // https://www.makeapie.com/editor.html?c=x02yMqYpqC
- subtext: '作品源于社区作者: 电***n',
- subtextStyle: {
- color: '#aaa',
- fontSize: 16
- },
- left: 20,
- top: 20,
- }, {
- show: true,
- text: '感染人数前十地区',
- textStyle: {
- color: '#2D3E53',
- fontSize: 18
- },
- right: '20%',
- top: '13%'
- }],
- series: [{
- type: 'map',
- datasetIndex: 0,
- encode: {
- itemName: 0,
- value: 1
- }
- }, {
- type: 'bar',
- datasetIndex: 0,
- encode: {
- x: 1,
- y: 0
- }
- }]
- });
- }
-
- myChart.setOption(option);
-}
diff --git a/public/data/custom-bar-trend.js b/public/data/custom-bar-trend.js
deleted file mode 100644
index 11b6d75..0000000
--- a/public/data/custom-bar-trend.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/*
-title: Custom Bar Trend
-category: custom
-titleCN: 使用自定义系列添加柱状图趋势
-difficulty: 3
-*/
-
-
-var yearCount = 7;
-var categoryCount = 30;
-
-var xAxisData = [];
-var customData = [];
-var legendData = [];
-var dataList = [];
-
-legendData.push('trend');
-var 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);
- }
-}
-
-function renderItem(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'),
- fill: null
- });
-
- return {
- type: 'polyline',
- shape: {
- points: points
- },
- style: style
- };
-}
-
-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: renderItem,
- itemStyle: {
- borderWidth: 2
- },
- encode: {
- x: 0,
- y: encodeY
- },
- data: customData,
- z: 100
- }].concat(dataList.map(function (data, index) {
- return {
- type: 'bar',
- animation: false,
- name: legendData[index + 1],
- itemStyle: {
- opacity: 0.5
- },
- data: data
- };
- }))
-};
\ No newline at end of file
diff --git a/public/data/custom-calendar-icon.js b/public/data/custom-calendar-icon.js
deleted file mode 100644
index 0841e44..0000000
--- a/public/data/custom-calendar-icon.js
+++ /dev/null
@@ -1,119 +0,0 @@
-/*
-title: Custom Calendar Icon
-category: 'custom, calendar'
-titleCN: 日历图自定义图标
-difficulty: 7
-*/
-
-
-var 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]]
-];
-var 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 [...]
-];
-var colors = [
- '#c4332b', '#16B644', '#6862FD', '#FDC763'
-];
-
-function getVirtulData(year) {
- 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) {
- var items = [];
- var eventCount = Math.round(Math.random() * pathes.length);
- for (var 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;
-}
-
-function renderItem(params, api) {
- var cellPoint = api.coord(api.value(0));
- var cellWidth = params.coordSys.cellWidth;
- var cellHeight = params.coordSys.cellHeight;
-
- var value = api.value(1);
- var events = value && value.split('|');
-
- if (isNaN(cellPoint[0]) || isNaN(cellPoint[1])) {
- return;
- }
-
- var 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;
-}
-
-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: renderItem,
- dimensions: [null, {type: 'ordinal'}],
- data: getVirtulData(2017)
- }]
-};
diff --git a/public/data/data-transform-filter.js b/public/data/data-transform-filter.js
deleted file mode 100644
index 219a99f..0000000
--- a/public/data/data-transform-filter.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
-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) {
-
- 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(option);
-
-}
diff --git a/public/data/data-transform-multiple-pie.js b/public/data/data-transform-multiple-pie.js
deleted file mode 100644
index bcf3630..0000000
--- a/public/data/data-transform-multiple-pie.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/*
-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%'] }
- ]
- }
- }]
-};
diff --git a/public/data/data-transform-sort-bar.js b/public/data/data-transform-sort-bar.js
deleted file mode 100644
index b62ffee..0000000
--- a/public/data/data-transform-sort-bar.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/*
-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', null, '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
- }
-};
diff --git a/public/data/dataset-default.js b/public/data/dataset-default.js
deleted file mode 100644
index 054c50e..0000000
--- a/public/data/dataset-default.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
-title: Default arrangement
-category: 'dataset, pie'
-titleCN: 默认 encode 设置
-difficulty: 3
-*/
-
-var 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'
- }
- }]
-};
\ No newline at end of file
diff --git a/public/data/dataset-encode0.js b/public/data/dataset-encode0.js
deleted file mode 100644
index 4bf8921..0000000
--- a/public/data/dataset-encode0.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
-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'
- }
- }
- ]
-};
diff --git a/public/data/dataset-encode1.js b/public/data/dataset-encode1.js
deleted file mode 100644
index 483f771..0000000
--- a/public/data/dataset-encode1.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/*
-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(option);
-});
\ No newline at end of file
diff --git a/public/data/dataset-link.js b/public/data/dataset-link.js
deleted file mode 100644
index 029dea2..0000000
--- a/public/data/dataset-link.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/*
-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: 'data'},
- label: {
- formatter: '{b}: {@2012} ({d}%)'
- },
- encode: {
- itemName: 'product',
- value: '2012',
- tooltip: '2012'
- }
- }
- ]
- };
-
- myChart.on('updateAxisPointer', function (event) {
- var xAxisInfo = event.axesInfo[0];
- if (xAxisInfo) {
- var dimension = xAxisInfo.value + 1;
- myChart.setOption({
- series: {
- id: 'pie',
- label: {
- formatter: '{b}: {@[' + dimension + ']} ({d}%)'
- },
- encode: {
- value: dimension,
- tooltip: dimension
- }
- }
- });
- }
- });
-
- myChart.setOption(option);
-
-});
\ No newline at end of file
diff --git a/public/data/dataset-series-layout-by.js b/public/data/dataset-series-layout-by.js
deleted file mode 100644
index 20cbdda..0000000
--- a/public/data/dataset-series-layout-by.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
-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}
- ]
-};
diff --git a/public/data/dataset-simple0.js b/public/data/dataset-simple0.js
deleted file mode 100644
index 5585358..0000000
--- a/public/data/dataset-simple0.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
-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'}
- ]
-};
diff --git a/public/data/dataset-simple1.js b/public/data/dataset-simple1.js
deleted file mode 100644
index 4af4f39..0000000
--- a/public/data/dataset-simple1.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
-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'}
- ]
-};
diff --git a/public/data/dynamic-data.js b/public/data/dynamic-data.js
deleted file mode 100644
index d7c9e49..0000000
--- a/public/data/dynamic-data.js
+++ /dev/null
@@ -1,132 +0,0 @@
-/*
-title: Dynamic Data
-category: bar
-titleCN: 动态数据
-difficulty: 6
-*/
-
-option = {
- title: {
- text: '动态数据',
- subtext: '纯属虚构'
- },
- 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(option);
-}, 2100);
diff --git a/public/data/dynamic-data2.js b/public/data/dynamic-data2.js
deleted file mode 100644
index 23ad102..0000000
--- a/public/data/dynamic-data2.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/*
-title: Dynamic Data + Time Axis
-category: line
-titleCN: 动态数据 + 时间坐标轴
-difficulty: 5
-*/
-
-function randomData() {
- 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)
- ]
- };
-}
-
-var data = [];
-var now = +new Date(1997, 9, 3);
-var oneDay = 24 * 3600 * 1000;
-var value = Math.random() * 1000;
-for (var i = 0; i < 1000; i++) {
- data.push(randomData());
-}
-
-option = {
- title: {
- text: '动态数据 + 时间坐标轴'
- },
- 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,
- hoverAnimation: false,
- data: data
- }]
-};
-
-setInterval(function () {
-
- for (var i = 0; i < 5; i++) {
- data.shift();
- data.push(randomData());
- }
-
- myChart.setOption({
- series: [{
- data: data
- }]
- });
-}, 1000);
\ No newline at end of file
diff --git a/public/data/effectScatter-bmap.js b/public/data/effectScatter-bmap.js
deleted file mode 100644
index 850df19..0000000
--- a/public/data/effectScatter-bmap.js
+++ /dev/null
@@ -1,575 +0,0 @@
-/*
-title: Air Quality - Baidu Map
-category: 'scatter, map'
-tags: bmap
-titleCN: 全国主要城市空气质量 - 百度地图
-difficulty: 10
-*/
-
-var data = [
- {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}
-];
-var geoCoordMap = {
- '海门':[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) {
- 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'
- },
- hoverAnimation: true,
- label: {
- formatter: '{b}',
- position: 'right',
- show: true
- },
- itemStyle: {
- shadowBlur: 10,
- shadowColor: '#333'
- },
- zlevel: 1
- }
- ]
-};
\ No newline at end of file
diff --git a/public/data/effectScatter-map.js b/public/data/effectScatter-map.js
deleted file mode 100644
index 8509c87..0000000
--- a/public/data/effectScatter-map.js
+++ /dev/null
@@ -1,503 +0,0 @@
-/*
-title: Air Quality
-category: scatter
-titleCN: 全国主要城市空气质量
-difficulty: 2
-*/
-
-var data = [
- {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}
-];
-var geoCoordMap = {
- '海门':[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) {
- 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'
- },
- hoverAnimation: true,
- label: {
- formatter: '{b}',
- position: 'right',
- show: true
- },
- itemStyle: {
- color: '#f4e925',
- shadowBlur: 10,
- shadowColor: '#333'
- },
- zlevel: 1
- }
- ]
-};
\ No newline at end of file
diff --git a/public/data/funnel-align.js b/public/data/funnel-align.js
deleted file mode 100644
index 6c84bf8..0000000
--- a/public/data/funnel-align.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/*
-title: Funnel (align)
-category: funnel
-titleCN: 漏斗图(对比)
-*/
-
-option = {
- title: {
- text: '漏斗图(对比)',
- subtext: '纯属虚构',
- 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: ['产品A', '产品B', '产品C', '产品D', '产品E']
- },
-
- series: [
- {
- name: '漏斗图',
- type: 'funnel',
- width: '40%',
- height: '45%',
- left: '5%',
- top: '50%',
- funnelAlign: 'right',
-
- center: ['25%', '25%'], // for pie
-
- data: [
- {value: 60, name: '产品C'},
- {value: 30, name: '产品D'},
- {value: 10, name: '产品E'},
- {value: 80, name: '产品B'},
- {value: 100, name: '产品A'}
- ]
- },
- {
- name: '金字塔',
- type: 'funnel',
- width: '40%',
- height: '45%',
- left: '5%',
- top: '5%',
- sort: 'ascending',
- funnelAlign: 'right',
-
- center: ['25%', '75%'], // for pie
-
- data: [
- {value: 60, name: '产品C'},
- {value: 30, name: '产品D'},
- {value: 10, name: '产品E'},
- {value: 80, name: '产品B'},
- {value: 100, name: '产品A'}
- ]
- },
- {
- name: '漏斗图',
- type: 'funnel',
- width: '40%',
- height: '45%',
- left: '55%',
- top: '5%',
- funnelAlign: 'left',
-
- center: ['75%', '25%'], // for pie
-
- data: [
- {value: 60, name: '产品C'},
- {value: 30, name: '产品D'},
- {value: 10, name: '产品E'},
- {value: 80, name: '产品B'},
- {value: 100, name: '产品A'}
- ]
- },
- {
- name: '金字塔',
- type: 'funnel',
- width: '40%',
- height: '45%',
- left: '55%',
- top: '50%',
- sort: 'ascending',
- funnelAlign: 'left',
-
- center: ['75%', '75%'], // for pie
-
- data: [
- {value: 60, name: '产品C'},
- {value: 30, name: '产品D'},
- {value: 10, name: '产品E'},
- {value: 80, name: '产品B'},
- {value: 100, name: '产品A'}
- ]
- }
- ]
-};
diff --git a/public/data/funnel-customize.js b/public/data/funnel-customize.js
deleted file mode 100644
index 38d49f9..0000000
--- a/public/data/funnel-customize.js
+++ /dev/null
@@ -1,88 +0,0 @@
-/*
-title: Customized Funnel
-category: funnel
-titleCN: 漏斗图
-*/
-
-option = {
- title: {
- text: '漏斗图',
- subtext: '纯属虚构'
- },
- tooltip: {
- trigger: 'item',
- formatter: "{a} <br/>{b} : {c}%"
- },
- toolbox: {
- feature: {
- dataView: {readOnly: false},
- restore: {},
- saveAsImage: {}
- }
- },
- legend: {
- data: ['展现','点击','访问','咨询','订单']
- },
- series: [
- {
- name: '预期',
- type: 'funnel',
- left: '10%',
- width: '80%',
- label: {
- formatter: '{b}预期'
- },
- labelLine: {
- show: false
- },
- itemStyle: {
- opacity: 0.7
- },
- emphasis: {
- label: {
- position: 'inside',
- formatter: '{b}预期: {c}%'
- }
- },
- data: [
- {value: 60, name: '访问'},
- {value: 40, name: '咨询'},
- {value: 20, name: '订单'},
- {value: 80, name: '点击'},
- {value: 100, name: '展现'}
- ]
- },
- {
- name: '实际',
- 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}实际: {c}%'
- }
- },
- data: [
- {value: 30, name: '访问'},
- {value: 10, name: '咨询'},
- {value: 5, name: '订单'},
- {value: 50, name: '点击'},
- {value: 80, name: '展现'}
- ],
- // Ensure outer shape will not be over inner shape when hover.
- z: 100
- }
- ]
-};
diff --git a/public/data/funnel-mutiple.js b/public/data/funnel-mutiple.js
deleted file mode 100644
index eeb802d..0000000
--- a/public/data/funnel-mutiple.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/*
-title: Multiple Funnels
-category: funnel
-titleCN: 漏斗图
-*/
-
-option = {
- title: {
- text: '漏斗图',
- subtext: '纯属虚构',
- 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: ['展现', '点击', '访问', '咨询', '订单']
- },
-
- series: [
- {
- name: '漏斗图',
- type: 'funnel',
- width: '40%',
- height: '45%',
- left: '5%',
- top: '50%',
- data: [
- {value: 60, name: '访问'},
- {value: 30, name: '咨询'},
- {value: 10, name: '订单'},
- {value: 80, name: '点击'},
- {value: 100, name: '展现'}
- ]
- },
- {
- name: '金字塔',
- type: 'funnel',
- width: '40%',
- height: '45%',
- left: '5%',
- top: '5%',
- sort: 'ascending',
- data: [
- {value: 60, name: '访问'},
- {value: 30, name: '咨询'},
- {value: 10, name: '订单'},
... 20132 lines suppressed ...
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-examples] 08/15: add ts flag
Posted by sh...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
commit 8eb05c1952a88afb23cd1b528e6d53cee53c2698
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Sep 7 16:29:56 2021 +0800
add ts flag
---
src/common/i18n.js | 6 +-
src/common/store.js | 17 ++-
src/data/chart-list-data.js | 327 +++++++++++++++++++++++++++++++++++++++-----
src/editor/Editor.vue | 30 +++-
src/editor/Preview.vue | 16 +--
tool/build-example.js | 9 +-
6 files changed, 356 insertions(+), 49 deletions(-)
diff --git a/src/common/i18n.js b/src/common/i18n.js
index 8bb0e56..097aa08 100644
--- a/src/common/i18n.js
+++ b/src/common/i18n.js
@@ -25,7 +25,8 @@ export default {
tooltip: {
jsMode: 'JavaScript',
- tsMode: 'TypeScript. Provides Better Intelligent'
+ tsMode: 'TypeScript. Provides Better Intelligent',
+ noTs: 'No Available TypeScript Code'
},
codeChangedConfirm:
@@ -102,7 +103,8 @@ export default {
tooltip: {
jsMode: 'JavaScript 代码编辑',
- tsMode: 'TypeScript 代码编辑，提供更好的代码补全和类型检查。'
+ tsMode: 'TypeScript 代码编辑，提供更好的代码补全和类型检查',
+ noTs: '该示例暂无 TypeScript 版本'
},
codeChangedConfirm: '已经修改过的代码将会丢失，是否确认继续？',
diff --git a/src/common/store.js b/src/common/store.js
index af35246..6dbb3ee 100644
--- a/src/common/store.js
+++ b/src/common/store.js
@@ -1,5 +1,7 @@
// import * as matter from 'gray-matter';
import { URL_PARAMS } from '../common/config';
+import CHART_LIST from '../data/chart-list-data';
+import CHART_LIST_GL from '../data/chart-list-data-gl';
export const store = {
cdnRoot: '',
@@ -10,7 +12,8 @@ export const store = {
enableDecal: 'decal' in URL_PARAMS,
renderer: URL_PARAMS.renderer || 'canvas',
- typeCheck: (URL_PARAMS.lang || '').toLowerCase() === 'ts',
+ typeCheck:
+ getExampleConfig().ts && (URL_PARAMS.lang || '').toLowerCase() === 'ts',
useDirtyRect: 'useDirtyRect' in URL_PARAMS,
runCode: '',
@@ -26,6 +29,18 @@ export const store = {
}
};
+function findExample(item) {
+ return URL_PARAMS.c === item.id;
+}
+export function getExampleConfig() {
+ const example = CHART_LIST.concat(CHART_LIST_GL).find(findExample);
+ return example;
+}
+
+export function isGLExample() {
+ return CHART_LIST_GL.find(findExample);
+}
+
export function loadExampleCode() {
return new Promise((resolve) => {
const glFolder = URL_PARAMS.gl ? 'gl/' : '';
diff --git a/src/data/chart-list-data.js b/src/data/chart-list-data.js
index 2418a66..3581bc4 100644
--- a/src/data/chart-list-data.js
+++ b/src/data/chart-list-data.js
@@ -7,6 +7,7 @@ export default [
"bar"
],
"id": "bar-background",
+ "ts": true,
"tags": [],
"title": "Bar with Background",
"titleCN": "带背景色的柱状图",
@@ -17,6 +18,7 @@ export default [
"custom"
],
"id": "bar-histogram",
+ "ts": true,
"tags": [],
"title": "Histogram with Custom Series",
"titleCN": "直方图（自定义系列）",
@@ -27,6 +29,7 @@ export default [
"bar"
],
"id": "bar-simple",
+ "ts": true,
"tags": [],
"title": "Basic Bar",
"titleCN": "基础柱状图",
@@ -37,6 +40,7 @@ export default [
"bar"
],
"id": "bar-tick-align",
+ "ts": true,
"tags": [],
"title": "Axis Align with Tick",
"titleCN": "坐标轴刻度与标签对齐",
@@ -47,6 +51,7 @@ export default [
"calendar"
],
"id": "calendar-simple",
+ "ts": true,
"tags": [],
"title": "Simple Calendar",
"titleCN": "基础日历图",
@@ -57,6 +62,7 @@ export default [
"candlestick"
],
"id": "candlestick-simple",
+ "ts": true,
"tags": [],
"title": "Basic Candlestick",
"titleCN": "基础 K 线图",
@@ -69,6 +75,7 @@ export default [
"transform"
],
"id": "data-transform-sort-bar",
+ "ts": true,
"tags": [],
"title": "Sort Data in Bar Chart",
"titleCN": "柱状图排序",
@@ -79,6 +86,7 @@ export default [
"heatmap"
],
"id": "heatmap-cartesian",
+ "ts": true,
"tags": [],
"title": "Heatmap on Cartesian",
"titleCN": "笛卡尔坐标系上的热力图",
@@ -89,6 +97,7 @@ export default [
"line"
],
"id": "line-simple",
+ "ts": true,
"tags": [],
"title": "Basic Line Chart",
"titleCN": "基础折线图",
@@ -99,6 +108,7 @@ export default [
"line"
],
"id": "line-smooth",
+ "ts": true,
"tags": [],
"title": "Smoothed Line Chart",
"titleCN": "基础平滑折线图",
@@ -109,9 +119,10 @@ export default [
"pie"
],
"id": "pie-simple",
+ "ts": true,
"tags": [],
- "title": "Referer of a website",
- "titleCN": "某站点用户访问来源",
+ "title": "Referer of a Website",
+ "titleCN": "某站点用户Access From",
"difficulty": 0
},
{
@@ -119,6 +130,7 @@ export default [
"radar"
],
"id": "radar",
+ "ts": true,
"tags": [],
"title": "Basic Radar Chart",
"titleCN": "基础雷达图",
@@ -129,6 +141,7 @@ export default [
"sankey"
],
"id": "sankey-simple",
+ "ts": true,
"tags": [],
"title": "Basic Sankey",
"titleCN": "基础桑基图",
@@ -139,6 +152,7 @@ export default [
"scatter"
],
"id": "scatter-simple",
+ "ts": true,
"tags": [],
"title": "Basic Scatter Chart",
"titleCN": "基础散点图",
@@ -149,6 +163,7 @@ export default [
"line"
],
"id": "area-basic",
+ "ts": true,
"tags": [],
"title": "Basic area chart",
"titleCN": "基础面积图",
@@ -159,6 +174,7 @@ export default [
"bar"
],
"id": "bar-data-color",
+ "ts": true,
"tags": [],
"title": "Set Style of Single Bar.",
"titleCN": "自定义单个柱子颜色",
@@ -169,6 +185,7 @@ export default [
"bar"
],
"id": "bar-waterfall",
+ "ts": true,
"tags": [],
"title": "Waterfall Chart",
"titleCN": "瀑布图（柱状图模拟）",
@@ -180,6 +197,7 @@ export default [
"heatmap"
],
"id": "calendar-heatmap",
+ "ts": true,
"tags": [],
"title": "Calendar Heatmap",
"titleCN": "日历热力图",
@@ -191,6 +209,7 @@ export default [
"heatmap"
],
"id": "calendar-vertical",
+ "ts": true,
"tags": [],
"title": "Calendar Heatmap Vertical",
"titleCN": "纵向日历图",
@@ -201,6 +220,7 @@ export default [
"candlestick"
],
"id": "custom-ohlc",
+ "ts": false,
"tags": [],
"title": "OHLC Chart",
"titleCN": "OHLC 图（使用自定义系列）",
@@ -211,6 +231,7 @@ export default [
"custom"
],
"id": "custom-profit",
+ "ts": false,
"tags": [],
"title": "Profit",
"titleCN": "利润分布直方图",
@@ -222,6 +243,7 @@ export default [
"bar"
],
"id": "dataset-encode0",
+ "ts": true,
"tags": [],
"title": "Simple Encode",
"titleCN": "指定数据到坐标轴的映射",
@@ -232,6 +254,7 @@ export default [
"gauge"
],
"id": "gauge",
+ "ts": true,
"tags": [],
"title": "Gauge Basic chart",
"titleCN": "基础仪表盘",
@@ -242,6 +265,7 @@ export default [
"gauge"
],
"id": "gauge-simple",
+ "ts": true,
"tags": [],
"title": "Simple Gauge",
"titleCN": "带标签数字动画的基础仪表盘",
@@ -252,6 +276,7 @@ export default [
"graph"
],
"id": "graph-force2",
+ "ts": true,
"tags": [],
"title": "Force Layout",
"titleCN": "力引导布局",
@@ -262,6 +287,7 @@ export default [
"line"
],
"id": "line-stack",
+ "ts": true,
"tags": [],
"title": "Stacked Line Chart",
"titleCN": "折线图堆叠",
@@ -272,6 +298,7 @@ export default [
"parallel"
],
"id": "parallel-simple",
+ "ts": true,
"tags": [],
"title": "Basic Parallel",
"titleCN": "基础平行坐标",
@@ -282,6 +309,7 @@ export default [
"pie"
],
"id": "pie-borderRadius",
+ "ts": true,
"tags": [],
"title": "Doughnut Chart with Rounded Corner",
"titleCN": "圆角环形图",
@@ -292,6 +320,7 @@ export default [
"pie"
],
"id": "pie-doughnut",
+ "ts": true,
"tags": [],
"title": "Doughnut Chart",
"titleCN": "环形图",
@@ -302,6 +331,7 @@ export default [
"radar"
],
"id": "radar-aqi",
+ "ts": true,
"tags": [],
"title": "AQI - Radar Chart",
"titleCN": "AQI - 雷达图",
@@ -312,6 +342,7 @@ export default [
"sankey"
],
"id": "sankey-vertical",
+ "ts": true,
"tags": [],
"title": "Sankey Orient Vertical",
"titleCN": "垂直方向的桑基图",
@@ -322,6 +353,7 @@ export default [
"scatter"
],
"id": "scatter-anscombe-quartet",
+ "ts": true,
"tags": [],
"title": "Anscomb's quartet",
"titleCN": "Anscomb's quartet",
@@ -332,6 +364,7 @@ export default [
"scatter"
],
"id": "scatter-clustering",
+ "ts": true,
"tags": [],
"title": "Clustering Process",
"titleCN": "数据聚合",
@@ -342,6 +375,7 @@ export default [
"scatter"
],
"id": "scatter-clustering-process",
+ "ts": false,
"tags": [],
"title": "Clustering Process",
"titleCN": "聚合过程可视化",
@@ -352,6 +386,7 @@ export default [
"scatter"
],
"id": "scatter-exponential-regression",
+ "ts": true,
"tags": [],
"title": "Exponential Regression",
"titleCN": "指数回归（使用统计插件）",
@@ -362,6 +397,7 @@ export default [
"sunburst"
],
"id": "sunburst-simple",
+ "ts": true,
"tags": [],
"title": "Basic Sunburst",
"titleCN": "基础旭日图",
@@ -372,8 +408,9 @@ export default [
"line"
],
"id": "area-stack",
+ "ts": true,
"tags": [],
- "title": "Stacked area chart",
+ "title": "Stacked Area Chart",
"titleCN": "堆叠面积图",
"difficulty": 2
},
@@ -382,8 +419,9 @@ export default [
"line"
],
"id": "area-stack-gradient",
+ "ts": true,
"tags": [],
- "title": "Gradient Stacked area chart",
+ "title": "Gradient Stacked Area Chart",
"titleCN": "渐变堆叠面积图",
"difficulty": 2
},
@@ -392,6 +430,7 @@ export default [
"bar"
],
"id": "bar-negative2",
+ "ts": true,
"tags": [],
"title": "Bar Chart with Negative Value",
"titleCN": "交错正负轴标签",
@@ -401,9 +440,32 @@ export default [
"category": [
"bar"
],
+ "id": "bar-polar-label-radial",
+ "ts": true,
+ "tags": [],
+ "title": "Radial Polar Bar Label Position",
+ "titleCN": "极坐标柱状图标签",
+ "difficulty": 2
+ },
+ {
+ "category": [
+ "bar"
+ ],
+ "id": "bar-polar-label-tangential",
+ "ts": true,
+ "tags": [],
+ "title": "Tangential Polar Bar Label Position",
+ "titleCN": "极坐标柱状图标签",
+ "difficulty": 2
+ },
+ {
+ "category": [
+ "bar"
+ ],
"id": "bar-y-category",
+ "ts": true,
"tags": [],
- "title": "World Total Population",
+ "title": "World Population",
"titleCN": "世界人口总量 - 条形图",
"difficulty": 2
},
@@ -412,6 +474,7 @@ export default [
"calendar"
],
"id": "calendar-horizontal",
+ "ts": true,
"tags": [],
"title": "Calendar Heatmap Horizontal",
"titleCN": "横向日历图",
@@ -422,6 +485,7 @@ export default [
"candlestick"
],
"id": "candlestick-sh",
+ "ts": true,
"tags": [],
"title": "ShangHai Index",
"titleCN": "上证指数",
@@ -433,6 +497,7 @@ export default [
"dataZoom"
],
"id": "custom-error-scatter",
+ "ts": false,
"tags": [],
"title": "Error Scatter on Catesian",
"titleCN": "使用自定系列给散点图添加误差范围",
@@ -443,6 +508,7 @@ export default [
"scatter"
],
"id": "effectScatter-map",
+ "ts": true,
"tags": [],
"title": "Air Quality",
"titleCN": "全国主要城市空气质量",
@@ -453,6 +519,7 @@ export default [
"gauge"
],
"id": "gauge-speed",
+ "ts": true,
"tags": [],
"title": "Speed Gauge",
"titleCN": "速度仪表盘",
@@ -463,6 +530,7 @@ export default [
"graph"
],
"id": "graph-grid",
+ "ts": true,
"tags": [],
"title": "Graph on Cartesian",
"titleCN": "笛卡尔坐标系上的 Graph",
@@ -473,6 +541,7 @@ export default [
"graph"
],
"id": "graph-simple",
+ "ts": true,
"tags": [],
"title": "Simple Graph",
"titleCN": "Graph 简单示例",
@@ -483,6 +552,7 @@ export default [
"heatmap"
],
"id": "heatmap-large",
+ "ts": false,
"tags": [],
"title": "Heatmap - 2w data",
"titleCN": "热力图 - 2w 数据",
@@ -493,6 +563,7 @@ export default [
"heatmap"
],
"id": "heatmap-large-piecewise",
+ "ts": false,
"tags": [],
"title": "Heatmap - Discrete Mapping of Color",
"titleCN": "热力图 - 颜色的离散映射",
@@ -503,8 +574,9 @@ export default [
"line"
],
"id": "line-marker",
+ "ts": true,
"tags": [],
- "title": "Temperature Change in the coming week",
+ "title": "Temperature Change in the Coming Week",
"titleCN": "未来一周气温变化",
"difficulty": 2
},
@@ -513,6 +585,7 @@ export default [
"parallel"
],
"id": "parallel-aqi",
+ "ts": true,
"tags": [],
"title": "Parallel Aqi",
"titleCN": "AQI 分布（平行坐标）",
@@ -523,6 +596,7 @@ export default [
"pie"
],
"id": "pie-custom",
+ "ts": true,
"tags": [],
"title": "Customized Pie",
"titleCN": "饼图自定义样式",
@@ -533,6 +607,7 @@ export default [
"pie"
],
"id": "pie-pattern",
+ "ts": true,
"tags": [],
"title": "Texture on Pie Chart",
"titleCN": "饼图纹理",
@@ -543,8 +618,9 @@ export default [
"pie"
],
"id": "pie-roseType",
+ "ts": true,
"tags": [],
- "title": "Nightingale's Rose Diagram",
+ "title": "Nightingale Chart",
"titleCN": "南丁格尔玫瑰图",
"difficulty": 2
},
@@ -553,8 +629,9 @@ export default [
"pie"
],
"id": "pie-roseType-simple",
+ "ts": true,
"tags": [],
- "title": "Nightingale's Rose Diagram",
+ "title": "Nightingale Chart",
"titleCN": "基础南丁格尔玫瑰图",
"difficulty": 2
},
@@ -563,6 +640,7 @@ export default [
"radar"
],
"id": "radar-custom",
+ "ts": true,
"tags": [],
"title": "Customized Radar Chart",
"titleCN": "自定义雷达图",
@@ -573,6 +651,7 @@ export default [
"sankey"
],
"id": "sankey-itemstyle",
+ "ts": true,
"tags": [],
"title": "Specify ItemStyle for Each Node in Sankey",
"titleCN": "桑基图节点自定义样式",
@@ -583,6 +662,7 @@ export default [
"sankey"
],
"id": "sankey-levels",
+ "ts": true,
"tags": [],
"title": "Sankey with Levels Setting",
"titleCN": "桑基图层级自定义样式",
@@ -593,6 +673,7 @@ export default [
"scatter"
],
"id": "scatter-effect",
+ "ts": true,
"tags": [],
"title": "Effect Scatter Chart",
"titleCN": "涟漪特效散点图",
@@ -603,6 +684,7 @@ export default [
"scatter"
],
"id": "scatter-linear-regression",
+ "ts": true,
"tags": [],
"title": "Linear Regression",
"titleCN": "线性回归（使用统计插件）",
@@ -613,6 +695,7 @@ export default [
"scatter"
],
"id": "scatter-polynomial-regression",
+ "ts": true,
"tags": [],
"title": "Polynomial Regression",
"titleCN": "多项式回归（使用统计插件）",
@@ -623,6 +706,7 @@ export default [
"sunburst"
],
"id": "sunburst-borderRadius",
+ "ts": true,
"tags": [],
"title": "Sunburst with Rounded Corner",
"titleCN": "圆角旭日图",
@@ -633,6 +717,7 @@ export default [
"sunburst"
],
"id": "sunburst-label-rotate",
+ "ts": true,
"tags": [],
"title": "Sunburst Label Rotate",
"titleCN": "旭日图标签旋转",
@@ -644,6 +729,7 @@ export default [
"visualMap"
],
"id": "area-pieces",
+ "ts": true,
"tags": [],
"title": "Area Pieces",
"titleCN": "折线图区域高亮",
@@ -654,6 +740,7 @@ export default [
"bar"
],
"id": "bar-gradient",
+ "ts": true,
"tags": [],
"title": "Clickable Column Chart with Gradient",
"titleCN": "特性示例：渐变色 阴影 点击缩放",
@@ -664,6 +751,7 @@ export default [
"bar"
],
"id": "bar-label-rotation",
+ "ts": true,
"tags": [],
"title": "Bar Label Rotation",
"titleCN": "柱状图标签旋转",
@@ -674,6 +762,7 @@ export default [
"bar"
],
"id": "bar-stack",
+ "ts": true,
"tags": [],
"title": "Stacked Column Chart",
"titleCN": "堆叠柱状图",
@@ -684,6 +773,7 @@ export default [
"bar"
],
"id": "bar-waterfall2",
+ "ts": true,
"tags": [],
"title": "Waterfall Chart",
"titleCN": "阶梯瀑布图（柱状图模拟）",
@@ -694,6 +784,7 @@ export default [
"bar"
],
"id": "bar-y-category-stack",
+ "ts": true,
"tags": [],
"title": "Stacked Horizontal Bar",
"titleCN": "堆叠条形图",
@@ -704,6 +795,7 @@ export default [
"candlestick"
],
"id": "candlestick-large",
+ "ts": true,
"tags": [],
"title": "Large Scale Candlestick",
"titleCN": "大数据量K线图",
@@ -714,6 +806,7 @@ export default [
"custom"
],
"id": "custom-bar-trend",
+ "ts": true,
"tags": [],
"title": "Custom Bar Trend",
"titleCN": "使用自定义系列添加柱状图趋势",
@@ -724,6 +817,7 @@ export default [
"custom"
],
"id": "custom-cartesian-polygon",
+ "ts": false,
"tags": [],
"title": "Custom Cartesian Polygon",
"titleCN": "自定义多边形图",
@@ -734,6 +828,7 @@ export default [
"custom"
],
"id": "custom-error-bar",
+ "ts": false,
"tags": [],
"title": "Error Bar on Catesian",
"titleCN": "使用自定系列给柱状图添加误差范围",
@@ -744,6 +839,7 @@ export default [
"custom"
],
"id": "custom-profile",
+ "ts": false,
"tags": [],
"title": "Profile",
"titleCN": "性能分析图",
@@ -754,6 +850,7 @@ export default [
"custom"
],
"id": "cycle-plot",
+ "ts": false,
"tags": [],
"title": "Cycle Plot",
"titleCN": "Cycle Plot",
@@ -764,6 +861,7 @@ export default [
"line"
],
"id": "data-transform-filter",
+ "ts": true,
"tags": [],
"title": "Data Transform Fitler",
"titleCN": "数据过滤",
@@ -776,6 +874,7 @@ export default [
"transform"
],
"id": "data-transform-multiple-pie",
+ "ts": true,
"tags": [],
"title": "Partition Data to Pies",
"titleCN": "分割数据到数个饼图",
@@ -787,6 +886,7 @@ export default [
"pie"
],
"id": "dataset-default",
+ "ts": true,
"tags": [],
"title": "Default arrangement",
"titleCN": "默认 encode 设置",
@@ -797,6 +897,7 @@ export default [
"dataset"
],
"id": "dataset-encode1",
+ "ts": true,
"tags": [],
"title": "Encode and Matrix",
"titleCN": "指定数据到坐标轴的映射",
@@ -807,6 +908,7 @@ export default [
"gauge"
],
"id": "gauge-progress",
+ "ts": true,
"tags": [],
"title": "Grogress Gauge",
"titleCN": "进度仪表盘",
@@ -817,6 +919,7 @@ export default [
"gauge"
],
"id": "gauge-stage",
+ "ts": true,
"tags": [],
"title": "Stage Speed Gauge",
"titleCN": "阶段速度仪表盘",
@@ -827,6 +930,7 @@ export default [
"graph"
],
"id": "graph-force",
+ "ts": true,
"tags": [],
"title": "Force Layout",
"titleCN": "力引导布局",
@@ -837,6 +941,7 @@ export default [
"graph"
],
"id": "graph-label-overlap",
+ "ts": true,
"tags": [],
"title": "Hide Overlapped Label",
"titleCN": "关系图自动隐藏重叠标签",
@@ -847,6 +952,7 @@ export default [
"heatmap"
],
"id": "heatmap-bmap",
+ "ts": false,
"tags": [
"bmap"
],
@@ -859,6 +965,7 @@ export default [
"heatmap"
],
"id": "heatmap-map",
+ "ts": false,
"tags": [],
"title": "Air Qulity",
"titleCN": "全国主要城市空气质量",
@@ -869,6 +976,7 @@ export default [
"line"
],
"id": "line-gradient",
+ "ts": true,
"tags": [],
"title": "Line Gradient",
"titleCN": "折线图的渐变",
@@ -879,6 +987,7 @@ export default [
"line"
],
"id": "line-sections",
+ "ts": true,
"tags": [],
"title": "Distribution of Electricity",
"titleCN": "一天用电量分布",
@@ -889,6 +998,7 @@ export default [
"pie"
],
"id": "pie-alignTo",
+ "ts": true,
"tags": [],
"title": "Pie Label Align",
"titleCN": "饼图标签对齐",
@@ -899,6 +1009,7 @@ export default [
"pie"
],
"id": "pie-labelLine-adjust",
+ "ts": true,
"tags": [],
"title": "Label Line Adjust",
"titleCN": "饼图引导线调整",
@@ -909,6 +1020,7 @@ export default [
"radar"
],
"id": "radar2",
+ "ts": true,
"tags": [],
"title": "Proportion of Browsers",
"titleCN": "浏览器占比变化",
@@ -919,6 +1031,7 @@ export default [
"sankey"
],
"id": "sankey-energy",
+ "ts": true,
"tags": [],
"title": "Gradient Edge",
"titleCN": "桑基图渐变色边",
@@ -929,6 +1042,7 @@ export default [
"sankey"
],
"id": "sankey-nodeAlign-left",
+ "ts": true,
"tags": [],
"title": "Node Align Left in Sankey",
"titleCN": "桑基图左对齐布局",
@@ -939,6 +1053,7 @@ export default [
"sankey"
],
"id": "sankey-nodeAlign-right",
+ "ts": true,
"tags": [],
"title": "Node Align Right in Sankey",
"titleCN": "桑基图右对齐布局",
@@ -949,6 +1064,7 @@ export default [
"scatter"
],
"id": "scatter-punchCard",
+ "ts": true,
"tags": [],
"title": "Punch Card of Github",
"titleCN": "GitHub 打卡气泡图",
@@ -959,6 +1075,7 @@ export default [
"scatter"
],
"id": "scatter-single-axis",
+ "ts": true,
"tags": [],
"title": "Scatter on Single Axis",
"titleCN": "单轴散点图",
@@ -969,6 +1086,7 @@ export default [
"scatter"
],
"id": "scatter-weight",
+ "ts": true,
"tags": [],
"title": "Distribution of Height and Weight",
"titleCN": "男性女性身高体重分布",
@@ -979,6 +1097,7 @@ export default [
"sunburst"
],
"id": "sunburst-monochrome",
+ "ts": true,
"tags": [],
"title": "Monochrome Sunburst",
"titleCN": "Monochrome Sunburst",
@@ -990,6 +1109,7 @@ export default [
"dataZoom"
],
"id": "area-simple",
+ "ts": true,
"tags": [],
"title": "Large scale area chart",
"titleCN": "大数据量面积图",
@@ -1000,6 +1120,7 @@ export default [
"bar"
],
"id": "bar-brush",
+ "ts": true,
"tags": [],
"title": "Brush Select on Column Chart",
"titleCN": "柱状图框选",
@@ -1010,6 +1131,7 @@ export default [
"bar"
],
"id": "bar-negative",
+ "ts": true,
"tags": [],
"title": "Bar Chart with Negative Value",
"titleCN": "正负条形图",
@@ -1020,6 +1142,7 @@ export default [
"bar"
],
"id": "bar1",
+ "ts": true,
"tags": [],
"title": "Rainfall and Evaporation",
"titleCN": "某地区蒸发量和降水量",
@@ -1031,6 +1154,7 @@ export default [
"graph"
],
"id": "calendar-graph",
+ "ts": true,
"tags": [],
"title": "Calendar Graph",
"titleCN": "日历关系图",
@@ -1041,6 +1165,7 @@ export default [
"calendar"
],
"id": "calendar-lunar",
+ "ts": true,
"tags": [],
"title": "Calendar Lunar",
"titleCN": "农历日历图",
@@ -1051,6 +1176,7 @@ export default [
"candlestick"
],
"id": "candlestick-touch",
+ "ts": true,
"tags": [],
"title": "Axis Pointer Link and Touch",
"titleCN": "触屏上的坐标轴指示器",
@@ -1061,6 +1187,7 @@ export default [
"line"
],
"id": "confidence-band",
+ "ts": true,
"tags": [],
"title": "Confidence Band",
"titleCN": "Confidence Band",
@@ -1073,6 +1200,7 @@ export default [
"drag"
],
"id": "custom-gantt-flight",
+ "ts": false,
"tags": [],
"title": "Gantt Chart of Airport Flights",
"titleCN": "机场航班甘特图",
@@ -1083,6 +1211,7 @@ export default [
"custom"
],
"id": "custom-polar-heatmap",
+ "ts": false,
"tags": [],
"title": "Polar Heatmap",
"titleCN": "极坐标热力图（自定义系列）",
@@ -1093,6 +1222,7 @@ export default [
"boxplot"
],
"id": "data-transform-aggregate",
+ "ts": false,
"tags": [],
"title": "Data Transform Simple Aggregate",
"titleCN": "简单的数据聚合",
@@ -1103,6 +1233,7 @@ export default [
"gauge"
],
"id": "gauge-grade",
+ "ts": true,
"tags": [],
"title": "Grade Gauge",
"titleCN": "等级仪表盘",
@@ -1113,6 +1244,7 @@ export default [
"gauge"
],
"id": "gauge-multi-title",
+ "ts": true,
"tags": [],
"title": "Multi Title Gauge",
"titleCN": "多标题仪表盘",
@@ -1123,6 +1255,7 @@ export default [
"gauge"
],
"id": "gauge-temperature",
+ "ts": true,
"tags": [],
"title": "Temperature Gauge chart",
"titleCN": "气温仪表盘",
@@ -1133,6 +1266,7 @@ export default [
"graph"
],
"id": "graph",
+ "ts": true,
"tags": [],
"title": "Les Miserables",
"titleCN": "悲惨世界人物关系图",
@@ -1143,9 +1277,10 @@ export default [
"line"
],
"id": "grid-multiple",
+ "ts": true,
"tags": [],
- "title": "Rainfall and Water Flow",
- "titleCN": "雨量流量关系图",
+ "title": "Rainfall vs Evaporation",
+ "titleCN": "雨量Evaporation关系图",
"difficulty": 4
},
{
@@ -1153,6 +1288,7 @@ export default [
"line"
],
"id": "line-aqi",
+ "ts": true,
"tags": [],
"title": "Beijing AQI",
"titleCN": "北京 AQI 可视化",
@@ -1163,6 +1299,7 @@ export default [
"bar"
],
"id": "mix-line-bar",
+ "ts": true,
"tags": [],
"title": "Mixed Line and Bar",
"titleCN": "折柱混合",
@@ -1173,6 +1310,7 @@ export default [
"bar"
],
"id": "mix-zoom-on-value",
+ "ts": true,
"tags": [],
"title": "Mix Zoom On Value",
"titleCN": "多数值轴轴缩放",
@@ -1183,6 +1321,7 @@ export default [
"line"
],
"id": "multiple-x-axis",
+ "ts": true,
"tags": [],
"title": "Multiple X Axes",
"titleCN": "多 X 轴",
@@ -1193,6 +1332,7 @@ export default [
"bar"
],
"id": "multiple-y-axis",
+ "ts": true,
"tags": [],
"title": "Multiple Y Axes",
"titleCN": "多 Y 轴示例",
@@ -1203,6 +1343,7 @@ export default [
"parallel"
],
"id": "parallel-nutrients",
+ "ts": true,
"tags": [],
"title": "Parallel Nutrients",
"titleCN": "营养结构（平行坐标）",
@@ -1214,6 +1355,7 @@ export default [
"animation"
],
"id": "pictorialBar-bar-transition",
+ "ts": true,
"tags": [],
"title": "Transition between pictorialBar and bar",
"titleCN": "象形主图变形为柱状图",
@@ -1224,6 +1366,7 @@ export default [
"pie"
],
"id": "pie-legend",
+ "ts": true,
"tags": [],
"title": "Pie with Scrollable Legend",
"titleCN": "可滚动的图例",
@@ -1235,6 +1378,7 @@ export default [
"rich"
],
"id": "pie-rich-text",
+ "ts": true,
"tags": [],
"title": "Pie Special Label",
"titleCN": "富文本标签",
@@ -1246,6 +1390,7 @@ export default [
"animation"
],
"id": "scatter-aggregate-bar",
+ "ts": true,
"tags": [],
"title": "Aggregate Scatter to Bar",
"titleCN": "散点图聚合为柱状图动画",
@@ -1256,6 +1401,7 @@ export default [
"scatter"
],
"id": "scatter-label-align-right",
+ "ts": true,
"tags": [],
"title": "Align Label on the Top",
"titleCN": "散点图标签顶部对齐",
@@ -1266,6 +1412,7 @@ export default [
"scatter"
],
"id": "scatter-label-align-top",
+ "ts": true,
"tags": [],
"title": "Align Label on the Top",
"titleCN": "散点图标签顶部对齐",
@@ -1276,6 +1423,7 @@ export default [
"scatter"
],
"id": "scatter-symbol-morph",
+ "ts": true,
"tags": [],
"title": "Symbol Shape Morph",
"titleCN": "散点图变形动画",
@@ -1286,6 +1434,7 @@ export default [
"sunburst"
],
"id": "sunburst-visualMap",
+ "ts": true,
"tags": [],
"title": "Sunburst VisualMap",
"titleCN": "旭日图使用视觉编码",
@@ -1296,6 +1445,7 @@ export default [
"treemap"
],
"id": "treemap-sunburst-transition",
+ "ts": true,
"tags": [],
"title": "Transition between Treemap and Sunburst",
"titleCN": "矩形树图和旭日图的动画过渡",
@@ -1306,6 +1456,7 @@ export default [
"line"
],
"id": "area-rainfall",
+ "ts": true,
"tags": [],
"title": "Rainfall",
"titleCN": "雨量流量关系图",
@@ -1316,6 +1467,7 @@ export default [
"line"
],
"id": "area-time-axis",
+ "ts": true,
"tags": [],
"title": "Area Chart with Time Axis",
"titleCN": "时间轴折线图",
@@ -1326,6 +1478,7 @@ export default [
"bar"
],
"id": "bar-animation-delay",
+ "ts": true,
"tags": [],
"title": "Animation Delay",
"titleCN": "柱状图动画延迟",
@@ -1336,6 +1489,7 @@ export default [
"bar"
],
"id": "bar-drilldown",
+ "ts": true,
"tags": [],
"title": "Bar Chart Drilldown Animation.",
"titleCN": "柱状图下钻动画",
@@ -1346,6 +1500,7 @@ export default [
"bar"
],
"id": "bar-large",
+ "ts": true,
"tags": [],
"title": "Large Scale Bar Chart",
"titleCN": "大数据量柱图",
@@ -1356,6 +1511,7 @@ export default [
"bar"
],
"id": "bar-race",
+ "ts": true,
"tags": [],
"title": "Bar Race",
"titleCN": "动态排序柱状图",
@@ -1368,6 +1524,7 @@ export default [
"pie"
],
"id": "dataset-link",
+ "ts": true,
"tags": [],
"title": "Share Dataset",
"titleCN": "联动和共享数据集",
@@ -1379,6 +1536,7 @@ export default [
"bar"
],
"id": "dataset-series-layout-by",
+ "ts": true,
"tags": [],
"title": "Series Layout By Column or Row",
"titleCN": "系列按行和按列排布",
@@ -1390,6 +1548,7 @@ export default [
"bar"
],
"id": "dataset-simple0",
+ "ts": true,
"tags": [],
"title": "Simple Example of Dataset",
"titleCN": "最简单的数据集（dataset）",
@@ -1401,6 +1560,7 @@ export default [
"bar"
],
"id": "dataset-simple1",
+ "ts": true,
"tags": [],
"title": "Dataset in Object Array",
"titleCN": "对象数组的输入格式",
@@ -1411,6 +1571,7 @@ export default [
"line"
],
"id": "dynamic-data2",
+ "ts": true,
"tags": [],
"title": "Dynamic Data + Time Axis",
"titleCN": "动态数据 + 时间坐标轴",
@@ -1421,6 +1582,7 @@ export default [
"gauge"
],
"id": "gauge-ring",
+ "ts": true,
"tags": [],
"title": "Ring Gauge",
"titleCN": "得分环",
@@ -1431,6 +1593,7 @@ export default [
"graph"
],
"id": "graph-circular-layout",
+ "ts": true,
"tags": [],
"title": "Les Miserables",
"titleCN": "悲惨世界人物关系图(环形布局)",
@@ -1441,6 +1604,7 @@ export default [
"line"
],
"id": "line-function",
+ "ts": true,
"tags": [],
"title": "Function Plot",
"titleCN": "函数绘图",
@@ -1451,6 +1615,7 @@ export default [
"line"
],
"id": "line-race",
+ "ts": true,
"tags": [],
"title": "Line Race",
"titleCN": "动态排序折线图",
@@ -1462,6 +1627,7 @@ export default [
"rich"
],
"id": "pie-nest",
+ "ts": true,
"tags": [],
"title": "Nested Pies",
"titleCN": "嵌套环形图",
@@ -1472,6 +1638,7 @@ export default [
"scatter"
],
"id": "scatter-large",
+ "ts": true,
"tags": [],
"title": "Large Scatter",
"titleCN": "大规模散点图",
@@ -1482,6 +1649,7 @@ export default [
"scatter"
],
"id": "scatter-nebula",
+ "ts": true,
"tags": [],
"title": "Scatter Nebula",
"titleCN": "大规模星云散点图",
@@ -1492,6 +1660,7 @@ export default [
"scatter"
],
"id": "scatter-stream-visual",
+ "ts": true,
"tags": [],
"title": "Visual interaction with stream",
"titleCN": "流式渲染和视觉映射操作",
@@ -1502,6 +1671,7 @@ export default [
"sunburst"
],
"id": "sunburst-drink",
+ "ts": true,
"tags": [],
"title": "Drink Flavors",
"titleCN": "Drink Flavors",
@@ -1513,6 +1683,7 @@ export default [
"dataZoom"
],
"id": "wind-barb",
+ "ts": true,
"tags": [],
"title": "Wind Barb",
"titleCN": "风向图",
@@ -1523,6 +1694,7 @@ export default [
"bar"
],
"id": "bar-race-country",
+ "ts": true,
"tags": [],
"title": "Bar Race",
"titleCN": "动态排序柱状图 - 人均收入",
@@ -1534,6 +1706,7 @@ export default [
"rich"
],
"id": "bar-rich-text",
+ "ts": true,
"tags": [],
"title": "Wheater Statistics",
"titleCN": "天气统计（富文本）",
@@ -1544,6 +1717,7 @@ export default [
"scatter"
],
"id": "bubble-gradient",
+ "ts": true,
"tags": [],
"title": "Bubble Chart",
"titleCN": "气泡图",
@@ -1555,6 +1729,7 @@ export default [
"pie"
],
"id": "calendar-pie",
+ "ts": true,
"tags": [],
"title": "Calendar Pie",
"titleCN": "日历饼图",
@@ -1566,6 +1741,7 @@ export default [
"map"
],
"id": "custom-hexbin",
+ "ts": false,
"tags": [],
"title": "Hexagonal Binning",
"titleCN": "六边形分箱图（自定义系列）",
@@ -1576,6 +1752,7 @@ export default [
"bar"
],
"id": "dynamic-data",
+ "ts": true,
"tags": [],
"title": "Dynamic Data",
"titleCN": "动态数据",
@@ -1586,6 +1763,7 @@ export default [
"gauge"
],
"id": "gauge-barometer",
+ "ts": true,
"tags": [],
"title": "Gauge Barometer chart",
"titleCN": "气压表",
@@ -1596,6 +1774,7 @@ export default [
"graph"
],
"id": "graph-force-dynamic",
+ "ts": true,
"tags": [],
"title": "Graph Dynamic",
"titleCN": "动态增加图节点",
@@ -1606,6 +1785,7 @@ export default [
"line"
],
"id": "line-markline",
+ "ts": true,
"tags": [],
"title": "Line with Marklines",
"titleCN": "折线图的标记线",
@@ -1616,6 +1796,7 @@ export default [
"line"
],
"id": "line-style",
+ "ts": true,
"tags": [],
"title": "Line Style and Item Style",
"titleCN": "自定义折线图样式",
@@ -1626,6 +1807,7 @@ export default [
"bar"
],
"id": "mix-timeline-finance",
+ "ts": false,
"tags": [],
"title": "Finance Indices 2002",
"titleCN": "2002全国宏观经济指标",
@@ -1636,6 +1818,7 @@ export default [
"sunburst"
],
"id": "sunburst-book",
+ "ts": false,
"tags": [],
"title": "Book Records",
"titleCN": "书籍分布",
@@ -1646,6 +1829,7 @@ export default [
"bar"
],
"id": "watermark",
+ "ts": true,
"tags": [],
"title": "Watermark - ECharts Download",
"titleCN": "水印 - ECharts 下载统计",
@@ -1656,6 +1840,7 @@ export default [
"bar"
],
"id": "bar-polar-real-estate",
+ "ts": true,
"tags": [],
"title": "Bar Chart on Polar",
"difficulty": 7
@@ -1665,6 +1850,7 @@ export default [
"bar"
],
"id": "bar-polar-stack",
+ "ts": true,
"tags": [],
"title": "Stacked Bar Chart on Polar",
"titleCN": "极坐标系下的堆叠柱状图",
@@ -1675,6 +1861,7 @@ export default [
"bar"
],
"id": "bar-polar-stack-radial",
+ "ts": true,
"tags": [],
"title": "Stacked Bar Chart on Polar(Radial)",
"titleCN": "极坐标系下的堆叠柱状图",
@@ -1686,6 +1873,7 @@ export default [
"calendar"
],
"id": "custom-calendar-icon",
+ "ts": true,
"tags": [],
"title": "Custom Calendar Icon",
"titleCN": "日历图自定义图标",
@@ -1696,6 +1884,7 @@ export default [
"custom"
],
"id": "custom-wind",
+ "ts": false,
"tags": [],
"title": "Use custom series to draw wind vectors",
"titleCN": "使用自定义系列绘制风场",
@@ -1706,6 +1895,7 @@ export default [
"gauge"
],
"id": "gauge-clock",
+ "ts": true,
"tags": [],
"title": "Clock",
"titleCN": "时钟仪表盘",
@@ -1716,6 +1906,7 @@ export default [
"graph"
],
"id": "graph-life-expectancy",
+ "ts": true,
"tags": [],
"title": "Graph Life Expectancy",
"titleCN": "Graph Life Expectancy",
@@ -1726,6 +1917,7 @@ export default [
"line"
],
"id": "line-in-cartesian-coordinate-system",
+ "ts": true,
"tags": [],
"title": "Line Chart in Cartesian Coordinate System",
"titleCN": "双数值轴折线图",
@@ -1736,6 +1928,7 @@ export default [
"line"
],
"id": "line-log",
+ "ts": true,
"tags": [],
"title": "Log Axis",
"titleCN": "对数轴示例",
@@ -1746,6 +1939,7 @@ export default [
"line"
],
"id": "line-step",
+ "ts": true,
"tags": [],
"title": "Step Line",
"titleCN": "阶梯折线图",
@@ -1756,6 +1950,7 @@ export default [
"bar"
],
"id": "polar-roundCap",
+ "ts": true,
"tags": [],
"title": "Rounded Bar on Polar",
"titleCN": "圆角环形图",
@@ -1766,6 +1961,7 @@ export default [
"scatter"
],
"id": "scatter-aqi-color",
+ "ts": true,
"tags": [],
"title": "Scatter Aqi Color",
"titleCN": "AQI 气泡图",
@@ -1776,6 +1972,7 @@ export default [
"scatter"
],
"id": "scatter-nutrients",
+ "ts": true,
"tags": [],
"title": "Scatter Nutrients",
"titleCN": "营养分布散点图",
@@ -1786,6 +1983,7 @@ export default [
"scatter"
],
"id": "scatter-nutrients-matrix",
+ "ts": true,
"tags": [],
"title": "Scatter Nutrients Matrix",
"titleCN": "营养分布散点矩阵",
@@ -1796,6 +1994,7 @@ export default [
"gauge"
],
"id": "gauge-car",
+ "ts": true,
"tags": [],
"title": "Gauge Car",
"titleCN": "Gauge Car",
@@ -1806,6 +2005,7 @@ export default [
"graph"
],
"id": "graph-webkit-dep",
+ "ts": true,
"tags": [],
"title": "Graph Webkit Dep",
"titleCN": "WebKit 模块关系依赖图",
@@ -1816,6 +2016,7 @@ export default [
"line"
],
"id": "line-easing",
+ "ts": true,
"tags": [],
"title": "Line Easing Visualizing",
"titleCN": "缓动函数可视化",
@@ -1826,6 +2027,7 @@ export default [
"line"
],
"id": "line-y-category",
+ "ts": true,
"tags": [],
"title": "Line Y Category",
"titleCN": "垂直折线图（Y轴为类目轴）",
@@ -1836,6 +2038,7 @@ export default [
"scatter"
],
"id": "scatter-polar-punchCard",
+ "ts": true,
"tags": [],
"title": "Punch Card of Github",
"titleCN": "GitHub 打卡气泡图（极坐标）",
@@ -1846,6 +2049,7 @@ export default [
"custom"
],
"id": "custom-gauge",
+ "ts": false,
"tags": [],
"title": "Custom Gauge",
"titleCN": "自定义仪表",
@@ -1856,6 +2060,7 @@ export default [
"graph"
],
"id": "graph-npm",
+ "ts": true,
"tags": [],
"title": "NPM Dependencies",
"titleCN": "NPM 依赖关系图",
@@ -1866,6 +2071,7 @@ export default [
"line"
],
"id": "line-graphic",
+ "ts": true,
"tags": [],
"title": "Custom Graphic Component",
"titleCN": "自定义图形组件",
@@ -1876,6 +2082,7 @@ export default [
"line"
],
"id": "line-pen",
+ "ts": true,
"tags": [],
"title": "Click to Add Points",
"titleCN": "点击添加折线图拐点",
@@ -1886,6 +2093,7 @@ export default [
"scatter"
],
"id": "scatter-life-expectancy-timeline",
+ "ts": false,
"tags": [],
"title": "Life Expectancy and GDP",
"titleCN": "各国人均寿命与GDP关系演变",
@@ -1896,28 +2104,18 @@ export default [
"scatter"
],
"id": "scatter-painter-choice",
+ "ts": true,
"tags": [],
"title": "Master Painter Color Choices Throughout History",
"titleCN": "Master Painter Color Choices Throughout History",
"difficulty": 9
},
{
- "category": [],
- "id": "bar-polar-label-radial",
- "tags": [],
- "difficulty": 10
- },
- {
- "category": [],
- "id": "bar-polar-label-tangential",
- "tags": [],
- "difficulty": 10
- },
- {
"category": [
"boxplot"
],
"id": "boxplot-light-velocity",
+ "ts": true,
"tags": [],
"title": "Boxplot Light Velocity",
"titleCN": "基础盒须图",
@@ -1928,6 +2126,7 @@ export default [
"boxplot"
],
"id": "boxplot-light-velocity2",
+ "ts": true,
"tags": [],
"title": "Boxplot Light Velocity2",
"titleCN": "垂直方向盒须图",
@@ -1938,6 +2137,7 @@ export default [
"boxplot"
],
"id": "boxplot-multi",
+ "ts": true,
"tags": [],
"title": "Multiple Categories",
"titleCN": "多系列盒须图",
@@ -1946,6 +2146,7 @@ export default [
{
"category": [],
"id": "calendar-effectscatter",
+ "ts": true,
"tags": [],
"difficulty": 10
},
@@ -1954,9 +2155,10 @@ export default [
"candlestick"
],
"id": "candlestick-brush",
+ "ts": true,
"tags": [],
"title": "Candlestick Brush",
- "titleCN": "日历图刷选",
+ "titleCN": "K 线图刷选",
"difficulty": 10
},
{
@@ -1964,23 +2166,19 @@ export default [
"candlestick"
],
"id": "candlestick-sh-2015",
+ "ts": true,
"tags": [],
"title": "ShangHai Index, 2015",
"titleCN": "2015 年上证指数",
"difficulty": 10
},
{
- "category": [],
- "id": "covid-america",
- "tags": [],
- "difficulty": 10
- },
- {
"category": [
"scatter",
"map"
],
"id": "effectScatter-bmap",
+ "ts": true,
"tags": [
"bmap"
],
@@ -1993,6 +2191,7 @@ export default [
"funnel"
],
"id": "funnel",
+ "ts": true,
"tags": [],
"title": "Funnel Chart",
"titleCN": "漏斗图",
@@ -2003,8 +2202,9 @@ export default [
"funnel"
],
"id": "funnel-align",
+ "ts": true,
"tags": [],
- "title": "Funnel (align)",
+ "title": "Funnel Compare",
"titleCN": "漏斗图(对比)",
"difficulty": 10
},
@@ -2013,6 +2213,7 @@ export default [
"funnel"
],
"id": "funnel-customize",
+ "ts": true,
"tags": [],
"title": "Customized Funnel",
"titleCN": "漏斗图",
@@ -2023,9 +2224,10 @@ export default [
"funnel"
],
"id": "funnel-mutiple",
+ "ts": true,
"tags": [],
"title": "Multiple Funnels",
- "titleCN": "漏斗图",
+ "titleCN": "Funnel",
"difficulty": 10
},
{
@@ -2033,6 +2235,7 @@ export default [
"map"
],
"id": "geo-beef-cuts",
+ "ts": true,
"tags": [],
"title": "GEO Beef Cuts",
"titleCN": "庖丁解牛",
@@ -2043,6 +2246,7 @@ export default [
"map"
],
"id": "geo-lines",
+ "ts": false,
"tags": [],
"title": "Migration",
"titleCN": "模拟迁徙",
@@ -2053,6 +2257,7 @@ export default [
"map"
],
"id": "geo-map-scatter",
+ "ts": false,
"tags": [],
"title": "map and scatter share a geo",
"titleCN": "map and scatter share a geo",
@@ -2063,6 +2268,7 @@ export default [
"map"
],
"id": "geo-organ",
+ "ts": false,
"tags": [],
"title": "Organ Data with SVG",
"titleCN": "内脏数据（SVG）",
@@ -2073,6 +2279,7 @@ export default [
"map"
],
"id": "geo-seatmap-flight",
+ "ts": true,
"tags": [],
"title": "Flight Seatmap with SVG",
"titleCN": "航班选座（SVG）",
@@ -2083,6 +2290,7 @@ export default [
"map"
],
"id": "geo-svg-lines",
+ "ts": true,
"tags": [],
"title": "GEO SVG Lines",
"titleCN": "GEO 路径图（SVG）",
@@ -2093,6 +2301,7 @@ export default [
"map"
],
"id": "geo-svg-map",
+ "ts": true,
"tags": [],
"title": "GEO SVG Map",
"titleCN": "地图（SVG）",
@@ -2103,6 +2312,7 @@ export default [
"map"
],
"id": "geo-svg-scatter-simple",
+ "ts": true,
"tags": [],
"title": "GEO SVG Scatter",
"titleCN": "散点图（SVG）",
@@ -2113,6 +2323,7 @@ export default [
"map"
],
"id": "geo-svg-traffic",
+ "ts": true,
"tags": [],
"title": "GEO SVG Traffic",
"titleCN": "交通（SVG）",
@@ -2124,6 +2335,7 @@ export default [
"drag"
],
"id": "line-draggable",
+ "ts": true,
"tags": [],
"title": "Try Dragging these Points",
"titleCN": "可拖拽点",
@@ -2134,6 +2346,7 @@ export default [
"line"
],
"id": "line-polar",
+ "ts": true,
"tags": [],
"title": "Two Value-Axes in Polar",
"titleCN": "极坐标双数值轴",
@@ -2144,6 +2357,7 @@ export default [
"line"
],
"id": "line-polar2",
+ "ts": true,
"tags": [],
"title": "Two Value-Axes in Polar",
"titleCN": "极坐标双数值轴",
@@ -2155,6 +2369,7 @@ export default [
"dataZoom"
],
"id": "line-tooltip-touch",
+ "ts": true,
"tags": [],
"title": "Tooltip and DataZoom on Mobile",
"titleCN": "移动端上的 dataZoom 和 tooltip",
@@ -2166,6 +2381,7 @@ export default [
"lines"
],
"id": "lines-airline",
+ "ts": true,
"tags": [],
"title": "65k+ Airline",
"titleCN": "65k+ 飞机航线",
@@ -2177,6 +2393,7 @@ export default [
"lines"
],
"id": "lines-bmap",
+ "ts": true,
"tags": [
"bmap"
],
@@ -2190,6 +2407,7 @@ export default [
"lines"
],
"id": "lines-bmap-bus",
+ "ts": true,
"tags": [
"bmap"
],
@@ -2203,6 +2421,7 @@ export default [
"lines"
],
"id": "lines-bmap-effect",
+ "ts": true,
"tags": [
"bmap"
],
@@ -2216,6 +2435,7 @@ export default [
"lines"
],
"id": "lines-ny",
+ "ts": true,
"tags": [],
"title": "Use lines to draw 1 million ny streets.",
"titleCN": "使用线图绘制近 100 万的纽约街道数据",
@@ -2227,6 +2447,7 @@ export default [
"animation"
],
"id": "map-bar-morph",
+ "ts": true,
"tags": [],
"title": "Morphing between Map and Bar",
"titleCN": "地图柱状图变形动画",
@@ -2237,6 +2458,7 @@ export default [
"map"
],
"id": "map-bin",
+ "ts": false,
"tags": [
"bmap"
],
@@ -2249,6 +2471,7 @@ export default [
"map"
],
"id": "map-china",
+ "ts": false,
"tags": [],
"title": "Map China",
"titleCN": "Map China",
@@ -2259,6 +2482,7 @@ export default [
"map"
],
"id": "map-china-dataRange",
+ "ts": false,
"tags": [],
"title": "Sales of iphone",
"titleCN": "iphone销量",
@@ -2269,6 +2493,7 @@ export default [
"map"
],
"id": "map-HK",
+ "ts": true,
"tags": [],
"title": "Population Density of HongKong (2011)",
"titleCN": "香港18区人口密度 （2011）",
@@ -2279,6 +2504,7 @@ export default [
"map"
],
"id": "map-labels",
+ "ts": false,
"tags": [],
"title": "Rich Text Labels on Map",
"titleCN": "地图上的富文本标签",
@@ -2289,6 +2515,7 @@ export default [
"map"
],
"id": "map-locate",
+ "ts": false,
"tags": [],
"title": "Map Locate",
"titleCN": "Map Locate",
@@ -2299,6 +2526,7 @@ export default [
"map"
],
"id": "map-polygon",
+ "ts": false,
"tags": [
"bmap"
],
@@ -2311,6 +2539,7 @@ export default [
"map"
],
"id": "map-province",
+ "ts": false,
"tags": [],
"title": "Switch among 34 Provinces",
"titleCN": "34 省切换查看",
@@ -2321,6 +2550,7 @@ export default [
"map"
],
"id": "map-usa",
+ "ts": true,
"tags": [],
"title": "USA Population Estimates (2012)",
"titleCN": "2012 年美国人口统计",
@@ -2331,6 +2561,7 @@ export default [
"map"
],
"id": "map-world",
+ "ts": false,
"tags": [],
"title": "Map World",
"titleCN": "Map World",
@@ -2341,6 +2572,7 @@ export default [
"map"
],
"id": "map-world-dataRange",
+ "ts": false,
"tags": [],
"title": "World Population (2010)",
"titleCN": "World Population (2010)",
@@ -2351,6 +2583,7 @@ export default [
"pictorialBar"
],
"id": "pictorialBar-body-fill",
+ "ts": true,
"tags": [],
"title": "Water Content",
"titleCN": "人体含水量",
@@ -2361,6 +2594,7 @@ export default [
"pictorialBar"
],
"id": "pictorialBar-dotted",
+ "ts": true,
"tags": [],
"title": "Dotted bar",
"titleCN": "虚线柱状图效果",
@@ -2371,6 +2605,7 @@ export default [
"pictorialBar"
],
"id": "pictorialBar-forest",
+ "ts": true,
"tags": [],
"title": "Expansion of forest",
"titleCN": "森林的增长",
@@ -2381,6 +2616,7 @@ export default [
"pictorialBar"
],
"id": "pictorialBar-hill",
+ "ts": true,
"tags": [],
"title": "Wish List and Mountain Height",
"titleCN": "圣诞愿望清单和山峰高度",
@@ -2391,6 +2627,7 @@ export default [
"pictorialBar"
],
"id": "pictorialBar-spirit",
+ "ts": true,
"tags": [],
"title": "Spirits",
"titleCN": "精灵",
@@ -2401,6 +2638,7 @@ export default [
"pictorialBar"
],
"id": "pictorialBar-vehicle",
+ "ts": true,
"tags": [],
"title": "Vehicles",
"titleCN": "交通工具",
@@ -2411,6 +2649,7 @@ export default [
"pictorialBar"
],
"id": "pictorialBar-velocity",
+ "ts": true,
"tags": [],
"title": "Velocity of Christmas Reindeers",
"titleCN": "驯鹿的速度",
@@ -2422,6 +2661,7 @@ export default [
"animtion"
],
"id": "pie-parliament-transition",
+ "ts": true,
"tags": [],
"title": "Transition of Parliament and Pie Chart",
"titleCN": "自定义议会图与饼图过渡动画",
@@ -2432,6 +2672,7 @@ export default [
"radar"
],
"id": "radar-multiple",
+ "ts": true,
"tags": [],
"title": "Multiple Radar",
"titleCN": "多雷达图",
@@ -2442,6 +2683,7 @@ export default [
"scatter"
],
"id": "scatter-map",
+ "ts": false,
"tags": [],
"title": "Air Quality",
"titleCN": "全国主要城市空气质量",
@@ -2452,6 +2694,7 @@ export default [
"scatter"
],
"id": "scatter-map-brush",
+ "ts": true,
"tags": [],
"title": "Scatter Map Brush",
"titleCN": "Scatter Map Brush",
@@ -2463,6 +2706,7 @@ export default [
"scatter"
],
"id": "scatter-matrix",
+ "ts": true,
"tags": [],
"title": "Scatter Matrix",
"titleCN": "散点矩阵和平行坐标",
@@ -2473,6 +2717,7 @@ export default [
"scatter"
],
"id": "scatter-weibo",
+ "ts": true,
"tags": [],
"title": "Sign in of weibo",
"titleCN": "微博签到数据点亮中国",
@@ -2483,6 +2728,7 @@ export default [
"scatter"
],
"id": "scatter-world-population",
+ "ts": false,
"tags": [],
"title": "World Population (2011)",
"titleCN": "World Population (2011)",
@@ -2493,6 +2739,7 @@ export default [
"themeRiver"
],
"id": "themeRiver-basic",
+ "ts": true,
"tags": [],
"title": "ThemeRiver",
"titleCN": "主题河流图",
@@ -2503,6 +2750,7 @@ export default [
"themeRiver"
],
"id": "themeRiver-lastfm",
+ "ts": true,
"tags": [],
"title": "ThemeRiver Lastfm",
"titleCN": "ThemeRiver Lastfm",
@@ -2513,6 +2761,7 @@ export default [
"tree"
],
"id": "tree-basic",
+ "ts": true,
"tags": [],
"title": "From Left to Right Tree",
"titleCN": "从左到右树状图",
@@ -2523,6 +2772,7 @@ export default [
"tree"
],
"id": "tree-legend",
+ "ts": true,
"tags": [],
"title": "Multiple Trees",
"titleCN": "多棵树",
@@ -2533,6 +2783,7 @@ export default [
"tree"
],
"id": "tree-orient-bottom-top",
+ "ts": true,
"tags": [],
"title": "From Bottom to Top Tree",
"titleCN": "从下到上树状图",
@@ -2543,6 +2794,7 @@ export default [
"tree"
],
"id": "tree-orient-right-left",
+ "ts": true,
"tags": [],
"title": "From Right to Left Tree",
"titleCN": "从右到左树状图",
@@ -2553,6 +2805,7 @@ export default [
"tree"
],
"id": "tree-polyline",
+ "ts": true,
"tags": [],
"title": "Tree with Polyline Edge",
"titleCN": "折线树图",
@@ -2563,6 +2816,7 @@ export default [
"tree"
],
"id": "tree-radial",
+ "ts": true,
"tags": [],
"title": "Radial Tree",
"titleCN": "径向树状图",
@@ -2573,6 +2827,7 @@ export default [
"tree"
],
"id": "tree-vertical",
+ "ts": true,
"tags": [],
"title": "From Top to Bottom Tree",
"titleCN": "从上到下树状图",
@@ -2583,6 +2838,7 @@ export default [
"treemap"
],
"id": "treemap-disk",
+ "ts": true,
"tags": [],
"title": "Disk Usage",
"titleCN": "磁盘占用",
@@ -2593,6 +2849,7 @@ export default [
"treemap"
],
"id": "treemap-drill-down",
+ "ts": true,
"tags": [],
"title": "ECharts Option Query",
"titleCN": "ECharts 配置项查询分布",
@@ -2603,6 +2860,7 @@ export default [
"treemap"
],
"id": "treemap-obama",
+ "ts": true,
"tags": [],
"title": "How $3.7 Trillion is Spent",
"titleCN": "How $3.7 Trillion is Spent",
@@ -2613,6 +2871,7 @@ export default [
"treemap"
],
"id": "treemap-show-parent",
+ "ts": true,
"tags": [],
"title": "Show Parent Labels",
"titleCN": "显示父层级标签",
@@ -2623,6 +2882,7 @@ export default [
"treemap"
],
"id": "treemap-simple",
+ "ts": true,
"tags": [],
"title": "Basic Treemap",
"titleCN": "基础矩形树图",
@@ -2633,6 +2893,7 @@ export default [
"treemap"
],
"id": "treemap-visual",
+ "ts": true,
"tags": [],
"title": "Gradient Mapping",
"titleCN": "映射为渐变色",
@@ -2644,6 +2905,7 @@ export default [
"scatter"
],
"id": "calendar-charts",
+ "ts": true,
"tags": [],
"title": "Calendar Charts",
"titleCN": "日历图",
@@ -2654,6 +2916,7 @@ export default [
"custom"
],
"id": "circle-packing-with-d3",
+ "ts": true,
"tags": [],
"title": "Circle Packing with d3",
"titleCN": "Circle Packing with d3",
@@ -2664,6 +2927,7 @@ export default [
"custom"
],
"id": "custom-spiral-race",
+ "ts": false,
"tags": [],
"title": "Custom Spiral Race",
"titleCN": "自定义螺旋线竞速",
@@ -2674,6 +2938,7 @@ export default [
"scatter"
],
"id": "scatter-logarithmic-regression",
+ "ts": true,
"tags": [],
"title": "Logarithmic Regression",
"titleCN": "对数回归（使用统计插件）",
diff --git a/src/editor/Editor.vue b/src/editor/Editor.vue
index 2070a26..91c3e7c 100644
--- a/src/editor/Editor.vue
+++ b/src/editor/Editor.vue
@@ -22,12 +22,18 @@
>
</el-tooltip>
<el-tooltip
- :content="$t('editor.tooltip.tsMode')"
+ :content="
+ $t(`editor.tooltip.${exampleConfig.ts ? 'tsMode' : 'noTs'}`)
+ "
placement="bottom"
>
<a
- @click="changeLang('ts')"
- :class="{ ts: true, active: shared.typeCheck }"
+ @click="exampleConfig.ts && changeLang('ts')"
+ :class="{
+ ts: true,
+ active: shared.typeCheck,
+ disabled: !exampleConfig.ts
+ }"
>TS</a
>
</el-tooltip>
@@ -147,7 +153,12 @@ import CodeAce from './CodeAce.vue';
import CodeMonaco from './CodeMonaco.vue';
import FullCodePreview from './FullCodePreview.vue';
import Preview from './Preview.vue';
-import { store, loadExampleCode, parseSourceCode } from '../common/store';
+import {
+ store,
+ loadExampleCode,
+ parseSourceCode,
+ getExampleConfig
+} from '../common/store';
import { collectDeps, buildExampleCode } from '../../common/buildCode';
import { goto } from '../common/route';
import { mount } from '@lang/object-visualizer';
@@ -186,6 +197,8 @@ export default {
fullCode: '',
+ exampleConfig: getExampleConfig(),
+
fullCodeConfig: {
mimimal: false,
esm: true,
@@ -514,6 +527,15 @@ $handler-width: 5px;
color: #3178c6;
}
+ &.ts.disabled {
+ color: #ddd;
+ cursor: default;
+
+ &:hover {
+ text-decoration: none;
+ }
+ }
+
&.js {
color: #000;
}
diff --git a/src/editor/Preview.vue b/src/editor/Preview.vue
index 89518da..68fea47 100644
--- a/src/editor/Preview.vue
+++ b/src/editor/Preview.vue
@@ -102,21 +102,21 @@
</template>
<script>
-import { store, updateRunHash } from '../common/store';
+import {
+ getExampleConfig,
+ isGLExample,
+ store,
+ updateRunHash
+} from '../common/store';
import { SCRIPT_URLS, URL_PARAMS } from '../common/config';
import { loadScriptsAsync } from '../common/helper';
import { createSandbox } from './sandbox';
import debounce from 'lodash/debounce';
import { addListener } from 'resize-detector';
-import CHART_LIST from '../data/chart-list-data';
-import CHART_LIST_GL from '../data/chart-list-data-gl';
import { download } from './downloadExample';
-function findExample(item) {
- return URL_PARAMS.c === item.id;
-}
-const example = CHART_LIST.concat(CHART_LIST_GL).find(findExample);
-const isGL = CHART_LIST_GL.find(findExample);
+const example = getExampleConfig();
+const isGL = isGLExample();
function addDecalIfNecessary(option) {
if (store.enableDecal) {
diff --git a/tool/build-example.js b/tool/build-example.js
index b23290b..32a26cc 100644
--- a/tool/build-example.js
+++ b/tool/build-example.js
@@ -264,9 +264,8 @@ async function takeScreenshot(
// TODO puppeteer will have Navigation Timeout Exceeded: 30000ms exceeded error in these examples.
const screenshotBlackList = [];
- const files = await globby(
- `${rootDir}public/examples/js/${isGL ? 'gl/' : ''}*.js`
- );
+ const examplesRoot = `${rootDir}public/examples`;
+ const files = await globby(`${examplesRoot}/js/${isGL ? 'gl/' : ''}*.js`);
const exampleList = [];
@@ -289,6 +288,9 @@ async function takeScreenshot(
return;
}
+ const tsFile = `${examplesRoot}/ts/${isGL ? 'gl/' : ''}${basename}.ts`;
+ const hasTs = fs.existsSync(tsFile);
+
let fmResult;
try {
const code = fs.readFileSync(fileName, 'utf-8');
@@ -313,6 +315,7 @@ async function takeScreenshot(
exampleList.push({
category: category,
id: basename,
+ ts: hasTs,
tags: (fmResult.data.tags || '')
.split(/,/g)
.map((a) => a.trim())
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-examples] 06/15: add language switch confirm
Posted by sh...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
commit 91a9f36c6b8c9137b9912923f4d61816aef26400
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Sep 7 15:39:47 2021 +0800
add language switch confirm
---
src/common/i18n.js | 14 ++++++++++++--
src/editor/Editor.vue | 24 ++++++++++++++++++++----
src/editor/Preview.vue | 8 ++++----
3 files changed, 36 insertions(+), 10 deletions(-)
diff --git a/src/common/i18n.js b/src/common/i18n.js
index 206515a..8bb0e56 100644
--- a/src/common/i18n.js
+++ b/src/common/i18n.js
@@ -26,7 +26,12 @@ export default {
tooltip: {
jsMode: 'JavaScript',
tsMode: 'TypeScript. Provides Better Intelligent'
- }
+ },
+
+ codeChangedConfirm:
+ "Modified code will be lost. Do you wan't to continue?",
+ confirmButtonText: 'Yes',
+ cancelButtonText: 'No'
},
chartTypes: {
@@ -98,7 +103,12 @@ export default {
tooltip: {
jsMode: 'JavaScript 代码编辑',
tsMode: 'TypeScript 代码编辑，提供更好的代码补全和类型检查。'
- }
+ },
+
+ codeChangedConfirm: '已经修改过的代码将会丢失，是否确认继续？',
+
+ confirmButtonText: '确认',
+ cancelButtonText: '取消'
},
chartTypes: {
diff --git a/src/editor/Editor.vue b/src/editor/Editor.vue
index f0f8abd..2070a26 100644
--- a/src/editor/Editor.vue
+++ b/src/editor/Editor.vue
@@ -292,11 +292,27 @@ export default {
},
changeLang(lang) {
if ((URL_PARAMS.lang || 'js').toLowerCase() !== lang) {
- goto(
- Object.assign({}, URL_PARAMS, {
- lang
+ if (!this.initialCode || store.sourceCode === this.initialCode) {
+ goto(
+ Object.assign({}, URL_PARAMS, {
+ lang
+ })
+ );
+ } else {
+ this.$confirm(this.$t('editor.codeChangedConfirm'), '', {
+ confirmButtonText: this.$t('editor.confirmButtonText'),
+ cancelButtonText: this.$t('editor.cancelButtonText'),
+ type: 'warning'
})
- );
+ .then(() => {
+ goto(
+ Object.assign({}, URL_PARAMS, {
+ lang
+ })
+ );
+ })
+ .catch(() => {});
+ }
}
},
format() {
diff --git a/src/editor/Preview.vue b/src/editor/Preview.vue
index dd573d5..89518da 100644
--- a/src/editor/Preview.vue
+++ b/src/editor/Preview.vue
@@ -57,10 +57,10 @@
</el-col>
</el-row>
</div>
- <span class="render-config-trigger" slot="reference"
- ><i class="el-icon-setting el-icon--left"></i
- >{{ $t('editor.renderCfgTitle') }}</span
- >
+ <span class="render-config-trigger" slot="reference">
+ <i class="el-icon-setting el-icon--left"></i
+ >{{ $t('editor.renderCfgTitle') }}
+ </span>
</el-popover>
</div>
<template v-if="inEditor">
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-examples] 07/15: fix build example
Posted by sh...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
commit bfb64a2da816b160843720ecb6742ba00d9a5897
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Sep 7 16:04:17 2021 +0800
fix build example
---
package.json | 8 ++++----
public/examples/tsconfig.json | 24 ++++++++++++------------
src/common/store.js | 1 +
tool/build-example.js | 33 +++++++++++++++++++--------------
tool/compile-example.js | 35 +++++++++++++++++++++++++++++++++++
tool/screenshot.html | 5 +++--
6 files changed, 74 insertions(+), 32 deletions(-)
diff --git a/package.json b/package.json
index cbc49e1..90c55fe 100644
--- a/package.json
+++ b/package.json
@@ -5,11 +5,11 @@
"scripts": {
"build": "npx webpack --config build/webpack.config.js --mode production",
"watch": "npx webpack --config build/webpack.config.js --mode development --devtool source-map --watch",
- "localsite": "npm run build && node build/copyResource.js --env localsite",
- "release": "npm run build && node build/copyResource.js --env asf",
+ "localsite": "npm run compile:example || npm run build && node build/copyResource.js --env localsite",
+ "release": "npm run compile:example || npm run build && node build/copyResource.js --env asf",
"dev": "npx concurrently --kill-others \"npm:watch\" \"npm:server\"",
- "build:example": "node tool/build-example.js && node tool/build-example.js --source data-gl",
- "compile:example": "tsc --project public/examples/tsconfig.json || prettier --write public/examples/js",
+ "build:example": "npm run compile:example || node tool/build-example.js && node tool/build-example.js --gl",
+ "compile:example": "node tool/compile-example.js",
"test:e2e": "node e2e/main.js --bundler webpack -m",
"test:e2e:local": "node e2e/main.js --bundler webpack -m --local",
"test:e2e:esbuild": "node e2e/main.js --bundler esbuild -m",
diff --git a/public/examples/tsconfig.json b/public/examples/tsconfig.json
index b689d9a..f47c85b 100644
--- a/public/examples/tsconfig.json
+++ b/public/examples/tsconfig.json
@@ -1,13 +1,13 @@
{
- "compilerOptions": {
- "target": "ES6",
- "strict": true,
- "moduleResolution": "node",
- "allowJs": true,
- "checkJs": false,
- "pretty": true,
- "outDir": "./js/",
- "baseUrl": "./"
- },
- "include": ["./ts/**/*.ts", "./ts/**/*.js", "./types/**/*.d.ts"]
-}
\ No newline at end of file
+ "compilerOptions": {
+ "target": "ES6",
+ "strict": true,
+ "moduleResolution": "node",
+ "allowJs": true,
+ "checkJs": false,
+ "pretty": true,
+ "outDir": "./js/",
+ "baseUrl": "./"
+ },
+ "include": ["./ts/**/*.ts", "./ts/**/*.js", "./types/**/*.d.ts"]
+}
diff --git a/src/common/store.js b/src/common/store.js
index f6a56df..af35246 100644
--- a/src/common/store.js
+++ b/src/common/store.js
@@ -49,6 +49,7 @@ export function parseSourceCode(code) {
.replace(/\/\*[\w\W]*?\*\//, '')
.trim()
// ts code needs add `export {}` to be a module. remove it.
+ // FIXME
.replace(/export\s+\{\s*\}\s*;?$/g, '')
);
}
diff --git a/tool/build-example.js b/tool/build-example.js
index ac763da..b23290b 100644
--- a/tool/build-example.js
+++ b/tool/build-example.js
@@ -36,8 +36,8 @@ function codeSize(code) {
const parser = new argparse.ArgumentParser({
addHelp: true
});
-parser.addArgument(['-s', '--source'], {
- help: 'Source folder'
+parser.addArgument(['--gl'], {
+ help: 'If generating gl'
});
parser.addArgument(['-t', '--theme'], {
help: 'Theme list, default to be all'
@@ -51,7 +51,7 @@ parser.addArgument(['--no-thumb'], {
});
const args = parser.parseArgs();
-const sourceFolder = args.source || 'data';
+const isGL = args.gl;
let themeList = args.theme || 'default,dark';
let matchPattern = args.pattern;
if (matchPattern) {
@@ -107,7 +107,8 @@ async function takeScreenshot(
) {
const thumbFolder = theme !== 'default' ? 'thumb-' + theme : 'thumb';
const page = await browser.newPage();
- const thumbDir = `${rootDir}public/${sourceFolder}/${thumbFolder}`;
+ const dataDir = isGL ? 'data-gl' : 'data';
+ const thumbDir = `${rootDir}public/${dataDir}/${thumbFolder}`;
const fileBase = `${thumbDir}/${basename}`;
const webmFile = `${fileBase}.webm`;
@@ -138,7 +139,9 @@ async function takeScreenshot(
width: shotWidth || DEFAULT_PAGE_WIDTH,
height: (shotWidth || DEFAULT_PAGE_WIDTH) * DEFAULT_PAGE_RATIO
});
- let url = `${SCREENSHOT_PAGE_URL}?c=${basename}&t=${theme}&s=${sourceFolder}`;
+ let url = `${SCREENSHOT_PAGE_URL}?c=${basename}&t=${theme}${
+ isGL ? '&gl' : ''
+ }`;
if (hasVideo) {
url += `&start=${videoStart}&end=${videoEnd}`;
@@ -193,9 +196,9 @@ async function takeScreenshot(
return _$getEChartsOption();
});
const optionStr = optionToJson(option);
- fse.ensureDirSync(`${rootDir}public/${sourceFolder}/option/`);
+ fse.ensureDirSync(`${rootDir}public/${dataDir}/option/`);
fs.writeFileSync(
- `${rootDir}public/${sourceFolder}/option/${basename}.json`,
+ `${rootDir}public/${dataDir}/option/${basename}.json`,
optionStr,
'utf-8'
);
@@ -261,7 +264,9 @@ async function takeScreenshot(
// TODO puppeteer will have Navigation Timeout Exceeded: 30000ms exceeded error in these examples.
const screenshotBlackList = [];
- const files = await globby(`${rootDir}public/${sourceFolder}/*.js`);
+ const files = await globby(
+ `${rootDir}public/examples/js/${isGL ? 'gl/' : ''}*.js`
+ );
const exampleList = [];
@@ -286,10 +291,7 @@ async function takeScreenshot(
let fmResult;
try {
- const code = fs.readFileSync(
- `${rootDir}public/${sourceFolder}/${basename}.js`,
- 'utf-8'
- );
+ const code = fs.readFileSync(fileName, 'utf-8');
fmResult = matter(code, {
delimiters: ['/*', '*/']
});
@@ -355,7 +357,10 @@ export default ${JSON.stringify(exampleList, null, 2)}`;
if (!matchPattern) {
fs.writeFileSync(
- path.join(__dirname, `../src/data/chart-list-${sourceFolder}.js`),
+ path.join(
+ __dirname,
+ `../src/data/chart-list-data${isGL ? '-gl' : ''}.js`
+ ),
code,
'utf-8'
);
@@ -420,7 +425,7 @@ export default ${JSON.stringify(exampleList, null, 2)}`;
}
);
},
- sourceFolder === 'data-gl' ? 2 : 16
+ isGL ? 2 : 16
);
await runTasks(
diff --git a/tool/compile-example.js b/tool/compile-example.js
new file mode 100644
index 0000000..321bf4c
--- /dev/null
+++ b/tool/compile-example.js
@@ -0,0 +1,35 @@
+const globby = require('globby');
+const fs = require('fs');
+const path = require('path');
+const shell = require('shelljs');
+
+const exampleDir = path.join(__dirname, '../public/examples');
+
+async function run() {
+ const hasError =
+ shell.exec(`tsc --project ${path.join(exampleDir, 'tsconfig.json')}`)
+ .code !== 0;
+ shell.exec(`prettier --write ${path.join(exampleDir, 'js')}`);
+
+ const files = await globby(path.join(exampleDir, `js/**/*.js`));
+
+ for (let file of files) {
+ const content =
+ fs
+ .readFileSync(file, 'utf-8')
+ .trim()
+ // ts code needs add `export {}` to be a module. remove it.
+ // FIXME
+ .replace(/export\s+\{\s*\}\s*;?$/g, '')
+ .replace(/^'use strict';/, '')
+ .trim() + '\n';
+
+ fs.writeFileSync(file, content, 'utf-8');
+ }
+
+ if (hasError) {
+ shell.exit(1);
+ }
+}
+
+run();
diff --git a/tool/screenshot.html b/tool/screenshot.html
index ebab89e..271e8cc 100644
--- a/tool/screenshot.html
+++ b/tool/screenshot.html
@@ -141,10 +141,11 @@
console.error('No ROOT_PATH specified. Use default ROOT_PATH "."');
window.ROOT_PATH = '.';
}
- const sourceFolder = params.s || 'data';
const scriptTag = document.createElement('script');
scriptTag.async = false;
- scriptTag.src = `../public/${sourceFolder}/${params.c}.js`;
+ scriptTag.src = `../public/examples/js${'gl' in params ? '/gl' : ''}/${
+ params.c
+ }.js`;
document.body.appendChild(scriptTag);
let videoRecorder;
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-examples] 13/15: fix ts tag still show on js only example
Posted by sh...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
commit bf9114ee91da8cd9686ecc3f4e23cffbcc80bd3f
Author: pissang <bm...@gmail.com>
AuthorDate: Thu Sep 9 13:36:26 2021 +0800
fix ts tag still show on js only example
---
src/explore/ExampleCard.vue | 8 +++++++-
1 file changed, 7 insertions(+), 1 deletion(-)
diff --git a/src/explore/ExampleCard.vue b/src/explore/ExampleCard.vue
index ba6de53..3ac1630 100644
--- a/src/explore/ExampleCard.vue
+++ b/src/explore/ExampleCard.vue
@@ -10,7 +10,13 @@
<div>
<div class="example-langs">
<a class="js" :href="exampleLink" target="_blank">JS</a>
- <a class="ts" :href="exampleLink + '&lang=ts'" target="_blank">TS</a>
+ <a
+ class="ts"
+ :href="exampleLink + '&lang=ts'"
+ v-if="example.ts"
+ target="_blank"
+ >TS</a
+ >
</div>
<div>
<div class="example-title">{{ title }}</div>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-examples] 15/15: fix doc link lang
Posted by sh...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
commit 665dcbd12c9150ec8bd01e7372695c5147115ca9
Author: pissang <bm...@gmail.com>
AuthorDate: Fri Sep 10 10:41:37 2021 +0800
fix doc link lang
---
src/editor/Editor.vue | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/editor/Editor.vue b/src/editor/Editor.vue
index 25cd2e3..1c5065a 100644
--- a/src/editor/Editor.vue
+++ b/src/editor/Editor.vue
@@ -281,6 +281,7 @@ export default {
return;
}
const tipTitle = this.$t('editor.tooltip.gotoDoc');
+ const lang = this.$i18n.locale;
mount(option, this.$el.querySelector('#option-outline'), {
getKeys(object, path) {
return Object.keys(object).filter((key) => {
@@ -320,7 +321,7 @@ export default {
}
const isObjOrArray = typeof obj === 'object' && obj != null;
- const link = `https://echarts.apache.org/zh/option.html#${hash.join(
+ const link = `https://echarts.apache.org/${lang}/option.html#${hash.join(
'.'
)}`;
return !isObjOrArray
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-examples] 05/15: feat: add ts and js switch. add prettier
Posted by sh...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
commit 85dfdafbd3a7349dfdacd4c7b060c8d40abcb634
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Sep 7 13:40:05 2021 +0800
feat: add ts and js switch. add prettier
---
package.json | 4 +-
src/common/config.js | 4 +-
src/common/i18n.js | 21 ++++--
src/common/route.js | 30 ++++++++
src/common/store.js | 2 +-
src/editor/CodeMonaco.vue | 25 ++++++-
src/editor/Editor.vue | 177 +++++++++++++++++++++++++++++++++++++++++-----
src/editor/Preview.vue | 25 +++++--
8 files changed, 253 insertions(+), 35 deletions(-)
diff --git a/package.json b/package.json
index 26fe6df..cbc49e1 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,6 @@
"open": "^7.1.0",
"pixelmatch": "^5.2.1",
"pngjs": "^6.0.0",
- "prettier": "^2.3.2",
"sass.js": "^0.11.1",
"sassjs-loader": "^2.0.0",
"seedrandom": "^3.0.5",
@@ -67,6 +66,7 @@
"sucrase": "^3.17.0",
"vanilla-lazyload": "^12.5.1",
"vue-i18n": "^8.18.2",
- "vue-scrollactive": "^0.9.3"
+ "vue-scrollactive": "^0.9.3",
+ "prettier": "^2.3.2"
}
}
diff --git a/src/common/config.js b/src/common/config.js
index e46cf9f..472658a 100644
--- a/src/common/config.js
+++ b/src/common/config.js
@@ -134,5 +134,7 @@ export const SCRIPT_URLS = {
datGUIMinJS:
'https://cdn.jsdelivr.net/npm/dat.gui@0.6.5/build/dat.gui.min.js',
monacoDir: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.27.0/min/vs',
- aceDir: 'https://cdn.jsdelivr.net/npm/ace-builds@1.4.12/src-min-noconflict'
+ aceDir: 'https://cdn.jsdelivr.net/npm/ace-builds@1.4.12/src-min-noconflict',
+
+ prettierDir: 'https://cdn.jsdelivr.net/npm/prettier@2.3.2'
};
diff --git a/src/common/i18n.js b/src/common/i18n.js
index 88e6493..206515a 100644
--- a/src/common/i18n.js
+++ b/src/common/i18n.js
@@ -2,6 +2,7 @@ export default {
en: {
editor: {
run: 'Run',
+ format: 'Format',
errorInEditor: 'Errors exist in code!',
chartOK: 'Chart has been generated successfully, ',
@@ -16,12 +17,16 @@ export default {
download: 'Download',
edit: 'Edit',
- monacoMode: 'Enable Type Checking',
- tabEditor: 'Edit Example',
+ tabEditor: 'Edit Code',
tabFullCodePreview: 'Full Code',
tabOptionPreview: 'Option Preview',
- minimalBundle: 'Minimal Bundle'
+ minimalBundle: 'Minimal Bundle',
+
+ tooltip: {
+ jsMode: 'JavaScript',
+ tsMode: 'TypeScript. Provides Better Intelligent'
+ }
},
chartTypes: {
@@ -69,6 +74,7 @@ export default {
zh: {
editor: {
run: '运行',
+ format: '格式化',
errorInEditor: '编辑器内容有误！',
chartOK: '图表已生成, ',
@@ -84,10 +90,15 @@ export default {
edit: '编辑',
monacoMode: '开启类型检查',
- tabEditor: '示例编辑',
+ tabEditor: '代码编辑',
tabFullCodePreview: '完整代码',
tabOptionPreview: '配置项',
- minimalBundle: '按需引入'
+ minimalBundle: '按需引入',
+
+ tooltip: {
+ jsMode: 'JavaScript 代码编辑',
+ tsMode: 'TypeScript 代码编辑，提供更好的代码补全和类型检查。'
+ }
},
chartTypes: {
diff --git a/src/common/route.js b/src/common/route.js
new file mode 100644
index 0000000..4ede915
--- /dev/null
+++ b/src/common/route.js
@@ -0,0 +1,30 @@
+export function getURL(params) {
+ const searchUrlParts = [];
+ for (let key in params) {
+ if (params.hasOwnProperty(key)) {
+ let part = key;
+ if (params[key] != null) {
+ part += '=' + params[key];
+ }
+ searchUrlParts.push(part);
+ }
+ }
+ const searchUrl = searchUrlParts.join('&');
+
+ return (
+ location.protocol +
+ '//' +
+ location.hostname +
+ (location.port ? ':' + location.port : '') +
+ location.pathname +
+ (searchUrl ? '?' + searchUrl : '')
+ );
+}
+
+export function goto(params, pushHistory) {
+ if (pushHistory) {
+ history.pushState({}, getURL(params));
+ } else {
+ location.href = getURL(params);
+ }
+}
diff --git a/src/common/store.js b/src/common/store.js
index de6d12b..f6a56df 100644
--- a/src/common/store.js
+++ b/src/common/store.js
@@ -10,7 +10,7 @@ export const store = {
enableDecal: 'decal' in URL_PARAMS,
renderer: URL_PARAMS.renderer || 'canvas',
- typeCheck: 'ts' in URL_PARAMS,
+ typeCheck: (URL_PARAMS.lang || '').toLowerCase() === 'ts',
useDirtyRect: 'useDirtyRect' in URL_PARAMS,
runCode: '',
diff --git a/src/editor/CodeMonaco.vue b/src/editor/CodeMonaco.vue
index ab68cb8..85224a7 100644
--- a/src/editor/CodeMonaco.vue
+++ b/src/editor/CodeMonaco.vue
@@ -97,6 +97,9 @@ function ensureMonacoAndTsTransformer() {
return new Promise((resolve) => {
window.require(['vs/editor/editor.main'], function () {
loadTypes().then(() => {
+ // Disable AMD. Which will break other libs.
+ // FIXME
+ window.define.amd = null;
resolve();
});
});
@@ -163,7 +166,27 @@ export default {
methods: {
setInitialCode(code) {
if (this._editor && code) {
- this._editor.setValue(code || '');
+ // this._editor.setValue(code || '');
+
+ // https://github.com/microsoft/monaco-editor/issues/299#issuecomment-268423927
+ this._editor.executeEdits('replace', [
+ {
+ identifier: 'delete',
+ range: new monaco.Range(1, 1, 10000, 1),
+ text: '',
+ forceMoveMarkers: true
+ }
+ ]);
+ this._editor.executeEdits('replace', [
+ {
+ identifier: 'insert',
+ range: new monaco.Range(1, 1, 1, 1),
+ text: code,
+ forceMoveMarkers: true
+ }
+ ]);
+ this._editor.setSelection(new monaco.Range(0, 0, 0, 0));
+ // this._editor.setPosition(currentPosition);
}
}
},
diff --git a/src/editor/Editor.vue b/src/editor/Editor.vue
index b8162f7..f0f8abd 100644
--- a/src/editor/Editor.vue
+++ b/src/editor/Editor.vue
@@ -10,13 +10,67 @@
<span slot="label">{{ $t('editor.tabEditor') }}</span>
<el-container>
<el-header id="editor-control-panel">
- <div class="editor-controls">
- <a
- href="javascript:;"
- class="btn btn-default btn-sm"
- @click="disposeAndRun"
- >{{ $t('editor.run') }}</a
+ <div class="languages">
+ <el-tooltip
+ :content="$t('editor.tooltip.jsMode')"
+ placement="bottom"
+ >
+ <a
+ :class="{ js: true, active: !shared.typeCheck }"
+ @click="changeLang('js')"
+ >JS</a
+ >
+ </el-tooltip>
+ <el-tooltip
+ :content="$t('editor.tooltip.tsMode')"
+ placement="bottom"
>
+ <a
+ @click="changeLang('ts')"
+ :class="{ ts: true, active: shared.typeCheck }"
+ >TS</a
+ >
+ </el-tooltip>
+ </div>
+ <div class="editor-controls">
+ <a class="btn btn-sm format" @click="format">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ >
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ stroke-width="2"
+ d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
+ />
+ </svg>
+ <span>{{ $t('editor.format') }}</span>
+ </a>
+ <a class="btn btn-default btn-sm run" @click="disposeAndRun">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ >
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ stroke-width="2"
+ d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
+ />
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ stroke-width="2"
+ d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+ />
+ </svg>
+ <span>{{ $t('editor.run') }}</span>
+ </a>
</div>
</el-header>
<el-main>
@@ -51,6 +105,7 @@
>
</el-switch>
<el-switch
+ v-if="!shared.typeCheck"
v-model="fullCodeConfig.esm"
active-text="ES Modules"
:inactive-text="''"
@@ -62,6 +117,7 @@
</el-main>
</el-container>
</el-tab-pane>
+
<el-tab-pane :label="$t('editor.tabOptionPreview')" name="full-option">
<div id="option-outline"></div>
</el-tab-pane>
@@ -93,10 +149,23 @@ import FullCodePreview from './FullCodePreview.vue';
import Preview from './Preview.vue';
import { store, loadExampleCode, parseSourceCode } from '../common/store';
import { collectDeps, buildExampleCode } from '../../common/buildCode';
+import { goto } from '../common/route';
import { mount } from '@lang/object-visualizer';
import './object-visualizer.css';
-
+import { SCRIPT_URLS, URL_PARAMS } from '../common/config';
+import { loadScriptsAsync } from '../common/helper';
+
+function ensurePrettier() {
+ if (typeof prettier === 'undefined') {
+ return loadScriptsAsync([
+ SCRIPT_URLS.prettierDir + '/standalone.js',
+ SCRIPT_URLS.prettierDir +
+ (store.typeCheck ? '/parser-typescript.js' : '/parser-babel.js')
+ ]).then(([_, parser]) => {});
+ }
+ return Promise.resolve();
+}
export default {
components: {
CodeAce,
@@ -220,15 +289,35 @@ export default {
} else if (tab === 'full-option') {
this.updateOptionOutline();
}
+ },
+ changeLang(lang) {
+ if ((URL_PARAMS.lang || 'js').toLowerCase() !== lang) {
+ goto(
+ Object.assign({}, URL_PARAMS, {
+ lang
+ })
+ );
+ }
+ },
+ format() {
+ ensurePrettier().then(() => {
+ this.initialCode = prettier.format(store.sourceCode, {
+ singleQuote: true,
+ tabWidth: 2,
+ printWidth: 80,
+ semi: true,
+ trailingComma: 'none',
+ // tabWidth: +this.formatCodeSettings.tabSize,
+ // printWidth: +this.formatCodeSettings.maxLineWidth,
+ parser: store.typeCheck ? 'typescript' : 'babel',
+ plugins: prettierPlugins
+ });
+ this.updateFullCode();
+ });
}
},
watch: {
- 'shared.typeCheck'(enableTypeCheck) {
- // Update initialCode to avoid code changed when switching editor
- this.initialCode = store.sourceCode;
- this.updateFullCode();
- },
currentTab(tab) {
this.updateTabContent(tab);
},
@@ -393,6 +482,43 @@ $handler-width: 5px;
}
}
+ .languages {
+ display: inline-block;
+ padding: 2px 10px;
+ font-weight: bold;
+
+ a {
+ display: inline-block;
+ padding: 3px 10px;
+ margin-left: 5px;
+ vertical-align: middle;
+ cursor: pointer;
+
+ &.ts {
+ color: #3178c6;
+ }
+
+ &.js {
+ color: #000;
+ }
+
+ &.active {
+ font-size: 12px;
+ border-radius: 3px;
+
+ &.js {
+ background: #f7df1e;
+ color: #000;
+ }
+
+ &.ts {
+ background: #3178c6;
+ color: #fff;
+ }
+ }
+ }
+ }
+
.editor-controls {
float: right;
@@ -404,16 +530,31 @@ $handler-width: 5px;
}
.btn {
- color: #fff;
border-radius: 0;
- background-color: #409eff;
margin-left: $pd-basic;
border: none;
height: 30px;
- width: 50px;
- }
- .btn:hover {
- background-color: lighten($color: #409eff, $amount: 5);
+
+ background: none;
+ color: $clr-text;
+
+ & > * {
+ display: inline-block;
+ vertical-align: middle;
+ }
+
+ svg {
+ width: 15px;
+ height: 15px;
+ }
+
+ &.run {
+ color: #fff;
+ background-color: #409eff;
+ }
+ &.run:hover {
+ background-color: lighten($color: #409eff, $amount: 5);
+ }
}
}
}
diff --git a/src/editor/Preview.vue b/src/editor/Preview.vue
index 46d9535..dd573d5 100644
--- a/src/editor/Preview.vue
+++ b/src/editor/Preview.vue
@@ -26,7 +26,6 @@
:inactive-text="''"
>
</el-switch>
-
<el-popover
placement="bottom"
width="450"
@@ -72,9 +71,19 @@
>
{{ $t('editor.download') }}
</button>
- <a class="screenshot" @click="screenshot" target="_blank"
- ><i class="el-icon-camera-solid"></i
- ></a>
+ <a class="screenshot" @click="screenshot" target="_blank">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 20 20"
+ fill="currentColor"
+ >
+ <path
+ fill-rule="evenodd"
+ d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A2 2 0 0011.172 3H8.828a2 2 0 00-1.414.586L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z"
+ clip-rule="evenodd"
+ />
+ </svg>
+ </a>
</template>
<a :href="editLink" target="_blank" v-else class="edit btn btn-sm">{{
$t('editor.edit')
@@ -98,7 +107,7 @@ import { SCRIPT_URLS, URL_PARAMS } from '../common/config';
import { loadScriptsAsync } from '../common/helper';
import { createSandbox } from './sandbox';
import debounce from 'lodash/debounce';
-import { addListener, removeListener } from 'resize-detector';
+import { addListener } from 'resize-detector';
import CHART_LIST from '../data/chart-list-data';
import CHART_LIST_GL from '../data/chart-list-data-gl';
import { download } from './downloadExample';
@@ -416,8 +425,10 @@ export default {
cursor: pointer;
}
.screenshot {
- font-size: 22px;
- margin-right: 10px;
+ margin-right: 5px;
+ width: 25px;
+ height: 25px;
+ margin-top: 2px;
}
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org