菜鸟初学Echarts
生活随笔
收集整理的這篇文章主要介紹了
菜鸟初学Echarts
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
第一次使用Echatrts，看網(wǎng)上的教程都是直接下載Echarts官網(wǎng)的源代碼，之后在網(wǎng)頁中引用，之后如何如何；
但是我之前沒有關(guān)注前端的內(nèi)容，所以是什么都不懂，于是一直都在找到底應(yīng)該怎么做；
下面這些就是我學(xué)習(xí)到的Echarts的使用方法：
【1】新建html，具體步驟如下： （1）在電腦上新建一個txt文檔； （2）修改txt文檔的內(nèi)容（就是在這個txt的文檔中寫入基本的代碼格式） （代碼格式如下：<html>???? <head>???????? <title>???????? </title>???? </head>???? <body>???? </body></html>） （在<body>與</body>之間可以加入一些文本內(nèi)容，作為你的網(wǎng)頁的內(nèi)容） （3）修改這個新建文檔的后綴名從txt到html； （系統(tǒng)是win10的話，可以百度一下，看如何修改后綴名，有效鏈接如: ?? https://jingyan.baidu.com/article/92255446a3a11d851648f48e.html）
（4)點擊修改后綴名后的新文件， ( 需要選擇打開方式，最好直接選擇Google Chrome，因為常用這個瀏覽器可以在網(wǎng)頁右上方的點點中的工具中，打開開發(fā)者模式，直接對與新建的html文件進行修改；不過直接用win10自帶的瀏覽器也可以打開這個html，看到新建的網(wǎng)頁效果，顯示出剛剛添加的文本內(nèi)容)
（1）在官網(wǎng)上下載ECharts的源代碼，并找到下載后保持這個文件的文件夾； （2）將新建的html文件移動到這個含有ECharts的源代碼的文件夾中；
（3）修改html文件的內(nèi)容，改為網(wǎng)上的例子中的內(nèi)容；示例如下：
<!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">
??????? //基于準(zhǔn)備好的dom，初始化echarts實例
??????? var myChart=echarts.init(document.getElementById('main')); //指定圖表的配置項和數(shù)據(jù)
??????? 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]
????????????? }]
????????? };
?????????
????????? //使用剛指定的配置項和數(shù)據(jù)顯示圖表
????????? 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的“...”的“更多工具”的“開發(fā)者工具”調(diào)試；
（4)修改內(nèi)容后，保存文件； （5）點擊文件，以某個瀏覽器打開后，可以看到如下效果的網(wǎng)頁內(nèi)容：
總結(jié)
以上是生活随笔為你收集整理的菜鸟初学Echarts的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： zend framework 1.5.2
- 下一篇： jQuery 教程 jQuery入门学习