ECharts快速上手

前段一直是我的短板, 没有太多机会系统学习. 最近想做一个股票分析系统的webapp, 于是就在网上找合适的javascript library做data visualization. D3.js以前用过, 觉得太过底层, 写起来太麻烦. 于是发现了ECharts, 好像是国内大神写得, 已经是Apache project, 非常厉害. 于是follow了这个tutorial. 里面有些小细节我觉得初学者可能会卡住, 这里我写得详细一点.

安装npm

npm是node package manager的意思, 是用了管理安装javascript libraries的. 相当于Python里的pip. 安装可以看我前面的文章.

安装ECharts

首先给项目建立一个新的directory

% mkdir test_echart
% cd test_echart

在项目directory里安装echarts library

npm install echarts --save

完成后directory里会有那么几个东西

% ls
package-lock.json
node_modules/		package.json

开始Coding

在项目directory里面添加一个html file叫main.html, 内容如下调用echart

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- including ECharts file -->
    <script src="node_modules/echarts/dist/echarts.min.js"></script>
</head>

<body>
    <!-- preparing a DOM with width and height for ECharts -->
    <div id="main" style="width:600px; height:400px;"></div>
</body>

<script type="text/javascript">
        // based on prepared DOM, initialize echarts instance
        var myChart = echarts.init(document.getElementById('main'));

        // specify chart configuration item and data
        var option = {
            title: {
                text: 'ECharts entry example'
            },
            tooltip: {},
            legend: {
                data:['Sales']
            },
            xAxis: {
                data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
            },
            yAxis: {},
            series: [{
                name: 'Sales',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // use configuration item and data specified to show chart
        myChart.setOption(option);
    </script>
</html>

header里面的这行相当于Python的import

    <script src="node_modules/echarts/dist/echarts.min.js"></script>

现在directory内容如下

% ls
main.html		package-lock.json
node_modules/		package.json

用浏览器打开main.html. 在Mac里可以在terminal里用

% open main.html

网页显示如下, 还是挺酷的.

简单看看js code, option就是一个json object, 里面包含了图的一些信息和data. 一开始init了一个echarts object, 然后给它set一下option这个json object. 和d3比起来还是简单多了.

        var myChart = echarts.init(document.getElementById('main'));
        
        var option = {
            // json object
        };

        myChart.setOption(option);

我把数据改一改, 就可以显示一些投资标的的市值了

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- including ECharts file -->
    <script src="node_modules/echarts/dist/echarts.min.js"></script>
</head>

<body>
    <!-- preparing a DOM with width and height for ECharts -->
    <div id="main" style="width:1000px; height:400px;"></div>
</body>

<script type="text/javascript">
        // based on prepared DOM, initialize echarts instance
        var myChart = echarts.init(document.getElementById('main'));

        // specify chart configuration item and data
        var option = {
            title: {
                text: 'Market Caps'
            },
            tooltip: {},
            legend: {
                data:['Sales']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: 'Sales',
                type: 'bar',
                data: []
            }]
        };

        const MARKET_CAP = 'market cap';
        var legends = [MARKET_CAP];
        var symbols = ['AAPL', 'GOOGL', 'FB', 'AMZN', 'NVDA', 'NFLX', 'TSLA', 'BTC', 'ETH', 'V', 'MA']
        var marketCaps = [2256, 1185, 778, 1634, 323, 238, 669, 622, 109, 482, 356];

        option.legend.data = legends;
        option.xAxis.data = symbols;
        option.series[0].data = marketCaps;	
        option.series[0].name = MARKET_CAP;	

        // use configuration item and data specified to show chart
        myChart.setOption(option);
    </script>
</html>

网页更新如下. 接上个数据的后端就可以显示不同的数据了.

Leave a Reply

Your email address will not be published. Required fields are marked *