更新時間:2022-04-02 10:09:23 來源:動力節點 瀏覽2791次
先看兩張圖
圖中柱圖只需要設置series中的坐標系屬性barWidth就可以,
這種圖柱狀圖,折疊柱狀圖都適應
eg:
/**
* 堆積柱狀圖
* @param xaxisdata x軸:標簽(數組)
* @param serieszs 柱狀圖圖數據(數組)
* @param seriesyx 柱狀圖圖數據(數組)
*/
function drawDJZZT(xaxisdata,serieszs,seriesyx){
var myChart = echarts.init(document.getElementById('main1'));
myChart.setOption({
title : {
text : ""
},
tooltip : {
trigger : 'axis',
showDelay : 0, // 顯示延遲,添加顯示延遲可以避免頻繁切換,單位ms
axisPointer : { // 坐標軸指示器,坐標軸觸發有效
type : 'shadow' // 默認為直線,可選為:'line' | 'shadow'
}
},
legend: {
data:['做市', '協議']
},
xAxis : [{
type : 'category',
data : xaxisdata,
axisLabel:{
textStyle:{
color:"#222"
}
}
}],
yAxis : [{
type : 'value'
}],
series : [
{
name:'做市',
type:'bar',
stack: '總量',
/*itemStyle : { normal: {label : {show: true, position: 'insideTop',textStyle:{color:'#000'}}}},*/
data:serieszs
},
{
name:'協議',
type:'bar',
stack: '總量',
barWidth : 30,//柱圖寬度
/*itemStyle : { normal: {label : {show: true, position: 'insideTop',textStyle:{color:'#000'}}}},*/
data:seriesyx
}
]
});
}
調用方式
//console.log(data);
var xaxisdata = [];//月份
var serieszs = [];
var seriesyx = [];
var year = new Date().format("yyyy");
for(var i=(data.list.length-1);i>=0;i--){
var monthDate = data.list[i].month_date;
//if( year == monthDate.substring(0,4)){
//xaxisdata.push(monthDate.substring(4)+"月");
//}else{
xaxisdata.push(monthDate.substring(0,4)+"年"+monthDate.substring(4)+"月");
//}
serieszs.push(data.list[i].zszrmygpsl);
seriesyx.push(data.list[i].xyzrmygpsl);
}
drawDJZZT( xaxisdata, serieszs, seriesyx);
0基礎 0學費 15天面授
有基礎 直達就業
業余時間 高薪轉行
工作1~3年,加薪神器
工作3~5年,晉升架構
提交申請后,顧問老師會電話與您溝通安排學習