ECharts屬性——學習筆記

1、全圖默認背景

backgroundColor:'rgba(10,20,81,0.38)',

2、提示框

tooltip : {
        trigger: 'axis',// 觸發類型，默認數據觸發，可選爲：'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，
        axisPointer : {            // 座標軸指示器，座標軸觸發有效
            type : 'line' ,       // 默認爲直線，可選爲：'line' | 'shadow'
            lineStyle : {          // 直線指示器樣式設置
                color: '#48b',
                width: 2,
                type: 'solid'
            },
            shadowStyle : {              // 陰影指示器樣式設置
                width: 'auto',         // 陰影大小
                color: 'rgba(150,150,150,0.3)'  // 陰影顏色
            }
        },
        formatter: function (params){
            return params[0].name + '<br/>'
                + params[0].seriesName + ' : ' + params[0].value+'%'+ '<br/>'
                + params[1].seriesName + ' : ' + params[1].value + '%';
        }
    },

3、全局文本

textStyle: {
        fontFamily: 'Arial, Verdana, sans-serif',
        fontFamily2: '微軟雅黑',    // IE8- 字體模糊並且不支持不同字體混排，額外指定一份
        // fontSize: 10,
        color:'WhiteSmoke'
    },

4、圖例

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)',
        borderWidth: 1,                // 圖例邊框線寬，單位px，默認爲0（無邊框）
        borderColor: '#ccc',            // 圖例邊框顏色
        padding: 5,                  // 圖例內邊距，單位px，默認各方向內邊距爲5，接受數組分別設定上右下左邊距，同css
        itemGap: 10,              // 各個item之間的間隔，單位px，默認爲10，橫向佈局時爲水平間隔，縱向佈局時爲縱向間隔
        itemWidth: 20,             // 圖例圖形寬度
        itemHeight: 14,            // 圖例圖形高度
        textStyle: {
            color: 'WhiteSmoke'          // 圖例文字顏色
        },
        data:['當前','歷史']
    },

5、網格

grid: {y: 30, y2:20, x2:20},

6、座標軸

yAxis : [
        {
            name:'百分比',
            type : 'value',
            position: 'left',      // 位置
            nameLocation: 'end',     // 座標軸名字位置，支持'start' | 'end'
            nameTextStyle:{color:'RGBA(6, 243, 250, 1)'},// 座標軸文字樣式，默認取全局樣式
            boundaryGap: [0, 0],    // 數值起始和結束兩端空白策略
            splitNumber: 5,        // 分割段數，默認爲5
            axisLine: {             // 座標軸線
                show:true,         // 默認顯示，屬性show控制顯示與否
                lineStyle: {       // 屬性lineStyle控制線條樣式
                    color: 'rgba(6,243,250,1)',
                    width: 2,
                    type: 'solid'
                }
            },
            axisTick: {            // 座標軸小標記
                show: false,       // 屬性show控制顯示與否，默認不顯示
                inside : false,      // 控制小標記是否在grid裏
                length :5,          // 屬性length控制線長
                lineStyle: {       // 屬性lineStyle控制線條樣式
                    color: 'rgba(6,243,250,1)',
                    width: 1
                }
            },
            axisLabel: {           // 座標軸文本標籤，詳見axis.axisLabel
                show: true,
                rotate: 0,
                margin: 8,
                formatter: '{value} %',
                textStyle: {       // 其餘屬性默認使用全局文本樣式，詳見TEXTSTYLE
                    color: 'rgba(6,243,250,1)'
                }
            },
            splitLine: {                // 分隔線
                show: false,        // 默認顯示，屬性show控制顯示與否
                lineStyle: {          // 屬性lineStyle（詳見lineStyle）控制線條樣式
                    color: ['#ccc'],
                    width: 1,
                    type: 'solid'
                }
            },
            splitArea: {                // 分隔區域
                show: true,       // 默認不顯示，屬性show控制顯示與否
                areaStyle: {       // 屬性areaStyle（詳見areaStyle）控制區域樣式
                    color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
                }
            }
        }
    ],