溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“怎么利用JavaScript繪制堆疊柱狀圖”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么利用JavaScript繪制堆疊柱狀圖”吧！
效果圖
this.state.workChartList的數(shù)據(jù)結構
const workChartList = [
{ name: "居民熱線", chartData: [5, 8, 8, 7, 0, 5, 6, 5, 9, 5, 4, 7] },
{ name: "日常調(diào)度類", chartData: [5, 6, 8, 8, 5, 8, 5, 9, 8, 7, 3, 6] },
{ name: "調(diào)度預警類", chartData: [6, 8, 8, 7, 4, 6, 6, 9, 6, 8, 5, 3] },
{ name: "搶維修類", chartData: [1, 2, 3, 1, 4, 5, 6, 3, 9, 7, 8, 7] },
{ name: "物質(zhì)申請類", chartData: [5, 8, 8, 7, 0, 5, 6, 5, 9, 5, 4, 7] },
{ name: "其他類", chartData: [5, 6, 8, 8, 5, 8, 5, 9, 8, 7, 6, 0] },
];option相關代碼 關鍵是每個serise需要設置同樣的stack屬性
var colorList = ["#72fbfd", "#56c2f9", "#2e69e9", "#7a23f5", "#8082f7", "#ab4399"];
const xData = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
var option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
backgroundColor: "#030e2d",
borderColor: "#030e2d",
textStyle: {
fontSize: "12px",
color: "#96A4F4",
},
},
color: colorList,
legend: {
left: "center",
itemWidth: 10,
itemHeight: 10,
textStyle: {
fontSize: "12px",
color: "#96A4F4",
padding: [3, 0, 0, 0],
},
},
grid: {
left: 20,
bottom: 20,
top: 30,
right: 20,
},
xAxis: {
name: "\n\n(月)",
type: "category",
nameTextStyle: {
color: "#7089ba",
fontSize: "10px"
},
nameGap: -9,
axisLabel: {
interval: 0,
textStyle: {
color: "#7089ba",
fontSize: "10px"
},
margin: 6, //刻度標簽與軸線之間的距離。
},
axisLine: {
lineStyle: {
color: "#414965",
},
},
axisTick: {
show: false,
},
data: xData,
},
yAxis: {
type: "value",
axisLabel: {
textStyle: {
color: "#7089ba",
fontSize: "10px",
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
color: "#414965",
opacity: 0.3,
},
},
},
series: [],
};
if (!this.state.workChartList) return;
const seriesItem = this.state.workChartList;
seriesItem.map((item, index) => {
option.series.push({
name: item.name,
type: "bar",
stack: "總數(shù)",
barWidth: '50%',
label: {
show: false,
position: "insideRight",
},
data: item.value,
itemStyle: {
normal: {
label: {
show: false, //開啟顯示
position: "top", //在上方顯示
textStyle: {
//數(shù)值樣式
color: "#fff",
fontSize: "12px",
fontWeight: 100,
},
},
},
},
});
});
this.Chart_init2 = echarts.init(this.Chart_dom2.current);
this.Chart_init2.clear();
this.Chart_init2.setOption(option);補充
當然JavaScript不僅能繪制堆疊柱狀圖，還能繪制折柱混合圖
效果圖：
數(shù)據(jù)結構
const nrwData = [
{ label: "10", proviceWater: "100.45", userWater: "55", nrwRate: 80.65 },
{ label: "11", proviceWater: "80", userWater: "80", nrwRate: 70 },
{ label: "12", proviceWater: "81.45", userWater: "67", nrwRate: 89 },
{ label: "01", proviceWater: "145.45", userWater: "140.45", nrwRate: 55 },
{ label: "02", proviceWater: "60.45", userWater: "45", nrwRate: 43.65 },
{ label: "03", proviceWater: "55", userWater: "50", nrwRate: 85.65 },
{ label: "10", proviceWater: "100.45", userWater: "55", nrwRate: 80.65 },
{ label: "11", proviceWater: "80", userWater: "80", nrwRate: 70 },
{ label: "12", proviceWater: "81.45", userWater: "67", nrwRate: 89 },
{ label: "01", proviceWater: "145.45", userWater: "140.45", nrwRate: 55 },
{ label: "02", proviceWater: "60.45", userWater: "45", nrwRate: 43.65 },
{ label: "03", proviceWater: "55", userWater: "50", nrwRate: 85.65 }
];具體代碼
var xData3 = nrwData?.map((item) => item.label);
const proviceWater = nrwData?.map((item) => item.proviceWater <= 0 ? 0 : item.proviceWater);
const userWater = nrwData?.map((item) => item.userWater <= 0 ? 0 : item.userWater);
const lineData = nrwData?.map((item) => item.nrwRate >= 100 ? 0 : item.nrwRate);
var option = {
tooltip: {
trigger: "axis",
show: true,
backgroundColor: "rgba(16, 34, 79, 0.9)",
borderColor: "#274370",
textStyle: {
color: "#fff",
fontSize: 8,
}
},
legend: {
show: true,
itemWidth: 20,
itemHeight: 10,
itemGap: 10,
textStyle: {
fontSize: 10,
color: "#ccc",
},
},
grid: {
left: 30,
bottom: 20,
top: 30,
right: 30,
},
xAxis: {
data: xData3,
name: "\n\n\n(月)",
nameTextStyle: {
color: "#7089ba",
fontSize: "10px"
},
// 坐標軸刻度相關設置
axisTick: {
show: false,
},
nameGap: -9,
// 坐標軸線的相關設置
axisLine: {
show: true,
lineStyle: {
color: "#414965",
},
},
// 坐標軸刻度標簽的相關設置
axisLabel: {
// 可以設置成 0 強制顯示所有標簽
interval: 0,
textStyle: {
color: "#7089ba",
fontSize: "10px"
},
margin: 10, //刻度標簽與軸線之間的距離。
},
},
yAxis: [{
type: "value",
name: "單位：萬m3",
nameTextStyle: {
color: "#fff",
fontSize: "10px"
},
// 坐標軸在grid區(qū)域中的分隔線
splitLine: {
show: false,
lineStyle: {
color: "#414965",
opacity: 0.3,
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
textStyle: {
color: "#7089ba",
fontSize: "10px",
},
},
},
{
type: "value",
name: "產(chǎn)銷差（%）",
min: 0,
max: 100,
nameTextStyle: {
color: "#fff",
fontFamily: "PingFangSC-Light",
fontSize: "10px",
},
axisLabel: {
textStyle: {
color: "#7089ba",
fontSize: "10px"
}
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: "#414965",
opacity: 0.3,
},
},
},
],
series: [
{
name: "供水量",
type: "bar",
barWidth: 10,
itemStyle: {
opacity: 0.1,
normal: {
show: true,
color: "#8c3ed8",
barBorderRadius: 0,
borderWidth: 0,
},
},
label: {
show: false,//數(shù)據(jù)不進行顯示
position: "top",
distance: 10,
color: "#fff",
},
tooltip: {
valueFormatter: function (value) {
return value + "萬m3";
}
},
data: proviceWater,
},
{
name: "用水量",
type: "bar",
barWidth: 10,
itemStyle: {
opacity: 0.1,
normal: {
show: true,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#1134ac",
},
{
offset: 1,
color: "#4aaaf8",
},
]),
barBorderRadius: 0,
borderWidth: 0,
},
},
label: {
show: false,//數(shù)據(jù)不進行顯示
position: "top",
distance: 10,
color: "#fff",
},
tooltip: {
valueFormatter: function (value) {
return value + "萬m3";
}
},
data: userWater,
},
/*折線圖*/
{
name: "產(chǎn)銷差",
type: "line",
yAxisIndex: 1,
z: 15,
tooltip: {
valueFormatter: function (value) {
return value + "%";
}
},
symbol: "circle",
// symbolSize: 10,
itemStyle: {
normal: {
color: "#84fbfb",
borderColor: "#84fbfb", //拐點邊框顏色
lineStyle: {
color: "#84fbfb"//折線的顏色
},
},
},
data: lineData,
}
],
};感謝各位的閱讀，以上就是“怎么利用JavaScript繪制堆疊柱狀圖”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對怎么利用JavaScript繪制堆疊柱狀圖這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
