ECharts Practice Manual

Content summary

Basic use of ECharts
Ecarts common charts
Common configuration of rectangular coordinate system
Summary of ECharts configuration items
ECharts advanced

1. Basic use of echarts

1.1 introduction to echarts

ECharts can make all kinds of beautiful charts, which can meet the implementation of most visual charts With strong compatibility, convenient use and powerful functions, it is one of the best choices to realize data visualization. For more features and introduction, please refer to the official website address: ECharts official website

1.2 quick start of echarts

The introduction of ECharts is very simple, and you can start it in 5 minutes.

  • Step 1: introduce echarts js file (echarts is a js library. Of course, you have to import this library file first)
<script src="js/echarts.min.js"></script>
  • Step 2: prepare a box to present the chart (the box must be wide and high)
<div id="box" style="width: 600px;height:400px;"></div>
  • Step 3: initialize the ecarts instance object (in this step, you need to indicate the DOM element where the chart is finally displayed)
var myChart = echarts.init(document.getElementById('box'))
  • Step 4: prepare configuration items (this step is very important. The final effect of our display, whether to display pie chart or line chart, is basically determined by the configuration items)
var option = {
 xAxis: {
 type: 'category', 
 data: ['Xiao Ming', 'Xiao Hong', 'Xiao Wang'] 
 },
 yAxis: { 
 type: 'value' 
 },
 series: [ { 
 name: 'language', 
 type: 'bar', 
 data: [70, 92, 87], 
 } ] }
  • Step 5: set the configuration item to the ecarts instance object
myChart.setOption(option)

present

Summary: a simple histogram can be displayed on the web page in five simple steps Among these steps, step 4 is the most important. The final appearance of a chart depends entirely on this configuration item Therefore, for different charts, except that the configuration items will change, other codes are fixed

1.3 related configuration items

  • xAxis
    For the x-axis in the rectangular coordinate system, if the value of the type attribute is category, you need to configure the data to represent the presentation on the x-axis.

  • yAxis
    For the y-axis in the rectangular coordinate system, if the type attribute is configured as value, there is no need to configure data. At this time, the y-axis will automatically find the data under the series to draw the chart.

  • series
    List of series. Each series determines its own chart type by type, and sets the data of each series by data

Summary: configuration items exist in the form of key value pairs, and there are many configuration items. Most of ECharts' learning is aimed at these configuration items
For the use and learning of configuration items, please refer to the official configuration item documents: ECharts configuration item

2. Ecarts common charts

2.1 histogram

Features of histogram: the histogram describes the classified data and presents the number of each classification?, The meaning expressed in the chart lies in the ranking / comparison of different types of data
Implementation steps

  • Step 1 the most basic code structure of echarts
  • Step 2 prepare the x-axis data
var xDataArr = ['Zhang San', 'Li Si', 'Wang Wu', 'Intercalated soil', 'Xiao Ming', 'Moutai', 'Er Niu', 'Daqiang']
  • Step 3 prepare the data of y-axis
var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
  • Step 4: prepare option and set the value of type in series to: bar
var option = { 
xAxis: { type: 'category', data: xDataArr },
yAxis: { type: 'value' },
series: [ { type: 'bar', data: yDataArr } ] }

Note: for the configuration of the coordinate axis xAxis or yAxis, there are two main types of type values: category and value. If the value of the type attribute is category, you need to configure the data data to represent the presentation on the x axis If the type attribute is configured as value, there is no need to configure data. At this time, the y-axis will automatically find the data under the series to draw the chart

2.1.1 common effects of histogram

  1. sign

Maximum value \ minimum value markPoint (which group of data needs to be marked is written under which group of data, without creating objects)

series: [
 { ......
  markPoint: { 
  data: [ { type: 'max', name: 'Maximum' },{ type: 'min', name: 'minimum value' } ] 
  } } ]

Average markLine

series: [ 
{ ...... 
markLine: { data: [ { type: 'average', name: 'average value' } ] 
} } ]
  1. display

Numerical display label

series: [
{ 
...... 
label: { 
show: true, // Is it visible 
rotate: 60 // Rotation angle 
} 
} ]

