Echarts圖表-學習

時間 2020-05-26

標籤 echarts 圖表學習简体版

原文原文鏈接

Echarts可用來實現多種圖表的實現。html

注意事項：chrome

1、series數組

data一般來講，數據用一個二維數組表示。以下，每一列被稱爲一個『維度』。瀏覽器

series: [{
data: [
// 維度X 維度Y 其餘維度 ...
[ 3.4, 4.5, 15, 43],
[ 4.2, 2.3, 20, 91],
[ 10.8, 9.5, 30, 18],
[ 7.2, 8.8, 18, 57]
]
}]
在直角座標系 (grid) 中『維度X』和『維度Y』會默認對應於 xAxis 和 yAxis。
在極座標系 (polar) 中『維度X』和『維度Y』會默認對應於 radiusAxis 和 angleAxis。
後面的其餘維度是可選的，能夠在別處被使用，例如：
在 visualMap 中能夠將一個或多個維度映射到顏色，大小等多個圖形屬性上。
在 series.symbolSize 中可使用回調函數，基於某個維度獲得 symbolSize 值。
使用 tooltip.formatter 或 series.label.formatter 能夠把其餘維度的值展現出來。
特別地，當只有一個軸爲類目軸（axis.type 爲 'category'）的時候，數據能夠簡化用一個一維數組表示。例如：echarts

xAxis: {
data: ['a', 'b', 'm', 'n']
},
series: [{
// 與 xAxis.data 一一對應。
data: [23, 44, 55, 19]
// 它實際上是下面這種形式的簡化：
// data: [[0, 23], [1, 44], [2, 55], [3, 19]]
}]dom

當某維度對應於類目軸（axis.type 爲 'category'）的時候：ide

其值須爲類目的『序數』（從 0 開始）或者類目的『字符串值』。例如：函數

xAxis: {
type: 'category',
data: ['星期一', '星期二', '星期三', '星期四']
},
yAxis: {
type: 'category',
data: ['a', 'b', 'm', 'n', 'p', 'q']
},
series: [{
data: [
// xAxis yAxis
[ 0, 0, 2 ], // 意思是此點位於 xAxis: '星期一', yAxis: 'a'。
[ '星期四', 2, 1 ], // 意思是此點位於 xAxis: '星期四', yAxis: 'm'。
[ 2, 'p', 2 ], // 意思是此點位於 xAxis: '星期三', yAxis: 'p'。
[ 3, 3, 5 ]
]
}]this

2、time’ 時間軸，spa

適用於連續的時序數據，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不一樣，例如會根據跨度的範圍來決定使用月，星期，日仍是小時範圍的刻度。
當某維度對應於時間軸（type 爲 'time'）的時候，值能夠爲：

一個時間戳，如 1484141700832，表示 UTC 時間。
或者字符串形式的時間描述：
ISO 8601 的子集，只包含這些形式（這幾種格式，除非指明時區，不然均表示本地時間，與 moment 一致）：
部分年月日時間: '2012-03', '2012-03-01', '2012-03-01 05', '2012-03-01 05:06'.
使用 'T' 或空格分割: '2012-03-01T12:22:33.123', '2012-03-01 12:22:33.123'.
時區設定: '2012-03-01T12:22:33Z', '2012-03-01T12:22:33+8000', '2012-03-01T12:22:33-05:00'.
其餘的時間字符串，包括（均表示本地時間）: '2012', '2012-3-1', '2012/3/1', '2012/03/01', '2009/6/12 2:00', '2009/6/12 2:05:08', '2009/6/12 2:05:08.123'
或者用戶自行初始化的 Date 實例：
注意，用戶自行初始化 Date 實例的時候，瀏覽器的行爲有差別，不一樣字符串的表示也不一樣。
例如：在 chrome 中，new Date('2012-01-01') 表示 UTC 時間的 2012 年 1 月 1 日，而 new Date('2012-1-1') 和 new Date('2012/01/01') 表示本地時間的 2012 年 1 月 1 日。在 safari 中，不支持 new Date('2012-1-1') 這種表示方法。
因此，使用 new Date(dataString) 時，可以使用第三方庫解析（如 moment），或者使用 echarts.number.parseDate，或者參見這裏。

3、tooltip.formatter

提示框浮層內容格式器，支持字符串模板和回調函數兩種形式。

1, 字符串模板

模板變量有 {a}, {b}，{c}，{d}，{e}，分別表示系列名，數據名，數據值等。在 trigger 爲 'axis' 的時候，會有多個系列的數據，此時能夠經過 {a0}, {a1}, {a2} 這種後面加索引的方式表示系列的索引。不一樣圖表類型下的 {a}，{b}，{c}，{d} 含義不同。其中變量{a}, {b}, {c}, {d}在不一樣圖表類型下表明數據含義爲：

折線（區域）圖、柱狀（條形）圖、K線圖 : {a}（系列名稱），{b}（類目值），{c}（數值）, {d}（無）
散點圖（氣泡）圖 : {a}（系列名稱），{b}（數據名稱），{c}（數值數組）, {d}（無）
地圖 : {a}（系列名稱），{b}（區域名稱），{c}（合併數值）, {d}（無）
餅圖、儀表盤、漏斗圖: {a}（系列名稱），{b}（數據項名稱），{c}（數值）, {d}（百分比）

更多其它圖表模板變量的含義能夠見相應的圖表的 label.formatter 配置項。

示例：




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

2, 回調函數

回調函數格式：

