摘要：线自定义鼠标悬停显示数据详情触发显示有两个点击线块的时候触发，和鼠标悬停的时候触发，用在移动端会更方便。不同的触发条件，在中传递的参数是不一样的。开盘收盘最低最高以触发时中的接收的参数中的值是序号开盘收盘最低最高数组开盘收盘最低最高
echart K线 自定义 tooltip 鼠标悬停显示数据详情
触发 tooltip 显示有两个 item： 点击k线块的时候触发，和 axis：鼠标悬停的时候触发，用 axis 在移动端会更方便。
不同的触发条件，在 formatter 中传递的参数是不一样的。如下：
以 axis 触发时tooltip 中的 params 数据结构如下：
根据这个来写 tooltip 就好了。
tooltip: {
axisPointer: {
type: "cross"
},
trigger: "axis",
formatter: function (params) {
params = params[0];
let currentItemData = params.data;
return params.name + "
" +
"开盘:" + currentItemData[1] + "
" +
"收盘:" + currentItemData[2] + "
" +
"最低:" + currentItemData[3] + "
" +
"最高:" + currentItemData[4]
}
}
以 item 触发时
tooltip 中的 formatter 接收的参数 params 中的 value值是 [序号, 开盘, 收盘, 最低, 最高] 数组
tooltip: {
axisPointer: {
type: "cross"
},
trigger: "item",
formatter: function (params) {
return params.name + "
" +
"开盘:" + params.value[1] + "
" +
"收盘:" + params.value[2] + "
" +
"最低:" + params.value[3] + "
" +
"最高:" + params.value[4]
},
borderWidth: 1
}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/105454.html
摘要：新公司已经呆了一个多月，目前着手一个数据可视化的项目，数据可视化肯定要用到图形库如等，经决定我的这个项目用阿里旗下蚂蚁金服所开发的图表库。数据提示框内提示的信息还可以通过格式化函数动态指定。 新公司已经呆了一个多月，目前着手一个数据可视化的项目，数据可视化肯定要用到图形库如D3、Highcharts、ECharts、Chart等，经决定我的这个项目用阿里旗下蚂蚁金服所开发的G2图表库。...
摘要：最终自定义事件封装在上面的链接中看到，不仅应用层页面的按钮可以切换地图维度，直接点击地图里的中国区域也能切换地图，同时又能通知到应用层页面的按钮改变状态。 前言 很早以前写过一篇用RequireJS包装AjaxChart，当时用Highcharts做图表，在其上封装了一层ajax，最后只是简单套用了一下requireJS。由于当时自己才接触模块化，理解层面还太浅，后来经过其他项目的磨练...
摘要：最近的项目中用到了的双轴和双轴的设置，特此记录一下鼠标悬停提示内容坐标轴指示器，坐标轴触发有效十字线显示标准保费增长轴轴显示两组数据第个轴两个轴左边轴金额元右边轴增长用于指定图标显示类型第一个柱状图的数据标准保费第一个柱状图的数据第二个柱状 最近的项目中用到了echarts的双x轴和双y轴的设置，特此记录一下； option = { tooltip: { //鼠标悬停提示内容 ...
阅读 1088·2021-10-11 10:57
阅读 1898·2021-09-02 15:15
阅读 1408·2019-08-30 15:56
阅读 1008·2019-08-30 15:55
阅读 1042·2019-08-30 15:44
阅读 883·2019-08-29 12:20
阅读 1177·2019-08-29 11:12
阅读 963·2019-08-28 18:29