Column width

series: [ 
{
 ...... 
 barWidth: '30%' // Width of column 
} 
]

Horizontal histogram (the so-called horizontal histogram only needs to exchange the roles of x axis and y axis. That is, set the type of xAxis to value, the type of yaxis to category, and set data)

var option = {
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: xDataArr
            },
            series: [{
                type: 'bar',
                data: yDataArr
            }]
        }

2.1.2 general configuration

The charts drawn with ECharts are naturally equipped with some functions. These functions are available in every chart. We can set these functions through configuration

  1. Title: title
var option = {
            title: {
                text: "achievement", // Title Text 
                textStyle: {
                    color: 'red' // Text color 
                },
                borderWidth: 5, // Title border 
                borderColor: 'green', // Title border color 
                borderRadius: 5, // Title border fillet 
                left: 20, // Location of the title 
                top: 20 // Location of the title 
            }
        }
  1. Prompt box: Tooltip (tooltip refers to the prompt box displayed when the mouse moves into the chart or clicks the chart)

Trigger type: trigger

The optional values are item\axis

Trigger timing: trigger on

The optional values are mouseOver\click

Formatted display: formatter (divided into string template and callback function) official documents: formatter)

var option = {
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'click',
                    formatter: '{b}:{c}'
                }
            }
        // The meanings represented by {b} and {c} do not need to be remembered. They are described in detail in the official documents
var option = {
            tooltip: {
                trigger: 'item',
                triggerOn: 'click',
                formatter: function(arg) {
                    return arg.name + ':' + arg.data
                }
            }
        }
  1. Tool button: toolbox

toolbox is a toolbar provided by ECharts. It has five built-in tools: export picture, data view, reset, data area zoom and dynamic type switching
Note: the toolbar buttons are configured under the feature node

var option = {
            toolbox: {
                feature: {
                    saveAsImage: {}, // Save chart as picture 
                    dataView: {}, // Is the original data displayed 
                    restore: {}, // Restore chart 
                    dataZoom: {}, // Data scaling 
                    magicType: { // Switch between different types of charts. The conversion of charts requires the support of data 
                        type: ['bar', 'line']
                    }
                }
            }
        }
  1. Legend: Legend (legend is a legend used to filter categories and needs to be used with series)

Note: data in legend is an array; The value of data in legend must be consistent with the name value of a group of data in the series array.

 var option = {
            legend: {
                data: ['language', 'mathematics']
            },
            xAxis: {
                type: 'category',
                data: ['Zhang San', 'Li Si', 'Wang Wu', 'Intercalated soil', 'Xiao Ming', 'Moutai', 'Er Niu', 'Daqiang']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: 'language',
                type: 'bar',
                data: [88, 92, 63, 77, 94, 80, 72, 86]
            }, {
                name: 'mathematics',
                type: 'bar',
                data: [93, 60, 61, 82, 95, 70, 71, 86]
            }]
        }

2.2 line chart

Characteristics of line chart: line chart is more used to show the "change trend" of data over time
Implementation steps

  • Step 1 the most basic code structure of echarts
  • Step 2 prepare the x-axis data
var xDataArr = ['1 month', '2 month', '3 month', '4 month', '5 month', '6 month', '7 month', '8 month', '9 month', '10 month', '11 month', '12 month']
  • Step 3 prepare the data of y-axis
var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
  • Step 4: prepare option and set the value of type in series to: line
var option = {
            xAxis: {
                type: 'category',
                data: xDataArr
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                type: 'line',
                data: yDataArr
            }]
        }

present

2.2.1 common effects of line chart

  1. sign

Max \ min markPoint

 var option = {
            series: [{
                ......markPoint: {
                    data: [{
                        type: 'max',
                        name: 'Maximum'
                    }, {
                        type: 'min',
                        name: 'minimum value'
                    }]
                }
            }]
        }

Average markLine

var option = {
            series: [{
                ......markLine: {
                    data: [{
                        type: 'average',
                        name: 'average value'
                    }]
                }
            }]
        }

Mark area

