在前一篇1.什么是echarts？中有說到，在官網(wǎng)下載到了echarts.min.js文件，在這里會有用到。
??以前的自己總是看到想要的東西都要在各個地方搜刮一遍，年紀大了，終于知道自己想要的是什么，于是拒絕了很多的誘惑，現(xiàn)在看著網(wǎng)盤里滿滿的東西，充分理解自己逗傻不是被影響的，是本質(zhì)。勸和我一樣的童鞋們還是要有計劃地比較好，畢竟老古話就說過，貪多嚼不爛……
因為懶，就不自己編什么數(shù)據(jù)了，直接拿了echarts原原本本的代碼，自己在本地試了試。但這是有理由的，畢竟拿了別人的東西實現(xià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 準備一個具備大?。▽捀撸┑?DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準備好的dom，初始化echarts實例，如果調(diào)試代碼可以發(fā)現(xiàn)，echarts在dom里使用了canvas技術(shù)在畫圖，如果懷著逗比的心情去看源碼也可以發(fā)現(xiàn)canvas的身影（當然可以從搜索引擎或者官方介紹知道使用了canvas）。
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數(shù)據(jù)
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['質(zhì)量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '質(zhì)量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
結(jié)果如下圖：
關(guān)于js語句中json的鍵值對對應(yīng)圖表中的含義就不說了，詳情可以參考echarts的配置項手冊。
