echarts配置項說明


1、title

title: {
    // 用於在 option 或者 API 中引用組件
    id: "myTitle",
    // 是否顯示標題組件、[ default: true ]
    show: true,
    // 主標題文本、[ default: '' ]
    text: "圖的標題",
    // 主標題文本超鏈接、[ default: '' ]
    link: "http://www.baidu.com/",
    // 指定窗口打開主標題超鏈接 、[ default: 'blank' ]、('self','blank')
    target: 'blank',
    // 標題樣式
    textStyle: {
        // 主標題文字的顏色、[ default: '#333' ]
        color: "#666",
        // 主標題字體的樣式、[ default: 'normal' ]、('normal'、'italic'、'oblique')
        fontStyle: "normal",
        // 主標題文字的字體粗細、[ default: normal ]、('normal'、'bold'、'bolder'、'lighter'、100 | 200 | 300 | 400...)
        fontWeight: "normal",
        // 主標題文字的字體家族、[ default: 'sans-serif' ]、('serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...)
        fontFamily: "Microsoft YaHei",
        // 主標題文字的字體大小、[ default: 18 ]
        fontSize: "14",
        // 主標題文字的行高
        // lineHeight: "10",
        // 文字塊的寬度,不指定則自動是文字的寬度。
        width: "",
        // 文字塊的高度,不指定則自動是文字的高度。
        height: "",
        // 文字本身的描邊顏色、[ default: 'transparent' ]
        textBorderColor: "red",
        // 文字本身的描邊寬度、[ default: 0 ]
        textBorderWidth: "",
        // 文字本身的陰影顏色、[ default: 'transparent' ]
        textShadowColor: "",
        // 文字本身的陰影長度、[ default: 0 ]
        textShadowBlur: "",
        // 文字本身的陰影 X 偏移、[ default: 0 ]
        textShadowOffsetX: "",
        // 文字本身的陰影 Y 偏移、[ default: 0 ]
        textShadowOffsetY: ""
    },
    // 副標題文本,支持使用 \n 換行、[ default: '' ]
    subtext: "圖的副標題 副標題\n副標題換行",
    // 副標題文本超鏈接、[ default: '' ]
    sublink: "https://www.echartsjs.com/zh/option.html",
    // 指定窗口打開副標題超鏈接、[ default: 'blank' ]
    subtarget: "",
    // 屬性同主標題的文本樣式
    subtextStyle: {},
    // 整體(包括 text 和 subtext)的水平對齊、[ default: 'auto' ]
    textAlign: "",
    // 整體(包括 text 和 subtext)的垂直對齊、[ default: 'auto' ]
    textVerticalAlign: "",
    // 是否觸發事件、[ default: false ]
    triggerEvent: "",
    // 標題內邊距,單位px,默認各方向內邊距為5,接受數組分別設定上右下左邊距、[ default: 5 ]
    padding: "",
    // 副標題之間的間距、[ default: 10 ]
    itemGap: 10,
    // 所有圖形的 zlevel 值,zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面。
    zlevel: "",
    // 組件的所有圖形的z值,z相比zlevel優先級更低,而且不會創建新的 Canvas。
    z: "",
    // grid 組件離容器左側的距離,[ default: 'auto' ]
    left: "10",
    // grid 組件離容器上側的距離,[ default: 'auto' ]
    top: "20",
    // grid 組件離容器右側的距離
    right: "",
    // grid 組件離容器下側的距離
    bottom: "",
    // 標題背景色,默認透明、[ default: 'transparent' ]
    backgroundColor: "#fff",
    // 標題的邊框顏色,[ default: '#ccc' ]
    borderColor: "#f00",
    // 標題的邊框線寬,[ default: 0 ]
    borderWidth: "1",
    // 邊框圓角半徑,單位px,支持傳入數組分別指定 4 個圓角半徑
    borderRadius: 5,
    // 圖形陰影的模糊大小
    shadowBlur: 3,
    // 陰影顏色
    shadowColor: "rgba(0,0,0,.5)",
    // 陰影水平方向上的偏移距離
    shadowOffsetX: "2",
    // 陰影垂直方向上的偏移距離
    shadowOffsetY: "2"
}

