05 echarts的基本使用- 直角坐标系的常用配置

直角坐标系的图表指的是带有x轴和y轴的图表, 常见的直角坐标系的图表有: 柱状图 折线图 散点图 针对于直角坐标系的图表, 有一些通用的配置

1配置1: 网格 grid

 

 

2 坐标轴 axis

 

 

3区域缩放 dataZoom

dataZoom 用于区域缩放, 对数据范围过滤, x轴和y轴都可以拥有, dataZoom 是一个数组, 意味着 可以配置多个区域缩放器

 

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <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 yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
    var option = {
      dataZoom: [ // 控制区域缩放效果的实现
        {
          type: 'slider', // 缩放的类型  slide代表滑块  inside代表依靠鼠标滚轮
          // type: 'inside'
          xAxisIndex: 0
        },
        {
          type: 'slider',
          yAxisIndex: 0,
          start: 0, // 渲染完成后, 数据筛选的初始值, 百分比
          end: 80 // 渲染完成后, 数据筛选的结束值, 百分比
        }
      ],
      toolbox: {
        feature: {
          dataZoom: {}
        }
      },
      grid: {
        show: true,
        borderColor: 'red',
      },
      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>
</body>

</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值