G2Plot Tooltip 自定义头部、尾部、辅助线

简介: G2Plot Tooltip 自定义头部、尾部、辅助线

<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 line = new Line('Line1', {
      // 数据源
      data: dataSource,
      // x轴对应key,横向线
      xField: 'time',
      // y轴对应key,竖向线
      yField: 'num',
      // 分组对应 key,多组数据
      seriesField: 'team',
      // 线条是否为弧度
      smooth: true,
      // x轴配置
      xAxis: {},
      // 提示
      tooltip: {
        // 标题,设置的值,如果为字段key,则会从数据源中取值显示,如果数据源没有该key,则直接显示
        title: 'title',
        // 自定义,class 必须跟官方的样式一致
        containerTpl: `
          <div class="g2-tooltip">
            <!-- 标题容器,会自己填充 -->
            <div class="g2-tooltip-title"></div>
            <!-- 自定义头部,可以随便写 -->
            <div class="g2-tooltip-title">自定义头部</div>
            <!-- 列表容器,会自己填充 -->
            <ul class="g2-tooltip-list"></ul>
            <!-- 自定义尾部,可以随便写,这里是复用列表容器中的一行 item -->
            <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 模板,class 必须跟官方的样式一致
        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>
        `,
        // 完全自定义提示框
        // customContent: (title, items) => {
        //   return `<div>${title}</div>`
        // },
        // 允许鼠标滑入,这个开启是为了方便获取 tooltip 的 class,无需要可以关闭。
        enterable: true,
        // 是否显示 hover 辅助线
        showCrosshairs: true,
        // 辅助线配置
        crosshairs: {
          // x 表示 x 轴上的辅助线,y 表示 y 轴上的辅助线,xy 表示两条辅助线
          type: 'x',
          // 辅助线是否跟随鼠标移动
          follow: false,
          // 辅助线配置
          line: {
            // 样式配置
            style: {
              // 线宽
              lineWidth: 10
            }
          }
        }
      },
      // 图例列表
      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
        }
      }
    })
    // 绘制
    line.render()
    // 更新配置
    // line.update({ xField: 'num' })
    // 更新数据
    // line.changeData(dataSource)
    // 销毁
    // line.destroy()
  }
}
</script>
相关文章
|
编译器 开发工具 git
【Git异常】You are in ‘detached HEAD‘ state, which means that you‘re not on any branch Checkout a branch
【Git异常】You are in ‘detached HEAD‘ state, which means that you‘re not on any branch Checkout a branch
654 0
webpack 打包去掉控制台的console.log()
webpack 打包去掉控制台的console.log()
1047 0
webpack 打包去掉控制台的console.log()
|
3月前
|
Ubuntu 安全 Docker
Ubuntu Server上安装配置Docker的详细步骤
如果一切设置正确,这将下载一个测试镜像,并在容器中运行它,打印一条问候消息。
398 76
|
6月前
|
JavaScript 前端开发 物联网
ArkTs的@Watch状态监听
@Watch是ArkUI框架中用于监听状态变量变化的核心工具,类似Vue的Watch机制。状态更新时,方法触发,通过`changedPropertyName`区分多个绑定变量。需与@State、@Prop、@Link等装饰器配合使用,顺序上须置于这些装饰器之后。实际开发中,@Watch常与@Link(跨组件双向同步)或@Provide(跨代组件同步)结合使用。例如,通过@Link接收父组件变量并监听变化,动态调整子组件状态;或利用@Provide定义全局变量,监听后更新整体进度状态。这种机制提升了组件间状态管理的灵活性与解耦性,助力开发者高效构建复杂应用,实现“一次开发,多端部署”的目标。
287 15
|
移动开发 资源调度 JavaScript
Vue2使用触摸滑动插件(Swiper)
这篇文章介绍了在Vue 3框架中如何使用Swiper插件来创建不同类型的触摸滑动组件,包括轮播图、淡入淡出效果和走马灯效果,并提供了详细的配置选项和使用示例。
964 1
Vue2使用触摸滑动插件(Swiper)
|
XML JavaScript 前端开发
Vue和React有什么区别
【8月更文挑战第28天】Vue和React有什么区别
1058 0
|
SQL 关系型数据库 MySQL
MySQL 8.0报错--1118-Row size too large. The maximum row size for the used table type, not counting BLOBs,is 8126,
MySQL 8.0报错--1118-Row size too large. The maximum row size for the used table type, not counting BLOBs,is 8126,
MySQL 8.0报错--1118-Row size too large. The maximum row size for the used table type, not counting BLOBs,is 8126,
|
12月前
|
JavaScript
vue3,使用watch监听props中的数据
【10月更文挑战第3天】
3605 2
Element table组件封装 核心:父子组件传值、传方法
本文介绍了如何基于Element UI的table组件进行二次封装,创建一个具有父子组件传值和传方法功能的自定义表格组件,并提供了封装后的组件如何引入、注册和使用的方法。
315 0
Element table组件封装 核心:父子组件传值、传方法
|
C# 索引
C# 一分钟浅谈:接口与抽象类的区别及使用
【9月更文挑战第2天】本文详细对比了面向对象编程中接口与抽象类的概念及区别。接口定义了行为规范,强制实现类提供具体实现;抽象类则既能定义抽象方法也能提供具体实现。文章通过具体示例介绍了如何使用接口和抽象类,并探讨了其实现方式、继承限制及实例化差异。最后总结了选择接口或抽象类应基于具体设计需求。掌握这两者有助于编写高质量的面向对象程序。
585 5