2、legend

legend: {
    // 圖例的類型,['plain'、'scroll']
    // 'plain':普通圖例。缺省就是普通圖例。
    // 'scroll':可滾動翻頁的圖例。當圖例數量較多時可以使用。
    type: "plain",
    // 組件 ID,用於在 option 或者 API 中引用組件
    id: "",
    // [ default: true ]
    show: "",
    // 所有圖形的 zlevel 值,[ default: 0 ]
    zlevel: "",
    // 所有圖形的z值,[ default: 2 ]
    z: "",
    // 圖例組件離容器左側的距離,[ default: 'auto' ]
    left: "",
    top: "",
    right: "",
    bottom: "",
    // 圖例組件的寬度,[ default: 'auto' ]
    width: "",
    height: "",
    // 圖例列表的布局朝向,[ default: 'horizontal' ]
    orient: "",
    // 圖例標記和文本的對齊,根據組件的位置和 orient 決定
    align: "",
    // 圖例內邊距
    padding: "",
    // 圖例每項之間的間隔
    itemGap: "",
    // 圖例標記的圖形寬度
    itemWidth: "",
    itemHeight: "",
    // 如果圖標,是否在縮放時保持該圖形的長寬比
    symbolKeepAspect: "",
    // 格式化圖例文本,支持字符串模板和回調函數兩種形式,[ default: null ]
    formatter: "",
    // 圖例選擇的模式,是否可以通過點擊圖例改變系列的顯示狀態,[ default: true ]
    selectedMode: "",
    // 圖例關閉時的顏色
    inactiveColor: "",
    // 圖例選中狀態表
    selected: {},
    // 圖例的公用文本樣式
    textStyle: {
        color: "",
        fontStyle: "",
        fontWeight: "",
        fontFamily: "",
        fontSize: "",
        lineHeight: "",
        backgroundColor: "",
        borderColor: "",
        borderWidth: "",
        borderRadius: "",
        padding: "",
        shadowColor: "",
        shadowBlur: "",
        shadowOffsetX: "",
        shadowOffsetY: "",
        width: "",
        height: "",
        textBorderColor: "",
        textBorderWidth: "",
        textShadowColor: "",
        textShadowBlur: "",
        textShadowOffsetX: "",
        textShadowOffsetY: ""
    },
    // 圖例的 tooltip 配置,配置項同 tooltip
    tooltip: "",
    // 圖例項的 icon
    icon: "",
    // 圖例的數據數組
    data: [
        {
            name: "",
            icon: "",
            textStyle: {}
        }
    ],
    // 圖例背景色,默認透明,[ default: 'transparent' ]
    backgroundColor: "",
    borderColor: "",
    borderWidth: "",
    borderRadius: "",
    // 圖形陰影的模糊大小
    shadowBlur: "",
    shadowColor: "",
    shadowOffsetX: "",
    shadowOffsetY: "",
    // 圖例當前最左上顯示項的 dataIndex,legend.type 為 'scroll' 時有效
    scrollDataIndex: "",
    // 圖例控制塊中,按鈕和頁信息之間的間隔,legend.type 為 'scroll' 時有效
    pageButtonItemGap: "",
    // 圖例控制塊和圖例項之間的間隔,legend.type 為 'scroll' 時有效
    pageButtonGap: "",
    // 圖例控制塊的位置,legend.type 為 'scroll' 時有效
    pageButtonPosition: "",
    // 圖例控制塊中,頁信息的顯示格式,legend.type 為 'scroll' 時有效
    pageFormatter: "",
    // 圖例控制塊的圖標,legend.type 為 'scroll' 時有效
    pageIcons: {
        horizontal: "",
        vertical: ""
    },
    // 翻頁按鈕的顏色
    pageIconColor: "",
    // 翻頁按鈕不激活時(即翻頁到頭時)的顏色
    pageIconInactiveColor: "",
    // 翻頁按鈕的大小
    pageIconSize: "",
    // 圖例頁信息的文字樣式
    pageTextStyle: {
        color: "",
        fontStyle: "",
        fontWeight: "",
        fontFamily: "",
        fontSize: "",
        lineHeight: "",
        width: "",
        height: "",
        textBorderColor: "",
        textBorderWidth: "",
        textShadowColor: "",
        textShadowBlur: "",
        textShadowOffsetX: "",
        textShadowOffsetY: ""
    },
    // 圖例翻頁是否使用動畫
    animation: "",
    // 圖例翻頁時的動畫時長
    animationDurationUpdate: "",
    // 圖例組件中的選擇器按鈕,目前包括全選和反選兩種功能。默認不顯示,用戶可手動開啟,也可以手動配置每個按鈕的標題。
    selector: [],
    // 選擇器按鈕的文本標簽樣式
    selectorLabel: {
        show: "",
        distance: "",
        rotate: "",
        offset: [],
        color: "",
        fontStyle: "",
        fontWeight: "",
        fontFamily: "",
        fontSize: "",
        align: "",
        verticalAlign: "",
        lineHeight: "",
        backgroundColor: "",
        borderColor: "",
        borderWidth: "",
        borderRadius: "",
        padding: "",
        shadowColor: "",
        shadowBlur: "",
        shadowOffsetX: "",
        shadowOffsetY: "",
        width: "",
        height: "",
        textBorderColor: "",
        textBorderWidth: "",
        textShadowColor: "",
        textShadowBlur: "",
        textShadowOffsetX: "",
        textShadowOffsetY: ""
    },
    // 選擇器的位置,[ default: 'auto' ]
    selectorPosition: "",
    // 選擇器按鈕之間的間隔,[ default: 7 ]
    selectorItemGap: "",
    // 選擇器按鈕與圖例組件之間的間隔,[ default: 10 ]
    selectorButtonGap: ""
}

