当前位置：网站首页>Common configurations in rectangular coordinate system

Common configurations in rectangular coordinate system

2022-07-08 01:11:00 【Just love life】

Common configuration in rectangular coordinate system
Diagram of rectangular coordinate system ： Histogram 、 Broken line diagram 、 Scatter plot
grid grid
grid It is used to control the layout and size of rectangular coordinates
x Axis and y The axis is grid Based on
Insert picture description here

Show grid
show
Insert picture description here
grid Location and size of
left、top、right、bottom、height Insert picture description here

Axis

The coordinate axis is divided into x Axis and y Axis
One grid There are at most two positions in x Axis and y Axis
Axis type type
value： Value axis , This type must pass data Set category
category： Taxonomic axis , This type must pass data Set category data
Display position position
xAxis: It can be taken as top perhaps bottom
yAxis： It can be taken as left perhaps right

dataZoom

dataZoom For area scaling , Filter amount of data range ,x Axis and y All axes can have
dataZoom Is an array , This means that multiple area scalers can be configured
slider: slider
inside： built-in , Zoom with the mouse wheel or two fingers
Insert picture description here
Indicate which axis works
xAxisIndex： Set which... The zoom component controls x Axis , General writing 0 that will do
yAxisIndex： Set which... The zoom component controls y Axis , General writing 0 that will do
Insert picture description here
Indicates the scaling of the initial state
start： The starting percentage of the data window range
end： End percentage of data window range
Insert picture description here
Code 

 <!-- 1.ECharts The most basic code structure  2.x Axis data ：[' Zhang San ',‘ Li Si ’,‘ Wang Wu ’,‘ Intercalary soil ’,‘ Xiao Ming ’,‘ maotai ’,‘ Er Niu ’,‘ Daqiang ’] 3.y Axis data ：[88,92,63,77,94,80,72,86] 4. take type Is set to bar --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="lib/echarts.min.js"></script> </head> <body> <div style="width: 600px;height: 400px;"></div> <script> var mCharts= echarts.init(document.querySelector('div')) var xDataArr=[' Zhang San ',' Li Si ',' Wang Wu ',' Intercalary soil ',' Xiao Ming ',' maotai ',' Er Niu ',' Daqiang '] var yDaraArr=[70,92,85,89,77,90,87,98] var option={
    
            dataZoom:[
                {
     // type:'inside'
                   type:'slider' ,
                   xAxisIndex:0
                 
                },
                {
     // type:'inside'
                   type:'slider' ,
                   yAxisIndex:0,
                   start:0,
                   end:50
                 
                }
            ], grid:{
    
                show:true,
                borderWidth:10,
                borderColor:'blue',
                left:120,
                top:120,
                width:300,
                height:150
                
            }, xAxis:{
    
               type:'category' , // Taxonomic axis 
               data:xDataArr
               
           }, yAxis:{
    
               type:'value' ,// Value axis  axisLine:{
    
                   show:true
               }
              
           }, series:[
               {
    
                   name:' Chinese language and literature ', type:'bar', //bar It's a histogram ,line It's linear ,pie It's pie shaped  markPoint:{
       
                       data:[
                         {
    
                             type:'max',name:' Maximum '
                         },{
    
                           type:'min',name:' minimum value '
                         }
                      ]
                    }, markLine:{
    
                       data:[
                           {
    
                               type:'average',name:' Average '
                           }
                       ]
                    }, label:{
    
                       show: true,
                       position:'right'
                    },
                       
                    barWidth:'30%',
                   data:yDaraArr
               }
           ]
        }
        // step 5： Set the configuration item to echarts Instance object   
        mCharts.setOption(option) 
     </script>
</body>
</html>
原网站

版权声明
本文为[Just love life]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202130548221794.html

边栏推荐

猜你喜欢

随机推荐