var option = {
            series: [{
                ......markArea: {
                    data: [
                        [{
                            xAxis: '1 month'
                        }, {
                            xAxis: '2 month'
                        }],
                        [{
                            xAxis: '7 month'
                        }, {
                            xAxis: '8 month'
                        }]
                    ]
                }
            }]
        }
  1. Line control

smooth line

 var option = {
            series: [{
                ......
                smooth: true
            }]
        }

Line style lineStyle

var option = {
            series: [{
                ......,
                smooth: true,
                lineStyle: {
                    color: 'green',
                    type: 'dashed' // The optional values are also dotted solid 
                }
            }]
        }
  1. Fill style areaStyle
var option = {
            series: [{
                type: 'line',
                data: yDataArr,
                areaStyle: {
                    color: 'pink'
                }
            }]
        }
  1. Next to the edge boundaryGap (the boundaryGap is set to the x-axis so that the starting point starts from the 0 coordinate of the x-axis)
 var option = {
            xAxis: {
                type: 'category',
                data: xDataArr,
                boundaryGap: false
            }
        }
  1. Scale and deviate from the scale of 0 value (if the difference between each group of data is small and much larger than 0, this may happen. Draw a straight line, so we need to configure scale)
var option = {
            yAxis: {
                type: 'value',
                scale: true
            }
        }
  1. Stack chart (stack chart refers to that after the series on the same category axis are configured with the same stack value, the values of the latter series will be added to the values of the previous series)
var option = {
            series: [{
                type: 'line',
                data: yDataArr1,
                stack: 'all' // Each object in the series is configured with the same stack value, and this all can be written arbitrarily 
            }, {
                type: 'line',
                data: yDataArr2,
                stack: 'all' // Each object in the series is configured with the same stack value, and this all can be written arbitrarily 
            }]
        }

Note: draw on the first line Stack based on previous chart

2.3 scatter diagram

Features of scatter chart: scatter chart can help us infer the correlation between data of different dimensions, for example, to see whether height and weight are positively correlated. It is also often used in map annotation
Implementation steps

  • Step 1 the most basic code structure of echarts
  • Step 2 prepare the data of x-axis and y-axis
axisData Is a two-dimensional array, Each element in the array is also an array, There are two elements in the innermost array, One represents height, One represents weight
  • Step 3 prepare the configuration items (the type of xAxis and yAxis should be set to value; set type:scatter under series)
 var option = {
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                type: 'scatter',
                data: axisData
            }]
        }
  • Step 4: adjust the configuration item to deviate from the proportion of 0 value
 var option = {
            xAxis: {
                type: 'value',
                scale: true
            },
            yAxis: {
                type: 'value',
                scale: true
            },
            series: [{
                type: 'scatter',
                data: axisData,
            }]
        }

present

2.3.1 common effects of scatter diagram

  1. Bubble chart effect (to achieve the effect of bubble chart, it is actually to make each scatter point different in size and color)

symbolSize controls the size of scatter points
itemStyle.color controls the color of the scatter
Both configuration items support the writing of fixed values and callback functions

Fixed value writing method:

var option = {
            series: [{
                type: 'scatter',
                data: axisData,
                symbolSize: 25,
                itemStyle: {
                    color: 'green',
                }
            }]
        }

Callback function:

var option = {
            series: [{
                type: 'scatter',
                data: axisData,
                symbolSize: function(arg) {
                    var weight = arg[1]
                    var height = arg[0] / 100 // BMI > 28 indicates obesity. Obese people are marked with large scatter points and normal people with small scatter points / / BMI: weight / height * height kg m 
                    var bmi = weight / (height * height)
                    if (bmi > 28) {
                        return 20
                    }
                    return 5
                },
                itemStyle: {
                    color: function(arg) {
                        var weight = arg.data[1]
                        var height = arg.data[0] / 100
                        var bmi = weight / (height * height)
                        if (bmi > 28) {
                            return 'red'
                        }
                        return 'green'
                    }
                }
            }]
        }
  1. Ripple animation effect

Type: effectscutter (setting the value of type from scatter to effectscutter can produce the effect of ripple animation)
Ripple effect size

