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.