系統(tǒng)了解ECharts的使用

ECharts是一款開源的統(tǒng)計(jì)圖表框架，ECharts 底層依賴 ZRender，ZRender是一個(gè)輕量級(jí)的二維繪制庫。ECharts的使用也是非常的簡單威蕉，網(wǎng)上有很多教程，這里再簡單的整理一下橄仍。

首先韧涨，echarts.min.js的引入；
可以去官網(wǎng)或github上下載合適的版本侮繁，也可以優(yōu)雅地使用npm install echarts --save命令下載虑粥，這里從github下載最新的版本4.7.0；

第二宪哩，在進(jìn)行統(tǒng)計(jì)圖的使用之前娩贷，還有一點(diǎn)非常重要，那就是主題的設(shè)置锁孟。
echarts默認(rèn)有三個(gè)主題彬祖，第一個(gè)是默認(rèn)的主題茁瘦，第二個(gè)是dark，黑色的背景储笑；第三個(gè)是light甜熔，白色的背景；統(tǒng)計(jì)圖表里的顏色突倍，有默認(rèn)值腔稀。

很多同事，包括我自己羽历，一上來就畫統(tǒng)計(jì)圖烧颖，還不知道有主題設(shè)置這一說，后面在調(diào)整統(tǒng)計(jì)圖里的色調(diào)時(shí)窄陡，費(fèi)了老大的勁了，而且越調(diào)整越不協(xié)調(diào)拆火，搞得花里胡哨的跳夭。通過設(shè)置主題可以避免這個(gè)繁瑣的環(huán)節(jié)。

先看看效果们镜，有對(duì)比币叹，才有差異；主題設(shè)置是很重要的一環(huán)模狭，選對(duì)了主題颈抚，后面就不需要手動(dòng)設(shè)置color調(diào)整顏色了，調(diào)色絕對(duì)是個(gè)費(fèi)時(shí)費(fèi)力不討好的活嚼鹉，畢竟每個(gè)人的審美觀不同贩汉。選對(duì)了主題，就不用拘于調(diào)色這種小節(jié)了锚赤，多省事匹舞。

就用餅圖，做三種主題的的區(qū)分吧线脚；

默認(rèn)主題

dark主題

light主題

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>myProject</title>
    <!-- 引入 lib/echarts.custom.min.js -->
    <script src="lib/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        // 繪制圖表赐稽。
        var pieMain = echarts.init(document.getElementById('main'),'light');//使用默認(rèn)樣式、dark浑侥、light姊舵；
        
        pieMain.setOption({
            series: {
                type: 'pie',
                data: [
                    {name: 'A', value: 1212},
                    {name: 'B', value: 2323},
                    {name: 'C', value: 1919}
                ]
            }
        });
    </script>
</body>
</html>

這三種主題，如果都不滿意寓落，那么可以通過 ECharts主題定制自定義主題括丁，這些主題，有主色調(diào)零如，媚而不妖躏将，太耐看了锄弱。

      //設(shè)置主題
        $.getJSON('lib/wonderland.json', function (themeJSON) {
            echarts.registerTheme('wonderland',themeJSON)
            var chart = echarts.init(document.getElementById('main'), 'wonderland');
            chart.setOption({
                series: {
                    type: 'pie',
                    data: [
                        {name: 'A', value: 1212},
                        {name: 'B', value: 2323},
                        {name: 'C', value: 1919},
                        {name: 'D', value: 1719},
                        {name: 'E', value: 1519}
                    ]
                }
            });
        });

自定義主題效果圖-夢(mèng)幻仙境

echarts的js文件有三個(gè)，需要注意一下祸憋，echarts.js體積最大会宪，包含所有的圖表和組件；echarts.common.js蚯窥，體積適中掸鹅，包含常見的圖表和組件；echarts.simple.js拦赠，體積較小巍沙，僅包含最常用的圖表和組件；