var option = {
            series: [{
                type: 'effectScatter',
                rippleEffect: {
                    scale: 3
                }
            }]
        }

showEffectOn
showEffectOn can control when the ripple animation is generated. It has two optional values: render and emphasis
render means that the ripple animation starts when the interface rendering is completed
emphasis means that when the mouse moves over a scatter point, the scatter point starts ripple animation

var option = {
            series: [{
                type: 'effectScatter',
                showEffectOn: 'emphasis',
                rippleEffect: {
                    scale: 3
                }
            }]
        }
  1. : combined with map (scatter map is often combined with map to mark the map area)

2.4 common configuration of rectangular coordinate system

The chart of rectangular coordinate system refers to the chart with x-axis and y-axis. The common charts of rectangular coordinate system include: bar chart, broken line chart and scatter chart. There are some general configurations for charts in rectangular coordinate system

  1. Grid (grid is used to control the layout and size of rectangular coordinate system, and x-axis and y-axis are drawn on the basis of grid)

Display grid show: true
Border width of grid: 10
Position and size of grid left top right bottom width height

var option = {
            grid: {
                show: true, // Display grid 
                borderWidth: 10, // Border width of grid 
                borderColor: 'red', // Border color of grid 
                left: 100, // grid location 
                top: 100,
                width: 300, // Size of grid 
                height: 150
            }
        }
  1. Coordinate axis (the coordinate axis is divided into x-axis and y-axis, and there are at most two positions of x-axis and y-axis in a grid)

Axis type
Value: value axis, which automatically reads data from the target data
Category: category axis. This type must set category data through data

Coordinate axis position
xAxis: the value can be top or bottom
yAxis: can be left or right

var option = {
            xAxis: {
                type: 'category',
                data: xDataArr,
                position: 'top'
            },
            yAxis: {
                type: 'value',
                position: 'right'
            }
        }
  1. Area zoomdatazoom

dataZoom is used for area scaling and data range filtering. Both x-axis and y-axis can be owned. dataZoom is an array, which means
You can configure multiple area scalers

Area zoom type
Slider: slider
inside: built in, zoom by mouse wheel or two fingers

Active shaft
xAxisIndex: set which x-axis is controlled by the scaling component. Generally, write 0
yAxisIndex: set which y-axis is controlled by the scaling component. Generally, write 0

Indicates the scaling of the initial state
start: the starting percentage of the data window range
End: end percentage of data window range

 var option = {
            xAxis: {
                type: 'category',
                data: xDataArr
            },
            yAxis: {
                type: 'value'
            },
            dataZoom: [{
                type: 'slider',
                xAxisIndex: 0
            }, {
                type: 'slider',
                yAxisIndex: 0,
                start: 0,
                end: 80
            }]
        }

Note: for charts in non rectangular coordinate system, such as pie chart map, the above three configurations may not take effect

2.5 pie chart

Characteristics of pie chart: pie chart can help users quickly understand the proportion of data of different classifications
Implementation steps

  • Step 1 the most basic code structure of echarts
  • Step 2 prepare data
 var pieData = [{
            value: 11231,
            name: "TaoBao",
        }, {
            value: 22673,
            name: "JD.COM"
        }, {
            value: 6123,
            name: "Vipshop"
        }, {
            value: 8989,
            name: "1 No. shop"
        }, {
            value: 6700,
            name: "Jumei premium products"
        }]
  • Step 3 prepare configuration items and set type:pie under series
 var option = {
            series: [{
                type: 'pie',
                data: pieData
            }]
        }

present

Note: the data of the pie chart is an array of objects composed of name and value. The pie chart does not need to be configured with xAxis and yAxis

2.5.1 common effects of pie chart

  1. Display value

label.show: display text
label.formatter: formatting text

var option = {
            series: [{
                type: 'pie',
                data: pieData,
                label: {
                    show: true,
                    formatter: function(arg) {
                        return arg.data.name + 'platform' + arg.data.value + 'element\n' + arg.percent + '%'
                    }
                }
            }]
        }
  1. Nightingale chart (Nightingale chart means that the radius of each sector varies with the size of the data. The larger the numerical proportion, the larger the radius of the sector)

