ECharts course

ECharts Is a use JavaScript Implementation of open source visualization Library , Charts covering various industries , Meet various needs .

ECharts follow Apache-2.0 Open source agreement , Free commercial .

ECharts Compatible with most current browsers (IE8/9/10/11,Chrome,Firefox,Safari etc. ) And compatible with a variety of devices , Can be displayed at will anytime, anywhere .

Before reading this tutorial , What you need to know :

Read this tutorial , You need to have the following Foundation :

first ECharts example

example

< ! DOCTYPE html > < html > < head > < meta charset = " utf-8 " > < title > first ECharts example </ title > <!-- introduce echarts.js --> < script src = " https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js " > </ script > </ head > < body > <!-- by ECharts Prepare one with size ( Width and height ) of Dom --> < div id = " main " style = " width: 600px;height:400px; " > </ div > < script type = " text/javascript " > // Based on prepared dom, initialization echarts example var myChart = echarts.init(document.getElementById('main')); // Specify the configuration items and data of the chart var option = { title: { text: ' first ECharts example ' }, tooltip: {}, legend: { data:[' sales volume '] }, xAxis: { data: [" Shirt "," cardigan "," Chiffon shirt "," Pants "," high-heeled shoes "," Socks "] }, yAxis: {}, series: [{ name: ' sales volume ', 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 >

Give it a try »

click " Give it a try " Button to view an online instance

ECharts characteristic

ECharts The following features are included :

  • Rich visualization types : Provides a regular line chart 、 Histogram 、 Scatter plot 、 Pie chart 、K Line diagram , Box chart for Statistics , Maps for geographic data visualization 、 Thermodynamic diagram 、 Line diagram , A diagram for visualizing relational data 、treemap、 Rising sun chart , Parallel coordinates for multidimensional data visualization , And for BI Funnel diagram of , Dashboard , It also supports the mixing and matching between graphs .

  • Multiple data formats can be used directly without conversion : Built in dataset attribute (4.0+) Support direct input, including two-dimensional tables ,key-value And other data sources in various formats , In addition, it also supports input TypedArray Format data .

  • Front end presentation of tens of millions of data : Through incremental rendering technology (4.0+), Cooperate with various detailed optimization ,ECharts It can display tens of millions of data .

  • Mobile terminal optimization : Detailed optimization is made for the interaction of mobile terminal , For example, on the small screen of the mobile terminal, it is suitable to zoom in the coordinate system with your fingers 、 Pan . PC The end can also be zoomed in the figure with the mouse ( Use the mouse wheel )、 Translation, etc .

  • Multiple rendering schemes , Cross platform use : Support to Canvas、SVG(4.0+)、VML Render the chart in the form of .

  • Deep interactive data exploration : Provides legend 、 Visual mapping 、 Data area scaling 、tooltip、 Out of the box interactive components such as data brushing , Multi dimensional data filtering can be performed on data 、 View zoom 、 Display details and other interactive operations .

  • Support of multidimensional data and rich visual coding means : For the traditional scatter diagram , The incoming data can also be multi-dimensional .

  • Dynamic data : Changes in data drive changes in chart presentation .

  • Gorgeous special effects : For line data , The visualization of geographic data such as point data provides eye-catching special effects .

  • Through GL Achieve more powerful and gorgeous 3D Visualization : stay VR, Realize three-dimensional visualization in large screen scene .

  • Accessibility (4.0+): It supports automatic intelligent generation of descriptions according to chart configuration items , So that the blind can understand the chart content with the help of reading equipment , Make the chart accessible to more people !