【Chart】echart

overview

ECharts is a JavaScript-based data visualization chart library that provides intuitive, vivid, interactive, and customizable data visualization charts. ECharts was originally open-sourced by the Baidu team, and was donated to the Apache Foundation in early 2018, becoming an ASF incubation-level project.

ECharts provides regular line charts, histograms, scatter charts, pie charts, candlestick charts, box charts for statistics, maps, heat maps, and line charts for geographic data visualization, and relational data visualizations. Relationship diagrams, treemaps, sunburst diagrams, parallel coordinates for multidimensional data visualization, and funnel diagrams for BI, dashboards, and support for mashups between diagrams.

Can run smoothly on PC and mobile devices

basic concept

1. Example of echarts:

• Multiple echarts instances can be created in a web page.
• Multiple charts and coordinate systems can be created in each echarts instance.
• The dom node is used as the rendering container of echarts, and each echart occupies a dom node exclusively.

2. Series

Series : A set of values ​​and their mapped graph.

The elements of a series : a set of values, the type of chart, and other parameters about how the data is mapped into a graph, etc.

Chart types (series.type) include:

• line (line chart)
• bar (histogram)
• pie (pie chart)
• scatter (scatter plot)
• graph (relationship graph)
• tree (tree diagram), etc.

data (series.data):

Imported values.

• Before ECharts 4, data could only be declared in each "series"
• ECharts 4 began to support the dataset
  component for separate dataset declarations, so that data can be managed separately, reused by multiple components, and the mapping from data to vision can be specified based on data.
• We will learn about the data later, so we will not describe it in detail here.

General style (series.itemStyle):

Including shadow, transparency, color, border color, border width, etc.

3. Component:
legend legend component, used to click whether to display the corresponding legend, for example:

• xAxis (Cartesian coordinate system X axis)
• yAxis (Y-axis of Cartesian coordinate system)
• grid (rectangular coordinate system bottom plate)
• angleAxis (polar coordinate system angle axis)
• radiusAxis (polar coordinate system radius axis)
• polar (polar coordinate system base plate)
• geo (geographical coordinate system)
• dataZoom (data area zoom component)
• visualMap (visual map component)
• tooltip (prompt box component)
• toolbox (toolbar component)
• series (series)
  , etc.

4. option description chart

option describes: data, how data is mapped into graphics, and interactive behavior.

For example: use option to describe its various requirements for the chart, including: what data is there, what chart to draw, what the chart looks like, what components it contains, what the components can operate, and so on.

option is a large JavaScript object with a large number of properties inside, and each property is a type of component. Multiple components of the same type can form an array.

5: Positioning of components

Different components and series often have different positioning methods:

1) CSS-like absolute positioning:

Most components and series can be positioned absolutely based on top/right/down/left/width/height. This absolute positioning method is similar to CSS absolute positioning.

where each of their values ​​can be:

Absolute value (for example, bottom: 54 means: 54 pixels from the bottom border of the echarts container).
Based on the percentage of the height and width of the echarts container (for example, right: '20%' means: the distance from the right border of the echarts container is 20% of the width of the echarts container).
2) Center radius positioning:

For a few circular components or series, you can use "center radius positioning", for example, pie (pie chart), sunburst (sunburst chart), polar (polar coordinate system).

Center radius positioning is often based on center (center) and radius (radius) to determine the position.

3) Other positioning:

A small number of components and series may have their own special way of positioning. There are instructions in their documentation.

6. Coordinate system

• Many series need to operate on the "coordinate system".

For example, line (line chart), bar (histogram), etc., need to operate on the "coordinate system".

• A coordinate system may be composed of multiple components.

Let's take the most common Cartesian coordinate system as an example. In the Cartesian coordinate system, there are three components: xAxis (X axis of the Cartesian coordinate system), yAxis (Y axis of the Cartesian coordinate system), and grid (the bottom plate of the Cartesian coordinate system). xAxis and yAxis are automatically referenced by the grid and organized to work together.

• A series can often run in different coordinate systems.

For example, a scatter (scatter plot) can run in various coordinate systems such as Cartesian coordinate system, polar coordinate system, geographic coordinate system (GEO) and so on. Similarly, a coordinate system can also carry different series.

Attributes

1. title: write the title, the attributes are as follows

show:false/true Whether the title is displayed;

text: title content; textstyle modifies the title style

subtext: subtitle, which can also be regarded as content; subtextStyle modifies the subtitle style;

2. legendd: The legend component shows different series of symbols, colors and names;

show:false/true whether to display;

data: the data array of the legend;

3. Grid: The drawing grid in the Cartesian coordinate system. A single grid can place up to two X-axes up and down, and two Y-axes left and right. Line charts, histograms, and scatter plots can be drawn on the grid;

