Skip to main content
SimilarExport ZIP
100%

ECharts

✓ Published1🌍 Public
CCenz Wong
Last edited May 3, 2022
Created on May 1, 2022
Forked from HTML Starter

This example shows a bar chart of sales data for six clothing categories, with a title, tooltip, and legend. The visualization uses the ECharts library, initialized via `echarts.init` and configured through the `setOption` method. It fetches JSON data from a remote GitHub URL using the Fetch API, though the chart currently displays hardcoded values from the option object. The page loads ECharts from a CDN and renders the chart into a fixed-size `<div>` element.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ECharts

This example demonstrates a simple line chart of weekly data using the ECharts library. It renders a smooth curve across seven days of the week with values ranging from 820 to 1330. The visualization is initialized on a fixed-size DOM element via the `echarts.init` method, and the chart configuration specifies a category x-axis and a value y-axis. The code loads ECharts from a CDN and uses the `setOption` API to define the line series, showing how the library handles standard chart rendering with minimal setup.

CCenz Wong
78% 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
73% match
Loading thumbnail…

ICE-6 Fork of HTML Starter

This example shows a horizontal bar chart of product sales data, displaying the December sales figures for the top 10 products. The visualization uses React with hooks like `useState` and `useEffect` to fetch and manage the data, while D3 v5 functions `csv`, `scaleBand`, and `scaleLinear` handle data loading and scaling. The SVG rendering maps products to the y-axis and sales values to the x-axis, with axis ticks and grid lines drawn manually. Data comes from a CSV file loaded via D3’s `csv` method, and the chart updates dynamically once the data arrives.

Aakshitha.rapala@gmail.com
70% match
Loading thumbnail…

Fork of ECharts

This example loads a JSON dataset from a remote URL containing salary information and extracts the “Lower Salary” field from each record for further processing. The visualization uses ECharts 5.3.2 with its stat extension (ecStat) and D3.js v7, which retrieves the data via `d3.json`. The code prepares an ECharts-enabled `<div>` container, though no chart is yet configured, focusing instead on data fetching and console inspection.

CCenz Wong
70% match
Loading thumbnail…

bar chart

This example shows a horizontal bar chart of sales figures per salesperson, with labeled x-axis ticks and y-axis categories. It loads CSV data from a remote gist using `d3.csv`, then renders the visualization as SVG with React components. The chart uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and `d3.max` to determine the domain. Grid lines are drawn for each tick value, and bars are positioned and sized using the scales’ range and bandwidth.

JJack Elsey
70% match
Loading thumbnail…

dex.js : ECharts Line Chart

This example demonstrates a 3D bar chart with dex.js and ECharts, visualizing randomly generated sales and revenue data across twelve months for five fictional employees. The data is created using Faker, and the chart is embedded in an HTML page with a layout system. The code uses dex.js’s ECharts BarChart3D component, along with jQuery UI for layout management and a configuration pane that allows interactive chart customization.

Yyudhi115
70% match
Loading thumbnail…

ICE6 Bar Plot

This example visualizes total sales for five items using a horizontal bar plot rendered as SVG. The React component fetches data from a CSV file via `d3.csv`, then uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. D3's axis utilities generate tick marks and labels for both scales. The bars themselves are plain SVG `<rect>` elements, with their widths proportional to the sales values, and the chart includes a title and loading state.

PPlatoch
69% match
Loading thumbnail…

ICE-6

This bar chart displays sales data for various items, with horizontal bars showing the sale amount for each item. The visualization uses React and D3 v5, loading CSV data via `d3.csv` and rendering SVG elements with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Gridlines and axis labels are generated manually using `xScale.ticks()`, while the data values are encoded as rectangle widths.

HHARSHA BUDDANA
69% match