3、grid:

直角坐標系內繪圖網格,單個 grid 內最多可以放置上下兩個 X 軸,左右兩個 Y 軸

grid: {
    id: "",
    show: "",
    zlevel: "",
    z: "",
    left: "",
    top: "",
    right: "",
    bottom: "",
    width: "",
    height: "",
    // grid 區域是否包含坐標軸的刻度標簽,[ default: false ]
    containLabel: "",
    // 網格背景色,默認透明,[ default: 'transparent' ]
    backgroundColor: "",
    borderColor: "",
    borderWidth: "",
    // 圖形陰影的模糊大小
    shadowBlur: "",
    shadowColor: "",
    shadowOffsetX: "",
    shadowOffsetY: "",
    tooltip: {
        show: "",
        trigger: "",
        axisPointer: "",
        position: "",
        formatter: "",
        backgroundColor: "",
        borderColor: "",
        borderWidth: "",
        padding: "",
        textStyle: {
            color: "",
            fontStyle: "",
            fontWeight: "",
            fontFamily: "",
            fontSize: "",
            lineHeight: "",
            width: "",
            height: "",
            textBorderColor: "",
            textBorderWidth: "",
            textShadowColor: "",
            textShadowBlur: "",
            textShadowOffsetX: "",
            textShadowOffsetY: ""

        },
        // 額外附加到浮層的 css 樣式
        extraCssText: ""
    },
}

4、xAxis