show:false/true whether to display;

top, left, right, bottom mark the upper, left, and lower margins;

4. xAxis: The x-axis in the rectangular coordinate system grid, a single grid component can only place the upper and lower x-axis at most.

type: axis type.
'value' value axis, suitable for continuous data.
'category' category axis, suitable for discrete category data, category data must be set through data for this type.
The 'time' time axis is suitable for continuous time series data. Compared with the value axis, the time axis has time formatting, and the scale calculation is also different. For example, it will decide to use month, week, day or Scale for the hour range.
data: category data, valid in category axis (type: 'category').

5. yAxis: The y-axis in the rectangular coordinate system grid. A single grid component can only place two left and right y-axes at most.

type: axis type.
'value' value axis, suitable for continuous data.
'category' category axis, suitable for discrete category data, category data must be set through data for this type.
The 'time' time axis is suitable for continuous time series data. Compared with the value axis, the time axis has time formatting, and the scale calculation is also different. For example, it will decide to use month, week, day or Scale for the hour range.

6. dataZoom: The component is used to zoom in on the data area, so that you can freely focus on the detailed data information, or overview the data as a whole.

type:slider; Whether to display the component. If set to false, it will not be displayed, but the function of data filtering still exists;
backgroundColor: the background color of the component.
realtime: Whether to update the view of the series in real time when dragging. If set to false, it will only be updated when the drag ends.
top, left, right, bottom mark the upper, left, and lower margins;

7. tooltip: prompt box component.

show: false/true Whether to display;
trigger: trigger type;
'item': data item graphic trigger, mainly used in charts without category axes such as scatter charts and pie charts.
'axis': coordinate axis trigger, mainly used in histograms, line charts and other charts that use category axes.
8. color: palette color list. If the series does not set a color, it will take the color from the list as the series color in turn.

Default: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', ' #546570', '#c4ccd3'];

9. series: list of series. Each series determines its own chart type through type;

series[i]-line: polyline
itemStyle style of polyline inflection point mark;
series[i]-bar: histogram represents the size of the data through the height of the column, and is used on a Cartesian coordinate system with at least one category axis.
series[i]-pie: The pie chart is mainly used to show the proportion of different types of data in the total. The radians of each represent the ratio of the amount of data. ,

10. itemStyle style:

normal:color color;

use

Easy to use

1. Reference the echarts.js file

Note: Please go to the official website to download the echarts.js file when you need a reference.

<script type="text/javascript" src="js/echarts.js"></script>

2. Prepare a div for the view (custom)

<div id="chartmain" style="width:600px; height: 400px;"></div>

3. Set parameters and initialize custom icons

<script type="text/javascript">

        //初始化echarts实例

        var myChart = echarts.init(document.getElementById('chartmain'));

        //var myChart = echarts.init($("#chartmain")[0]); jquery方式

        //指定图标的配置和数据

        var option = {
    
    

            title:{
    
    

                text:'ECharts 数据统计'

            },

            tooltip:{
    
    },

            legend:{
    
    

                data:['用户来源']

            },

            xAxis:{
    
    

                data:["Android","IOS","PC","Ohter"]

            },

            yAxis:{
    
    

            },

            series:[{
    
    

                name:'访问量',

                type:'line',

                data:[500,200,360,100]

            }]

        };

        //使用制定的配置项和数据显示图表

        myChart.setOption(option);

</script>

Such a simple statistical chart came out. The histogram used on the official website has been replaced by a line chart.

Display data in the middle of the histogram

Change the value of position:

1. External position: top: at the top of the histogram, bottom: at the bottom of the histogram, right: at the right of the histogram, left: at the left of the histogram.

2. Internal position: inside: in the middle of the histogram, insideRight: on the right inside the histogram, insideLeft: on the right inside the histogram, insideTop: at the top inside the histogram, insideBottom: at the bottom inside the histogram.

Code demo:

series : [

    {
    
    

        name:'机器数量',

        type:'bar',

        barWidth: '60%',

        data:[569, 30],

        itemStyle:{
    
    

            normal:{
    
    

                label:{
    
    

                    show:true, //表示是否显示

                    position: 'inside', //改变数字的位置

                    textStyle: {
    
     //改变字体的颜色和字体大小

                        color: '#ffff',

                        fontSize: 13

                    },

                    formatter: function(params){
    
    

                        if(params.value == 0){
    
    

                            return '';

                        }else {
    
    

                            return params.value;

                        }

                    }

                }

            }

        }

    }

]

Take an example to show inside: in the middle of the histogram:

source

ECharts – ECharts Basic Concept
Introduction and Use of EChart