Awesome-pyecharts

100%

Awesome-pyecharts

✓ Published0🌍 Public

Last edited Jun 11, 2021

Created on Jun 6, 2021

This example displays a liquid fill chart with two nested bubbles representing proportions of 0.6 and 0.3, rendered in a canvas via the ECharts library. It uses the `echarts.init` API with a white theme and the `liquidFill` series type, pulling data directly from an inline JavaScript array. The page loads ECharts and its liquidfill plugin from CDN assets, producing a single interactive visualization within a fixed 900x450 pixel container.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

bubble

This example displays two liquid-fill gauges rendered side by side on a single page, showing different data values as animated, wave-like filled shapes. The visualization is created using the ECharts library with its `liquidFill` series type, initialized on two separate DOM containers within an HTML layout. The JavaScript code uses `echarts.init` to bind each chart to its respective element and sets options containing the fill data and center positions. The page loads D3 v5 and ECharts from CDNs, with styling handled by an external stylesheet.

YYUTONG FENG

85% match

Loading thumbnail…

bubble

Two liquid-fill gauges render in separate containers, displaying proportional bubble-like fills at different positions. The example initializes two ECharts instances via `echarts.init`, targeting `#main` and `#sub` divs. Each instance sets a `liquidFill` series with different data values (`[0.6, 0.3]` and `[0.8, 0.2]`) and custom centers. The page loads D3 v5 and ECharts from CDNs, with basic styling from an external stylesheet.

YYUTONG FENG

82% match

Loading thumbnail…

Fork of bubble

Two liquid-filled bubble gauges are rendered side by side using ECharts and its liquidFill extension. Each gauge displays two overlaid liquid levels—the left bubble shows proportions of 0.6 and 0.3, while the right shows 0.8 and 0.2—using the `echarts.init` method and a series configuration with `"type": "liquidFill"`. The gauges are positioned absolutely within separate divs, with a CSS transform applied to one container. The page also loads D3 v5, though the visualization itself relies entirely on ECharts' built-in rendering rather than D3 manipulation.

YYUTONG FENG

79% match

Loading thumbnail…

animation Fork of Fork of bubble

This example visualizes two animated liquid-fill gauges using the ECharts library, with each gauge displaying different data ratios (0.6/0.3 and 0.8/0.2). The primary gauge is placed inside a CSS-animated container that cycles through background colors and positions, while the secondary gauge remains static. Both charts are initialized via `echarts.init()` and configured with the `liquidFill` series type, rendering smooth, wave-like fill effects. The page also loads D3 v5, though no D3-specific functions are used in the visible code.

YYUTONG FENG

79% match

Loading thumbnail…

test

Two liquid-fill gauges display two paired datasets, each with two values (0.6/0.3 and 0.8/0.2), rendered as overlapping blue bubbles inside rounded containers. The example shows how ECharts’ `liquidFill` series type can be instantiated twice on separate DOM elements (`main` and `sub`), with each chart initialized via `echarts.init` and configured through a `setOption` call. A separate container positions the two gauges at different screen offsets.

YYUTONG FENG

78% match

Loading thumbnail…

css animation test

Two liquid-fill charts display animated fluid levels in different colors and proportions, with one chart also moving diagonally via a CSS keyframe animation. The page initializes both ECharts instances using `echarts.init` and `setOption`, configuring the liquidFill series with data arrays like `[0.6, 0.3]` and `[0.8, 0.2]`. The animation name and duration are defined in an inline CSS `@keyframes` rule.

YYUTONG FENG

74% match

Loading thumbnail…

ECharts

This example demonstrates a React-based visualization using ECharts, rendered within a minimal HTML page that loads React and ReactDOM from a CDN. The page displays a single large message, styled with CSS, centered in the viewport. The code initializes a root DOM element and relies on bundled JavaScript to mount the React application, though the actual chart configuration is not included in the visible files. It showcases how ECharts can be integrated into a React project using the standard ReactDOM rendering API.

AAmeer Nuri

68% match

Loading thumbnail…

2018: Reactietijden Liquid Fill Gauge

This visualization shows five liquid fill gauges displaying response times, each with distinct colors and configurations. The gauges update randomly when clicked, with values counting up and animating via wave-like fills. Built with D3 v3 for SVG rendering, it uses custom functions like `loadLiquidFillGauge` and `liquidFillGaugeDefaultSettings` to control wave height, speed, and animation. The `d3.scale.linear` API maps values for both circle and wave paths, while configurable settings adjust text position, color, and percent display.

MMisunoKitara

68% match