Knowledge points of ecarts data visualization (I)
1. Use steps
(1) Import the echorts.js file
(2) Prepare a box to present the chart
(3) Initialize the ecarts instance object (parameters, dom elements, which determine the final rendering position of the chart)
var mCharts = echarts.init(document.querySelector('div'))
(4) Prepare configuration items
(5) Set the configuration item to the ecarts instance object
2. Common charts
(1) Histogram
var option = {
//x-axis configuration
xAxis:{
type:'category',//
data:xDataArr//Data can be defined in advance, and only assignment is required here;
}，
yAxis:{
type:'value'//Numerical type
},
series:[{
name:'language',
type:'bar',
//sign
markPoint:{
data:[{type:'max',name:'Maximum'}，{type:'min',name:'minimum value'}]
},
//average value
markLine:{
data:[{type:'average',name:'average value'}]
}，
lable:{
show:true,
rotate:60,
position:'inside'
},
barWidth:30%,
data:yDateArr//Define it in advance. Here, you only need to assign a value
}]
}
Common effects:
Marking: maximum, minimum, average
markPoint;
markLine;
Display: numerical display, column width, horizontal histogram
label；
barWidth；
Change the roles of the x and y axes;
(2) Line chart
Common effects:
Marking:
Maximum value, minimum value, average value and marked interval;
Markpoint (maximum, minimum);
Markline (average);
Markarea;
Line control:
Smooth;
Linestyle;
Fill style:
areaStyle；
Next to edge:
boundaryGap；
Scaling: scale off 0 values
scale；
Stacking diagram:
stack；
series:[
{
name:'a brand of instant noodles',
data:yDataArr,
stack:'all',
type:'line'，
markPoint:{
data:[{type:'max'},{type:'min'}]
},
markLine:{
data:[{type:'average'}]
},
markArea:{
data:[[{xAxis:'1 month'},{yAxis:'2 month'}],[{xAxis:'7 month'，yAxis:'8 month'}]]
}，
smooth:true,
lineStyle:{
color:'',
type:'dashed'
},
areaStyle:{
color:''
},
},
{
type:'line',
data:yDataArr,
stack:'all',
areaStyle:{}
}
],
xAxis:{
type:'category',
data:xDataArr,
boundaryGap:false
},
yAxis:{
type:'value',
scale:true
}
(3) Scatter diagram
var option = {
xAxis:{
type:'value',
scale:true
},
yAxis:{
type:'value',
scale:true
},
series:[
{
//type:'scatter',
type:'effectScatter'
data:axisData，
//symbolSize:20,
symbolSize: function(arg){
var height = arg[0]/100;
var weight = arg[1];
//bmi = weight kg / (height m * height m) greater than 28 represents obesity
var bmi = weight /(height * height)
if(bim > 28){
return 20
}
return 5
},
itemStyle:{
color:function(arg){
console.log(arg);//The logic is the same as above
return 'pink'
}
}
}
]
}
Common effects:
Bubble chart effect:
The size of scatter points is different (symbol size);
The color of scatter points is different (itemStyle);
Effect of ripple Animation:
type:effectScatter；
showEffectOn:'emphasis'；
rippleEffect:{}；
(4) Common configurations in rectangular coordinate system
Rectangular coordinate system chart: histogram, broken line chart and scatter chart
Configuration 1: grid
Grid is used to control the layout and size of rectangular coordinate system. x-axis and y-axis are drawn on the basis of grid
Display grid:show
gird's border: borderWidth/borderColor
Location and size of grid: left/top/right/bottom/width/height
grid:{
show:true,//display
borderWidth:10,
borderColor:'red',
left:120,
top:120,
width:300,
height:150
}
Configuration 2: axis
The coordinate axes are divided into x-axis and y-axis. There are at most two positions of x-axis and y-axis in a grid
Coordinate system type: type
Value - value axis, which will automatically read data from the target data;
Category - category axis, which must set category data through data;
Display position: position
xAxis: the value can be top or bottom;
yAxis: can be left or right;
Configuration 3: Area zoom dataZoom
dataZoom is used for area scaling and data range filtering. Both x-axis and y-axis can be used
dataZoom is an array, which means that multiple area scalers can be configured
var option = {
dataZoom:[{
type:'slider'
type:'inside'//This type is generally not used
xAxisIndex:0
}
},{
type:'slider',
yAxisIndex:0,
start:0,
end:50
}]
}
Type: type
Slider: slider;
inside: built in, zoom by mouse wheel or two fingers;
Indicate which axis is active:
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;
(5) Pie chart
Data is an array of objects consisting of: name and value
var option = {
series:[
{
type:'pie',
data:pieData//Data prepared in advance
label:{//Display of pie chart text
show:true//display text
formatter:function(arg){
return arg.name+'platform'+'arg.value+'element\n'+arg.percent + '%'
}，
radius:20,//Radius of pie chart
radius:'20%'//Percentage refers to the smaller half of the width and height to set the percentage
radius:['50%','75%']//The 0th element represents the radius of the outer circle, and the first element represents the radius of the outer circle
roseType:'radius'//The radius of each area of the nandinger chart and pie chart is different and will change with the change of the value
selectedMode:'single'//The selected effect can deviate the selected area from the dot by a short distance
selectedMode:'multiple'
selectedOffset:30
}
}
]
}
Common values:
Display value: label.formatter;
Ring: These are two radii: ['50%', '70%'];
Nandingertu: roseType: 'radius';
Selected effect:
Selected mode: selected mode (single / multiple);
Selected quantity: selectedOffset:30;
(6) Maps
How to use maps and charts:
Baidu map API: you need to apply for Baidu map API;
Vector map: vector map data needs to be prepared;
//Data acquisition
//Register map vector data ecarts. Registermap ('chinemap ', vector map data) in the Ajax callback function
$.get('',function(ret){
console.log(ret);//Is the vector map data of China's brother provinces
echarts.registerMap('chinaMap',ret)；
var option = {
geo:{
type:'map',
map:'chinaMap',//chinaMap needs to be consistent with the first parameter in registerMap
roam:true,//Sets the effects that allow zooming and dragging
label:{
show:true//Display label
},
zoom:1//Sets the initial scale
center:[87.617733,43.792818]//Set the coordinates of the map center point, which can be obtained from the map vector data
}
}
mCharts.setOption(option)
})
Common configuration:
Zoom drag: roam;
Name display: label;
Initial zoom: zoom;
Map center: center;
Common effects:
Display an area;
Different cities have different colors;
series :[
{
data:airData,
geoIndex:0//Associate the air quality data with the 0th geo configuration
type:'map'
}
],
visualMap:{
min:0,
max:300,
inRange:['white','red']//Controls the range of color gradients
calculbale:true//The effect of the slider appears
}
Combination of map and scatter map;
series:[
{
data:airData,
geoIndex:0//Associate the air quality data with the 0th geo configuration
type:'map'
}，
{
data:scatterDate,//Configure coordinate data for scatter points
type:'effectScatter',
coordinateSystem:'geo'，//Indicate the coordinate system used by the scatter point, the coordinate system of geo
rippleEffect:{
scale:10//Sets the scale of the ripple animation
}
}
]
(7) Radar chart
Maximum value of each dimension:
indicator:[{name:'Ease of use'，max:100},...]
var option = {
radar:{
indicator:dataMax,//Configure the maximum value of each dimension
shape:'circle'//Configure the outermost graph of radar chart circle polygon
},
series:[
{
type:'radar',//This chart is a radar chart
label:{
show:true//Display value
}，
areaStyle:{},//Shadow the radar map of each product
data:[
{
name:'Huawei mobile phone'，
value:[]
},
{
name:'ZTE Mobile'，
value:[]
}
]
}
]
}
Common configuration:
Display value: label;
Area: areaStyle;
Drawing type: shape;
(8) Instrument cluster diagram
var option = {
series:[
{
type:'guage',
data:[
{
value:97，
itemStyle:{//Pointer style
color:'pink',//The color of the pointer
}
},//Each object represents a pointer
{
value:85，
itemStyle:{color:'green'}
},
]，
min:50//min max control instrument panel value range
}
]
}
Common effects:
Value range: max,min;
Multiple pointers: add array elements in data;
Make a pointer color difference: itemStyle
3. General configuration
(1) Title: title
Text styles: textStyle
Title border: borderWidth/borderColor/borderRadius
Title Position: left/top/right/bottom
(2) Prompt: Tooltip (prompt box component, used to configure the display box when the mouse slides over or clicks the chart)
Trigger type: trigger (item, axis)
Trigger timing: trigger on (mouseover/click)
Formatting: formatter (string, callback function)
tooltip:{
trigger:'axis',
triggerOn:'click',
//formatter:'{b}' scored {c} ',
formatter:function(arg){
return arg[0].name + 'Your score is:'+arg[0].data
}
}
(3) Tool button: toolbox (toolbar provided by ecarts: built in five tools: export picture, data view, dynamic type switching, data area scaling and reset)
toolbox:{
feature:{
saveAsImage:{},//Export picture
dataView:{},//Data attempt
restore:{}，//Reset
dataZoom:{},//Area scaling
magicType:{
type:['bar','line']
}//Dynamic chart type switching
}
}
(4) legend: legend
series:[
{
name:'language',
type:'bar',
data:yDataArr1
},
{
name:'mathematics'，
type:'bar',
data:yDataArr2
}
]，
legend:{
data:['language'，'mathematics']
}
legend: legend, used to filter series. It needs to be used with series
The data in legend is an array;
The data value of legend must be consistent with the name value of a group of data in the series array