做數(shù)據(jù)統(tǒng)計(jì)的目的荷鼠，是讓數(shù)據(jù)說話句携，不用看繁多的數(shù)據(jù)記錄，通過一個(gè)圖表簡單明了地把數(shù)據(jù)的趨勢允乐、歷史曲線展現(xiàn)出來矮嫉。既然如此，每個(gè)統(tǒng)計(jì)圖表都有其特別的用途牍疏，每個(gè)圖的用途不同蠢笋，關(guān)注點(diǎn)自然也不同。

在ECharts中有多少統(tǒng)計(jì)圖形呢鳞陨，請(qǐng)看下圖昨寞，仔細(xì)數(shù)一數(shù)，有二十多種厦滤，這還是單一的援岩，不算復(fù)合的。

圖表chart

除了圖表馁害，還有坐標(biāo)系窄俏；

坐標(biāo)系

組件也是很重要的一環(huán)，錦上添花的小物件碘菜；

組件

折線圖凹蜈，用線條的升降表示事物的發(fā)展變化趨勢；

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>myProject</title>
    <script src="lib/jquery.min.js"></script>   
    <script src="lib/echarts.min.js"></script>
    <!--以引用的方式調(diào)用theme,必須放置echarts文件后-->
    <script src="lib/wonderland.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        var chart = echarts.init(document.getElementById('main'), 'wonderland');            
        var option = {
            legend: {
                left: 'center',
                top: 'top'
            },
            dataset: {
                // 提供一份數(shù)據(jù)忍啸。
                source: [
                    ['product', '橘子', '桃子', '蘋果', '西瓜'],
                    ['2012', 43.3, 85.8, 93.7, 65.8],
                    ['2013', 83.1, 73.4, 55.1, 83.4,],
                    ['2014', 86.4, 65.2, 82.5, 75.2,],
                    ['2015', 72.4, 53.9, 39.1, 63.9,]
                ]
            },
            xAxis: {
                type: 'category'
            },
            yAxis: {
                type: 'value',
            },
            series: [
                {type: 'line'},{type: 'line'},{type: 'line'},{type: 'line'}
            ]
        };      
        chart.setOption(option);
    </script>
</body>
</html>

折線效果圖

餅圖仰坦，以一個(gè)圓的面積表示總體，用扇形的面積表示部分在總體中所占的百分比计雌；展示部分與總體的關(guān)系悄晃，部分相對(duì)于總數(shù)的大小。上面已有例子，這里忽略妈橄。