xAxis: {
    id: "",
    show: "",
    // x 軸所在的 grid 的索引,默認位於第一個 grid, [ default: 0 ]
    gridIndex: "",
    // x 軸的位置
    position: "",
    // X 軸相對於默認位置的偏移,在相同的 position 上有多個 X 軸的時候有用
    offset: "",
    // 坐標軸類型
    type: "",
    // 坐標軸名稱
    name: "",
    // 坐標軸名稱顯示位置
    nameLocation: "",
    // 坐標軸名稱的文字樣式
    nameTextStyle: {
        color: "",
        fontStyle: "",
        fontWeight: "",
        fontFamily: "",
        fontSize: "",
        align: "",
        verticalAlign: "",
        lineHeight: "",
        backgroundColor: "",
        borderColor: "",
        borderWidth: "",
        borderRadius: "",
        padding: "",
        shadowColor: "",
        shadowBlur: "",
        shadowOffsetX: "",
        shadowOffsetY: "",
        width: "",
        height: "",
        textBorderColor: "",
        textBorderWidth: "",
        textShadowColor: "",
        textShadowBlur: "",
        textShadowOffsetX: "",
        textShadowOffsetY: ""
    },
    // 坐標軸名稱與軸線之間的距離
    nameGap: "",
    // 坐標軸名字旋轉,角度值
    nameRotate: "",
    // 是否是反向坐標軸
    inverse: "",
    // 坐標軸兩邊留白策略,類目軸和非類目軸的設置和表現不一樣
    boundaryGap: "",
    // 坐標軸刻度最小值
    min: "",
    // 坐標軸刻度最大值
    max: "",
    // 只在數值軸中(type: 'value')有效
    scale: "",
    // 坐標軸的分割段數
    splitNumber: "",
    // 自動計算的坐標軸最小間隔大小
    minInterval: "",
    // 自動計算的坐標軸最大間隔大小
    maxInterval: "",
    // 強制設置坐標軸分割間隔
    interval: "",
    // 對數軸的底數,只在對數軸中(type: 'log')有效
    logBase: "",
    // 坐標軸是否是靜態無法交互
    silent: "",
    // 坐標軸的標簽是否響應和觸發鼠標事件,默認不響應
    triggerEvent: "",
    // 坐標軸軸線相關設置
    axisLine: {
        show: "",
        // X 軸或者 Y 軸的軸線是否在另一個軸的 0 刻度上
        onZero: "",
        // 當有雙軸時,可以用這個屬性手動指定,在哪個軸的 0 刻度上
        onZeroAxisIndex: "",
        // 軸線兩邊的箭頭
        symbol: "",
        // 軸線兩邊的箭頭的大小
        symbolSize: "",
        // 軸線兩邊的箭頭的偏移
        symbolOffset: "",
        lineStyle: {
            color: "",
            width: "",
            type: "",
            shadowBlur: "",
            shadowColor: "",
            shadowOffsetX: "",
            shadowOffsetY: "",
            opacity: ""
        }
    },
    // 坐標軸刻度相關設置
    axisTick: {
        // 是否顯示坐標軸刻度
        show: "",
        // 類目軸中在 boundaryGap 為 true 的時候有效,可以保證刻度線和標簽對齊
        alignWithLabel: "",
        // 坐標軸刻度的顯示間隔
        interval: "",
        // 坐標軸刻度是否朝內,默認朝外
        inside: "",
        // 坐標軸刻度的長度
        length: "",
        lineStyle: {
            color: "",
            width: "",
            type: "",
            shadowBlur: "",
            shadowColor: "",
            shadowOffsetX: "",
            shadowOffsetY: "",
            opacity: ""
        }
    },
    // 坐標軸刻度標簽的相關設置
    axisLabel: {
        show: "",
        // 坐標軸刻度標簽的顯示間隔
        interval: "",
        // 刻度標簽是否朝內,默認朝外
        inside: "",
        // 刻度標簽旋轉的角度,在類目軸的類目標簽顯示不下的時候可以通過旋轉防止標簽之間重疊
        rotate: "",
        // 刻度標簽與軸線之間的距離
        margin: "",
        // 刻度標簽的內容格式器,支持字符串模板和回調函數兩種形式
        formatter: "",
        // 是否顯示最小 tick 的 label
        showMinLabel: "",
        // 是否顯示最大 tick 的 label
        showMaxLabel: "",
        // 刻度標簽文字的顏色
        color: "",
        fontStyle: "",
        fontWeight: "",
        fontFamily: "",
        fontSize: "",
        align: "",
        verticalAlign: "",
        lineHeight: "",
        backgroundColor: "",
        borderColor: "",
        borderWidth: "",
        borderRadius: "",
        padding: "",
        shadowColor: "",
        shadowBlur: "",
        shadowOffsetX: "",
        shadowOffsetY: "",
        width: "",
        height: "",
        textBorderColor: "",
        textBorderWidth: "",
        textShadowColor: "",
        textShadowBlur: "",
        textShadowOffsetX: "",
        textShadowOffsetY: "",
    },
    // 坐標軸在 grid 區域中的分隔線
    splitLine: {
        show: "",
        interval: "",
        lineStyle: {
            color: "",
            width: "",
            type: "",
            shadowBlur: "",
            shadowColor: "",
            shadowOffsetX: "",
            shadowOffsetY: "",
            opacity: ""
        }
    },
    // 坐標軸在 grid 區域中的分隔區域,默認不顯示
    splitArea: {
        interval: "",
        show: "",
        areaStyle: {
            color: "",
            shadowColor: "",
            shadowBlur: "",
            shadowOffsetX: "",
            shadowOffsetY: "",
            opacity: "",
        }
    },
    data: {
        value: "",
        textStyle: {
            color: "",
            fontStyle: "",
            fontWeight: "",
            fontFamily: "",
            fontSize: "",
            align: "",
            verticalAlign: "",
            lineHeight: "",
            backgroundColor: "",
            borderColor: "",
            borderWidth: "",
            borderRadius: "",
            padding: "",
            shadowColor: "",
            shadowBlur: "",
            shadowOffsetX: "",
            shadowOffsetY: "",
            width: "",
            height: "",
            textBorderColor: "",
            textBorderWidth: "",
            textShadowColor: "",
            textShadowBlur: "",
            textShadowOffsetX: "",
            textShadowOffsetY: ""
        }
    },
    axisPointer: {
        show: "",
        type: "",
        // 坐標軸指示器是否自動吸附到點上
        snap: "",
        z: "",
        label: {
            show: "",
            precision: "",
            formatter: "",
            margin: "",
            color: "",
            fontStyle: "",
            fontWeight: "",
            fontFamily: "",
            fontSize: "",
            lineHeight: "",
            width: "",
            height: "",
            textBorderColor: "",
            textBorderWidth: "",
            textShadowColor: "",
            textShadowBlur: "",
            textShadowOffsetX: "",
            textShadowOffsetY: "",
            padding: "",
            backgroundColor: "",
            borderColor: "",
            borderWidth: "",
            shadowColor: "",
            shadowBlur: "",
            shadowOffsetX: "",
            shadowOffsetY: ""
        },
        lineStyle: {

        },
        shadowStyle: {

        },
        triggerTooltip: {

        },
        value: "",
        // 當前的狀態
        status: "",
        // 拖拽手柄,適用於觸屏的環境
        handle: {
            show: "",
            // 手柄的圖標
            icon: "",
            size: "",
            margin: "",
            color: "",
            throttle: "",
            shadowBlur: "",
            shadowColor: "",
            shadowOffsetX: "",
            // 陰影垂直方向上的偏移距離
            shadowOffsetY: ""
        },
    },
    zlevel: "",
    z: ""
}

