最近在做各種排行榜的視訊，整體排行榜的頁面圖形效果都是用另外一個開原始碼實現的，主體是js+svg。

https://www.bilibili.com/video/av28871057/

echarts作為封裝很好的一套視覺化庫，不知道是否能做到相同的事情呢？

生產條形圖

最開始的準備還是挺簡單的

引入jquery和echarts

    <!-- 引入jquery -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.js"></script>
 

echarts官網教程上有一個簡單的入門示例，就從這裡入手吧

http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

稍微囉嗦點兒說一下內容

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

這就是畫圖的容器

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

這裡init圖表物件的時候只要能通過各種方法找到這個容器就行

var option

就是設定各種屬性

myChart.setOption(option);

這裡才是正式繪圖

這裡直接拷貝下來存個網頁檔案，開啟就能看到一個柱形圖了

排行榜的話通常都是條形圖

怎麼變條形圖呢

圖形的配置是series中的type指定的

echarts裡面條形圖和柱形圖都是bar

區分條形圖和柱形圖只是看你的分類是放在x軸還是y軸

原始程式碼裡面是放在x軸的，所以看到的效果就是柱形圖

xAxis: {
    data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {
}

把x軸的內容拷貝到y軸，是不是就變條形圖了

xAxis: {
},
yAxis: {
    data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
}

另外一個細節就是順序問題

配置裡面的data是從襯衫到襪子，但是圖形上的分類是襪子到襯衫，把整個排序倒過來了一下，不知道echarts為什麼會這樣設定，看起來很反常識

想要解決這個問題，就在軸的配置裡面增加一個反向座標軸的配置

inverse: true

這個配置預設是false

使用DateSet

http://echarts.baidu.com/tutorial.html#%E4%BD%BF%E7%94%A8%20dataset%20%E7%AE%A1%E7%90%86%E6%95%B0%E6%8D%AE

Echarts提供了DataSet的形式來管理資料，可以讓資料組織更靈活，同一份資料可以各種圖表公用，你用這些欄位，我用那些欄位

比如我這裡用的資料有六個欄位

[
    {
        "id": "10163",
        "item": "MAC",
        "value": 55327,
        "rank": 3,
        "trend": "down",
        "occupy": "60.99"
    },
    {
        "id": "19492",
        "item": "REFA",
        "value": 24201,
        "rank": 7,
        "trend": "up",
        "occupy": "26.68"
    },
    {
        "id": "10252",
        "item": "RAY",
        "value": 23324,
        "rank": 8,
        "trend": "down",
        "occupy": "25.71"
    }
]

我這個條形圖的dataset裡面配置

dimensions: ['item', 'value']

任資料有多少欄位，我只用這兩個，第一個是分類，後面是值

再用source把上面整個資料集合提供就OK了

使用非同步更新

http://echarts.baidu.com/tutorial.html#%E5%BC%82%E6%AD%A5%E6%95%B0%E6%8D%AE%E5%8A%A0%E8%BD%BD%E5%92%8C%E6%9B%B4%E6%96%B0

上面的例子實際上資料是跟配置放在一起的，我們如果想讓圖進行更新，重新繪圖肯定是個笨辦法，echarts提供了非同步更新的概念

說白了實際就是更新圖的option

echarts的option在set的時候是部分更新的，更新時組織的option可以只寫一部分內容，set的時候會在內部進行合併

所以我們只需要更新資料部分就可以了

myChart.setOption({
    dataset: {
        dimensions: ['item', 'value'],
        // allData是之前定義好的資料集合
        source: allData[count]
    }
});

迴圈更新資料讓圖動起來

使用setInterval來啟動一個週期呼叫的效果

每次呼叫獲取新的資料，組織一個只包含dataset的option然後給圖形物件set進去

完成

相關原始碼和樣例資料都在這裡

https://github.com/cowcomic/echarts_example

還有兩個內容沒進行嘗試，等嘗試成功再來簡單說明說明

一個是不同的分類設定不同顏色，看介面應該是提供了這樣的功能

第二個是現在這個資料更新的很僵硬，沒有動態的效果，想增加上視訊中那種動態效果，從介面上沒找到相應的方法，也許是現在還不支援吧