ECharts2.0柱状图横向显示

最新推荐文章于 2025-06-27 18:57:53 发布

原创最新推荐文章于 2025-06-27 18:57:53 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

PC端专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍了如何使用ECharts2.0库创建横向柱状图，包括配置项设置、数据处理及图表样式调整，帮助开发者实现更直观的数据展示。

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

option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter:function(v){return Math.abs(v[0].data)}
},
legend: {
data:['直接访问']
},
xAxis : [
{
type : 'value',
axisLabel:{
formatter:function(v){ return Math.abs(v)}
}
}
],
yAxis : [
{
type : 'category',
position:'right',
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
series : [
{
name:'直接访问',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'left',formatter:function(v){return Math.abs(v.data)}}}},
data:[-320,- 302, -301, -334, -390,- 330, -320]
},

]

};