echarts配置項title legend dataRange toolbox tooltip dataZoom grid categoryAxis xAxis yAxis polar說明總結

阿新 • • 發佈：2020-12-08

var option = {
    // 全圖預設背景
    // backgroundColor: 'rgba(0,0,0,0)',

    // 預設色板
    color: [

'#ff7f50'

'#87cefa'

'#da70d6'

'#32cd32'

'#6495ed'

,
            '

#ff69b4'

'#ba55d3'

'#cd5c5c'

'#ffa500'

'#40e0d0'

,
            '

#1e90ff'

'#ff6347'

'#7b68ee'

'#00fa9a'

'#ffd700'

,
            '

#6699FF'

'#ff6666'

'#3cb371'

'#b8860b'

'#30e0e0'


    ],

    // 圖表標題
    title: {
        x:

'left'

, // 水平安放位置，預設為左對齊，可選為：'center' ¦ 'left' ¦ 'right' ¦ {number}（x座標，單位px）
        y:

'top'

, // 垂直安放位置，預設為全圖頂端，可選為：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y座標，單位px）
        //textAlign: null          // 水平對齊方式，預設根據x設定自動調整 

        backgroundColor:

'rgba(0,0,0,0)'

,
        borderColor:

'#ccc'

, // 標題邊框顏色
        borderWidth: 0, // 標題邊框線寬，單位px，預設為0（無邊框）
        padding: 5, // 標題內邊距，單位px，預設各方向內邊距為5，接受陣列分別設定上右下左邊距，同css
        itemGap: 10, // 主副標題縱向間隔，單位px，預設為10，
        textStyle: {
            fontSize: 18, // 主標題文字大小
            fontWeight:

'bolder'

, // 主標題文字加粗
            color:

'#333'

 // 主標題文字顏色
        },
        subtextStyle: {
            color:

'#aaa'

 // 副標題文字顏色
        }
    },
    
    // 圖例
    legend: {
        orient:

'horizontal'

, // 佈局方式，預設為水平佈局，可選為：'horizontal' ¦ 'vertical'
        x:

'center'

, // 水平安放位置，預設為全圖居中，可選為：'center' ¦ 'left' ¦ 'right' ¦ {number}（x座標，單位px）
        y:

'top'

, // 垂直安放位置，預設為全圖頂端，可選為：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y座標，單位px）
        backgroundColor:

'rgba(0,0,0,0)'

,
        borderColor:

'#ccc'

, // 圖例邊框顏色
        borderWidth: 0, // 圖例邊框線寬，單位px，預設為0（無邊框）
        padding: 5, // 圖例內邊距，單位px，預設各方向內邊距為5，接受陣列分別設定上右下左邊距，同css
        itemGap: 10, // 各個item之間的間隔，單位px，預設為10，橫向佈局時為水平間隔，縱向佈局時為縱向間隔
        icon:

'rect'

, // 預設圓角矩形roundRect，可選項有'circle' 橢圓，'rect' 矩形， 'roundRect' 圓角矩形 '，
        // triangle' 三角形， 'diamond' 菱形， 'pin' 正圓 ，'arrow' 箭頭
        itemWidth: 20, // 圖例圖形寬度
        itemHeight: 14, // 圖例圖形高度
        textStyle: {
            color:

'#333'

 // 圖例文字顏色
        }
    },
    
    // 值域
    dataRange: {
        orient:

'vertical'

, // 佈局方式，預設為垂直佈局，可選為：'horizontal' ¦ 'vertical'
        x:

'left'

, // 水平安放位置，預設為全圖左對齊，可選為：'center' ¦ 'left' ¦ 'right' ¦ {number}（x座標，單位px）
        y:

'bottom'

, // 垂直安放位置，預設為全圖底部，可選為：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y座標，單位px）
        backgroundColor:

'rgba(0,0,0,0)'

,
        borderColor:

'#ccc'

, // 值域邊框顏色
        borderWidth: 0, // 值域邊框線寬，單位px，預設為0（無邊框）
        padding: 5, // 值域內邊距，單位px，預設各方向內邊距為5，接受陣列分別設定上右下左邊距，同css
        itemGap: 10, // 各個item之間的間隔，單位px，預設為10，橫向佈局時為水平間隔，縱向佈局時為縱向間隔
        itemWidth: 20, // 值域圖形寬度，線性漸變水平佈局寬度為該值 * 10
        itemHeight: 14, // 值域圖形高度，線性漸變垂直佈局高度為該值 * 10
        splitNumber: 5, // 分割段數，預設為5，為0時為線性漸變
        color: [

'#1e90ff'

'#f0ffff'

], //顏色 
        //text:['高','低'],         // 文字，預設為數值文字
        textStyle: {
            color:

'#333'

 // 值域文字顏色
        }
    },

    // 工具欄
    toolbox: {
        show: true, //是否顯示
        orient:

'horizontal'

, // 佈局方式，預設為水平佈局，可選為：'horizontal' ¦ 'vertical'
        x:

'right'

, // 水平安放位置，預設為全圖右對齊，可選為：'center' ¦ 'left' ¦ 'right' ¦ {number}（x座標，單位px）
        y:

'top'

, // 垂直安放位置，預設為全圖頂端，可選為：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y座標，單位px）
        left:

'460'

, //距左
        top:

'2'

, //距上
        color: [

'#1e90ff'

'#22bb22'

'#4b0082'

'#d2691e'

],
        backgroundColor:

'rgba(0,0,0,0)'

, // 工具箱背景顏色
        borderColor:

'#ccc'

, // 工具箱邊框顏色
        borderWidth: 0, // 工具箱邊框線寬，單位px，預設為0（無邊框）
        padding: 5, // 工具箱內邊距，單位px，預設各方向內邊距為5，接受陣列分別設定上右下左邊距，同css
        itemGap: 10, // 各個item之間的間隔，單位px，預設為10，橫向佈局時為水平間隔，縱向佈局時為縱向間隔
        itemSize: 16, // 工具箱圖形寬度
        featureImageIcon: {}, // 自定義圖片icon
        featureTitle: {
            mark:

'輔助線開關'

,
            markUndo:

'刪除輔助線'

,
            markClear:

'清空輔助線'

,
            dataZoom:

'區域縮放'

,
            dataZoomReset:

'區域縮放後退'

,
            dataView:

'資料檢視'

,
            lineChart:

'折線圖切換'

,
            barChart:

'柱形圖切換'

,
            restore:

'還原'

,
            saveAsImage:

'儲存為圖片'


        },
        //自定義工具官網配置項解釋：https://echarts.apache.org/zh/option.html#toolbox.feature
        feature: { //自定義工具，只能以my開頭
            myTool1: {
                show: true,
                title:

'自定義擴充套件方法'

, //懸停出現的文字
                icon:

'image://xxx.png'

, //自定義按鈕圖片格式必須是：'image://（圖片/圖示的路徑)' 
                onclick: function() { //點選圖片事件
                    alert(

'myToolHandler'

)
                }
            }
        }
    },

    // 滑鼠移到圖表上後提示框
    tooltip: {
        trigger:

'item'

, // 觸發型別，預設資料觸發，見下圖，可選為：'item' ¦ 'axis'
        showDelay: 20, // 顯示延遲，新增顯示延遲可以避免頻繁切換，單位ms
        hideDelay: 100, // 隱藏延遲，單位ms
        transitionDuration: 0.4, // 動畫變換時間，單位s
        backgroundColor:

'rgba(0,0,0,0.7)'

, // 提示背景顏色，預設為透明度為0.7的黑色
        borderColor:

'#333'

, // 提示邊框顏色
        borderRadius: 4, // 提示邊框圓角，單位px，預設為4
        borderWidth: 0, // 提示邊框線寬，單位px，預設為0（無邊框）
        padding: 5, // 提示內邊距，單位px，預設各方向內邊距為5，接受陣列分別設定上右下左邊距，同css
        axisPointer: { // 座標軸指示器，座標軸觸發有效
            type:

'line'

, // 預設為直線，可選為：'line' | 'shadow'
            lineStyle: { // 直線指示器樣式設定
                color:

'#48b'

,
                width: 2,
                type:

'solid'


            },
            shadowStyle: { // 陰影指示器樣式設定
                width:

'auto'

, // 陰影大小
                color:

'rgba(150,150,150,0.3)'

 // 陰影顏色
            }
        },
        textStyle: {
            color:

'#fff'


        },
        //formatter 提示框浮層內容格式器，支援字串模板和回撥函式兩種形式
        formatter:

'{b0}: {c0}<br />{b1}: {c1}'

,
        // formatter:function(parmas){
        //     console.log(parmas);
        // }
    },
    
    // 區域縮放控制器
    dataZoom: {
        orient:

'horizontal'

, // 佈局方式，預設為水平佈局，可選為：'horizontal' ¦ 'vertical'
        // x: {number},            // 水平安放位置，預設為根據grid引數適配，可選為：{number}（x座標，單位px）
        // y: {number},            // 垂直安放位置，預設為根據grid引數適配，可選為：{number}（y座標，單位px）
        // width: {number},        // 指定寬度，橫向佈局時預設為根據grid引數適配
        // height: {number},       // 指定高度，縱向佈局時預設為根據grid引數適配
        backgroundColor:

'rgba(0,0,0,0)'

, // 背景顏色
        dataBackgroundColor:

'#eee'

, // 資料縮略背景顏色
        handleColor:

'rgba(70,130,180,0.8)'

, // 控制手柄顏色
        fillerColor:

'rgba(144,197,237,0.2)'

, // 選擇區域填充顏色
        handleIcon:

'M0,0 v9.7h5 v-9.7h-5 Z’'

, //更改手柄形狀 也可通過image://url設定為圖片
        //可去https://blog.csdn.net/Kimser/article/details/107336199檢視handleIcon的具體設定
        handleSize: 12, //更改手柄大小
        start: 0, //資料視窗範圍的起始百分比
        end: 100, //資料視窗範圍的結束百分比
        realtime: true, //是否實時更新系列的檢視 預設為true
    },
    
    // 網格
    grid: {
        x: 80,
        y: 60,
        x2: 80,
        y2: 60,
        // width: {totalWidth} - x - x2,
        // height: {totalHeight} - y - y2,
        backgroundColor:

'rgba(0,0,0,0)'

,
        borderWidth: 1,
        borderColor:

'#ccc'


    },
    
    // 類目軸
    categoryAxis: {
        position:

'bottom'

, // 位置
        nameLocation:

'end'

, // 座標軸名字位置，支援'start' | 'end'
        boundaryGap: true, // 類目起始和結束兩端空白策略
        axisLine: { // 座標軸線
            show: true, // 預設顯示，屬性show控制顯示與否
            lineStyle: { // 屬性lineStyle控制線條樣式
                color:

'#48b'

,
                width: 2,
                type:

'solid'


            }
        },
        axisTick: { // 座標軸小標記
            show: true, // 屬性show控制顯示與否，預設不顯示
            interval:

'auto'

,
            // onGap: null,
            inside: false, // 控制小標記是否在grid裡 
            length: 5, // 屬性length控制線長
            lineStyle: { // 屬性lineStyle控制線條樣式
                color:

'#333'

,
                width: 1
            }
        },
        axisLabel: { // 座標軸文字標籤，詳見axis.axisLabel
            show: true,
            interval:

'auto'

,
            rotate: 0,
            margin: 8,
            // formatter: null,
            textStyle: { // 其餘屬性預設使用全域性文字樣式，詳見TEXTSTYLE
                color:

'#333'


            }
        },
        splitLine: { // 分隔線
            show: true, // 預設顯示，屬性show控制顯示與否
            // onGap: null,
            lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式
                color: [

'#ccc'

],
                width: 1,
                type:

'solid'


            }
        },
        splitArea: { // 分隔區域
            show: false, // 預設不顯示，屬性show控制顯示與否
            // onGap: null,
            areaStyle: { // 屬性areaStyle（詳見areaStyle）控制區域樣式
                color: [

'rgba(250,250,250,0.3)'

'rgba(200,200,200,0.3)'

]
            }
        }
    },
    
    // 數值型座標軸預設引數(value:x/y) x軸/y軸
    valueAxis: {
        position:

'left'

, // 位置
        nameLocation:

'end'

, // 座標軸名字位置，支援'start' | 'end'
        nameTextStyle: {}, // 座標軸文字樣式，預設取全域性樣式
        boundaryGap: [0, 0], // 數值起始和結束兩端空白策略
        splitNumber: 5, // 分割段數，預設為5
        axisLine: { // 座標軸線
            show: true, // 預設顯示，屬性show控制顯示與否
            lineStyle: { // 屬性lineStyle控制線條樣式
                color:

'#48b'

,
                width: 2,
                type:

'solid'


            }
        },
        axisTick: { // 座標軸小標記
            show: false, // 屬性show控制顯示與否，預設不顯示
            inside: false, // 控制小標記是否在grid裡 
            length: 5, // 屬性length控制線長
            lineStyle: { // 屬性lineStyle控制線條樣式
                color:

'#333'

,
                width: 1
            }
        },
        axisLabel: { // 座標軸文字標籤，詳見axis.axisLabel
            show: true,
            rotate: 0,
            margin: 8,
            // formatter: null,
            textStyle: { // 其餘屬性預設使用全域性文字樣式，詳見TEXTSTYLE
                color:

'#333'


            }
        },
        splitLine: { // 分隔線
            show: true, // 預設顯示，屬性show控制顯示與否
            lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式
                color: [

'#ccc'

],
                width: 1,
                type:

'solid'


            }
        },
        splitArea: { // 分隔區域
            show: false, // 預設不顯示，屬性show控制顯示與否
            areaStyle: { // 屬性areaStyle（詳見areaStyle）控制區域樣式
                color: [

'rgba(250,250,250,0.3)'

'rgba(200,200,200,0.3)'

]
            }
        }
    },

    //圖表型別
    series: series, //有點多 單獨說

    //極座標圖
    polar: {
        center: [

'50%'

], // 預設全域性居中
        radius:

'75%'

,
        startAngle: 90,
        splitNumber: 5,
        name: {
            show: true,
            textStyle: { // 其餘屬性預設使用全域性文字樣式，詳見TEXTSTYLE
                color:

'#333'


            }
        },
        axisLine: { // 座標軸線
            show: true, // 預設顯示，屬性show控制顯示與否
            lineStyle: { // 屬性lineStyle控制線條樣式
                color:

'#ccc'

,
                width: 1,
                type:

'solid'


            }
        },
        axisLabel: { // 座標軸文字標籤，詳見axis.axisLabel
            show: false,
            textStyle: { // 其餘屬性預設使用全域性文字樣式，詳見TEXTSTYLE
                color:

'#333'


            }
        },
        splitArea: {
            show: true,
            areaStyle: {
                color: [

'rgba(250,250,250,0.3)'

'rgba(200,200,200,0.3)'

]
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                width: 1,
                color:

'#ccc'

echarts配置項title legend dataRange toolbox tooltip dataZoom grid categoryAxis xAxis yAxis polar說明總結

var option = { // 全圖預設背景 // backgroundColor: \'rgba(0,0,0,0)\', // 預設色板 color: [ \'#ff7f50\'

echarts配置項——setOption()

theme = { // 全圖預設背景 // backgroundColor: \'rgba(0,0,0,0)\', // 預設色板 color: [\'#ff7f50\',\'#87cefa\',\'#da70d6\',\'#32cd32\',\'#6495ed\',

echarts 各個配置項詳細說明總結

theme = { // 全圖預設背景 // backgroundColor: \'rgba(0,0,0,0)\', // 預設色板 color: [\'#ff7f50\',\'#87cefa\',\'#da70d6\',\'#32cd32\',\'#6495ed\',

echarts超全超詳情配置項

原date: 2018-11-20 14:35:18 連結官方API連結官方例項連結官方Gallery更多例項連結在vue中如何使用

Echarts的使用與配置項

Echarts的使用與配置項具體詳情參見官方文件：https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

echarts grid的樣式位置_ECharts常用配置項

技術標籤：echarts grid的樣式位置有什麼疑問可以看這裡：ECharts(基礎模板詳解)

echarts標題（title）配置

echarts標題（title）配置 var myChart=echarts.init(document.getElementById(\'main\')); //init初始化介面，返回ECharts例項，其中dom為圖表所在節點

echarts 使用一些配置項整理

1、刻度控制 min:0,//取0為最小刻度 max: 100, //取100為最大刻度 min:\'dataMin\', //取最小值為最小刻度

echarts 折線圖配置項

var option = { // 折線對應的標題 legend: { data: [\'總收入\', \'訂單筆數\'], right: 10, top: 3

echarts的option有哪些配置項

正在思考，請等待...... 全域性配置項：backgroundColor、textStyle、title、tooltip、legend、dataZoom、visualMap、toolbox、animation、parallel、parallelAxis、calendar、dataset、grid、xAxis、yAxis、polar、