在前一篇1.什么是echarts？中有說(shuō)到，在官網(wǎng)下載到了echarts.min.js文件，在這里會(huì)有用到。
??以前的自己總是看到想要的東西都要在各個(gè)地方搜刮一遍，年紀(jì)大了，終于知道自己想要的是什么，于是拒絕了很多的誘惑，現(xiàn)在看著網(wǎng)盤(pán)里滿(mǎn)滿(mǎn)的東西，充分理解自己逗傻不是被影響的，是本質(zhì)。勸和我一樣的童鞋們還是要有計(jì)劃地比較好，畢竟老古話(huà)就說(shuō)過(guò)，貪多嚼不爛……
因?yàn)閼校筒蛔约壕幨裁磾?shù)據(jù)了，直接拿了echarts原原本本的代碼，自己在本地試了試。但這是有理由的，畢竟拿了別人的東西實(shí)現(xiàn)的榮光不會(huì)使自己驕傲自滿(mǎn)！
請(qǐng)看代碼，不要懷疑，就是這么簡(jiǎn)單：
<!DOCTYPE html>
<html>
<head>
<title>simpledemo.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="./js/echarts.min.js"></script>
</head>
<body>
<!-- 為 ECharts 準(zhǔn)備一個(gè)具備大小（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例，如果調(diào)試代碼可以發(fā)現(xiàn)，echarts在dom里使用了canvas技術(shù)在畫(huà)圖，如果懷著逗比的心情去看源碼也可以發(fā)現(xiàn)canvas的身影（當(dāng)然可以從搜索引擎或者官方介紹知道使用了canvas）。
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
title: {
text: 'ECharts 入門(mén)示例'
},
tooltip: {},
legend: {
data:['質(zhì)量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '質(zhì)量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
結(jié)果如下圖：
關(guān)于js語(yǔ)句中json的鍵值對(duì)對(duì)應(yīng)圖表中的含義就不說(shuō)了，詳情可以參考echarts的配置項(xiàng)手冊(cè)。
