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

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轴并放置在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>


    <!-- <router-view/> -->
  </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>