5、 tooltip

tooltip: {
    // 是否顯示
    show: "",
    // 觸發類型、[ default: 'item' ]、['item','axis','none']
    trigger: "",
    // 坐標軸指示器配置項,是指示坐標軸當前刻度的工具
    axisPointer: {
        // 指示器類型、[ default: 'line' ]、['line'、'shadow'、'none'、'cross']
        type: "",
        // 指示器的坐標軸、[ default: 'auto' ]、['x', 'y', 'radius', 'angle']
        axis: "",
        // 坐標軸指示器是否自動吸附到點上
        snap: "",
        // 坐標軸指示器的 z 值,z值小的圖形會被z值大的圖形覆蓋
        z: "",
        label: {
            // 是否顯示文本標簽
            show: "",
            // 文本標簽中數值的小數點精度,默認根據當前軸的值自動判斷。可以指定如 2 表示保留兩位小數
            precision: "",
            // 文本標簽文字的格式化器
            formatter: "",
            // label 距離軸的距離
            margin: 3,
            // 文字的顏色
            color: '#fff',
            // 文字字體的風格
            fontStyle: 'normal',
            // 文字字體的粗細
            fontWeight: normal,
            // 文字的字體系列
            fontFamily: 'sans-serif',
            // 文字的字體大小
            fontSize: 12,
            // 行高
            lineHeight: "",
            width: "",
            height: "",
            // 文字本身的描邊顏色
            textBorderColor: 'transparent',
            textBorderWidth: 0,
            textShadowColor: 'transparent',
            // 文字本身的陰影長度
            textShadowBlur: 0,
            textShadowOffsetX: 0,
            textShadowOffsetY: 0,
            padding: [5, 7, 5, 7],
            backgroundColor: 'auto',
            borderColor: null,
            borderWidth: 0,
            shadowBlur: 3,
            shadowColor: "#aaa",
            shadowOffsetX: 0,
            shadowOffsetY: 0,
        },
        lineStyle: {
            // 線的顏色
            color: "#555",
            // 線寬
            width: 1,
            // 線的類型
            type: solid,
            // 圖形陰影的模糊大小
            shadowBlur: "",
            shadowColor: "",
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            // 圖形透明度。支持從 0 到 1 的數字,為 0 時不繪制該圖形
            opacity: "",
        },
        shadowStyle: {
            // 填充的顏色
            color: "",
            shadowBlur: "",
            shadowColor: "",
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            opacity: "",
        },
        crossStyle: {
            color: "#555",
            width: 1,
            type: dashed,
            shadowBlur: "",
            shadowColor: "",
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            opacity: "",
        },
        animation: true,
        // 是否開啟動畫的閾值,當單個系列顯示的圖形數量大於這個閾值時會關閉動畫。
        animationThreshold: 2000,
        animationDuration: 1000,
        animationEasing: cubicOut,
        animationDelay: 0,
        // 數據更新動畫的時長
        animationDurationUpdate: 200,
        // 數據更新動畫的緩動效果
        animationEasingUpdate: "",
        animationDelayUpdate: 0,
    },
    // 是否顯示提示框浮層
    showContent: true,
    // 是否永遠顯示提示框內容
    alwaysShowContent: false,
    // 提示框觸發的條件
    triggerOn: "",
    // 浮層顯示的延遲
    showDelay: 0,
    // 浮層隱藏的延遲
    hideDelay: 100,
    // 鼠標是否可進入提示框浮層中
    enterable: false,
    // 浮層的渲染模式
    renderMode: 'html',
    // 是否將 tooltip 框限制在圖表的區域內
    confine: false,
    // 提示框浮層的移動動畫過渡時間
    transitionDuration: 0.4,
    position: "",
    formatter: "",
    backgroundColor: "",
    borderColor: '#333',
    borderWidth: 0,
    padding: 5,
    textStyle: {
        color: '#fff',
        fontStyle: 'normal',
        fontWeight: normal,
        fontFamily: 'sans-serif',
        fontSize: 14,
        lineHeight: "",
        width: "",
        height: "",
        textBorderColor: 'transparent',
        textBorderWidth: 0,
        textShadowColor: 'transparent',
        textShadowBlur: 0,
        textShadowOffsetX: 0,
        textShadowOffsetY: 0,
    },
    // 額外附加到浮層的 css 樣式
    extraCssText: ""
}

