03-ECharts直角坐标系的常用配置grid、axis、dataZoom

最新推荐文章于 2024-06-05 11:25:12 发布

请问大家代码怎么敲

最新推荐文章于 2024-06-05 11:25:12 发布

阅读量755

点赞数

分类专栏： js Echarts 数据可视化

本文链接：https://blog.csdn.net/liumuye88888/article/details/116764961

版权

js 同时被 3 个专栏收录

23 篇文章 1 订阅

订阅专栏

Echarts

7 篇文章 0 订阅

订阅专栏

数据可视化

7 篇文章 0 订阅

订阅专栏

grid(直角坐标系内绘图网格)

直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。

<!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="../echarts.min.js"></script>
</head>
<body>
    <!-- 直角坐标系图标:柱状图,折线图,散点图 -->
    <!-- 网格 grid -->
    <div style="width: 600px;height: 600px;"></div>
</body>
<script>
    var mCharts = echarts.init(document.querySelector("div"))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
    var option = {
     grid: {   // 坐标轴容器
        show: true, // 是否可见
        borderWidth: 10, // 边框的宽度
        borderColor: 'red', // 边框的颜色
        left: 120, // 边框的位置
        top: 120,  //可以用来移动整个图表
        width: 300, // 边框的大小
        height: 150 //图表高度
      },
      xAxis: {
        type: 'category',
        data: xDataArr
     
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '语文',
          type: 'bar',
          markPoint: {
            data: [
              {
                type: 'max', name: '最大值'
              },{
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: {
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: {
            show: true,
            rotate: 60,
            position: 'top'
          },
          barWidth: '30%',
          data: yDataArr
        }
      ]
    }
    mCharts.setOption(option)
</script>
</html>

在这里插入图片描述

axis(坐标轴axis坐标轴分为x轴和y轴)

坐标轴axis坐标轴分为x轴和y轴
一个grid中最多有两种位置的x轴和y轴

坐标轴类型type
value:数值轴,自动会从目标数据中读取数据
category:类目轴,该类型必须通过data设置类目数据

xAxis: {
            type: 'category',
            data: xDataArr,
            position:'top'
        },
        yAxis: {
            type: 'value',
            position:'right'
        },

可以给xAxis设置position为top x轴在上,yAxis设置position设置为right,y轴在右
在这里插入图片描述

dataZoom(区域缩放)

datazoom 用于区域缩放,对数据范围过滤,x轴和y轴都可以拥有datazoom是一个数组,意味着可以配置多个区域缩放器
类型type
slider:滑块
inside:内置,依靠鼠标滚轮或者双指缩放指明产生作用的轴

xAxisIndex:设置缩放组件控制的是哪个x轴，一般写0即可yAxisIndex:设置缩放组件控制的是哪个y轴,一般写O即可指明初始状态的缩放情况

start:数据窗口范围的起始百分比
end:数据窗口范围的结束百分比

dataZoom:[
        {
            type:'slider' ,  //滑块   inside:内置依靠鼠标滚轮或者双指缩放
            xAxisIndex:0

        },
        {
            type:'slider' , 
            yAxisIndex:0,
            start:0, //指明初始状态的缩放情况
            end:80
        }
        ],