app.title = '项目部物资采购统计表';
function suspensionFormatter(params, option) {
console.log('ddd', params)
var result = '';
var result1 = '';
var result2 = '';
var series = option.series;
var year_xAxis = option.xAxis[0].data; //第一个X轴的值
var dataIndex = params[0].dataIndex;
var years = 3;
if (params.length > 0) {
result += params[0].name + "</br>";
}
for (var i = 0; i < years; i++) {
var index = dataIndex * years + i;
result += year_xAxis[i] + "</br>";
for (var p in series) {
if (p >= '3')
continue;
result += series[p].name + ":" + series[p].data[index] + "</br>"
}
}
result1 = params[1].seriesName + ":" + params[1].value + "</br>"
result2 = params[2].seriesName + ":" + params[2].value + "</br>"
return result + result1 + result2;
}
option = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow', // 默认为直线,可选为:'line' | 'shadow'
},
formatter: function (params) {
return suspensionFormatter(params, option);
}
},
color: ['#003366', '#006699', '#4cabce', '#e5323e'],
legend: {
orient: 'horizontal',
left: 'center',
itemWidth: 14,
itemHeight: 8,
itemStyle: {
borderRadius: 50 // 设置图例图标的边角弧度为5
},
formatter: ['{a|{name}}'].join('\n'),
textStyle: {
fontSize: 12,
color: '#aacbde',
height: 8,
rich: {
a: {
verticalAlign: 'bottom',
},
},
},
},
grid: {
left: '3%',
right: '4%',
bottom: '30%',
containLabel: true
},
xAxis: [{
position: 'bottom',
type: 'category',
axisPointer: {
type: 'none',
show: false
},
axisLabel: {
interval: 0,
margin: 10,
rotate: 70,
color: '#aacbde',
textStyle: {
fontSize: 12
},
},
data: [
'2014-1', '2015-1', '2016-1',
'2014-2', '2015-2', '2016-2',
'2014-3', '2015-3', '2016-3',
'2014-4', '2015-4', '2016-4',
'2014-5', '2015-5', '2016-5',
'2014-6', '2015-6', '2016-6',
'2014-7', '2015-7', '2016-7',
'2014-8', '2015-8', '2016-8',
'2014-9', '2015-9', '2016-9',
'2014-10', '2015-10', '2016-10',
'2014-11', '2015-11', '2016-11',
'2014-12', '2015-12', '2016-12',
],
axisLine: {
lineStyle: {
type: 'solid',
color: '#4068b7',
width: 2
}
},
axisTick: {
show: false
},
},
{
position: 'bottom',
xAxisIndex: 0,
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
axisTick: {
show: false,
inside: true,
length: 50
},
axisLine: {
show: false,
lineStyle: {
type: 'solid',
color: '#4068b7',
width: 1
}
},
axisLabel: {
show: false,
},
}
],
yAxis: [
{
name: '个',
min: 0,
nameTextStyle: {
color: '#aacbde',
fontSize: 13,
padding: [20, 20, 0, 0]
},
axisLabel: {
color: '#aacbde',
textStyle: {
fontSize: 12
},
},
axisLine: {
show: false,
lineStyle: {
color: '#5A75FF',
}
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
type: 'dashed',
color: '#5078c8'
}
}
},
{
type: 'value',
min: -100,
max: 100,
// alignTicks: true,
splitLine: {
show: false
},
name: '',
nameTextStyle: {
color: '#fff',
align: 'left'
},
axisLabel: {
color: '#5A75FF',
formatter: function (a) {
return a.toFixed(0) + '%';
}
}
}],
series: [{
name: "联通",
yAxisIndex: 0,
type: "bar",
barWidth: 12,
"barGap": "55.5",
stack: 'total',
itemStyle: {
color: "#ff7302",
},
data: [
1, 1, 1,
2, 1, 1,
3, 1, 1,
4, 1, 1,
5, 1, 1,
6, 1, 1,
7, 1, 1,
8, 1, 1,
9, 1, 1,
10, 1, 1,
11, 1, 1,
12, 1, 1,
]
},
{
name: "移动",
yAxisIndex: 0,
type: "bar",
barWidth: 12,
stack: 'total',
itemStyle: {
borderWidth: 1,
color: "#3b8efe",
},
data: [500, 302, 301, 222, 500, 302, 301, 222, 500, 302, 301, 222, 500, 302, 301, 222, 500, 302, 301, 222, 500, 302, 301, 222, 500, 302, 301, 222, 500, 302, 301, 222, 500, 302, 301, 222,]
},
{
name: "电信",
yAxisIndex: 0,
type: "bar",
stack: 'total',
barWidth: 12,
itemStyle: {
borderWidth: 1,
color: "#01ffa1",
},
data: [500, 302, 301, 222, 500, 302, 301, 222, 500, 302, 301, 222, 500, 302, 301, 222, 500, 302, 301, 222, 500, 302, 301, 222, 500, 302, 301, 222, 500, 302, 301, 222, 500, 302, 301, 222,]
},
{
type: 'bar',
xAxisIndex: 1,
label: {
normal: {
show: false,
}
},
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
},
{
name: "21vs22",
xAxisIndex: 1,
yAxisIndex: 1,
type: "line",
smooth: false,
itemStyle: {
color: "#ff9c00",
},
data: [97, 66, 34, 99, 67, -46, 23, 64, 0, 43, 66, 3]
},
{
name: "22vs23",
xAxisIndex: 1,
yAxisIndex: 1,
type: "line",
smooth: false,
itemStyle: {
color: "#fb96ff",
},
data: [46, 66, 0, 99, 0, -46, 0, 68, 0, 88, 55, 33]
},
]
};
复杂的柱状图
于 2024-02-28 18:30:17 首次发布
本文详细描述了如何使用ECharts库中的SuspensionFormatter函数,创建了一个项目部物资采购的统计表,展示不同年份和供应商的数据对比,包括条形图和线图的配置。
摘要由CSDN通过智能技术生成