Echarts 是一個(gè)強(qiáng)大的數(shù)據(jù)可視化庫(kù),可以用于生成各種類型的圖表,如折線圖、餅圖、柱狀圖等。很多新手在使用 Echarts 時(shí)會(huì)問:Echarts 需要 jQuery 嗎?
答案是:不是必須的,但是使用 jQuery 可以方便地操作 DOM,從而更加方便地實(shí)現(xiàn) Echarts 的各種功能。
下面是一個(gè)簡(jiǎn)單的例子,展示了如何使用 Echarts 和 jQuery 在頁(yè)面中渲染一個(gè)柱狀圖:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Echarts 練習(xí)</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 800px;height:400px;"></div>
<script>
// 基于準(zhǔn)備好的dom,初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('chart'));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'bar'
}]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
上面的代碼中,我們引入了 jQuery 和 Echarts 的 JavaScript 庫(kù),并在頁(yè)面中創(chuàng)建了一個(gè) div 元素來承載圖表,然后使用 jQuery 獲取該元素,創(chuàng)建了一個(gè) Echarts 實(shí)例,并指定了柱狀圖的配置項(xiàng)和數(shù)據(jù),最后使用 setOption 方法將圖表渲染到頁(yè)面上。
因此,雖然 Echarts 不需要 jQuery,但是使用 jQuery 可以方便地操作 DOM,從而使 Echarts 的使用更加簡(jiǎn)單方便。
上一篇mysql中命名
下一篇echo jQuery