(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string

第一個參數 params 是 formatter 須要的數據集。格式以下：



{ componentType: 'series', // 系列類型 seriesType: string, // 系列在傳入的 option.series 中的 index seriesIndex: number, // 系列名稱 seriesName: string, // 數據名，類目名 name: string, // 數據在傳入的 data 數組中的 index dataIndex: number, // 傳入的原始數據項 data: Object, // 傳入的數據值 value: number|Array, // 數據圖形的顏色 color: string, // 餅圖的百分比 percent: number, }

在 trigger 爲 'axis' 的時候，或者 tooltip 被 axisPointer 觸發的時候，params 是多個系列的數據數組。其中每項內容格式同上，而且，

{ componentType: 'series', // 系列類型 seriesType: string, // 系列在傳入的 option.series 中的 index seriesIndex: number, // 系列名稱 seriesName: string, // 數據名，類目名 name: string, // 數據在傳入的 data 數組中的 index dataIndex: number, // 傳入的原始數據項 data: Object, // 傳入的數據值 value: number|Array, // 數據圖形的顏色 color: string, }

4、每秒變更的x軸

示例代碼：

點擊出現的彈框部分：

<div class="hov-wrap disnone" onclick="initChart(' +data[i].devid+ ')" ><span class="mt-mid">查看統計</span></div>

核心部分：

//實時監控圖表
var actual_chart = echarts.init(document.getElementById('actual_line'));

// 對Date的擴展，將 Date 轉化爲指定格式的String
// 月(M)、日(d)、小時(h)、分(m)、秒(s)、季度(q) 能夠用 1-2 個佔位符，
// 年(y)能夠用 1-4 個佔位符，毫秒(S)只能用 1 個佔位符(是 1-3 位的數字)
// 例子：
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
// (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
Date.prototype.Format = function (fmt) { // author: meizz
    var o = {
        "M+": this.getMonth() + 1, // 月份
        "d+": this.getDate(), // 日
        "h+": this.getHours(), // 小時
        "m+": this.getMinutes(), // 分
        "s+": this.getSeconds(), // 秒
        "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
        "S": this.getMilliseconds() // 毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
};

sysTim = getTimeArr(); //x軸的動態系統時間，按每秒顯示，共顯示12條

function getTimeArr() {
    var now = new Date();
    var begin = new Date(now.getTime() - 12 * 1000);
    var arr = [];

    for (var i = 12; i > 0; i--) {
        arr.push(new Date(now.getTime() - i * 1000).Format("hh:mm:ss"));
    }

    return arr;
}

//暫時用計時器來模擬每秒的操做
actual_chart_timer = null;

//y軸數據
function getEmptyArray() {
    return [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
}
function randomData() {
    value = value + Math.random() * 21 - 10;
    return {
        value:
            Math.round(value)
    }
}
fvalArr01 = getEmptyArray();
var value = Math.random() * 1000;
for (var i = 0; i < 1000; i++) {
    fvalArr01.push(randomData());
}

/實時監控線
drawSmoothCurve(fvalArr01,unitName,devname);

function drawSmoothCurve(fvalArr01,unitName,devname) {
    var chart_data = fvalArr01;
    //畫圖
    //2019.3.19 實時監控-採用每秒鐘展現數據
    var option = {
        xAxis: {
            boundaryGap: false,
            type: 'category',
            data: sysTim,
            axisLabel : {
                color : '#3B53A2',
                fontSize : '11',
                interval : 0,
                textAlign: "left"
            },
            axisLine : {
                lineStyle : {
                    color : '#3B53A2'
                }
            },
            splitLine : {
                show : false,
                lineStyle : {
                    color : '#3B53A2'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLabel : {
                color : '#3B53A2',
                fontSize : '11',
                interval : 0,
                formatter : '{value}' + unitName
            },
            axisLine : {
                lineStyle : {
                    color : '#3B53A2'
                }
            },
            splitLine : {
                show : true,
                lineStyle : {
                    color : '#CDD9F0'
                }
            }
            //axisLabel:{formatter:'{value}' + unit}
        },
        legend : {
            data : devname,
            textStyle : {
                color : '#3B53A2'
            },
            inactiveColor : '#CDD9F0',
            top : 2
        },
        grid: {
            top:'10%',
            left : '2%',
            right : '3%',
            bottom : '3%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
            backgroundColor: '#0D1B42',  //鼠標移動到圖上面時，顯示的背景顏色
            padding:15,     //定義內邊距
            formatter: function(params) { //自定義函數修改折線圖給數據加單位
                // console.log(params);
                var str = '';//聲明一個變量用來存儲數據
                str += '<div style="width: 12px;height: 12px;border-radius: 50%;float: left;margin-top: 5px;"></div>';
                for(var i=0; i<params.length; i++) {  //圖顯示的數據較多時須要循環數據，這樣才能夠成功的給多條數據添加單位
                    str += '<div style="color:#ffffff;"><span style="margin-left: 10px;">'+ (params[i].data.value ? params[i].data.value + unitName : '暫無') +'&nbsp;&nbsp;&nbsp;</span></div>';
                }
                return str;
            }
        },
        series: [{
            name: devname,
            type: 'line',
            label:{
                /* show:true*/
            },
            smooth: true,
            data: chart_data
        }]
    };



    actual_chart_timer = setInterval(function () {
        actual_chart.setOption(option);
            var now = new Date(); console.log(now);

            sysTim.shift();
            sysTim.push(now.Format("hh:mm:ss"));

            chart_data.shift();
            chart_data.push(randomData());


        actual_chart.setOption({
            series: [{
                data: chart_data
            }]
        });
    }, 1000);


}

$(window).resize(function() {
    actual_chart.resize();
});


//彈框關閉操做
function closeChartModal(that) {
    $("#detail_modal").modal("hide");
    window.clearInterval(actual_chart_timer);
}

未完待續...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。