G2Plot Line 线性 x 轴头尾两头不留空白(或指定留白范围)

简介: G2Plot Line 线性 x 轴头尾两头不留空白(或指定留白范围)

G2Plot 的功能是可以的,但是文档是稀烂,压根就没写清楚什么属性支持什么地方,对应的属性也不写清楚可使用什么子属性,稀烂!

  • 留白配置主要是 range 属性,这个属性支持很多地方,但是没写清楚哪些地方可以用
// x轴配置
xAxis: {
  // 轴头尾留空白,0 - 1 取值,0 是最左边,1 是最右边
  range: [0, 1]
}
  • 下面是案例代码
<template>
  <!-- 图表 -->
  <div id="Line1"></div>
</template>
<script>
// 导入
import { Line } from '@antv/g2plot'
export default {
  mounted () {
    // 数据源
    const dataSource = [
      {
        title: '1998年5月',
        team: '三水集团',
        time: '1998',
        num: 500
      },
      {
        title: '1999年5月',
        team: '三水集团',
        time: '1999',
        num: 400
      },
      {
        title: '2021年5月',
        team: '三水集团',
        time: '2021',
        num: 1000
      },
      {
        title: '1998年6月',
        team: '笑笑集团啊',
        time: '1998',
        num: 1000
      },
      {
        title: '1999年6月',
        team: '笑笑集团啊',
        time: '1999',
        num: 100
      },
      {
        title: '2021年6月',
        team: '笑笑集团啊',
        time: '2021',
        num: 500
      }
    ]
    // 创建
    const chart = new Line('Line1', {
      // 数据源
      data: dataSource,
      // x轴对应key,横向线
      xField: 'time',
      // y轴对应key,竖向线
      yField: 'num',
      // 分组对应 key,多组数据
      seriesField: 'team',
      // 线条是否为弧度
      smooth: true,
      // x轴配置
      xAxis: {
        // 轴头尾留空白
        range: [0, 1]
      },
      // 提示
      tooltip: {
        // 标题,设置的值,如果为字段key,则会从数据源中取值显示,如果数据源没有该key,则直接显示
        title: 'title',
        // 允许鼠标滑入提示框
        // enterable: true,
        // 自定义
        containerTpl: `
          <div class="g2-tooltip">
            <div class="g2-tooltip-title"></div>
            <ul class="g2-tooltip-list"></ul>
            <li class="g2-tooltip-list-item">
              <span class="g2-tooltip-marker"></span>
              <span class="g2-tooltip-name">总计</span>:
              <span class="g2-tooltip-value">100000</span>
            </li>
          </div>
        `,
        // 自定义 item 模板
        itemTpl: `
          <li class="g2-tooltip-list-item">
            <span class="g2-tooltip-marker" style="background-color: {color};"></span>
            <span class="g2-tooltip-name">{name}</span>:
            <span class="g2-tooltip-value">{value}</span>
          </li>
        `,
        // 是否显示 hover 辅助线
        showCrosshairs: true,
        // 辅助线配置
        crosshairs: {
          // x 表示 x 轴上的辅助线,y 表示 y 轴上的辅助线,xy 表示两条辅助线
          type: 'x',
          // 辅助线是否跟随鼠标移动
          follow: false,
          // 辅助线配置
          line: {
            // 样式配置
            style: {
              // 线宽
              lineWidth: 0.5
            }
          }
        }
      },
      // 图例列表
      legend: {
        // y轴偏移
        offsetY: 15,
        // 摆放位置
        position: 'bottom',
        // 图例高度
        itemHeight: 28,
        // 配置图例
        marker: {
          // 图例样式
          style: (style) => {
            // 重组样式
            return {
              // 半径
              r: 6,
              // 样式类型
              symbol: 'square',
              // 填充
              fill: style.fill || style.stroke,
              // 边框线宽
              lineWidth: 1,
              // 边框填充颜色
              stroke: style.fill || style.stroke,
              // 边框透明度
              strokeOpacity: 1,
              // 线圆角
              lineCap: 'round',
              lineJoin: 'round'
            }
          }
        }
      },
      // 主题配置
      theme: {
        // 分类个数小于 10 时使用
        colors10: ['#A685FF', '#FBD86D']
        // 分类个数大于 10 时使用
        // colors20: ['#A685FF', '#FBD86D']
      },
      // 动画配置
      // https://g2plot.antv.vision/zh/docs/api/options/animation
      animation: {
        // 配置图表第一次加载时的入场动画
        appear: {
          // 动画效果
          animation: 'wave-in',
          // 动画执行时间
          duration: 2000
        }
      }
    })
    // 绘制
    chart.render()
    // 更新配置
    // chart.update({ xField: 'num' })
    // 更新数据
    // chart.changeData(dataSource)
    // 销毁
    // chart.destroy()
  }
}
</script>
<style>
</style>
相关文章
|
存储 应用服务中间件 nginx
使用filebeat简单收集多个nginx应用服务器日志(一)
使用filebeat简单收集日志 1.filebeat原理与介绍 filebeat收集日志的原理类似于tail -f命令,等待应用日志产生后,每隔30s将日志进行收集,收集完成后存放在es的索引库中,最后展示在kibana上
1885 0
使用filebeat简单收集多个nginx应用服务器日志(一)
|
9月前
|
消息中间件 机器学习/深度学习 人工智能
AI赋能运维:实现运维任务的智能化自动分配
AI赋能运维:实现运维任务的智能化自动分配
762 24
|
11月前
|
人工智能 自然语言处理 数据可视化
30 秒!用通义灵码画 SpaceX 星链发射流程图
通义灵码支持代码逻辑可视化,可以把你的每段代码画成流程图。你可以把它当成一个超级脑图工具,帮你快速画出代码逻辑和框架!
|
12月前
|
前端开发 JavaScript API
深度剖析:前端如何驾驭海量数据,实现流畅渲染的多种途径
深度剖析:前端如何驾驭海量数据,实现流畅渲染的多种途径
585 4
|
安全 网络协议 网络安全
IPSec的特征与功能
【9月更文挑战第4天】IP Sec提供的安全服务包括访问控制、完整性、数据来源认证等。
|
SQL 开发框架 关系型数据库
基于SqlSugar的数据库访问处理的封装,支持多数据库并使之适应于实际业务开发中
基于SqlSugar的数据库访问处理的封装,支持多数据库并使之适应于实际业务开发中
|
移动开发 安全 前端开发
技术笔记:robocopy复制文件(转载)
技术笔记:robocopy复制文件(转载)
595 0
echart时间轴设置详解
时间轴设置详解
1057 0
|
缓存 Java Maven
云效产品使用报错问题之使用mvn deploy:deploy 命令上传构建产物,发现报错。如何解决
本合集将整理呈现用户在使用过程中遇到的报错及其对应的解决办法,包括但不限于账户权限设置错误、项目配置不正确、代码提交冲突、构建任务执行失败、测试环境异常、需求流转阻塞等问题。阿里云云效是一站式企业级研发协同和DevOps平台,为企业提供从需求规划、开发、测试、发布到运维、运营的全流程端到端服务和工具支撑,致力于提升企业的研发效能和创新能力。
|
JavaScript 前端开发
vue.use是干什么的
vue.use是干什么的
259 0