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