A Step-by-Step Guide to Installing and Using ECharts for Stunning Data Visualizations 📊

Friday, Dec 27, 2024 | 6 minute read

GitHub Trend

Transform data into stunning visuals effortlessly! With a rich library of 20+ chart types, powerful real-time rendering, and customizable designs, this open-source tool is perfect for developers aiming for engaging presentations. 📊✨

In today’s world, data is everywhere. Effectively presenting and analyzing this information has become a hot topic across various fields! 🎯 With the help of data visualization tools, developers and analysts can transform complex data into easy-to-understand charts, facilitating decision-making and communication. Among the many tools available, Apache ECharts stands out as a star in the realm of data visualization due to its unique features and fantastic user experience! 🚀✨

1. ECharts: The Gateway to Data Visualization 🚪

Apache ECharts is a super popular open-source JavaScript library designed to help developers easily create interactive and attractive charts, enhancing data presentation. 📈💻 Its flexible architecture and diverse chart types make data visualization a breeze, meeting the needs of developers across the board! 🌈

2. ECharts: Unique Features That You’ll Love ❤️

• Variety of Chart Types 📊: ECharts offers over 20 different chart types to choose from and combine, effortlessly showcasing various data—it’s truly amazing!
• Powerful Rendering Engine 🚀: Supporting both Canvas and SVG rendering, it has progressive rendering capabilities, allowing real-time processing of large datasets, with support for up to 10 million data points—perfect for the demands of large data platforms!
• Data Analysis Management Features 📈: Built-in dataset management capabilities allow users to filter, cluster, and regress their data, greatly facilitating multi-dimensional data analysis, enabling users to manipulate data with ease.
• Support for Personalized Visual Design 🎨: By adhering to responsive design principles, ECharts provides default styles that ensure best visualization practices while allowing users to deeply customize chart styles through flexible configuration options, showcasing a unique visual flair.
• Active Community Support 👥: ECharts enjoys a lively open-source community that continually contributes to the library’s development, providing various third-party extensions that ensure ongoing functionality enhancements, making it hard to resist.
• Accessibility Features ♿: With a focus on the experience of users with disabilities, ECharts automatically generates chart descriptions to help users understand visualization content, ensuring that everyone can enjoy this beauty!

3. Why Do Developers Love ECharts? 💖

• Rich Installation Options ⚙️: Users can quickly install Apache ECharts via download, npm, or CDN, adapting flexibly to different development environments, making it easy for every developer to get started.
• Comprehensive Documentation Support 📚: The official documentation is detailed and covers everything from getting started to APIs, making it clear and easy to learn, refer to, and dive into, ensuring a rewarding experience.
• Community Resource Sharing 🔗: The vibrant ECharts community allows developers to share resources and gain support, fostering a great learning and exchange environment—the collision of ideas promotes personal and team growth!
• Various Extension Features 🔧: Achieve personalized requirements through rich extension functionalities, such as leveraging ECharts GL for 3D plotting, using Liquidfill charts to display liquid fill levels, or generating word clouds with Wordcloud, enhancing data presentation techniques that are impressive!

Embarking on the journey of exploring Apache ECharts is a fun and creative experience! Whether you are a data analyst, software developer, or data visualization enthusiast, ECharts will lend you a helping hand in quickly building efficient and visually appealing data visualization charts that showcase your data’s unmatched charm! ✨📈

4. Getting Started: How to Install ECharts 🚀

The first step is to ensure you have ECharts installed to kickstart this beautiful visualization journey! You can easily install ECharts via the command line using NPM with the following simple command:

# Install dependencies
npm install

The npm install command automatically downloads all necessary dependencies, including ECharts, based on your project’s package.json file.

Once the installation is complete, if you want to see the effects of code changes, you can start in development mode by running:

# Start development mode
npm run dev

After running this command, modifications to your code (like chart styles and data) will be reflected in real-time in the browser, reducing our rebuild time and boosting development efficiency! 🔄

If you are using TypeScript and want to ensure code type correctness, you can run the following command:

# Check TypeScript code
npm run checktype

This command analyzes your code and identifies potential errors, helping you maintain code quality!

Finally, when you’re ready to build all the “production” files, you can run:

# Build production files
npm run release

Running this will generate all files suitable for release, getting them ready to go live! 🌐

5. Adding Data to Charts: Defining Data and Series 📊

In ECharts, adding data to a chart is a breeze; we typically define data under the series. Here’s an example of a bar chart showcasing beverage sales:

option = {
  xAxis: {
    type: 'category',
    data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      name: '2015',
      data: [89.3, 92.1, 94.4, 85.4]
    },
    {
      type: 'bar',
      name: '2016',
      data: [95.8, 89.4, 91.2, 76.9]
    },
    {
      type: 'bar',
      name: '2017',
      data: [97.7, 83.1, 92.5, 78.1]
    }
  ]
};

In this configuration, we first specify the xAxis and yAxis, then define multiple series of bar chart types under series, with the data array containing specific values. 📈

6. Flexibly Manage Data: Using Datasets to Define Data 📚

With the dataset component, we can flexibly manage our data. For example:

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: {},
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};

In this example, dataset is used to define a data source, making data management pleasantly convenient! 👌

7. Mapping Relationships and Dimension Configuration 🔄📐

Configuring Mapping Relationships

We can also set how dimensions of the dataset are mapped to the chart using series.encode. The following example shows how to configure the mapping relationship:

option = {
  dataset: {
    source: [
      ['score', 'amount', 'product'],
      [89.3, 58212, 'Matcha Latte'],
      // Other data omitted for brevity
    ]
  },
  xAxis: {},
  yAxis: { type: 'category' },
  series: [
    {
      type: 'bar',
      encode: {
        x: 'amount',
        y: 'product'
      }
    }
  ]
};

In this configuration, the encode property helps us explicitly define which data maps to the chart’s x-axis and y-axis. 📏

Mapping Visual Channels 🎨

In ECharts, visualMap is used to map visual channels, which is critical for the richness and layering of data visualization. Here’s an example of a scatter plot using visualMap:

var option = {
  dataset: {
    source: [
      [12, 323, 11.2],
      // Add more data...
    ]
  },
  visualMap: {
    show: false,
    dimension: 2,
    inRange: {
      symbolSize: [5, 60] // Define range for symbol sizes
    }
  },
  xAxis: {},
  yAxis: {},
  series: {
    type: 'scatter'
  }
};

In this example, visualMap controls the size of data points, enhancing the visualization effect significantly! ✨

8. Chart Types Supported by ECharts 🎆

ECharts offers a diverse range of chart types to meet different data presentation needs, including but not limited to:

• line (Line Chart)
• bar (Bar Chart)
• pie (Pie Chart)
• scatter (Scatter Plot)
• effectScatter (Effect Scatter Plot)
• parallel (Parallel Coordinates)
• candlestick (Candlestick Chart)
• map (Map)
• funnel (Funnel Chart)
• custom (Custom Chart)

ECharts will continue to support even more chart types in the future to meet our ever-growing needs. 💡 We hope the above content helps everyone better utilize ECharts and create beautiful visual charts!