roseType:'radius'

  1. Select effect

selectedMode: 'multiple'
The selected mode indicates whether multiple selections are supported. It is off by default. Boolean values and strings are supported. The string values can be 'single' and 'multiple', respectively indicating single or multiple selections
selectedOffset: 30
Offset distance of the selected sector

var option = {
            series: [{
                type: 'pie',
                data: pieData,
                selectedMode: 'multiple',
                selectedOffset: 30
            }]
        }
  1. ring

radius
The radius of the pie chart. Can be of the following types:
number: directly specify the outer radius value.
string: for example, '20%', indicating that the outer radius is 20% of the length of the visible area size (the smaller one of the container height and width).
Array. : The first item of the array is the inner radius and the second item is the outer radius. Through the array, you can set the pie chart as a doughnut chart

var option = {
            series: [{
                type: 'pie',
                data: pieData,
                radius: ['50%', '70%']
            }]
        }

present

2.6 maps

Features of the map: the map can help us quickly see the differences of data in different geographical locations from a macro perspective

2.6.1 use of maps and charts

Baidu map api: using Baidu map api, it can display maps online. Baidu map needs to apply
Vector map: the map can be displayed offline, and the developer needs to prepare vector map data (the map data can be json data or js data)

2.6.2 implementation steps of vector map

  • Step 1 the most basic code structure of echarts
  • Step 2 prepare the Chinese vector json file and put it under the json/map / directory (assuming)
  • Step 3 use Ajax to get China json
$.get('json/map/china.json', function (chinaJson) { })
  • Step 4 in the Ajax callback function, register the json data of the map to the ecarts global object
$.get('json/map/china.json', function (chinaJson) { echarts.registerMap('chinaMap', chinaJson) })
  • Step 5: after obtaining the data, you need to configure the geo node and select setOption again
var mCharts = echarts.init(document.querySelector("div")) $.get('json/map/china.json', function(chinaJson) {
            echarts.registerMap('chinaMap', chinaJson) var option = {
                geo: {
                    type: 'map', // map is a fixed value 
                    map: 'chinaMap', //chinaMap needs to be consistent with the first parameter in registerMap 
                }
            };
            mCharts.setOption(option)
        })

Note: because Ajax is used in the code, this file cannot be opened with the file protocol. It should be placed under the HTTP service to display the map normally

2.6.3 common configurations of maps

  1. Zoom drag: roam
var option = {
            geo: {
                type: 'map', // map is a fixed value 
                map: 'chinaMap', //chinaMap needs to be consistent with the first parameter in registerMap, 
                roam: true, // Run drag and zoom with the mouse 
            }
        }
  1. Name display: label (display each place name)
var option = {
            geo: {
                type: 'map', // map is a fixed value 
                map: 'chinaMap', //chinaMap needs to be consistent with the first parameter in registerMap, 
                roam: true,
                label: {
                    show: true
                }
            }
        }
  1. Initial zoom scale: zoom, map center: center
 var option = {
            geo: {
                type: 'map', // map is a fixed value 
                map: 'chinaMap', //chinaMap needs to be consistent with the first parameter in registerMap, 
                roam: true,
                label: {
                    show: true
                },
                zoom: 0.8, // The zoom scale of the map. Greater than 1 means zoom in and less than 1 means zoom out 
                center: [87.617733, 43.792818] // The center point of the current viewing angle, expressed in longitude and latitude 
            }
        }

2.6.4 common effects of maps

  1. Show an area

When you click a province, the vector map of the province is displayed. The registered map is the same as the above steps, except that click events are added to the ECharts instance

  1. Different cities have different colors

     - Display basic map of China
     - Prepare city data, And set the data to series
     - take series Data and under geo Relate
     - combination visualMap Use together
    

