Echart圖表 之 tooltip提示框組件配置項大全

Echart圖表 之 tooltip提示框組件配置項大全 : http://ww.qdxiaochuan.com/?id=572

axisPointer:坐標軸指示器配置項

label:坐標軸指示器的文本標簽

lineStyle:axisPointer.type為line時有效

shadowStyle:axisPointer.type為shadow時有效

crossStyle:axisPointer.type為cross時有效。

textStyle:提示框浮層的文本樣式

其中也會含有很多屬性,具體使用請參考一下內(nèi)容

tooltip: {
    show: true,  //是否顯示提示框組件
    trigger: 'item',  //觸發(fā)類型,屬性值:item數(shù)據(jù)項觸發(fā)/axis坐標軸觸發(fā)/none不觸發(fā)
    axisPointer: {
        type: 'line',  //指示器類型,屬性值:line直線/shadow陰影/none/cross十字準星
        axis: 'auto',  //指示器坐標軸,屬性值:x/y/radius/angle
        snap: true,  //坐標軸指示器是否自動吸附到點上。默認自動判斷,布爾值
        z: 0,  //坐標軸指示器z值,控制圖形的前后順序,屬性值:number
        label: {
            show: false,  //是否顯示文本標簽
            precision: 'auto',  //文本標簽中數(shù)值小數(shù)點精度。默認根據(jù)當(dāng)前軸的值自動判斷
            formatter: {},  //文本標簽文字格式化器
            margin: 3,  //label距離軸的距離
            color: '#fff',  /顏色,文章鏈接如下  Echart圖表之顏色color配置項大全/
            fontStyle: '',  
            fontWeight: '',  
            fontFamily: '',  
            fontSize: 12,  
            lineHeigh: 20,  
            width: 20,  
            height: 100,  
            textBorderColor: '',  //文字本身描邊顏色
            textBorderWidth: ,  //文字本身描邊寬度
            textBorderType: 'solid',  //文字本身描邊類型,屬性值:solid/dashed/dotted/number/array
            textBorderDashOffset: 0,  //虛線偏移量,搭配textBorderType指定dashed/array實現(xiàn)虛線效果
            textShadowColor: 'transparent',  //文字本身陰影顏色
            textShadowBlur: 0,  //文字本身的陰影長度
            textShadowOffsetX: 0,  //文字本身的陰影 X 偏移
            textShadowOffsetY: 0,  //文字本身的陰影 Y 偏移
            overflow: 'none',  //文字超出寬度是否截斷或換行,配置width時有效,truncate/break/breakAll
            ellipsis: '',  //在overflow配置為'truncate'的時候,可以通過該屬性配置末尾顯示的文本
            padding: 0,  
            backgroundColor: 'auto',  //背景顏色,默認是和axis.axisLine.lineStyle.color 相同
            borderColor: '',  //文本標簽的邊框顏色
            borderWidth: 0,  //文本標簽的邊框?qū)挾?            shadowBlur: 3,  //圖形陰影模糊大小,配合shadowColor,shadowOffsetX,shadowOffsetY設(shè)置陰影效果
            shadowColor: #aaa,  //陰影顏色,支持的格式同color
            shadowOffsetX: 0,  //陰影水平方向上的偏移距離
            shadowOffsetY: 0  //陰影垂直方向上的偏移距離
        },
        lineStyle: {
            color: #555,  /顏色,文章鏈接如下  Echart圖表之顏色color配置項大全/
            width: 1,  //線寬
            type: solid,  //線的類型,屬性值:solid/dashed/dotted/number/array
            dashOffset: 0,  //虛線偏移量,搭配type指定dashed/array實現(xiàn)虛線效果
            cap: 'butt',  //線段末端的繪制,butt方形/round圓形/square也是方形效果與butt不同
            join: 'bevel',  //設(shè)置2個長度不為0的相連部分(線段,圓弧,曲線)如何連接在一起的屬性,bevel默認/round/miter
            miterLimit: 10,  //設(shè)置斜接面限制比例,只有當(dāng)join為miter才有效,屬性值:10默認值/number
            shadowBlur: 10,  //陰影模糊大小,該屬性配合shadowColor/shadowOffsetX/shadowOffsetY一起設(shè)置圖形的陰影效果
            shadowColor: '',  //陰影顏色,支持的格式同color
            shadowOffsetX: 0,  //陰影水平方向上的偏移距離
            shadowOffsetY: 0,  //陰影垂直方向上的偏移距離
            opacity: 1  //圖形透明度。支持從 0 到 1 的數(shù)字,為 0 時不繪制該圖形
        },  
        shadowStyle: {
            color: '#fff',  /顏色,文章鏈接如下  Echart圖表之顏色color配置項大全/
            shadowBlur: 10,  
            shadowColor: '',  
            shadowOffsetX: 0,  
            shadowOffsetY: 0,  
            opacity: 1
        },  
        crossStyle: {
            color: '#fff',  /顏色,文章鏈接如下  Echart圖表之顏色color配置項大全/
            shadowBlur: 10,  
            shadowColor: '',  
            shadowOffsetX: 0,  
            shadowOffsetY: 0,  
            opacity: 1
        },  
        animation: line,  //是否開啟動畫
        animationThreshold: 2000,  //是否開啟動畫的閾值
        animationDuration: 1000,  //初始動畫的時長,支持回調(diào)函數(shù)
        animationEasing: 'cubicOut',  //初始動畫的緩動效果
        animationDelay: 0,  //初始動畫的延遲,支持回調(diào)函數(shù)
        animationDurationUpdate: 200,  //數(shù)據(jù)更新動畫的時長,支持回調(diào)函數(shù)
        animationEasingUpdate: exponentialOut,  //數(shù)據(jù)更新動畫的緩動效果
    },
    showContent: true,  //是否顯示提示框浮層,默認顯示
    alwaysShowContent: false,  //是否永遠顯示提示框內(nèi)容
    triggerOn: 'mousemove|click',  //提示框觸發(fā)條件,mousemove/click/mousemove|click/none。none時可通過action.tooltip.showTip和action.tooltip.hideTip來手動觸發(fā)和隱藏。也可通過axisPointer.handle來觸發(fā)或隱藏
    showDelay: 0,  //浮層顯示的延遲,默認0ms
    hideDelay: 100,  //浮層隱藏的延遲
    enterable: false,  //鼠標是否可進入提示框浮層中,默認為false
    renderMode: 'html',  //浮層的渲染模式,html默認/richText富文本形式
    confine: false,  //是否將 tooltip 框限制在圖表的區(qū)域內(nèi)
    appendToBody: false,  //是否將組件DOM節(jié)點添加為HTML的<body>子節(jié)點。只有當(dāng)renderMode為html有意義
    className: 'echarts-tooltip echarts-tooltip-dark',  //指定tooltip的DOM節(jié)點CSS類,只在html模式下生效
    transitionDuration: 0.4,  //提示框浮層的移動動畫過渡時間,單位是s
    position: [],  //提示框浮層的位置
    formatter: ()=>{},  /提示框浮層內(nèi)容格式器,用這個可以修改提示框默認內(nèi)容/
    valueFormatter: (value: number | string) => string,  //數(shù)值顯示部分的格式化回調(diào)函數(shù)
    backgroundColor: '',  //背景顏色,格式同color
    borderColor: '',  //提示框浮層邊框顏色,格式同color
    borderWidth: 0,  //提示框浮層的邊框?qū)?    padding: 5,  
    textStyle: {
        color: '#fff',  /顏色,文章鏈接如下  Echart圖表之顏色color配置項大全/
        fontStyle: '',
        fontWeight: '',
        fontFamily: '',
        fontSize: 14,
        lineHeight : 20,
        width: 220,
        height: 20,
        textBorderColor: '',  //文字本身的描邊顏色
        textBorderWidth: '',  //文字本身的描邊寬度
        textBorderType: 'solid',  //文字本身描邊類型,屬性值:solid/dashed/dotted/number/array
        textBorderDashOffset: 0,  //虛線偏移量,可搭配textBorderType指定dashed/array實現(xiàn)靈活的虛線效果
        textShadowColor: 'transparent',  //文字本身陰影顏色
        textShadowBlur: 0,  //文字本身陰影長度
        textShadowOffsetX: 0,  //文字本身陰影 X 偏移
        textShadowOffsetY: 0,  //文字本身陰影 Y 偏移
        overflow: 'none',  //文字超出寬度是否截斷或者換行,配置width時有效,屬性值:truncate/break/breakAll
        ellipsis: '',  //在overflow配置為'truncate'的時,該屬性配置末尾顯示文本
        rich: {},  //自定義富文本樣式
    },  
    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',  //額外附加到浮層的 css 樣式
    order: 'seriesAsc'  //多系列提示框浮層排列順序,seriesAsc默認/seriesDesc/valueAsc/valueDesc
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容