G2自定义Tooltip

<div id="interfaceChart" class="interface-chart-main"></div>

import G2 from '@antv/g2'
import DataSet from '@antv/data-set'let chart = new G2.Chart({container: 'interfaceChart',forceFit: true,height: 300
})let data = [{methodName: 'getUserInfo',callCount: 38,failRate: 0,overTimeCount: 0}, {methodName: 'getSystemInfo',callCount: 52,failRate: 0,overTimeCount: 0}, {methodName: 'getTime',callCount: 61,failRate: 0,overTimeCount: 0}]const dataSet = new DataSet()const dv = dataSet.createView().source(data)dv.transform({type: 'fold',fields: ['callCount'], // 展开字段集key: 'key', // key字段value: 'value' // value字段})chart.source(dv, {methodName: {type: 'cat'}})chart.tooltip({crosshairs: 'y',htmlContent: function htmlContent(title, items) {let selfItem = items[0]let html = '<div class="g2-tooltip">'let titleDom = `<div class="g2-tooltip-title" style="margin-bottom: 4px;">${title}</div>`let sumDom = `<div>调用量：${selfItem.value}</div><div>失败率：${selfItem.failRate}%</div><div>超时次数：${selfItem.overTimeCount}</div>`return html + titleDom + sumDom + '</div>'}
})chart.scale('value', {alias: '调用量'
})
chart.axis('value', {label: {offset: [-10, 10]},title: {textStyle: {fontSize: 12, // 文本大小}},
})chart.interval().tooltip('methodName*value*failRate*overTimeCount', (methodName, value, failRate, overTimeCount) => {return {methodName,value,failRate,overTimeCount}
}).position('methodName*value').size(20)chart.render()

G2自定义Tooltip相关推荐

.NET WinForm中给DataGridView自定义ToolTip并设置ToolTip的样式
.NET WinForm中的DataGridView为程序开发提供了诸多的便利,我们不需要做许多额外的工作就可以获得一些基础功能,例如点击列标题排序.行选择功能.改变列宽和行宽,以及单元格内容的自动T ...
echarts地图自定义tooltip样式
效果图: 自定义tooltip样式 tooltip: {position: ['50%', '50%'],trigger: 'item',backgroundColor: 'rgba(0,0,0,0) ...
echarts 自适应屏幕主题颜色自动缩放选框多图展示自定义toolTip
图自适应屏幕 /*** 自适应*/ window.addEventListener("resize",function () {myChart.resize(option) }) ...
html5用css做样式边框,纯CSS3实现自定义Tooltip边框涂鸦风格
本文作者html5tricks,转载请注明出处这是一款用纯CSS3打造的自定义Tooltip边框的应用,之前我们讨论过如何用CSS3来实现不同样式的Tooltip,今天的这款Tooltip却可以用C ...
echarts自定义tooltip
var option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow',label: {show: true}},formatter: ...
echarts 自定义tooltip显示图例颜色
技术框架:react echarts默认的tooltip是自带图例颜色的,如下图: 可是很多时候,功能需求会要求提示框带单位或者调整样式.这个时候我们就需要用tooltip的formatter来自定义 ...
G2Plot自定义tooltip的title
需求: 期望移入显示的tooltip可以自定义title和g2-tooltip-list-item 官网链接:https://g2plot.antv.vision/zh/examples/bar/ba ...
vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
要实现的功能比如:我们要实现白云地图24镇街的常住人口统计展示,然后需要我们实现 1s 自动轮播一次地区,自定义标签样式,自定义悬浮样式. 准备工作 1.安装依赖 npm i echarts -s ...
给ButtonBar组件设置自定义TOOLTIP。
toolTipField 属性. 示例: 代码: <?xml version="1.0" encoding="utf-8"?><!--http ...

G2自定义Tooltip

G2自定义Tooltip相关推荐

最新文章

热门文章