echarts 直角坐标系(柱状、折线、散点图)通用配置gird(图表布局)、axis(坐标轴)、dataZoom(区域缩放)

Myth丶恋晨 2021-07-25 00:50 710阅读 0赞

1、grid(对整个图表进行布局)
    	series同级设置
    	
    	grid:{  设置网格,控制图标整体布局显示等属性
            show:true,  显示网格
            borderWidth:4,
            width:'auto',   设置网格宽度,会将整个视图一起变化
            left:120,   设置网格位置,会将整个视图一起变化
            containLabel: true, 距离是包含坐标轴上的文字
            backgroundColor,
            shadowColor,
            
        }
    
    2、axis(坐标轴)
        xAxis:{
    		type:'category',
    		data:data,  类目轴必须设置数值
    		position:'top|bottom'  x轴放置位置
    	}
    	yAxis:{
    		type:'value',  数值类型可从series的data中自动获取
    		position:'left|right'  y轴放置位置
    	}
    
    3、dataZoom(区域缩放,可实现元素出现平移效果)
    	方式一:
    		series同级设置
    		
    		dataZoom:[
            { 只设置一个且不设置yAxisIndex,默认设置第一个x轴
            
              type:'slider'  添加滑动条来进行缩放
              type:'inside',   通过鼠标滑轮和双手进行缩放
              xAxisIndex:0, 该缩放器控制第一个x轴
              start:20,   初始缩放从20%开始
              end:80     初始缩放从80%结束
    
            },
            {
              type:'slider',
              yAxisIndex:[0,1],  该缩放器控制第一个y轴和第二个y轴
              startValue:n, 轴的类型为 category，则 startValue 既可以设置为 axis.data 数组的 index，也可以设置为数组值本身。 但是如果设置为数组值本身，会在内部自动转化为数组的 index。
              endValue:n,
            }
          ]
    		
    	方式二:
    		通过toolbox的feature实现

代码示例:

<template>
      <div id="app">
        
        <div class='map'>
    
        </div>
    
    
        
      </div>
    </template>
    
    <script>
    import echarts from 'echarts';
    
    export default { 
      name: 'App',
      mounted:function(){ 
        var myMap=echarts.init(document.querySelector('.map'));
        var xData=['张三','彭万里','高大山','谢大海','马宏宇','林莽','黄强辉','章汉夫']
        var yData1=[88,92,63,77,94,80,72,86];
        var yData2=[80,90,60,70,90,70,62,76];
    
    
    
        var option = { 
          xAxis:{ 
            type:'category',
            data:xData,
            // position:'top'
          },
          yAxis:{ 
            type:'value',
            // position:'right'
          },
          // grid:{ //设置网格,控制图标整体布局显示等属性
          // show:true, //显示网格
          // borderWidth:4,
          // width:700, //设置网格宽度,会将整个视图一起变化
          // left:120, //设置网格位置,会将整个视图一起变化
          // },
          dataZoom:[
            { 
              // type:'slider' //添加滑动条来进行缩放
              type:'slider',  //通过鼠标滑轮和双手进行缩放
              xAxisIndex:0,
              start:20,
              end:80
    
            },
            { 
              type:'slider',
              yAxisIndex:[0]
            }
          ],
          series:[
            { 
              type:'bar',
              name:'成绩',
              data:yData1,
              markPoint:{ 
                data:[
                  { 
                    type:'max',
                    name:'最大值',
                  },
                  { 
                    type:'min',
                    name:'最小值',
                  }
                ]
              }
            }
          ]
        }
    
        myMap.setOption(option);
    
      }
    }
    </script>
    
    <style>
    .map{ 
      height:500px;
      width:500px;
    }
    </style>