前端学习（二）Echarts入门——html实现简单echarts图例
前一篇文章，我們已經(jīng)將echarts的js文件導(dǎo)入到我們的項(xiàng)目中。現(xiàn)在，我們就開(kāi)始來(lái)具體實(shí)現(xiàn)一下如何在html中插入我們的ecahrts圖。
首先，我們可以去ecahrts官網(wǎng)找?guī)讉€(gè)例圖。
官網(wǎng)地址：https://echarts.baidu.com/
選擇實(shí)例——官方實(shí)例
在官方實(shí)例中我們選取一個(gè)折線圖來(lái)繪制。
我們找到代碼，直接復(fù)制到我們的html中是不可以的。
我們還需要進(jìn)行下面的幾個(gè)步驟。
1.我們的ecahrts圖是寫在script標(biāo)簽中的。所以，在body標(biāo)簽外面寫一個(gè)script標(biāo)簽來(lái)容納我們的echarts。
2.我們需要對(duì)我們的echarts進(jìn)行聲明變量，通過(guò)下面這條語(yǔ)句
var myChart = echarts.init(document.getElementById('chart'));```3.我們需要聲明實(shí)例對(duì)象
var options = {..........}4.最后一條最重要的是不要忘了，最后寫一句
myChart.setOption(options);這條語(yǔ)句是讓我們的ecahrts圖顯示出來(lái)。
ok了，下面我們來(lái)看一下效果以及完整代碼。
完整代碼（echarts圖中有很多參數(shù)是可以按照個(gè)人愛(ài)好以及圖的要求來(lái)修改的，更多內(nèi)容后續(xù)會(huì)不定時(shí)更新！感謝大家支持！）：
總結(jié)
以上是生活随笔為你收集整理的前端学习（二）Echarts入门——html实现简单echarts图例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 收银软件哪家强？2023年收银软件排行榜
- 下一篇： HTML5 svg 模糊,html5 –