柱形圖庶近，條圖，也是很常用的統(tǒng)計(jì)圖眷蚓，現(xiàn)在柱形圖的展示方式也多了花樣鼻种；

        var chart = echarts.init(document.getElementById('main'), 'wonderland');
        var option = {
            legend: {},
            tooltip: {},
            dataset: {
                source: [
                    ['product', '2012', '2013', '2014', '2015'],
                    ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
                    ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
                    ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
                ]
            },
            xAxis: [
                {type: 'category', gridIndex: 0},
                {type: 'category', gridIndex: 1}
            ],
            yAxis: [
                {gridIndex: 0},
                {gridIndex: 1}
            ],
            grid: [
                {bottom: '55%'},
                {top: '55%'}
            ],
            series: [
                // 這幾個(gè)系列會(huì)在第一個(gè)直角坐標(biāo)系中，每個(gè)系列對(duì)應(yīng)到 dataset 的每一行沙热。
                {type: 'bar', seriesLayoutBy: 'row'},
                {type: 'bar', seriesLayoutBy: 'row'},
                {type: 'bar', seriesLayoutBy: 'row'},
                // 這幾個(gè)系列會(huì)在第二個(gè)直角坐標(biāo)系中叉钥，每個(gè)系列對(duì)應(yīng)到 dataset 的每一列。
                {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
                {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
                {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
                {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
            ]
        }
        chart.setOption(option);

多坐標(biāo)多系列

餅圖和折線圖的完美結(jié)合篙贸；

var chart = echarts.init(document.getElementById('main'), 'wonderland');
        var option = {
                legend: {},
                tooltip: {
                    trigger: 'axis',
                    showContent: false
                },
                dataset: {
                    source: [
                        ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                        ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                        ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                        ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                        ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
                    ]
                },
                xAxis: {type: 'category'},
                yAxis: {gridIndex: 0},
                grid: {top: '55%'},
                series: [
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                    {
                        type: 'pie',
                        id: 'pie',
                        radius: '30%',
                        center: ['50%', '25%'],
                        label: {
                            formatter: '投队: {@2012} (iwdld7r%)'
                        },
                        encode: {
                            itemName: 'product',
                            value: '2012',
                            tooltip: '2012'
                        }
                    }
                ]
            };

            chart.on('updateAxisPointer', function (event) {
                var xAxisInfo = event.axesInfo[0];
                if (xAxisInfo) {
                    var dimension = xAxisInfo.value + 1;
                    chart.setOption({
                        series: {
                            id: 'pie',
                            label: {
                                formatter: ': {@[' + dimension + ']} (2koryx3%)'
                            },
                            encode: {
                                value: dimension,
                                tooltip: dimension
                            }
                        }
                    });
                }
            });
        chart.setOption(option);

餅圖與折線的完美組合

基礎(chǔ)概念一覽
echarts 實(shí)例爵川，一個(gè)網(wǎng)頁中可以有多個(gè)實(shí)例敷鸦；
系列（series），一個(gè)實(shí)例里有多個(gè)系列寝贡，每個(gè)系列的type可以是line（折線圖）轧膘、bar（柱狀圖）、pie（餅圖）兔甘、scatter（散點(diǎn)圖）、graph（關(guān)系圖）鳞滨、tree（樹圖）等其中的一種洞焙；
組件（component）：xAxis（直角坐標(biāo)系 X 軸）、yAxis（直角坐標(biāo)系 Y 軸）拯啦、grid（直角坐標(biāo)系底板）澡匪、angleAxis（極坐標(biāo)系角度軸）、radiusAxis（極坐標(biāo)系半徑軸）褒链、polar（極坐標(biāo)系底板）唁情、geo（地理坐標(biāo)系）、dataZoom（數(shù)據(jù)區(qū)縮放組件）甫匹、visualMap（視覺映射組件）甸鸟、tooltip（提示框組件）、toolbox（工具欄組件）兵迅、series（系列）這些都屬于組件抢韭；
option 描述圖表：有什么數(shù)據(jù)、要畫什么圖表恍箭、圖表長什么樣子刻恭、含有什么組件、組件能操作什么事情等等扯夭。簡而言之鳍贾，option 表述了：數(shù)據(jù)鞍匾、數(shù)據(jù)如何映射成圖形、交互行為骑科。
組件之間的定位需要靠坐標(biāo)系橡淑，坐標(biāo)系又有直角坐標(biāo)系（grid）、極坐標(biāo)系(polar)纵散、地理坐標(biāo)系（GEO）梳码、單軸坐標(biāo)系(singleAxis)、日歷坐標(biāo)系(calendar)伍掀；

一句話的概括：
一個(gè)頁面上可以有多個(gè)echarts 實(shí)例掰茶，一個(gè)echarts 實(shí)例中包含多個(gè)系列（series），系列需要運(yùn)行在坐標(biāo)系上蜜笤，還有零零碎碎的很多組件（component）濒蒋，系列、組件都被裝在option容器里面把兔，通過最后的設(shè)置option沪伙，就渲染成了圖表。

更多精彩县好，請(qǐng)參考以下文檔
github下載地址：https://github.com/apache/incubator-echarts/releases
EChats下載地址：https://echarts.apache.org/zh/download.html
EChats文檔：https://echarts.apache.org/zh/tutorial.html
主題的設(shè)定：https://echarts.baidu.com/theme-builder/
官網(wǎng)： https://echarts.baidu.com/index.html
常見問題： https://www.echartsjs.com/zh/faq.html
菜鳥教程： https://www.runoob.com/echarts/echarts-tutorial.html
統(tǒng)計(jì)效果實(shí)現(xiàn)的參考： http://www.zi-han.net/theme/hplus/