菜鳥初學Echarts
阿新 • • 發佈：2019-02-01
第一次使用Echatrts，看網上的教程都是直接下載Echarts官網的原始碼，之後在網頁中引用，之後如何如何；
但是我之前沒有關注前端的內容，所以是什麼都不懂，於是一直都在找到底應該怎麼做；下面這些就是我學習到的Echarts的使用方法：【1】新建html，具體步驟如下：（1）在電腦上新建一個txt文件；（2）修改txt文件的內容（就是在這個txt的文件中寫入基本的程式碼格式） （程式碼格式如下：<html> <head> <title> </title> </head> <body> </body></html>（4)點選修改後綴名後的新檔案， ( 需要選擇開啟方式，最好直接選擇Google Chrome，因為常用這個瀏覽器可以在網頁右上方的點點中的工具中，開啟開發者模式，直接對與新建的html檔案進行修改；不過直接用win10自帶的瀏覽器也可以開啟這個html，看到新建的網頁效果，顯示出剛剛新增的文字內容)【2】應用ECharts（1）在官網上下載ECharts的原始碼，並找到下載後保持這個檔案的資料夾；（2）將新建的html檔案移動到這個含有ECharts的原始碼的資料夾中；（3）修改html檔案的內容，改為網上的例子中的內容；示例如下：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--include ECharts document-->
<script src="echarts.js"></script>
<title>
ECharts de Hello World
</title>
</head><body>
<!--prepare a DOM with size for ECharts-->
<div id="main" style="width: 600px;height: 400px;"></div>
<div id="main2" style="width: 600px;height: 400px;"></div> <script type="text/javascript">
//基於準備好的dom，初始化echarts例項
var myChart=echarts.init(document.getElementById('main')); //指定圖表的配置項和資料
var option={
title:{
text:'Echarts New Try'
},
tooltip:{},
legend:{
data:['Sold Amount']
},
xAxis:{
data:["shirt","skirt","coat","pants","shoes"]
},
yAxis:{},
series:[{
name:'Sold Number',
type:'bar',
data:[5,20,36,10,10]
}]
};
//使用剛指定的配置項和資料顯示圖表
myChart.setOption(option);
</script>
</body>
</html> (參考連結1：https://jingyan.baidu.com/article/acf728fd6c09baf8e510a3a9.html 2：https://www.cnblogs.com/bricyang/p/6733671.html) 【注意：】 （1）很有可能檔案最後的編碼顯示是不支援中文的，我暫時是直接用英文來替換達到目的； （2）請注意使用英文的符號； （3）可以用Google Chrome的“...”的“更多工具”的“開發者工具”除錯；（4)修改內容後，儲存檔案；（5）點選檔案，以某個瀏覽器開啟後，可以看到如下效果的網頁內容：