Visual map is a visual mapping component, which is very similar to the previous area scaling dataZoom. It can filter data However, dataZoom is mainly used in charts in rectangular coordinate system, while visual map is mainly used in maps or pie charts

 var option = {
            geo: {
                type: 'map',
                map: 'chinaMap',
                roam: true,
                label: {
                    show: true
                }
            },
            series: [{
                data: airData,
                geoIndex: 0,
                type: 'map'
            }],
            visualMap: {
                min: 0, // minimum value 
                max: 300, // Maximum 
                inRange: {
                    color: ['white', 'red'] // Range of colors 
                },
                calculable: true // Whether to display the handle for dragging (the handle can drag and adjust the selection range) 
            }
        }
  1. Combination of map and scatter map

     - to series Add a new object to this array
     - Prepare scatter data,Set to new object data
     - Configure for new objects type type:effectScatter,Let the scatter chart use the map coordinate system coordinateSystem: 'geo',
     - Make the effect of ripples more obvious rippleEffect: { scale: 10 }
    
 var option = {
            series: [{
                data: airData,
                geoIndex: 0,
                type: 'map'
            }, {
                data: scatterData,
                type: 'effectScatter',
                coordinateSystem: 'geo',
                rippleEffect: {
                    scale: 10
                }
            }]
        }

2.7 radar chart

Characteristics of radar chart: radar chart can be used to analyze the comparison between multi-dimensional data and standard data
Implementation steps

  • Step 1 the most basic code structure of echarts
  • Step 2: define the maximum value of each dimension
var dataMax = [{
            name: 'Ease of use',
            max: 100
        }, {
            name: 'function',
            max: 100
        }, {
            name: 'photograph',
            max: 100
        }, {
            name: 'Run points',
            max: 100
        }, {
            name: 'Endurance',
            max: 100
        }]
  • Step 3 prepare data for specific products
var hwScore = [80, 90, 80, 82, 90] 
var zxScore = [70, 82, 75, 70, 78]
  • Step 4 set type:radar under series
var option = {
            radar: {
                indicator: dataMax
            },
            series: [{
                type: 'radar',
                data: [{
                    name: 'Huawei mobile 1',
                    value: hwScore
                }, {
                    name: 'ZTE mobile 1',
                    value: zxScore
                }]
            }]
        }

2.7.1 common effects of radar chart

  1. Display value label (show:true)
  2. Area areaStyle (areaStyle: {})
  3. Drawing type shape (radar drawing type, which supports' polygon 'and' circle ',' polygon ': polygon and' circle 'circle. It is configured in radar)

2.8 instrument panel diagram

Features of the dashboard: the dashboard can more intuitively show the progress or actual situation of an indicator
Implementation steps

  • Step 1 the most basic code structure of echarts
  • Step 2: prepare data and set it to data: [97] under series
  • Step 3: set type:gauge under series
 var option = {
            series: [{
                type: 'gauge',
                data: [{
                    value: 97,
                }]
            }]
        }

Common effects of dashboard

  1. Value range: max min
  2. Multiple pointers: add elements of array in data
  3. Color difference of multiple pointers: itemStyle
 var option = {
            series: [{
                type: 'gauge',
                data: [{
                    value: 97,
                    itemStyle: {
                        color: 'pink'
                    }
                }, {
                    value: 85,
                    itemStyle: {
                        color: 'green'
                    }
                }],
                min: 50
            }]
        }

3. Summary of echarts configuration items

3.1 bar chart

series[].typexAxisyAxismarkPointmarkLinelabelbarWidth
Chart typex-axisy-axisMax \ minaverage valueDisplay textColumn width

3.2 line chart

series[].typexAxisyAxismarkPointmarkLinemarkAreasmoothlineStyleareaStyleboundaryGapscale
Chart typex-axisy-axisMax \ minaverage valueLabel areaSmooth lineLine styleStyle x axisNext to the edgeScale off 0 value

3.3 scatter chart scatter

series[].typexAxisyAxissymbolSizeitemStyleshowEffectOnrippleEffectscale
Chart typex-axisy-axisScatter sizeScatter styleDisplay timingRipple effectScale off 0 value

3.4 pie chart pie

series[].typelabelradiusroseTypeselectedModeselectedOffset
Chart typeDisplay textradiusPie chart typeMultiple choicesSelected sector offset

