echarts中堆叠柱状图实现顶部显示总量

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

weixin_30756499

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

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiaofengyuan/p/7146111.html

本文详细介绍了使用ECharts进行数据可视化的配置方法，包括图表的基本配置项如tooltip、legend等，以及不同类型的图表系列配置，如柱状图的data设置等。通过具体示例展示了如何设置堆叠柱状图、标记线等高级特性。

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

option = {

tooltip : {

trigger: 'axis',

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

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

}

legend: {

data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他']

grid: {

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

xAxis : [

{

type : 'category',

data : ['周一','周二','周三','周四','周五','周六','周日']

}

yAxis : [

{

type : 'value'

}

series : [

{

name:'直接访问',

type:'bar',

data:[320, 332, 301, 334, 390, 330, 320]

{

name:'邮件营销',

type:'bar',

stack: '广告',

data:[120, 132, 101, 134, 90, 230, 210]

{

name:'联盟广告',

type:'bar',

stack: '广告',

data:[220, 182, 191, 234, 290, 330, 310]

{

name:'视频广告',

type:'bar',

stack: '广告',

data:[150, 232, 201, 154, 190, 330, 410]

{

name:'搜索引擎',

type:'bar',

data:[862, 1018, 964, 1026, 1679, 1600, 1570],

markLine : {

lineStyle: {

normal: {

type: 'dashed'

}

data : [

[{type : 'min'}, {type : 'max'}]

]

}

{

name:'百度',

type:'bar',

barWidth : 5,

stack: '搜索引擎',

data:[620, 732, 701, 734, 1090, 1130, 1120]

{

name:'谷歌',

type:'bar',

stack: '搜索引擎',

data:[120, 132, 101, 134, 290, 230, 220]

{

name:'必应',

type:'bar',

stack: '搜索引擎',

data:[60, 72, 71, 74, 190, 130, 110]

{

name:'其他',

type:'bar',

stack: '搜索引擎',

data:[62, 82, 91, 84, 109, 110, 120]

{

name: '消费合计总量',

type: 'bar',

stack: '搜索引擎',

label: {

normal: {

offset:['50', '80'],

show: true,

position: 'insideBottom',

formatter:'{c}',

textStyle:{ color:'#000' }

}

itemStyle:{

normal:{

color:'rgba(128, 128, 128, 0)'

}

data: [862, 1018, 964, 1026, 1679, 1600, 1570]

}

]

};

如下图：

转载于:https://www.cnblogs.com/xiaofengyuan/p/7146111.html