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:提示框浮層的文本樣式

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

tooltip: {
    show: true,  //是否顯示提示框組件
    trigger: 'item',  //觸發類型,屬性值:item數據項觸發/axis座標軸觸發/none不觸發
    axisPointer: {
        type: 'line',  //指示器類型,屬性值:line直線/shadow陰影/none/cross十字準星
        axis: 'auto',  //指示器座標軸,屬性值:x/y/radius/angle
        snap: true,  //座標軸指示器是否自動吸附到點上。默認自動判斷,布爾值
        z: 0,  //座標軸指示器z值,控制圖形的前後順序,屬性值:number
        label: {
            show: false,  //是否顯示文本標籤
            precision: 'auto',  //文本標籤中數值小數點精度。默認根據當前軸的值自動判斷
            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實現虛線效果
            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,  //文本標籤的邊框寬度
            shadowBlur: 3,  //圖形陰影模糊大小,配合shadowColor,shadowOffsetX,shadowOffsetY設置陰影效果
            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實現虛線效果
            cap: 'butt',  //線段末端的繪製,butt方形/round圓形/square也是方形效果與butt不同
            join: 'bevel',  //設置2個長度不爲0的相連部分(線段,圓弧,曲線)如何連接在一起的屬性,bevel默認/round/miter
            miterLimit: 10,  //設置斜接面限制比例,只有當join爲miter纔有效,屬性值:10默認值/number
            shadowBlur: 10,  //陰影模糊大小,該屬性配合shadowColor/shadowOffsetX/shadowOffsetY一起設置圖形的陰影效果
            shadowColor: '',  //陰影顏色,支持的格式同color
            shadowOffsetX: 0,  //陰影水平方向上的偏移距離
            shadowOffsetY: 0,  //陰影垂直方向上的偏移距離
            opacity: 1  //圖形透明度。支持從 0 到 1 的數字,爲 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,  //初始動畫的時長,支持回調函數
        animationEasing: 'cubicOut',  //初始動畫的緩動效果
        animationDelay: 0,  //初始動畫的延遲,支持回調函數
        animationDurationUpdate: 200,  //數據更新動畫的時長,支持回調函數
        animationEasingUpdate: exponentialOut,  //數據更新動畫的緩動效果
    },
    showContent: true,  //是否顯示提示框浮層,默認顯示
    alwaysShowContent: false,  //是否永遠顯示提示框內容
    triggerOn: 'mousemove|click',  //提示框觸發條件,mousemove/click/mousemove|click/none。none時可通過action.tooltip.showTip和action.tooltip.hideTip來手動觸發和隱藏。也可通過axisPointer.handle來觸發或隱藏
    showDelay: 0,  //浮層顯示的延遲,默認0ms
    hideDelay: 100,  //浮層隱藏的延遲
    enterable: false,  //鼠標是否可進入提示框浮層中,默認爲false
    renderMode: 'html',  //浮層的渲染模式,html默認/richText富文本形式
    confine: false,  //是否將 tooltip 框限制在圖表的區域內
    appendToBody: false,  //是否將組件DOM節點添加爲HTML的<body>子節點。只有當renderMode爲html有意義
    className: 'echarts-tooltip echarts-tooltip-dark',  //指定tooltip的DOM節點CSS類,只在html模式下生效
    transitionDuration: 0.4,  //提示框浮層的移動動畫過渡時間,單位是s
    position: [],  //提示框浮層的位置
    formatter: ()=>{},  /提示框浮層內容格式器,用這個可以修改提示框默認內容/
    valueFormatter: (value: number | string) => string,  //數值顯示部分的格式化回調函數
    backgroundColor: '',  //背景顏色,格式同color
    borderColor: '',  //提示框浮層邊框顏色,格式同color
    borderWidth: 0,  //提示框浮層的邊框寬
    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實現靈活的虛線效果
        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
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章