ECharts快速上手

ECharts快速上手

January 3, 2021 0 Comments

Uncategorized

前段一直是我的短板, 没有太多机会系统学习. 最近想做一个股票分析系统的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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<script src="node_modules/echarts/dist/echarts.min.js"></script>
<script src="node_modules/echarts/dist/echarts.min.js"></script>
    <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比起来还是简单多了.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
var myChart = echarts.init(document.getElementById('main'));
var option = {
// json object
};
myChart.setOption(option);
var myChart = echarts.init(document.getElementById('main')); var option = { // json object }; myChart.setOption(option);
        var myChart = echarts.init(document.getElementById('main'));
        
        var option = {
            // json object
        };

        myChart.setOption(option);

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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>

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

Related Posts

Leave a Comment

Your email address will not be published.