建站
咨詢
售后
建站咨詢
新聞中心
jQuery雙縱軸圖表是一種常見(jiàn)的數(shù)據(jù)可視化方式，它可以在一個(gè)圖表中展示兩個(gè)不同的數(shù)據(jù)集，每個(gè)數(shù)據(jù)集都有自己的坐標(biāo)軸，這種圖表可以讓我們更直觀地比較和分析兩個(gè)數(shù)據(jù)集之間的關(guān)系，在本文中，我們將詳細(xì)介紹如何使用jQuery制作雙縱軸圖表。
為渭南等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及渭南網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、渭南網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！
1、準(zhǔn)備工作
在開(kāi)始制作雙縱軸圖表之前，我們需要先準(zhǔn)備一些必要的資源和工具：
jQuery庫(kù)：我們需要在項(xiàng)目中引入jQuery庫(kù)，你可以從官方網(wǎng)站下載jQuery庫(kù)，或者使用CDN鏈接引入。
ECharts庫(kù)：ECharts是一個(gè)基于JavaScript的開(kāi)源可視化庫(kù)，它提供了豐富的圖表類(lèi)型和強(qiáng)大的功能，我們需要引入ECharts庫(kù)來(lái)制作雙縱軸圖表。
HTML結(jié)構(gòu)：我們需要?jiǎng)?chuàng)建一個(gè)HTML容器來(lái)放置圖表。
2、初始化ECharts實(shí)例
接下來(lái)，我們需要初始化一個(gè)ECharts實(shí)例，并將其綁定到剛才創(chuàng)建的HTML容器上，我們還需要設(shè)置圖表的寬度、高度和背景顏色。
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: {
text: '雙縱軸圖表示例'
},
tooltip: {},
legend: {
data:['銷(xiāo)量']
},
xAxis: {
data: ['襯衫','羊毛衫','雪紡衫','褲子','高跟鞋','襪子']
},
yAxis: {},
series: [{
name: '銷(xiāo)量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
3、添加第二個(gè)縱軸
要添加第二個(gè)縱軸，我們需要對(duì)ECharts的配置進(jìn)行一些修改，我們需要設(shè)置yAxis的type為value，并為其分配一個(gè)新的索引，我們需要為每個(gè)系列設(shè)置yAxisIndex屬性，以指定它們對(duì)應(yīng)的縱軸，我們需要為第二個(gè)縱軸設(shè)置name屬性，以便在圖例中顯示。
myChart.setOption({
yAxis: [{
type: 'value',
name: '銷(xiāo)售額',
index: 1,
splitNumber: 5,
min: 0,
max: 250,
position: 'right',
axisLine: {
lineStyle: {
color: '#5793f3'
}
},
axisLabel: {
formatter: '{value} ' + '個(gè)'
}
}, {
type: 'category',
name: '商品類(lèi)別',
data: ['襯衫','羊毛衫','雪紡衫','褲子','高跟鞋','襪子'],
axisLine: {
lineStyle: {
color: '#d9d9d9'
}
},
axisLabel: {
fontSize: 12,
color: '#666'
}
}],
series: [{
name: '銷(xiāo)量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
yAxisIndex: 0, // 第一個(gè)縱軸（銷(xiāo)售額）對(duì)應(yīng)的索引為0，第二個(gè)縱軸（銷(xiāo)量）對(duì)應(yīng)的索引為1
}, {
name: '銷(xiāo)售額',
type: 'bar',
data: [820, 932, 901, 934, 1290, 1330], // 銷(xiāo)售額數(shù)據(jù)，與銷(xiāo)量數(shù)據(jù)一一對(duì)應(yīng)
yAxisIndex: 1, // 第二個(gè)縱軸（銷(xiāo)售額）對(duì)應(yīng)的索引為1，第一個(gè)縱軸（銷(xiāo)量）對(duì)應(yīng)的索引為0（已在上面的series中設(shè)置）
}],
});
現(xiàn)在，你應(yīng)該可以看到一個(gè)包含兩個(gè)縱軸的雙縱軸圖表了，這個(gè)圖表展示了不同商品類(lèi)別的銷(xiāo)量和銷(xiāo)售額數(shù)據(jù)，通過(guò)對(duì)比這兩個(gè)數(shù)據(jù)，我們可以更好地了解商品的銷(xiāo)售情況。
文章題目：雙縱軸圖表制作
當(dāng)前地址：http://m.5511xx.com/article/ccocpep.html
