Echarts 直角坐标系常用配置

最新推荐文章于 2023-10-21 16:43:18 发布

Akimoto Hiroshi

最新推荐文章于 2023-10-21 16:43:18 发布

阅读量317

点赞数

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

本文链接：https://blog.csdn.net/dyw3390199/article/details/120592554

版权

echarts 专栏收录该内容

15 篇文章 3 订阅

订阅专栏

在这里插入图片描述

grid

在这里插入图片描述

<!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>直角坐标系常用配置-grid</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.common.min.js"></script>
</head>
<body>
  <div style="width: 600px; height: 400px;"></div>
  <script>
    var myCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['Dean', 'Jing', 'Amy', 'John', 'Rebecca', 'Lexie']
    var yDataArr = [88, 99, 78, 67, 84, 32]
    var option = {
      grid: {
        show: true,
        borderWidth: 2,
        borderColor: 'blue',
        // 控制图表在div中的显示位置
        left: 50,
        top: 50,
        // 控制图表大小
        width: 200,
        height: 200
      },
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: 'Math',
          type: 'bar',
          data: yDataArr,
          itemStyle: {
            color: 'lightblue'
          }
        }
      ]
    }
    myCharts.setOption(option)
  </script>
</body>
</html>

在这里插入图片描述

坐标轴axis

在这里插入图片描述

<!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>直角坐标系常用配置-grid</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.common.min.js"></script>
</head>
<body>
  <div style="width: 600px; height: 400px;"></div>
  <script>
    var myCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['Dean', 'Jing', 'Amy', 'John', 'Rebecca', 'Lexie']
    var yDataArr = [88, 99, 78, 67, 84, 32]
    var option = {
      grid: {
        show: true,
        borderWidth: 2,
        // borderColor: 'lightblue',
        // 控制图表在div中的显示位置
        left: 50,
        top: 50,
        // // 控制图表大小
        // width: 200,
        // height: 200
      },
      xAxis: {
        type: 'category',
        data: xDataArr,
        position: 'top'
      },
      yAxis: {
        type: 'value',
        position: 'right'
      },
      series: [
        {
          name: 'Math',
          type: 'bar',
          data: yDataArr,
          itemStyle: {
            color: 'lightblue'
          },
          barWidth: '20%' // 控制bar的宽度
        }
      ]
    }
    myCharts.setOption(option)
  </script>
</body>
</html>

在这里插入图片描述
坐标轴位置可以控制：

dataZoom

1.基础版本toolbox：先来看一个基础版本的效果：

<!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>直角坐标系常用配置-dataZoom</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.common.min.js"></script>
</head>
<body>
  <div style="width: 600px; height: 400px;"></div>
  <script>
    var myCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['Dean', 'Jing', 'Amy', 'John', 'Rebecca', 'Lexie']
    var yDataArr = [88, 99, 78, 67, 84, 32]
    var option = {
      toolbox: {
        feature: {
          dataZoom: {}
        }
      },
      grid: {
        show: true,
        borderWidth: 2,
        left: 50,
        top: 50
      },
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: 'Math',
          type: 'bar',
          data: yDataArr,
          itemStyle: {
            color: 'lightblue'
          }
        }
      ]
    }
    myCharts.setOption(option)
  </script>
</body>
</html>

核心代码：
在这里插入图片描述

2. dataZoom

在这里插入图片描述
如果配置：

下面的就没有了，可以用鼠标滚轮代替

Akimoto Hiroshi

关注

0
点赞
踩
0

收藏

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

grid<!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>直角坐标.
复制链接

扫一扫