直角坐标系中的常用配置

最新推荐文章于 2022-03-23 23:26:17 发布

生活热爱就好

最新推荐文章于 2022-03-23 23:26:17 发布

阅读量481

点赞数

分类专栏：数据可视化文章标签： echarts

本文链接：https://blog.csdn.net/qq_41891425/article/details/121206731

版权

数据可视化专栏收录该内容

13 篇文章 1 订阅

订阅专栏

直角坐标系中的常用配置
直角坐标系图表：柱状图、折线图、散点图
网格grid
grid是用来控制直角坐标的布局和大小
x轴和y轴就是在grid的基础上进行绘制的
在这里插入图片描述

显示grid
show
在这里插入图片描述
grid的位置和大小
left、top、right、bottom、height

坐标轴

坐标轴分为x轴和y轴
一个grid中最多有两种位置的x轴和y轴
坐标轴类型type
value：数值轴，该类型必须通过data设置类目
category：类目轴，该类型必须通过data设置类目数据
显示位置 position
xAxis:可取值为top或者bottom
yAxis：可取值为left或者right

dataZoom

dataZoom用于区域缩放，对数据范围过滤额，x轴和y轴都可以拥有
dataZoom是一个数组，意味着可以配置多个区域缩放器
slider:滑块
inside：内置，依靠鼠标滚轮或者双指缩放
在这里插入图片描述
指明产生作用的轴
xAxisIndex：设置缩放组件控制的是哪个x轴，一般写0即可
yAxisIndex：设置缩放组件控制的是哪个y轴，一般写0即可

指明初始状态的缩放情况
start：数据窗口范围的起始百分比
end：数据窗口范围的结束百分比
在这里插入图片描述
代码

 <!-- 
    1.ECharts最基本的代码结构
    2.x轴数据：['张三'，‘李四’，‘王五’，‘闰土’，‘小明’，‘茅台’，‘二妞’，‘大强’]
    3.y轴数据：[88,92,63,77,94,80,72,86]
    4.将type的值设置为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=['张三','李四','王五','闰土','小明','茅台','二妞','大强']
        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' , //类目轴
               data:xDataArr
               
           },
           yAxis:{
               type:'value'  ,//数值轴
               axisLine:{
                   show:true
               }
              
           },
           series:[
               {
                   name:'语文',
                   type:'bar',   //bar是柱状图，line是线状，pie是饼状
                   markPoint:{   
                       data:[
                         {
                             type:'max',name:'最大值'
                         },{
                           type:'min',name:'最小值'
                         }
                      ]
                    },
                   markLine:{
                       data:[
                           {
                               type:'average',name:'平均值'
                           }
                       ]
                    },
                   label:{
                       show: true,
                       position:'right'
                    },
                       
                    barWidth:'30%',
                   data:yDaraArr
               }
           ]
        }
        //步骤5：将配置项设置给echarts实例对象  
        mCharts.setOption(option) 
     </script>
</body>
</html>