直角坐标系基础

最新推荐文章于 2024-09-08 21:36:12 发布

紫苏炒米饭

最新推荐文章于 2024-09-08 21:36:12 发布

阅读量152

点赞数

分类专栏： echarts 文章标签：前端

本文链接：https://blog.csdn.net/weixin_45615607/article/details/121767270

版权

echarts 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

网格

grid是用了控制直角坐标系的布局和大小

显示：grid：show

边框：borderWidth / borderColor

位置和大小：left，top，right，bottom / width，height

坐标

type：value（数值轴，自动从目标数据读取数据）

category：类目轴，从data设置类目轴读取数据

position：显示的位置

xAxis：top / bottom

yAxis： left / right

区域缩放

dataZoom：区域缩放，对数据范围过滤（数组）

type：slider（滑块）inside（内置滚轮和双指）

xAxisindex：设置缩放组件控制的是那个x轴

yAxisindex：设置缩放组件控制的是那个y轴

初始状态：start/end

<!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>

紫苏炒米饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
直角坐标系基础

网格 grid是用了控制直角坐标系的布局和大小显示：grid：show 边框：borderWidth / borderColor 位置和大小：left，top，right，bottom / width，height坐标 type：value（数值轴，自动从目标数据读取数据） category：类目轴，从data设置类目轴读取数据 position：显示的位置 ...
复制链接

扫一扫