資訊專欄INFORMATION COLUMN
摘要：線自定義鼠標懸停顯示數(shù)據(jù)詳情觸發(fā)顯示有兩個點擊線塊的時候觸發(fā)，和鼠標懸停的時候觸發(fā)，用在移動端會更方便。不同的觸發(fā)條件，在中傳遞的參數(shù)是不一樣的。開盤收盤最低最高以觸發(fā)時中的接收的參數(shù)中的值是序號開盤收盤最低最高數(shù)組開盤收盤最低最高
echart K線 自定義 tooltip 鼠標懸停顯示數(shù)據(jù)詳情
觸發(fā) tooltip 顯示有兩個 item： 點擊k線塊的時候觸發(fā)，和 axis：鼠標懸停的時候觸發(fā)，用 axis 在移動端會更方便。
不同的觸發(fā)條件，在 formatter 中傳遞的參數(shù)是不一樣的。如下：
以 axis 觸發(fā)時tooltip 中的 params 數(shù)據(jù)結(jié)構(gòu)如下：
根據(jù)這個來寫 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 觸發(fā)時
tooltip 中的 formatter 接收的參數(shù) params 中的 value值是 [序號, 開盤, 收盤, 最低, 最高] 數(shù)組
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
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105454.html
摘要：新公司已經(jīng)呆了一個多月，目前著手一個數(shù)據(jù)可視化的項目，數(shù)據(jù)可視化肯定要用到圖形庫如等，經(jīng)決定我的這個項目用阿里旗下螞蟻金服所開發(fā)的圖表庫。數(shù)據(jù)提示框內(nèi)提示的信息還可以通過格式化函數(shù)動態(tài)指定。 新公司已經(jīng)呆了一個多月，目前著手一個數(shù)據(jù)可視化的項目，數(shù)據(jù)可視化肯定要用到圖形庫如D3、Highcharts、ECharts、Chart等，經(jīng)決定我的這個項目用阿里旗下螞蟻金服所開發(fā)的G2圖表庫。...
摘要：最終自定義事件封裝在上面的鏈接中看到，不僅應(yīng)用層頁面的按鈕可以切換地圖維度，直接點擊地圖里的中國區(qū)域也能切換地圖，同時又能通知到應(yīng)用層頁面的按鈕改變狀態(tài)。 前言 很早以前寫過一篇用RequireJS包裝AjaxChart，當時用Highcharts做圖表，在其上封裝了一層ajax，最后只是簡單套用了一下requireJS。由于當時自己才接觸模塊化，理解層面還太淺，后來經(jīng)過其他項目的磨練...
摘要：最近的項目中用到了的雙軸和雙軸的設(shè)置，特此記錄一下鼠標懸停提示內(nèi)容坐標軸指示器，坐標軸觸發(fā)有效十字線顯示標準保費增長軸軸顯示兩組數(shù)據(jù)第個軸兩個軸左邊軸金額元右邊軸增長用于指定圖標顯示類型第一個柱狀圖的數(shù)據(jù)標準保費第一個柱狀圖的數(shù)據(jù)第二個柱狀 最近的項目中用到了echarts的雙x軸和雙y軸的設(shè)置，特此記錄一下； option = { tooltip: { //鼠標懸停提示內(nèi)容 ...
閱讀 1307·2021-10-11 10:57
閱讀 2072·2021-09-02 15:15
閱讀 1633·2019-08-30 15:56
閱讀 1230·2019-08-30 15:55
閱讀 1179·2019-08-30 15:44
閱讀 1006·2019-08-29 12:20
閱讀 1355·2019-08-29 11:12
閱讀 1093·2019-08-28 18:29
