用過幾次,但是有點不長記性,為了防止長期不用又忘了,就在此做個記錄。
1、進入官網。echarts的官網地址:echarts官網地址
1.1、打開官網,進入官方實例,有很多圖表可供使用:
1.2、選擇你需要的那一款點開(此處以我最近寫的一個折線圖為例):
左邊區域是用來配置參數、修改樣式的,可以直接在網頁上修改你的數據、樣式,這樣效果比較明顯;也可以復制到你的編輯器中慢慢修改,因為網頁上的沒有保存,萬一點到該網站別的頁面,再回來你修改的代碼可能就沒了。
2、創建html文件
首先建一個html文件,寫一個div,并給一個id名,引入官方的echarts.js的文件,并另建一個js文件,也引入進來:
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網站用戶量與訪問量關系圖</title>
</head>
<body>
<div id="echartBox" style="width:1000px;height:800px"></div>
</body>
<script src="jquery-3.1.0.min.js" type="text/javascript" ></script>
<script src="echarts.min.js" type="text/javascript"></script>
<script src="siteEchart.js" type="text/javascript"></script>
</html>
3、編寫js文件,引入option
將修改好的option數據引用到剛剛新建的js文件中,引用option的關鍵就是兩步,一個是使用初始化echarts.init(),一個顯示圖表myChart.setOption(option)。代碼中的option我就隱藏了,代碼如下:
效果圖示例:
至此,一個簡單的圖表就完成了,當然中間很多樣式參數的修改我這里就沒有完善了,可以根據需要及官方api進行詳細修改。