您现在的位置是：网站首页 > 业务数据可视化案例文章详情
业务数据可视化案例
陈川
【
ECharts
】
61219人已围观
14583字
业务数据可视化案例
数据可视化是业务分析中不可或缺的一环，它能将复杂的数据转化为直观的图表，帮助决策者快速理解业务状况。ECharts作为一款强大的开源可视化库，提供了丰富的图表类型和灵活的配置选项，非常适合用于业务数据的可视化展示。
销售数据可视化
销售数据是企业运营的核心指标之一，通过ECharts可以创建多种图表来展示销售趋势、区域分布和产品表现。
折线图展示销售趋势
option = {
title: {
text: '2023年季度销售额趋势'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['线上销售', '线下销售']
},
xAxis: {
type: 'category',
data: ['第一季度', '第二季度', '第三季度', '第四季度']
},
yAxis: {
type: 'value'
},
series: [
{
name: '线上销售',
type: 'line',
data: [320, 432, 501, 634]
},
{
name: '线下销售',
type: 'line',
data: [220, 282, 391, 450]
}
]
};
地图展示区域销售分布
option = {
title: {
text: '全国各省份销售额分布',
left: 'center'
},
tooltip: {
trigger: 'item'
},
visualMap: {
min: 0,
max: 1000,
text: ['高', '低'],
realtime: false,
calculable: true,
inRange: {
color: ['#50a3ba', '#eac736', '#d94e5d']
}
},
series: [
{
name: '销售额',
type: 'map',
map: 'china',
emphasis: {
label: {
show: true
}
},
data: [
{name: '北京', value: 983},
{name: '上海', value: 876},
{name: '广东', value: 754},
// 其他省份数据...
]
}
]
};
用户行为分析可视化
用户行为数据可以帮助企业了解客户偏好和产品使用情况，ECharts提供了多种图表来展示这些数据。
漏斗图展示用户转化率
option = {
title: {
text: '用户购买转化漏斗',
subtext: '从访问到支付的转化过程'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
legend: {
data: ['访问', '浏览商品', '加入购物车', '生成订单', '支付成功']
},
series: [
{
name: '转化率',
type: 'funnel',
left: '10%',
top: 60,
bottom: 60,
width: '80%',
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
show: true,
position: 'inside'
},
labelLine: {
length: 10,
lineStyle: {
width: 1,
type: 'solid'
}
},
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
emphasis: {
label: {
fontSize: 20
}
},
data: [
{value: 100, name: '访问'},
{value: 80, name: '浏览商品'},
{value: 60, name: '加入购物车'},
{value: 40, name: '生成订单'},
{value: 20, name: '支付成功'}
]
}
]
};
热力图展示用户活跃时段
option = {
title: {
text: '一周用户活跃热力图',
subtext: '数据来自2023年1月'
},
tooltip: {
position: 'top'
},
animation: false,
grid: {
height: '50%',
top: '10%'
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
splitArea: {
show: true
}
},
yAxis: {
type: 'category',
data: ['0-2', '2-4', '4-6', '6-8', '8-10', '10-12', '12-14', '14-16', '16-18', '18-20', '20-22', '22-24'],
splitArea: {
show: true
}
},
visualMap: {
min: 0,
max: 1000,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%'
},
series: [{
name: '活跃用户数',
type: 'heatmap',
data: [
[0, 0, 50], [0, 1, 30], [0, 2, 20],
// 其他数据点...
[6, 11, 800], [6, 10, 750]
],
label: {
show: false
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
库存管理可视化
库存数据可视化可以帮助企业优化库存水平，减少资金占用和缺货风险。
柱状图展示库存周转
option = {
title: {
text: '产品库存周转天数',
subtext: '最近12个月数据'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['A类产品', 'B类产品', 'C类产品']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
series: [
{
name: 'A类产品',
type: 'bar',
data: [45, 42, 38, 36, 35, 33, 32, 30, 28, 27, 26, 25]
},
{
name: 'B类产品',
type: 'bar',
data: [60, 58, 55, 52, 50, 48, 45, 43, 40, 38, 35, 32]
},
{
name: 'C类产品',
type: 'bar',
data: [90, 88, 85, 82, 80, 78, 75, 72, 70, 68, 65, 62]
}
]
};
饼图展示库存结构
option = {
title: {
text: '库存金额占比',
subtext: '按产品类别划分',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['电子产品', '家居用品', '服装', '食品', '其他']
},
series: [
{
name: '库存金额',
type: 'pie',
radius: '50%',
data: [
{value: 335, name: '电子产品'},
{value: 310, name: '家居用品'},
{value: 234, name: '服装'},
{value: 135, name: '食品'},
{value: 1548, name: '其他'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
财务数据可视化
财务数据可视化对于企业决策至关重要，ECharts可以清晰地展示收入、成本和利润等关键指标。
堆叠柱状图展示收入构成
option = {
title: {
text: '季度收入构成分析'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['产品A', '产品B', '产品C', '服务收入', '其他收入']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['第一季度', '第二季度', '第三季度', '第四季度']
},
yAxis: {
type: 'value'
},
series: [
{
name: '产品A',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334]
},
{
name: '产品B',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134]
},
{
name: '产品C',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234]
},
{
name: '服务收入',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154]
},
{
name: '其他收入',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [98, 77, 101, 99]
}
]
};
雷达图展示财务健康度
option = {
title: {
text: '公司财务健康度评估'
},
tooltip: {},
legend: {
data: ['预算', '实际']
},
radar: {
indicator: [
{ name: '收入增长率', max: 100},
{ name: '利润率', max: 100},
{ name: '资产周转率', max: 100},
{ name: '流动比率', max: 200},
{ name: '负债率', max: 100},
{ name: 'ROE', max: 50}
]
},
series: [{
name: '预算 vs 实际',
type: 'radar',
data: [
{
value: [80, 70, 60, 150, 50, 30],
name: '预算'
},
{
value: [75, 65, 55, 140, 55, 28],
name: '实际'
}
]
}]
};
营销活动效果可视化
营销活动的效果评估需要多维度的数据可视化，ECharts可以清晰地展示各种营销指标。
桑基图展示用户转化路径
option = {
title: {
text: '营销活动用户转化路径'
},
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'sankey',
data: [
{name: '广告曝光'},
{name: '点击广告'},
{name: '访问落地页'},
{name: '注册账号'},
{name: '完成购买'},
{name: '放弃购买'}
],
links: [
{source: '广告曝光', target: '点击广告', value: 10000},
{source: '点击广告', target: '访问落地页', value: 5000},
{source: '访问落地页', target: '注册账号', value: 3000},
{source: '注册账号', target: '完成购买', value: 1000},
{source: '注册账号', target: '放弃购买', value: 2000}
],
emphasis: {
focus: 'adjacency'
},
levels: [
{
depth: 0,
itemStyle: {
color: '#fbb4ae'
},
lineStyle: {
color: 'source',
opacity: 0.6
}
},
{
depth: 1,
itemStyle: {
color: '#b3cde3'
},
lineStyle: {
color: 'source',
opacity: 0.6
}
},
{
depth: 2,
itemStyle: {
color: '#ccebc5'
},
lineStyle: {
color: 'source',
opacity: 0.6
}
}
],
lineStyle: {
curveness: 0.5
}
}
]
};
散点图展示广告效果
option = {
title: {
text: '广告投放效果分析',
subtext: '点击率 vs 转化率'
},
tooltip: {
formatter: function (param) {
return param.data[2] + ': <br/>点击率: ' + param.data[0] + '% <br/>转化率: ' + param.data[1] + '%';
}
},
grid: {
left: '3%',
right: '7%',
bottom: '7%',
containLabel: true
},
xAxis: {
name: '点击率(%)',
nameLocation: 'middle',
nameGap: 30
},
yAxis: {
name: '转化率(%)',
nameLocation: 'middle',
nameGap: 30
},
visualMap: {
min: 0,
max: 10000,
dimension: 3,
min: 500,
max: 10000,
inRange: {
symbolSize: [10, 50]
}
},
series: [
{
name: '广告效果',
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(data[3]) / 5;
},
data: [
[2.5, 1.2, '广告A', 5000],
[3.2, 1.8, '广告B', 8000],
[1.8, 0.6, '广告C', 3000],
[4.5, 2.5, '广告D', 10000],
[2.7, 1.5, '广告E', 6000],
[3.8, 2.2, '广告F', 9000]
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
生产运营数据可视化
生产运营数据可视化可以帮助企业监控生产效率、设备利用率和质量控制等关键指标。
仪表盘展示设备利用率
option = {
series: [
{
type: 'gauge',
center: ['50%', '60%'],
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
splitNumber: 10,
radius: '90%',
axisLine: {
lineStyle: {
width: 30,
color: [
[0.3, '#67e0e3'],
[0.7, '#37a2da'],
[1, '#fd666d']
]
}
},
pointer: {
icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
length: '12%',
width: 20,
offsetCenter: [0, '-60%'],
itemStyle: {
color: 'auto'
}
},
axisTick: {
length: 12,
lineStyle: {
color: 'auto',
width: 2
}
},
splitLine: {
length: 20,
lineStyle: {
color: 'auto',
width: 5
}
},
axisLabel: {
color: '#464646',
fontSize: 12,
distance: -60,
formatter: function (value) {
if (value === 0) {
return '低';
} else if (value === 50) {
return '中';
} else if (value === 100) {
return '高';
}
return '';
}
},
title: {
offsetCenter: [0, '-20%'],
fontSize: 20
},
detail: {
fontSize: 30,
offsetCenter: [0, '0%'],
valueAnimation: true,
formatter: '{value}%',
color: 'inherit'