6、 series

series: [
    {
        type: 'line',
        id: "",
        // 系列名稱,用於tooltip的顯示,legend 的圖例篩選, 在 setOption 更新數據和配置項時用於指定對應的系列
        name: "",
        // 該系列使用的坐標系
        coordinateSystem: 'cartesian2d',
        // 使用的 x 軸的 index
        xAxisIndex: 0,
        yAxisIndex: 0,
        polarIndex: 0,
        // 標記的圖形。
        symbol: 'emptyCircle',
        // 標記的大小
        symbolSize: 4,
        // 標記的旋轉角度
        symbolRotate: "",
        // 如果 symbol 是 path:// 的形式,是否在縮放時保持該圖形的長寬比
        symbolKeepAspect: false,
        // 標記相對於原本位置的偏移。
        symbolOffset: [0, 0],
        // 是否顯示 symbol
        showSymbol: true,

        showAllSymbol: 'auto',
        // 是否開啟 hover 在拐點標志上的提示動畫效果
        hoverAnimation: true,
        // 是否啟用圖例 hover 時的聯動高亮
        legendHoverLink: true,
        // 數據堆疊,同個類目軸上系列配置相同的stack值后,后一個系列的值會在前一個系列的值上相加。
        stack: null,
        // 鼠標懸浮時在圖形元素上時鼠標的樣式是什么
        cursor: 'pointer',
        // 是否連接空數據
        connectNulls: false,
        // 是否裁剪超出坐標系部分的圖形
        clip: true,
        // 是否是階梯線圖
        step: false,
    },
    {
        type: 'bar',
        id: "",
        name: "",
        legendHoverLink: true,
        // 該系列使用的坐標系
        coordinateSystem: 'cartesian2d',
        xAxisIndex: 0,
        yAxisIndex: 0,
    },
    {
        type: 'pie',
        id: "",
        name: "",
        legendHoverLink: true,
        // 是否開啟 hover 在扇區上的放大動畫效果
        hoverAnimation: true,
        // 高亮扇區的偏移距離
        hoverOffset: 10,
        // 選中模式,表示是否支持多個選中,默認關閉
        selectedMode: false,
        // 選中扇區的偏移距離
        selectedOffset: 10,
        // 餅圖的扇區是否是順時針排布
        clockwise: true,
        // 起始角度,支持范圍[0, 360]
        startAngle: 90,
        // 最小的扇區角度(0 ~ 360),用於防止某個值過小導致扇區太小影響交互。
        minAngle: 0,
        // 小於這個角度(0 ~ 360)的扇區,不顯示標簽(label 和 labelLine)
        minShowLabelAngle: 0,
        // 是否展示成南丁格爾圖,通過半徑區分數據大小
        roseType: false,
        // 是否啟用防止標簽重疊策略,默認開啟
        avoidLabelOverlap: true,
        // 是否在數據和為0(一般情況下所有數據為0) 的時候不顯示扇區
        stillShowZeroSum: true,
        // 鼠標懸浮時在圖形元素上時鼠標的樣式是什么
        cursor: 'pointer',
        label: {
            show: false,
            // 標簽的位置
            position: 'outside',
            formatter: "",
            rotate: null,
            color: '#fff',
            fontStyle: 'normal',
            fontWeight: normal,
            fontFamily: 'sans-serif',
            fontSize: 12,
            align: "",
            verticalAlign: "",
            lineHeight: "",
            backgroundColor: 'transparent',
            borderColor: 'transparent',
            borderWidth: 0,
            borderRadius: 0,
            padding: 0,
            shadowColor: 'transparent',
            shadowBlur: 0,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            width: "",
            height: "",
            textBorderColor: 'transparent',
            textBorderWidth: 0,
            textShadowColor: 'transparent',
            textShadowBlur: 0,
            textShadowOffsetX: 0,
            textShadowOffsetY: 0,
        },
        labelLine: {
            // 是否顯示視覺引導線。
            show: "",
            // 視覺引導線第一段的長度
            length: "",
            // 視覺引導項第二段的長度。
            length2: "",
            // 是否平滑視覺引導線,默認不平滑
            smooth: false,
            lineStyle: {
                color: '#000',
                width: 1,
                type: solid,
                shadowBlur: "",
                shadowColor: "",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                opacity: "",
            },
            // 圖形樣式
            itemStyle: {
                color: 自適應,
                borderColor: '#000',
                borderWidth: 0,
                borderType: 'solid',
                shadowBlur: "",
                shadowColor: "",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                opacity: "",
            },
            // 高亮的扇區和標簽樣式
            emphasis: {},
            zlevel: 0,
            z: 2,
            center: ['50%', '50%'],
            radius: [0, '75%'],
            seriesLayoutBy: 'column',
            datasetIndex: 0,
            data: [{}],
            markPoint: {},
            markLine: {},
            markArea: {},
            silent: false,
            animationType: 'expansion',
            animationTypeUpdate: 'transition',
            animation: true,
            animationThreshold: 2000,
            animationDuration: 1000,
            animationEasing: cubicOut,
            animationDelay: 0,
            animationDurationUpdate: 300,
            animationEasingUpdate: cubicOut,
            animationDelayUpdate: 0,
        },
        tooltip: {},
    }
]


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM