我的位置：首页 › 一站式数据分析平台-亿信ABI › 亿信ABI-心得体验 › echart自定义统计图分享

echart自定义统计图分享

复制链接 | 收藏本帖

: chestnut 数据领袖Lv6

发表于2025-1-8 19:58

楼主

本帖最后由 chestnut 于 2025-1-8 20:00 编辑

Echart自定义统计图，计算样式如图：

Echart组件-自定义，脚本如下：

let map = {
采购量: [12,34,56,78,90,13,24,56,78,90,123,111],
销售量: [11,22,33,44,55,65,43,21,10,11,22,33],
销售单价: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 10.3, 13.4, 13.0, 16.5, 12.0, 0, 87.5],
市场价: [1.0, 2.2, 4.3, 4.5, 7.3, 10.2, 11.3, 15.4, 18.0, 18.5, 12.0, 0, 104.1]
};
option = {
title: {
text: '2024年1-12月xxx量价对比图'
},
darkMode: true,
grid: {
x: 150,
// y:45,
x2: 50,
y2: 210
// borderWidth:1
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
align: 'right',
itemGap: 30,
orient: 'vertical',
textStyle: { color: '#000' },
bottom: 10,
left: 0,
data: ['采购量', '销售量', '销售单价', '平均单价']
},
xAxis: [
{
type: 'category',
max: 12,
interval: Math.ceil(12) / 12,
// axisTick: {
// interval: 12/12
// },
axisLabel: {
fontWeight: 'bold',
show: true,
textStyle: {
// color: "#f4f4f4",
fontSize: '14px'
}
},
data: [
'1月',
'2月',
'3月',
'4月',
'5月',
'6月',
'7月',
'8月',
'9月',
'10月',
'11月',
'12月',
'1-12月\n累计'
],
axisPointer: {
type: 'shadow'
}
},
{
position: 'bottom', // 将分组x轴位置定至底部，不然默认在顶部
offset: 45, // 向下偏移，使分组文字显示位置不与原x轴重叠
// axisLine: {
// show: false // 隐藏分组x轴的轴线
// },
axisTick: {
length: -200, // 延长刻度线做分组线
inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
lineStyle: { color: '#000' } // 非必须，仅为了演示，明显标示出分组刻度线
// interval: function(index, value) {
// return index === 0 || index === 2 || index === 5; // 在0、5、6处各画一条刻度线
// }
// interval: 1,
},
// min: -30,
max: 12,
interval: 1,
axisLabel: {
inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
interval: 0 // 强制显示全部刻度名
},
data: ['']
},
{
position: 'bottom', // 将分组x轴位置定至底部，不然默认在顶部
offset: 36, // 向下偏移，使分组文字显示位置不与原x轴重叠
max: 12,
interval: Math.ceil(12) / 12,
axisTick: {
length: 0, // 延长刻度线做分组线
inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
lineStyle: { color: '#000' } // 非必须，仅为了演示，明显标示出分组刻度线
},
axisLabel: {
inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
interval: 0 // 强制显示全部刻度名
}
},
{
position: 'bottom', // 将分组x轴位置定至底部，不然默认在顶部
offset: 75, // 向下偏移，使分组文字显示位置不与原x轴重叠
max: 12,
interval: 1,
axisTick: {
length: 0, // 延长刻度线做分组线
inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
lineStyle: { color: '#000' } // 非必须，仅为了演示，明显标示出分组刻度线
},
axisLabel: {
inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
interval: 0 // 强制显示全部刻度名
},
data: [12,34,56,78,90,13,24,56,78,90,123,111]
},
{
position: 'bottom', // 将分组x轴位置定至底部，不然默认在顶部
offset: 120, // 向下偏移，使分组文字显示位置不与原x轴重叠
max: 12,
interval: Math.ceil(12) / 12,
axisTick: {
length: 0, // 延长刻度线做分组线
inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
lineStyle: { color: '#000' } // 非必须，仅为了演示，明显标示出分组刻度线
},
axisLabel: {
inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
interval: 0 // 强制显示全部刻度名
},
data: [11,22,33,44,55,65,43,21,10,11,22,33]
},
{
position: 'bottom', // 将分组x轴位置定至底部，不然默认在顶部
offset: 160, // 向下偏移，使分组文字显示位置不与原x轴重叠
max: 12,
interval: 1,
axisTick: {
length: 0, // 延长刻度线做分组线
inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
lineStyle: { color: '#000' } // 非必须，仅为了演示，明显标示出分组刻度线
},
axisLabel: {
inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
interval: 0 // 强制显示全部刻度名
},
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 10.3, 13.4, 13.0, 16.5, 12.0, 0, 87.5]
},
{
position: 'bottom', // 将分组x轴位置定至底部，不然默认在顶部
offset: 200, // 向下偏移，使分组文字显示位置不与原x轴重叠
max: 12,
interval: 1,
axisTick: {
length: 0, // 延长刻度线做分组线
inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
lineStyle: { color: '#000' } // 非必须，仅为了演示，明显标示出分组刻度线
},
axisLabel: {
inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
interval: 0 // 强制显示全部刻度名
},
data: [1.0, 2.2, 4.3, 4.5, 7.3, 10.2, 11.3, 15.4, 18.0, 18.5, 12.0, 0, 104.1]
}
],
yAxis: [
{
type: 'value',
name: '数量：吨',
// min: 0,
max: Math.ceil(115),
interval: Math.ceil(115) / 5,
axisLabel: {
formatter: '{value}',
textStyle: {
// color: "#f4f4f4",
fontSize: '14px'
}
}
},
{
type: 'value',
name: '价格：元/吨',
// min: 0,
max: Math.ceil(22500),
// splitNumber: 6,
interval: Math.ceil(22500) / 5,
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name: '采购量',
type: 'bar',
unit: '吨',
groupName: '采购/销售量',
data: map['采购量'],
itemStyle: {
color: 'rgb(242, 143, 133)'
}
},
{
name: '销售量',
type: 'bar',
unit: '吨',
groupName: '采购/销售量',
data: map['销售量'],
itemStyle: {
color: 'rgb(183, 222, 232)'
}
},
{
name: '销售单价',
type: 'line',
yAxisIndex: 1,
unit: '元/吨',
data: map['销售单价'],
itemStyle: {
color: 'rgb(196, 23, 23)'
},
lineStyle: {
width: 5
}
},
{
name: '平均单价',
type: 'line',
yAxisIndex: 1,
unit: '元/吨',
data: map['市场价'],
itemStyle: {
color: 'rgb(0, 112, 192)'
},
lineStyle: {
width: 5,
type: [10, 10],
dashOffset: 5
}
}
]
};
return option;

复制代码

示例为固定值，改为取表格数据，用宏取表元，如：

let map = {
数据1: <#=GRID1.B2$#>,数据2: <#=GRID1.C2$#>,
};

复制代码

最近看过此主题的会员

QQ空间微信

0个回答

只看楼主

登录后可回答问题，请登录或注册

用产品，聊感受！

我要发帖

亿信社区

echart自定义统计图分享

最近看过此主题的会员

0个回答

用产品，聊感受！