這篇文章主要講解了“ECharts怎么實現(xiàn)柱狀圖”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“ECharts怎么實現(xiàn)柱狀圖”吧!
網(wǎng)站建設(shè)哪家好,找成都創(chuàng)新互聯(lián)!專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了吉隆免費建站歡迎大家使用!
//1、引入JS文件
.box {
width: 400px;
height: 400px;
background-color: pink;
}
// 3.初始化echarts實例對象
var myChart = echarts.init(document.querySelector('.box'));
// 4.指定圖表的配置項和數(shù)據(jù)
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data: ['銷量']
},
xAxis: {
data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 5.使用剛指定的配置項和數(shù)據(jù)顯示圖表 設(shè)置給 實例對象。
myChart.setOption(option);
// 當(dāng)我們?yōu)g覽器縮放的時候,圖表也等比例縮放
window.addEventListener("resize", function () {
// 讓我們的圖表調(diào)用 resize這個方法
myChart.resize();
});
面試題
一、DOM0級和DOM2級有什么區(qū)別
DOM0級中為某個dom元素綁定多個事件時,只有最后一個事件有效。onclick
DOM2級中可以為單個元素綁定多個事件,每個事件都可以被觸發(fā)。addEventListener
二、textContent、innerText、innnerHTML、value的區(qū)別
textContent用來獲取和設(shè)置文本內(nèi)容,與innerText的差別是:textContent獲取到的內(nèi)容包
括了元素中的style標(biāo)簽和script標(biāo)簽的內(nèi)容。
innerText只能獲取和設(shè)置文本內(nèi)容,不能獲取和設(shè)置html代碼
innerHTML可以獲取和設(shè)置html代碼
感謝各位的閱讀,以上就是“ECharts怎么實現(xiàn)柱狀圖”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對ECharts怎么實現(xiàn)柱狀圖這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!