3.5 map

series[].typegeomaproamzoomcenterlabelgeoIndexvisualMapcoordinateSystem
Chart typeGeographic coordinate system componentsIndicate map dataTurn on mouse drag and zoomaverage valueCenter point of chartShow regionIndicates the associated geo componentVisual mapping componentUse coordinate system

3.6 radar chart

series[].typeradarindicatorlabelareaStyleshape
Chart typeRadar chart assemblyRadar chart indicatorwritten wordsArea colorRadar chart shape

3.7 gauge of instrument panel

series[].typemaxminitemStyle
Chart typeMaximumminimum valuePointer style

3.8 rectangular coordinate system configuration

  1. grid
show[].typeborderWidthborderColorlefttoprightbottomwidthheight
Is it visibleBorder widthBorder colorleftToprightbottomwidthheight
  1. axis
typedataposition
Shaft typedataDisplay location
  1. dataZoom
typexAxisIndexyAxisIndexstartend
Scale block typex-axis indexy-axis indexInitial valueEnd value

3.9 general configuration

  1. title
textStyleborderWidthborderColorborderRadiuslefttoprightbottom
Text styleBorder widthBorder colorBorder filletleftToprightbottom
  1. tooltip
triggertriggerOnformatter
Trigger typeTrigger timingContent customization
  1. toolbox.feature
saveAsImagedataViewrestoredataZoommagicType
Save pictureData viewResetzoomChart conversion
  1. legend
data
Legend data needs to be consistent with the name value of a group of data in the series array

4. ECharts advanced

4.1 display related

4.1.1 theme

  1. Default theme

By default, two sets of themes are built in ECharts: light and dark, which can be specified in the initialization object method init

var chart = echarts.init(dom, 'light') 
var chart = echarts.init(dom, 'dark')
  1. Custom theme

     - Edit the theme in the theme editor (you can customize many contents):[To edit](https://echarts.apache.org/zh/theme-builder.html)
     - Download theme, It's a js file
     - Introduce theme js file
     - stay init Method
    

4.1.2 color palette

It is a group of colors. Graphics and series will automatically select colors from them, and continue to cycle from beginning to end, and then from beginning to end

  1. Theme palette
  echarts.registerTheme('itcast', {
            "color": ["#893448", "#d95850", "#eb8146", "#ffb248", "#f2d643", "#ebdba4"],
            "backgroundColor": "rgba(242,234,191,0.15)",
            ......
        })
  1. Global palette (Global palette is an array of color s added under option)
   var option = { 
            color: ['red', 'green', 'blue'],// Global palette 
            ......
        }
        mCharts.setOption(option)
  1. Local palette (local palette is to add an array of color s under series)
var option = { // Global palette 
            color: ['red', 'green', 'blue'],
            series: [{
                type: 'pie',
                data: pieData, // Local palette 
                color: ['pink', 'yellow', 'black']
            }]
        }
        mCharts.setOption(option)

Note: if both the global palette and the local palette are set, the local palette will produce an effect, which follows the principle of proximity

  1. Implementation of gradient color (in ECharts, linear gradient and radial gradient are supported)

Linear gradient
The type of linear gradient is linear. It needs to configure the linear direction through X, y, X2 and Y2.
The range of X, y, X2, Y2 is 0 - 1, which is equivalent to the percentage in the graphic bounding box. If global is true, the four values are absolute pixel positions. In the following code, 001 means gradient from top to bottom

 series: [{
            type: 'bar',
            data: yDataArr,
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'red' // Color at 0% 
                    }, {
                        offset: 1,
                        color: 'blue' // Color at 100% 
                    }],
                    globalCoord: false // The default is false 
                }
            }
        }]

Radial Gradient
The type of radial gradient is radial. It needs to configure the radial direction through X, y and R. the first three parameters are center x, y and radius, which are the same as linear gradient
0.5 0.5 0.5 in the following code means that a circle with a radius of half the width is radially diffused outward from the key point of the column

