Summary of knowledge points of ecarts data visualization

Keywords: Javascript Front-end echarts

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

Posted by nagasea on Tue, 09 Nov 2021 14:21:01 -0800