直角坐标系的常用配置

最新推荐文章于 2023-11-15 11:18:48 发布

漂流の少年

最新推荐文章于 2023-11-15 11:18:48 发布

阅读量257

点赞数 1

分类专栏： ECharts 文章标签： echarts

本文链接：https://blog.csdn.net/YINZHE__/article/details/119752252

版权

ECharts 专栏收录该内容

26 篇文章 3 订阅

订阅专栏

直角坐标系图表：柱状图、折线图、散点图

1.网格grid

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

x轴和y轴就是在grid的基础上进行绘制的

显示grid show

grid的边框 borderWidth、borderColor

grid的位置 left、top、right、bottom

grid的大小 width、height

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <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 yDataArr = [88, 45, 48, 89, 99, 77]
      var option = {
        grid: {
          show: true,
          borderWidth: 5,
          borderColor: 'yellow',
          left: 120,
          top: 120,
          width: 300,
          height: 200,
        },
        xAxis: {
            type: 'category',
            data: xDataArr
        },
        yAxis: {
            type: 'value',
        },
        series: [{
            name: '语文',
            type: 'bar',
            data: yDataArr
        }]
      }
      mCharts.setOption(option)
  </script>
</body>
</html>

2.坐标轴axis

坐标轴类型 type

value:数值轴，会自动从series里面读取相应的数据

category:类目轴，该类型必须通过data设置类目数据

显示位置 position

xAxis: 可取值为top或bottom

yAxis: 可取值为left或right

//其余代码和上一例一样
var option = {
        xAxis: {
            type: 'category',
            data: xDataArr,
            position: 'top'
        },
        yAxis: {
            type: 'value',
            position: 'right'
        },
        series: [{
            name: '语文',
            type: 'bar',
            data: yDataArr
        }]
      }

3.区域缩放dataZoom

dataZoom通过区域缩放对数据进行过滤，x轴和y轴都可以拥有

dataZoom是一个数组，意味着可以配置多个区域缩放器

类型type

slider 滑块

inside 内置，依靠鼠标滚轮或双指缩放

指明产生作用的轴

xAxisIndex:设置缩放组件控制的是哪个x轴，一般写0

yAxisIndex:设置缩放组件控制的是哪个y轴，一般写0

指明初始状态的缩放情况

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

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

//其它代码和上上例一样
var option = {
        dataZoom: [
          {
            type: 'slider',
            xAxisIndex: 0
          },
          {
            type: 'slider',
            yAxisIndex: 0,
            start: 20,
            end: 80,
          }
        ],
        xAxis: {
            type: 'category',
            data: xDataArr,
        },
        yAxis: {
            type: 'value',
        },
        series: [{
            name: '语文',
            type: 'bar',
            data: yDataArr
        }]
      }

漂流の少年

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
直角坐标系的常用配置

目录直角坐标系图表：柱状图、折线图、散点图1.网格gridgrid用来控制直角坐标系的布局和大小x轴和y轴就是在grid的基础上进行绘制的显示grid showgrid的边框 borderWidth、borderColorgrid的位置 left、top、right、bottomgrid的大小 width、height<!DOCTYPE html><...
复制链接

扫一扫