最近公司項(xiàng)目需要用到實(shí)時(shí)數(shù)據(jù)顯示, 所以就了解到了Echarts這個(gè)強(qiáng)大的工具, 使用中也遇到了好多坑, 記錄一下, 希望也給需要的人提供幫助

要在項(xiàng)目中使用Echarts, 首先需要在頁面里引入, 你可以完全下載下來, 或者用npm之類的包管理工具, 或者直接引入cdn加速地址, 我這里用的后者

在html頁面直接引入

<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.js"></script>

然后需要設(shè)著一個(gè)用來顯示折線圖的容器, 而且要有寬高

<div id="main" style="width: 600px; height: 500px;"></div>   

接著在js文件里先實(shí)例化一個(gè)echarts對象出來

let myChart = echarts.init(document.getElementById('main'));

為了顯示效果, 我提供了一些測試數(shù)據(jù)

let now = new Date();
let datas = {
    upText: '水位圖形',
    upUnit: '單位(m)',
    upName: '水位',
    upMark: 2.3,        // 分界值
    upData: ['1.139'],
    downText: '流量圖形',
    downUnit: '單位(m)',
    downName: '水位',
    downMark: 3.5,
    downData: ['5.473'],
    date: [now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds()]
};

然后就是設(shè)置配置信息--option

let option = {
    title: [{
        left: 'center',
        text: datas.upText
    }, {
        top: '50%',             // 下面的折線圖標(biāo)題位置
        left: 'center',
        text: datas.downText
    }],
    tooltip: {
        trigger: 'axis'         // 懸浮到折點(diǎn)時(shí)候的上線標(biāo)記線
    },
    xAxis: [{
        boundaryGap: false,     // 默認(rèn)為 true衡楞，此時(shí)刻度只是作為分隔線战惊，標(biāo)簽和數(shù)據(jù)點(diǎn)都會(huì)在兩個(gè)刻度之間的帶(band)中間茶宵。
        data: datas.date
    }, {
        boundaryGap: false,
        data: datas.date,
        gridIndex: 1            // 下面的折線圖索引, (上面的索引為0)
    }],
    yAxis: [{
        name: datas.upUnit,
        boundaryGap: [0, '50%']
    }, {
        gridIndex: 1,
        name: datas.downUnit,
        boundaryGap: [0, '50%']
    }],
    grid: [{
        bottom: '60%'
    }, {
        top: '60%'
    }],
    series: [{
        name: datas.upName,
        data:  datas.date,
        type: 'line',
        smooth: true,           // 是否為平滑曲線
        areaStyle: {            // 折現(xiàn)下是否填充
            normal: {}
        },  
        markLine: {             // 分界線線設(shè)置
            silent: true,       // 不響應(yīng)鼠標(biāo)點(diǎn)擊事件
            lineStyle: {
                width: 2,
                color: '#f00'
            },
            data: [{
                yAxis: datas.upMark
            }]
        }
    }, {
        name: datas.downName,
        data:  datas.date,
        type: 'line',
        smooth: true,
        itemStyle : {  
            normal : {  
                borderColor:'red'   // 折線折點(diǎn)顏色
            }  
        },
        markLine: {
            silent: true,
            lineStyle: {
                width: 2,
                color: '#f00'
            },
            data: [{
                yAxis: datas.downMark
            }]
        },
        xAxisIndex: 1,
        yAxisIndex: 1
    }],
    visualMap: [{               // 視覺映射組件
        seriesIndex: 0,
        top: 20,
        right: 10,
        pieces: [{
            gt: 0,              // 開始值
            lte: datas.upMark,  // 結(jié)束值
            color: '#0ff'
        }],
        outOfRange: {           // 超出范圍
            color: '#f00'
        },
    },{
        seriesIndex: 1,
        top: '50%',
        right: 10,
        pieces: [{
            gt: 0,
            lte: datas.downMark,
            color: 'orange'
        }],
        outOfRange: {
            color: '#f00'
        },
    }], 
};

有些地方是加了注釋的, 因?yàn)橐婚_始沒搞明白怎么用, 在官方文檔里 和 demo 里遨游了好久, 才弄明白各個(gè)設(shè)置的意思和用處, 文檔是個(gè)好東西

最后就是把option設(shè)置給 echarts實(shí)例, 是通過setOption來使用的:

myChart.setOption(option);

這個(gè)時(shí)候打開頁面其實(shí)就能看到效果了

只有一個(gè)數(shù)據(jù)

目前只有一個(gè)數(shù)據(jù)值, 接著開始啟動(dòng)模擬加載數(shù)據(jù)

// 獲取數(shù)據(jù)時(shí)間間隔 3秒
let INTERVAL_TIME = 3000;
// 模擬定時(shí)加載數(shù)據(jù)
setInterval(() => {
    // 最新時(shí)間
    let newDate = new Date();
    // 模擬獲取數(shù)據(jù)
    datas.upData.push((Math.random() * 5).toFixed(3));
    datas.downData.push((Math.random() * 5).toFixed(3));
    // 按時(shí)間間隔設(shè)置時(shí)間
    datas.date.push(newDate.getHours() + ':' + newDate.getMinutes() + ':' + newDate.getSeconds())
    // 只取8個(gè)數(shù)據(jù)
    if (datas.upData.length >= 8) {
        datas.upData.shift();
        datas.downData.shift();
        datas.date.shift();
    }
    // 設(shè)置最新數(shù)據(jù)給折線圖
    myChart.setOption({
        xAxis: [{
            data: datas.date
        },{
            data:datas.date,
            gridIndex: 1
        }],
        series: [{
            data: datas.upData
        },{
            data: datas.downData,
            xAxisIndex: 1,
            yAxisIndex: 1
        }]
    })

}, INTERVAL_TIME);

在運(yùn)行, 代碼, 就能看到數(shù)據(jù)從1個(gè)變成最多8個(gè), 并且能實(shí)時(shí)加載新數(shù)據(jù)并動(dòng)態(tài)顯示出來

靜態(tài)圖

同時(shí)也能看到分界線設(shè)置的效果(我這只是截圖, 實(shí)際是動(dòng)態(tài)顯示的)

幾點(diǎn)小提示:

• 如果你需要切換數(shù)據(jù)源, 需要先清除原來的的定時(shí)器和Echarts實(shí)例, 否則數(shù)據(jù)會(huì)出現(xiàn)混亂, 這里的timer是我給項(xiàng)目里的定時(shí)器起的名字

//  清除原有定時(shí)器
clearInterval(timer);

//  如果echat實(shí)例存在
if (myChart != null && myChart != "" && myChart != undefined) {
      //  銷毀實(shí)例
      myChart.dispose();
 }
//  基于準(zhǔn)備好的dom某宪，初始化echarts實(shí)例
myChart = echarts.init(document.getElementById(echartId))

• 最好再調(diào)用它一下的resize方法, 原因看注釋

//  用于使chart自適應(yīng)高度和寬度, 因?yàn)槌跏茧[藏的標(biāo)簽在初始化圖表的時(shí)候因?yàn)楂@取不到容器的實(shí)際高寬疚漆，可能會(huì)繪制失敗
$(window).on('resize', function () {
     myChart.resize();
 });

• 在會(huì)改變窗口大小的地方也調(diào)用一下resize()這個(gè)方法,以便能自適應(yīng).

以上來自我工作中的總結(jié)筆記, 希望對看到的人有所幫助

源碼地址: GitHub
也可以直接跳轉(zhuǎn)--->Echarts官網(wǎng)查看更多使用技巧