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

時間 2020-10-05

標籤 javascript html 前端 html5 java 程序員 apache npm 後端前端工程師欄目 JavaScript 简体版

原文原文鏈接

一.背景

最近產品叫我作一些集團系列的統計圖，包括集團組織、協做、銷售、採購等方面的。做爲一名後端程序員，因而趁此機會來研究研究這個庫。javascript

若是你僅僅停留在用的層面，那仍是蠻簡單的。html

二.介紹

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

更多詳細的本身百度html5

三.使用

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

五分鐘上手文檔：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>

效果：apache

四.重要的配置項和屬性

tooltip:提示框組件npm

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>