ECharts系列:玩轉ECharts之常用圖（折線、柱狀、餅狀、散點、關係、樹）

IT技術派發表於2020-10-04
Echarts

一.背景

最近產品叫我做一些集團系列的統計圖，包括集團組織、協作、銷售、採購等方面的。作為一名後端程式設計師，於是趁此機會來研究研究這個庫。

如果你僅僅停留在用的層面，那還是蠻簡單的。

二.介紹

ECharts，縮寫來自Enterprise Charts，商業級資料圖表，它最初是為了滿足公司商業體系裡各種業務系統（如鳳巢、廣告管家等等）的報表需求。以前這些系統的圖表需求我們都是使用flash去實現的，百度分工很細，有專門的flash組同學去做這個事情，這就不可避免多了一個溝通環節，作為前端工程師無法獨立掌控，不管是資料介面的設計，個性化的需求都得溝通商定。而且一個系統內會有很多個flash在不同場景下出現，他們並沒有實現通用。加上喬幫主不讓i系列上執行flash以及html5的火熱，我們需要尋求一個解決方案。於是在2012年初，當時還是鳳巢前端技術負責人的Kener-林峰在鳳巢資料平臺專案中嘗試使用Canvas去做圖表，他寫了一個全新的輕量級Canvas類庫ZRender，那可以說是ECharts的原型，雖然跟現在已經相去十萬八千里了。

更多詳細的自己百度

三.使用

當拿到一到框架或者一個需求的時候，不要著急動手，先看文件或者理解需求

五分鐘上手文件：https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="main" style="width: 600px;height:400px;"></div>
        <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
        <script type="text/javascript">
            // 基於準備好的dom，初始化echarts例項
            var myChart = echarts.init(document.getElementById('main'));

            // 指定圖表的配置項和資料
            var option = {
                title: {
                    text: 'ECharts 入門示例'
                },
                tooltip: {},
                legend: {
                    data: ['銷量']
                },
                xAxis: {
                    data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
                },
                yAxis: {},
                series: [{
                    name: '銷量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };

            // 使用剛指定的配置項和資料顯示圖表。
            myChart.setOption(option);
        </script>

    </body>
</html>

效果：

四.重要的配置項和屬性

tooltip:提示框元件

legend:圖例元件,展現了不同系列的標記(symbol)，顏色和名字。可以通過點選圖例控制哪些系列不顯示。

xAxis:直角座標系 grid 中的 x 軸，一般情況下單個 grid 元件最多隻能放上下兩個 x 軸，多於兩個 x 軸需要通過配置 offset 屬性防止同個位置多個 x 軸的重疊。

yAxis:直角座標系 grid 中的 y 軸，一般情況下單個 grid 元件最多隻能放左右兩個 y 軸，多於兩個 y 軸需要通過配置 offset 屬性防止同個位置多個 Y 軸的重疊。

series:系列列表。每個系列通過 type 決定自己的圖表型別

formatter：顯示的格式器

取個例子：我們公司一個統計集團下的供應商釋出的產品和本公司釋出在同行的產品，要用echarts的正負柱狀圖，如何去實現正數顯示在柱子上面，負數顯示在柱子下面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="main" style="width: 600px; height: 400px;"></div>
        <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
        <script>            
            var myChart = echarts.init(document.querySelector('#main'));

            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 座標軸指示器，座標軸觸發有效
                        type: 'shadow' // 預設為直線，可選為：'line' | 'shadow'
                    },
                     formatter: (params) => {
                        if (!params.length) return ''
                        let s = params[0].axisValueLabel + '<br/>'
                        for (const iterator of params) {
                           // 如果是負數則反轉
                          let d = iterator.data < 0 ? -iterator.data : iterator.data
                          s += iterator.marker + iterator.seriesName + '：' + d  + '<br/>'
                        }
                        return s
                      }
                },
                legend: {
                    data: ['准入在售產品數', '釋出在售產品數']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'value',
                     axisLabel: {
                             formatter: (value) => {
                            // 負數取反 顯示的就是正數了
                               if (value < 0) return -value
                            else return value
                             }
                        }
                }],
                yAxis: [{
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    data: ['公司1', '公司2', '公司2']
                }],
                series: [
                    {
                        name: '准入在售產品數',
                        type: 'bar',
                        stack: '總量',
                        label: {
                            show: true
                        },
                        data: [320, 302, 341]
                    },
                    {
                        name: '釋出在售產品數',
                        type: 'bar',
                        stack: '總量',
                        label: {
                            show: true,
                            position: 'left',
                            formatter: (value) => {
                                    // 值都是負數的 所以需要取反一下
                                    return -value.data
                                   }
                        },
                        data: [-120, -132, -101]
                    }
                ]
            };
            
            myChart.setOption(option);
        </script>
    </body>
</html>

效果：

 

相關文章