系统了解ECharts的使用

作者: 程就人生 | 来源:发表于2020-04-01 19:01 被阅读0次

ECharts是一款开源的统计图表框架，ECharts 底层依赖 ZRender，ZRender是一个轻量级的二维绘制库。ECharts的使用也是非常的简单，网上有很多教程，这里再简单的整理一下。

首先，echarts.min.js的引入；
可以去官网或github上下载合适的版本，也可以优雅地使用npm install echarts --save命令下载，这里从github下载最新的版本4.7.0；

第二，在进行统计图的使用之前，还有一点非常重要，那就是主题的设置。
echarts默认有三个主题，第一个是默认的主题，第二个是dark，黑色的背景；第三个是light，白色的背景；统计图表里的颜色，有默认值。

很多同事，包括我自己，一上来就画统计图，还不知道有主题设置这一说，后面在调整统计图里的色调时，费了老大的劲了，而且越调整越不协调，搞得花里胡哨的。通过设置主题可以避免这个繁琐的环节。

先看看效果，有对比，才有差异；主题设置是很重要的一环，选对了主题，后面就不需要手动设置color调整颜色了，调色绝对是个费时费力不讨好的活，毕竟每个人的审美观不同。选对了主题，就不用拘于调色这种小节了，多省事。

就用饼图，做三种主题的的区分吧；

默认主题

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');//使用默认样式、dark、light；
        
        pieMain.setOption({
            series: {
                type: 'pie',
                data: [
                    {name: 'A', value: 1212},
                    {name: 'B', value: 2323},
                    {name: 'C', value: 1919}
                ]
            }
        });
    </script>
</body>
</html>

这三种主题，如果都不满意，那么可以通过 ECharts主题定制自定义主题，这些主题，有主色调，媚而不妖，太耐看了。

      //设置主题
        $.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}
                    ]
                }
            });
        });

自定义主题效果图-梦幻仙境

echarts的js文件有三个，需要注意一下，echarts.js体积最大，包含所有的图表和组件；echarts.common.js，体积适中，包含常见的图表和组件；echarts.simple.js，体积较小，仅包含最常用的图表和组件；

做数据统计的目的，是让数据说话，不用看繁多的数据记录，通过一个图表简单明了地把数据的趋势、历史曲线展现出来。既然如此，每个统计图表都有其特别的用途，每个图的用途不同，关注点自然也不同。

在ECharts中有多少统计图形呢，请看下图，仔细数一数，有二十多种，这还是单一的，不算复合的。

图表chart

除了图表，还有坐标系；

坐标系

组件也是很重要的一环，锦上添花的小物件；

组件

折线图，用线条的升降表示事物的发展变化趋势；

<!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>
    <!--以引用的方式调用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: {
                // 提供一份数据。
                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>

折线效果图

饼图，以一个圆的面积表示总体，用扇形的面积表示部分在总体中所占的百分比；展示部分与总体的关系，部分相对于总数的大小。上面已有例子，这里忽略。

柱形图，条图，也是很常用的统计图，现在柱形图的展示方式也多了花样；

        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: [
                // 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
                {type: 'bar', seriesLayoutBy: 'row'},
                {type: 'bar', seriesLayoutBy: 'row'},
                {type: 'bar', seriesLayoutBy: 'row'},
                // 这几个系列会在第二个直角坐标系中，每个系列对应到 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);

多坐标多系列

饼图和折线图的完美结合；

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: '{b}: {@2012} ({d}%)'
                        },
                        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: '{b}: {@[' + dimension + ']} ({d}%)'
                            },
                            encode: {
                                value: dimension,
                                tooltip: dimension
                            }
                        }
                    });
                }
            });
        chart.setOption(option);

饼图与折线的完美组合

基础概念一览
echarts 实例，一个网页中可以有多个实例；
系列（series），一个实例里有多个系列，每个系列的type可以是line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）等其中的一种；
组件（component）：xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）这些都属于组件；
option 描述图表：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为。
组件之间的定位需要靠坐标系，坐标系又有直角坐标系（grid）、极坐标系(polar)、地理坐标系（GEO）、单轴坐标系(singleAxis)、日历坐标系(calendar)；

一句话的概括：
一个页面上可以有多个echarts 实例，一个echarts 实例中包含多个系列（series），系列需要运行在坐标系上，还有零零碎碎的很多组件（component），系列、组件都被装在option容器里面，通过最后的设置option，就渲染成了图表。

更多精彩，请参考以下文档
github下载地址：https://github.com/apache/incubator-echarts/releases
EChats下载地址：https://echarts.apache.org/zh/download.html
EChats文档：https://echarts.apache.org/zh/tutorial.html
主题的设定：https://echarts.baidu.com/theme-builder/
官网： https://echarts.baidu.com/index.html
常见问题： https://www.echartsjs.com/zh/faq.html
菜鸟教程： https://www.runoob.com/echarts/echarts-tutorial.html
统计效果实现的参考： http://www.zi-han.net/theme/hplus/

系统了解ECharts的使用

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

简友广场