series: [{
            itemStyle: {
                color: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.5,
                    colorStops: [{
                        offset: 0,
                        color: 'red' // Color at 0% 
                    }, {
                        offset: 1,
                        color: 'blue' // Color at 100% 
                    }],
                    global: false // The default is false 
                }
            }
        }]

4.1.3 style

  1. Direct style

itemStyle textStyle lineStyle areaStyle label

data: [{
            value: 11231,
            name: "TaoBao",
            itemStyle: {
                color: 'black'
            }
        }] title: {
            text: 'I'm the title',
            textStyle: {
                color: 'red'
            }
        }
        label: {
            color: 'green'
        }

Note: these styles can generally be set with colors, backgrounds or fonts, which will override the styles in the theme

  1. Highlight style

In fact, many elements in the chart have two states: one is the default state, and the other is the highlighted state formed by mouse sliding or clicking The highlight style is the style set for the highlight state of the element (wrap the original itemStyle in emphasis)

 series: [{
            type: 'pie',
            label: {
                color: 'green'
            },
            emphasis: {
                label: {
                    color: 'red'
                },
            },
            data: [{
                value: 11231,
                name: "TaoBao",
                itemStyle: {
                    color: 'black'
                },
                emphasis: {
                    itemStyle: {
                        color: 'blue'
                    },
                }
            }]
        }]

4.1.4 adaptive

Implementation steps

  • Step 1: listen for window size change events
  • In middle note, step 2: invokes the resize of the ECharts instance object in the event handler.

4.2 use of animation

Ecarts has built-in animation for loading data. We just need to show or hide it at the right time

4.2.1 loading animation

  1. Show load animation
mCharts.showLoading() commonly, We will show the loading animation before getting the chart data
  1. Hide loading animation
mCharts.hideLoading() commonly, We will hide the loading animation after obtaining the chart data, Display chart

4.2.2 incremental animation

All data updates are realized through setOption. We don't need to consider the changes in the data. ECharts will find the differences between the two groups of data, and then express the changes in the data through appropriate animation.

4.2.3 animation configuration

  1. Turn on animation
animation: true
  1. Animation duration
animationDuration: 5000
  1. Slow motion animation (see the official website for many parameters) https://echarts.apache.org/examples/zh/editor.html?c=line-easing)
  2. Animation threshold
animationThreshold: 8

When the number of elements in a single form is greater than this threshold, the animation is turned off

4.3 interactive API

4.3.1 global ecarts object

The global ecarts object is the introduction of ecarts JS file can be used directly

  1. echarts.init (initialize the theme used by the ECharts instance object)
  2. echarts.registerTheme (Only registered topics can be used in init method)
  3. echarts.registerMap (register map data)
  4. echarts.connect
    -There can be multiple independent charts in a page
    -Each chart corresponds to an ECharts instance object
    -connect can realize multi graph Association. The incoming linkage target is EChart instance and supports array

4.3.2 eckartsinstance object

The ecartsinstance object is created through ecarts Obtained after init method call

  1. echartsInstance.setOption
Set or modify the configuration item of the chart instance and call the data multiple times setOption Method to merge the new configuration with the old configuration
  1. echartsInstance.resize
Recalculate and chart
 General and window Object resize Event combination window.onresize = function(){ myChart.resize(); }
  1. echartsInstance.on ,echartsInstance.off
Bind or unbind event handler( on Mostly used after initializing icon instances)
  1. echartsInstance.dispatchAction (actively trigger some behaviors and use code to simulate the user's behavior)
// Trigger highlighted behavior 
        mCharts.dispatchAction({
                type: "highlight",
                seriesIndex: 0,
                dataIndex: 1
            })
        // The behavior that triggers the display of the prompt box 
        mCharts.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: 3
        })
  1. echartsInstance.clear
Clearing the current instance will remove all components and charts in the instance
 After emptying, it can be used again setOption
  1. echartsInstance.dispose
Destroy instance
 The instance cannot be used after destruction

OVER (report big brother: you have successfully won ECharts)

Tags: Vue data visualization

Posted by DiscoTrio on Fri, 15 Apr 2022 22:56:12 +0300