Basic use of Echarts: histogram, line chart, pie chart, etc.

Echarts is the Baidu team to create a pure Javascript Chart library, the official website download path is as follows:

Http://echarts.baidu.com/download.html

Characteristics of Echarts :

Rich chart types:
Commonly used are line chart, histogram, scatter, pie, box, map for geo-data visualization, thermal diagram, line diagram, etc.

Support for multiple coordinate systems
Rectangular coordinate system (Catesian, same grid), polar coordinate system (polar), geographical coordinate system (GEO)

Optimization of Mobile End
Packed on demand, reduced to echarts 2 of 40%

Interactive data exploration in depth
Supports data filtering, scaling in various axes, dimensions of data, and adoption of these components in more graphs

Use Echarts:
1, the introduction of Echarts.min.js, this document is required to download the official website. 469KB or so

<! DOCTYPE html>
 
2, define a div container for storing your chart, to set the ID.

<div id= "CJJ" style= "width:800px;height:800px;" ></div>
 
3. Initialize Echarts instance

  var MyChart = echarts.init (document.getElementById (' cjj '));
 
4, specify the configuration items and data of the chart, that is, set option
A) Title: Title Component
b) ToolTip: Prompt Box component
c) Legend: Legend component, showing different series of tags (symbol), color and name
d) Xaxis: The x axis in the rectangular coordinate system grid, where a single grid component can only be placed up to two X axes.
e) YAxis: the y axis in a rectangular coordinate system grid, where a single grid component can only be placed about two Y axes.
F) Series: Series list. Each series determines its own chart type by type.
Series[i]-line ——-Line Chart
Series[i]-bar ——-Column Chart
Series[i]-pie ——-Pie Chart
series[i]-scatter-– Scatter plot
series[i]-effectscatter--Scatter (bubble) plot with ripple effects animation
series[i]-radar--Radar Map
Series[i]-treemap-treemap is a common form of visualization that expresses "hierarchical data", "tree-like data."
Series[i]-boxplot--boxplot Chinese can be called "box Diagram", "box Diagram", "box Diagram", "box Diagram", "Box line Diagram"
Series[i]-candlestick-candlestick is what we used to say chart
series[i]-heatmap-– Heat-seeking
The series[i]-map--map is mainly used for visualization of geographic area data, and the Visualmap component is used to show the population density of different regions and other data.
series[i]-parallel-– a series of parallel coordinate systems.
series[i]-lines--– Line Chart
Series[i]-graph ——-diagram
Series[i]-gauge ——-instrument Panel

var option = {
            title: {
                text: ' Echarts simple histogram '
            },
            tooltip: {},
            legend: {
                data:[' fan count ']
            },
            Xaxis: {
                data: ["Andy", "Sheng Mei", "Off", "Chinian", "Chiuling"]
            },
            YAxis: {},
            series: [{
                name: ' Number of fans ',
                type: ' Bar ',
                data: [9]}
            ]
        };
 
5, use the specified configuration items and data to display the chart.

  mychart.setoption (option);
 
This way, you can see a histogram coming out of the browser.
Mouse hover can see the x and Y axes corresponding to the data

Histogram and line charts can switch well: just change the Series.type:line

If it's a pie chart, you don't want the x Y axis. Type: ' Pie ',
and data needs to be replaced with

           Data: 
                [  {value:40, Name: ' Andy '},
                {value:19, name: ' Sheng Mei '},
                {value:15, Name: ' Off '},
                {value:18, Name: ' Chinian '},
                {value:9, Name: ' Chiuling '}]
 
As shown in the figure:

See here, is not think Echarts really is too easy to use and beautiful, right. ~ This is just the entry level, and the following needs to be combined with a map to show visual data. Look forward to seeing you ~6 month. July, I came.