前段一直是我的短板, 没有太多机会系统学习. 最近想做一个股票分析系统的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>
网页更新如下. 接上个数据的后端就可以显示不同的数据了.
