This issue recommends Apache ECharts, an open source javascript-based visual chart library.
ECharts is an open source visual library implemented by JavaScript, which can run smoothly on PC and mobile devices and is compatible with most current browsers (IE9/10/11, Chrome, Firefox, Safari, etc.). The underlying dependency on the vector graphics library ZRender provides intuitive, interactive, and highly customizable data visualizations.
Feature
Rich chart types: Provides more than 20 charts and a dozen components out of the box, and supports any combination of charts and components.
Powerful rendering engine: one-click switch between Canvas and SVG twin engines, incremental rendering, stream loading and other technologies to achieve smooth interaction of tens of millions of data.
Professional data analysis: Manage data through data sets, support data filtering, clustering and regression, and help realize multi-dimensional analysis of the same data.
Elegant visual design: The default design follows visual principles, supports responsive design, and provides flexible configuration items for developers to customize.
Healthy open source community: Active community users ensure the healthy development of the project, and also contribute a wealth of third-party plug-ins to meet the needs of different scenarios.
Friendly accessibility: intelligently generated chart descriptions and decals to help visually impaired people understand the chart content and read the story behind the chart.
Mobile terminal optimization: ECharts has made detailed optimization for mobile terminal interaction, for example, it is suitable for finger scaling and translation in coordinate system on small screen of mobile terminal.
Get Started
1 Obtain Apache ECharts
Apache ECharts supports a variety of download methods, you can choose any of the following methods to install according to the actual situation of the project.
- Obtained from GitHub:
The release page of the apache/echarts project will find links to each version. Click Source code in Assets at the bottom of the download page, and echarts.js in dist directory after decompression is a file containing complete ECharts functions.
https://github.com/apache/echarts/releases- From NPM:
npm install echarts --save- From the CDN:
https://www.jsdelivr.com/package/npm/echarts select dist/echarts js, click and save as echarts. Js file.
2 Importing Apache ECharts
Create an index.html file in the directory where you just saved echarts.js with the following content:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- Import the ECharts file you just downloaded -->
<script src="echarts.js"></script>
</head>
</html>Open this index.html and you’ll see a blank space. But don’t worry, open the console to make sure there are no error messages, and you can proceed to the next step.
3 Draw a simple chart
Before drawing we need to prepare a DOM container with defined height and width for ECharts. In the example just now. /head> After that, add:
<body>
<!-- 为 ECharts Get one that defines the width and heightDOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>Then you can initialize an echarts instance with the echarts.init method and generate a simple bar graph with the setOption method. Here is the complete code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
< ! -- Import the ECharts file you just downloaded -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 为 ECharts Get one that defines the width and height DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// Initializes the echarts instance based on the prepared dom
var myChart = echarts.init(document.getElementById('main'));
// Specify configuration items and data for the chart
var option = {
title: {
text: 'EChartsGetting started example'
},
tooltip: {},
legend: {
data: ['Sales']
},
xAxis: {
data: [< span class = "HLJS - string" > 'shirt < / span >, < span class = "HLJS - string" >' sweaters' < / span >, < span class = "HLJS - string" > 'snow spins unlined upper garment' < / span >, < span class = "HLJS - string" > 'pants' < / span >, < span class = "HLJS - string" >' high heels' < / span >, < span class = "HLJS - string" > < / span > 'socks']
},
yAxis: {},
series: [
{
name: 'Sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// Display the chart using the configuration items and data just specified.
myChart.setOption(option);
</script>
</body>
</html>So your first chart is born!
Chart example
Line chart
Line chart stack
Stack area map
Gradient stack area map
Beijing AQI visualization
Bar chart
Stacked bar graph
Multi-y axis
Stacked bar graph
Pie chart
Nightingale rose
Nested ring graph
Geographical coordinates/map
Histogram animation
Diagram
Character diagram (circular layout)
NPM dependency graph
Rectangular tree
Disk usage
Rising Sun graph
Drink Flavors
Parallel coordinate system
AQI distribution (parallel)
Nutrient structure (parallel coordinates)
Scatter matrix and parallel coordinates
—END—
Component preview address:
https://echarts.apache.org/examples/zh/index.html
Open Source protocol: Apache2.0
