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