Shulou(Shulou.com)06/03 Report--

This article shows you how to use ECharts based on html5 Canvas chart library, the content is concise and easy to understand, it can definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

ECharts open source from Baidu business front-end data visualization team, based on html5Canvas, is a pure Javascript chart library, providing intuitive, vivid, interactive, customizable data visualization charts. Innovative features such as drag-and-drop heavy computing, data view, range roaming and so on greatly enhance the user experience and give users the ability to mine and integrate data. In the era of big data, the time has come to redefine data and charts.

Architecture

ECharts (EnterpriseCharts Commercial Product Chart Library)

Provide a common commercial product chart library, the bottom based on ZRender, create a coordinate system, legend, prompt, toolbox and other basic components, and build a line chart (area chart), bar chart (bar chart), scatter chart (bubble chart), pie chart (ring chart), K chart, map, chord chart and force-oriented layout chart, while supporting the stacking of any dimension and multi-chart mixed display.

Mash-up charts will be more expressive and interesting. The charts provided by ECharts (a total of 9 categories and 14 kinds) support arbitrary mashup:

Line chart (area chart), bar chart (bar chart), scatter chart (bubble chart), K chart, pie chart (ring chart), radar chart, map, chord chart, force guide layout chart.

Contains a unique legend, toolbox, data area scaling, range roaming module, a Cartesian coordinate system (can contain one or more eye-like axes, one or more value axes, up to four up and down)

Drag and drop recalculation

The drag-and-drop heavy computing feature (patent) brings a user experience that data statistical charts have never had before, allowing users to effectively extract, integrate, and even exchange data among multiple charts, giving users the ability to mine and integrate data.

Data view

If you present enough data for users to care about, then they will not be satisfied with viewing visual charts, but will have to cater to their needs for downloading and saving, data sharing, processing and integrating existing data, and so on.

Maybe you just need to give a "," separated data text and they will understand, this is the data view of ECharts! Of course, you can overload the output method of the data View and present the data in your own unique way.

If your users are high-end enough, you can even turn on the editing function of the data View, which is a batch of data modifications compared to drag-and-drop recalculation!

Dynamic type switching

Many chart types themselves show similar capabilities, but the tension of the final chart varies greatly due to differences in data, performance needs and personal preferences, such as the choice of line charts and bar charts. whether the series of data is stacked or tiled is always a headache.

ECharts provides dynamic type switching, allowing users to switch to the chart type and stacking state they want.

The simultaneous presentation of multiple series of data presents rich content, but how to get the user to switch to the individual series he cares about?

ECharts provides a convenient and fast multi-dimensional legend switch that can switch to the data series you care about at any time.

Data region selection

The data can be infinite, but the display space is always limited. The data region selection component provides the ability to roam in a large amount of data, allowing the user to select and present the data area he is concerned about.

With the follow-up mean (extreme) marking, the tagging shows a strong ability of data analysis.

Multi-graph linkage

The simultaneous presentation of multiple series of data in the same right-angle system sometimes leads to confusion, but they have a strong correlation meaning that can not be separated.

ECharts provides the ability of multi-graph linkage (connect), which can do more than just mouse-click details, connected multiple diagrams will share component events and achieve automatic stitching when saving pictures.

Range roaming

Coordinate-based charts (such as maps, scatter charts) show the size of the value through color changes, which can visually show the data distribution.

But how do I focus on the numbers I care about? We have created a feature called range roaming that allows you to easily filter values.

The above content is based on the html5 Canvas chart library ECharts how to use, have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.