echarts 柱状图如何不顶格_Echarts 有点难度的柱状图

最新推荐文章于 2024-02-22 10:13:59 发布

飞翔的忧郁

最新推荐文章于 2024-02-22 10:13:59 发布

阅读量418

点赞数

CC 4.0 BY-SA版权

文章标签： echarts 柱状图如何不顶格

本文链接：https://blog.youkuaiyun.com/weixin_30803191/article/details/111891164

本文介绍了如何在Echarts中设置柱状图不顶格显示，通过调整柱状图的barWidth和数据填充，实现视觉效果优化。示例代码展示了如何根据不同的数据源动态更新图表，并提供了详细的配置项，包括提示框、坐标轴标签和颜色设定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

functionfunc_echarts_2ba() {var echarts_2bar = echarts.init(document.getElementById('id_echarts_2bar'));

echarts_2bar.option_2bar={

title: { subtext:'单位：GJ', x: 'right', top: -12, subtextStyle: { "fontSize": 12, "fontFamily": "Microsoft YaHei", "color": "#444"} },

color: ['#FF0000', '#87cefa', '#61a0a8', '#d48265', '#91c7ae'],//tooltip: {

//trigger: 'item',

//axisPointer: { // 坐标轴指示器，坐标轴触发有效

//type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'

//}

//},

//legend: {

//data: ['最近第1天', '最近第2天', '最近第3天', '最近第4天', '最近第5天'],

//align: 'right',

//right: 10

//},

grid: {

height:160,

left:'3%',

right:'4%',

bottom:'3%',

containLabel:true},

xAxis: [{

type:'category',

axisLabel:{

interval:0//横轴信息全部显示

//rotate:-30,//-30度角倾斜显示

} ,

data: ['五官科医院', '虹桥能源站', '虹桥2号能源站', '浦东东方医院'],

}],

yAxis: [{

type:'value',

name:'',

axisLabel: {

formatter:'{value}'}

}],

series: [{

name:'最近第1天',

type:'bar',

barWidth:10,

data:[]//data: [3900, 12, 31, 34, 31]

}, {

name:'最近第2天',

type:'bar',

barWidth:10,

data:[]//data: [4230, 20, 5, 9, 3]

}, {

name:'最近第3天',

type:'bar',

barWidth:10,

data:[]//data: [5590, 1, 2, 3, 1]

{

name:'最近第4天',

type:'bar',

barWidth:10,

data:[]//data: [5590, 2, 3, 1, 0.5]

{

name:'最近第5天',

type:'bar',

barWidth:10,

data:[]//data: [3600, 2, 3, 1, 0.5]

}

]

};

echarts_2bar.setOption(echarts_2bar.option_2bar);

$.ajax({

type:"post",

url: ajaxurl,

data:

{

async:false,

operate:"echarts_2bar"},

dataType:"json", //返回数据形式为json

success: function(result) {

echarts_2bar.setOption(

{

tooltip: {

trigger:'axis',

formatter:function(params) {var relVal = params[0].name;//for (var i = 0, l = params.length; i < l; i++) {

if (params[0].name == "虹桥能源站") {

relVal+= '
' + formatMonth(result[5].stat_dayofmonth) + ' : ' + params[0].value;

relVal+= '
' + formatMonth(result[6].stat_dayofmonth) + ' : ' + params[1].value;

relVal+= '
' + formatMonth(result[7].stat_dayofmonth) + ' : ' + params[2].value;

relVal+= '
' + formatMonth(result[8].stat_dayofmonth) + ' : ' + params[3].value;

relVal+= '
' + formatMonth(result[9].stat_dayofmonth) + ' : ' + params[4].value;

}else if (params[0].name == "虹桥2号能源站") {

relVal+= '
' + formatMonth(result[10].stat_dayofmonth) + ' : ' + params[0].value;

relVal+= '
' + formatMonth(result[11].stat_dayofmonth) + ' : ' + params[1].value;

relVal+= '
' + formatMonth(result[12].stat_dayofmonth) + ' : ' + params[2].value;

relVal+= '
' + formatMonth(result[13].stat_dayofmonth) + ' : ' + params[3].value;

relVal+= '
' + formatMonth(result[14].stat_dayofmonth) + ' : ' + params[4].value;

}else if (params[0].name == "浦东东方医院") {

relVal+= '
' + formatMonth(result[15].stat_dayofmonth) + ' : ' + params[0].value;

relVal+= '
' + formatMonth(result[16].stat_dayofmonth) + ' : ' + params[1].value;

relVal+= '
' + formatMonth(result[17].stat_dayofmonth) + ' : ' + params[2].value;

relVal+= '
' + formatMonth(result[18].stat_dayofmonth) + ' : ' + params[3].value;

relVal+= '
' + formatMonth(result[19].stat_dayofmonth) + ' : ' + params[4].value;

}else{

relVal+= '
' + formatMonth(result[0].stat_dayofmonth) + ' : ' + params[0].value;

relVal+= '
' + formatMonth(result[1].stat_dayofmonth) + ' : ' + params[1].value;

relVal+= '
' + formatMonth(result[2].stat_dayofmonth) + ' : ' + params[2].value;

relVal+= '
' + formatMonth(result[3].stat_dayofmonth) + ' : ' + params[3].value;

relVal+= '
' + formatMonth(result[4].stat_dayofmonth) + ' : ' + params[4].value;

}returnrelVal;

}

series: [

{ data: [JSON.stringify(result[0].heat_supply), JSON.stringify(result[5].heat_supply),JSON.stringify(result[10].heat_supply),

JSON.stringify(result[15].heat_supply) ] },

{ data: [JSON.stringify(result[1].heat_supply),

JSON.stringify(result[6].heat_supply),

JSON.stringify(result[11].heat_supply),

JSON.stringify(result[16].heat_supply)] },

{

data: [JSON.stringify(result[2].heat_supply),

JSON.stringify(result[7].heat_supply),

JSON.stringify(result[12].heat_supply),

JSON.stringify(result[17].heat_supply)] },

{ data: [JSON.stringify(result[3].heat_supply),

JSON.stringify(result[8].heat_supply),

JSON.stringify(result[13].heat_supply),

JSON.stringify(result[18].heat_supply)] },

{ data: [JSON.stringify(result[4].heat_supply),

JSON.stringify(result[9].heat_supply),

JSON.stringify(result[14].heat_supply),

JSON.stringify(result[19].heat_supply)] }

]

})

error:function(errorMsg) { }

});

}