const yList = [
{ key: '1', value: '2020' },
{ key: '2', value: '2021' },
{ key: '3', value: '2022' }
]
const qList = [
[
{ key: '1', value: '2020-Q1' },
{ key: '2', value: '2020-Q2' },
{ key: '3', value: '2020-Q3' },
{ key: '4', value: '2020-Q4' }
],
[
{ key: '1', value: '2021-Q1' },
{ key: '2', value: '2021-Q2' },
{ key: '3', value: '2021-Q3' },
{ key: '4', value: '2021-Q4' }
],
[
{ key: '1', value: '2022-Q1' },
{ key: '2', value: '2022-Q2' },
{ key: '3', value: '2022-Q3' },
{ key: '4', value: '2022-Q4' }
]
]
const list = {
qBarArr1: [420555, 334994, 289594, 270780, 223, 258469],
qBarArr2: [255382, 308604, 478622, 64158, 400336, 390284],
qBarArr3: [-223013, -42078, -163037, -46824, -194531, -204876]
}
option = {
tooltip: {
trigger: 'axis',
// axisPointer: {
// type: 'shadow'
// },
axisPointer: {
type: 'cross',
crossStyle: {
color: '#fff'
}
},
// 进行数据处理,去掉提示框中一些x轴坐标为空的数据显示.
formatter: function (params) {
if (params[0].name) {
var html = '';
if (params.length != 0) {
// 可以自己打印一下console.info(params[0]);
var getName = params[0].name;
html += getName + '<br/>';
for (var i = 0; i < params.length; i++) {
// 如果为0 为空的数据我们不要了(你们可以直接判断 > 0)
if (params[i].value != null && params[i].value != 0 && params[i].value != '') {
html += params[i].marker;
html += params[i].seriesName + ': ' + params[i].value + '<br/>';
}
}
}
return html;
} else {
return '';
}
}
},
legend: [
{
data: ['认缴金额'],
bottom: '30',
x: '13%',
itemWidth: 15,
itemHeight: 15,
textStyle: {
color: 'rgb(168, 210, 209)',
fontSize: 12
},
icon: 'circle'
},
{
data: ['原定估值'],
bottom: '30',
x: '21%',
itemWidth: 15,
itemHeight: 15,
textStyle: {
color: 'rgb(168, 210, 209)',
fontSize: 12
},
itemStyle: {
borderType: 'dashed'
},
icon: 'circle'
},
{
data: ['分配金额'],
bottom: '30',
x: '29%',
itemStyle: {
borderWidth: 2
},
textStyle: {
color: 'rgb(168, 210, 209)',
fontSize: 12
},
itemWidth: 15,
itemHeight: 15,
icon: 'circle'
},
{
data: ['预期认缴金额'],
bottom: '30',
x: '39%',
itemStyle: {
borderWidth: 2,
borderType: 'dashed'
},
textStyle: {
color: 'rgb(168, 210, 209)',
fontSize: 12
},
itemWidth: 20,
itemHeight: 15,
icon: 'circle'
},
{
data: ['评定预期估值'],
bottom: '30',
x: '50%',
itemStyle: {
borderWidth: 2,
borderType: 'dashed'
},
textStyle: {
color: 'rgb(168, 210, 209)',
fontSize: 12
},
itemWidth: 15,
itemHeight: 15,
icon: 'circle'
},
{
data: ['预期分配金额'],
bottom: '30',
x: '61%',
itemStyle: {
borderWidth: 2,
borderType: 'dashed'
},
textStyle: {
color: 'rgb(168, 210, 209)',
fontSize: 12
},
itemWidth: 15,
itemHeight: 15,
icon: 'circle'
}
],
grid: {
left: '60px',
right: '120px',
top: '70px',
bottom: '0px',
containLabel: true
},
xAxis: [
{
type: 'category',
// boundaryGap: false,
position: 'bottom',
data: ['2019A', '', '', '', '', '', ''],
axisLine: {
//坐标轴轴线相关设置
lineStyle: {
color: '#d7d7d7' //x轴线颜色设置
}
},
axisLabel: {
// 坐标轴刻度标签的相关设置
show: true, //控制显隐
textStyle: {
color: '#d7d7d7' //x轴字体颜色
},
interval: 0
}
},
{
type: 'category',
position: 'bottom',
// boundaryGap: false,
data: ['', '2020A', '', '', '', '', ''],
axisLine: {
//坐标轴轴线相关设置
lineStyle: {
color: '#d7d7d7' //x轴线颜色设置
}
},
axisLabel: {
// 坐标轴刻度标签的相关设置
show: true, //控制显隐
textStyle: {
color: '#d7d7d7' //x轴字体颜色
},
interval: 0
}
},
{
type: 'category',
// boundaryGap: false,
position: 'bottom',
data: ['', '', '2021A', '', '', '', ''],
axisLine: {
//坐标轴轴线相关设置
lineStyle: {
color: '#d7d7d7' //x轴线颜色设置
}
},
axisLabel: {
// 坐标轴刻度标签的相关设置
show: true, //控制显隐
textStyle: {
color: '#d7d7d7' //x轴字体颜色
},
interval: 0
}
},
{
type: 'category',
// boundaryGap: false,
position: 'bottom',
data: ['', '', '', '', '', '', ''],
axisLine: {
//坐标轴轴线相关设置
lineStyle: {
color: '#d7d7d7' //x轴线颜色设置
}
},
axisLabel: {
// 坐标轴刻度标签的相关设置
show: true, //控制显隐
textStyle: {
color: '#d7d7d7' //x轴字体颜色
},
interval: 0
}
},
{
type: 'category',
// boundaryGap: false,
position: 'bottom',
data: ['', '', '', '', '2022A', '', ''],
axisLine: {
//坐标轴轴线相关设置
lineStyle: {
color: '#d7d7d7' //x轴线颜色设置
}
},
axisLabel: {
// 坐标轴刻度标签的相关设置
show: true, //控制显隐
textStyle: {
color: '#d7d7d7' //x轴字体颜色
},
interval: 0
}
},
{
type: 'category',
// boundaryGap: false,
position: 'bottom',
data: ['', '', '', '', '', '2023A', ''],
axisLine: {
//坐标轴轴线相关设置
lineStyle: {
color: '#d7d7d7' //x轴线颜色设置
}
},
axisLabel: {
// 坐标轴刻度标签的相关设置
show: true, //控制显隐
textStyle: {
color: '#d7d7d7' //x轴字体颜色
},
interval: 0
}
},
{
type: 'category',
// boundaryGap: false,
position: 'bottom',
data: ['', '', '', '', '', '', '2024A'],
axisLine: {
//坐标轴轴线相关设置
lineStyle: {
color: '#d7d7d7' //x轴线颜色设置
}
},
axisLabel: {
// 坐标轴刻度标签的相关设置
show: true, //控制显隐
textStyle: {
color: '#d7d7d7' //x轴字体颜色
},
interval: 0
}
}
],
dataZoom: {
backgroundColor: 'rgba(0,0,0,0)',
dataBackgroundColor: 'rgba(255,255,255,0.3)',
fillerColor: 'rgba(167,183,204,0.4)',
handleColor: '#a7b7cc',
handleSize: '100%',
textStyle: {
color: '#333'
},
bottom: 70
},
yAxis: [
{
type: 'value',
name: '单\n位\n:\nk$',
nameGap: -40, // x轴name与横坐标轴线的间距
nameTextStyle: {
padding: [0, 0, 0, -160]
},
min: -300000,
max: 500000,
scale: true,
splitNumber: 10,
axisTick: {
show: false
},
axisLine: {
show: true
},
axisLabel: {
interval: 0,
color: 'rgba(54,58,68,0.70)',
fontSize: 14
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(0, 0, 0, 0.2)',
width: 1,
type: 'solid'
}
}
}
],
series: [
// 第一个刻度
{
type: 'bar',
name: '认缴金额',
xAxisIndex: 0,
itemStyle: {
normal: {
color: 'rgb(186, 66, 68)'
}
},
barWidth: 24,
data: [list.qBarArr1[0]]
},
{
type: 'bar',
name: '原定估值',
xAxisIndex: 0,
itemStyle: {
normal: {
color: 'rgb(15, 63, 145)'
}
},
barWidth: 24,
data: [list.qBarArr2[0]]
},
{
type: 'bar',
name: '分配金额',
xAxisIndex: 0,
itemStyle: {
normal: {
color: 'rgb(0, 145, 206)'
}
},
barWidth: 24,
data: [list.qBarArr3[0]]
},
// 第二
{
type: 'bar',
name: '认缴金额',
xAxisIndex: 1,
itemStyle: {
normal: {
color: 'rgb(186, 66, 68)'
}
},
barWidth: 24,
data: ['', list.qBarArr1[1]]
},
{
type: 'bar',
name: '原定估值',
xAxisIndex: 1,
itemStyle: {
normal: {
color: 'rgb(15, 63, 145)'
}
},
barWidth: 24,
data: ['', list.qBarArr2[1]]
},
{
type: 'bar',
name: '分配金额',
xAxisIndex: 1,
itemStyle: {
normal: {
color: 'rgb(0, 145, 206)'
}
},
barWidth: 24,
data: ['', list.qBarArr3[1]]
},
//第三
{
type: 'bar',
name: '认缴金额',
xAxisIndex: 2,
itemStyle: {
normal: {
color: 'rgb(186, 66, 68)'
}
},
barWidth: 24,
data: ['', '', list.qBarArr1[2]]
},
{
type: 'bar',
name: '原定估值',
xAxisIndex: 2,
itemStyle: {
normal: {
color: 'rgb(15, 63, 145)'
}
},
barWidth: 24,
data: ['', '', list.qBarArr2[2]]
},
{
type: 'bar',
name: '分配金额',
xAxisIndex: 2,
itemStyle: {
normal: {
color: 'rgb(0, 145, 206)'
}
},
barWidth: 24,
data: ['', '', list.qBarArr3[2]]
},
// 占位
{
type: 'bar',
name: '分配金额',
xAxisIndex: 3,
itemStyle: {
normal: {
color: 'rgb(0, 145, 206)'
}
},
barWidth: 24,
data: ['', '', '', '0']
},
//第四
{
type: 'bar',
name: '预期认缴金额',
xAxisIndex: 4,
itemStyle: {
borderColor: 'rgb(186, 66, 68)',
borderWidth: 3,
borderType: 'dashed', //虚线
color: '#fff'
},
barWidth: 24,
data: ['', '', '', '', list.qBarArr1[2]]
},
{
type: 'bar',
name: '评定预期估值',
xAxisIndex: 4,
itemStyle: {
borderColor: 'rgb(15, 63, 145)',
borderWidth: 3,
borderType: 'dashed', //虚线
color: '#fff'
},
barWidth: 24,
data: ['', '', '', '', list.qBarArr2[2]]
},
{
type: 'bar',
xAxisIndex: 4,
name: '预期分配金额',
itemStyle: {
borderColor: 'rgb(0, 145, 206)',
borderWidth: 3,
borderType: 'dashed', //虚线
color: '#fff'
},
barWidth: 24,
data: ['', '', '', '', list.qBarArr3[2]]
},
//第五
{
type: 'bar',
name: '预期认缴金额',
xAxisIndex: 5,
itemStyle: {
borderColor: 'rgb(186, 66, 68)',
borderWidth: 3,
borderType: 'dashed', //虚线
color: '#fff'
},
barWidth: 24,
data: ['', '', '', '', '', list.qBarArr1[4]]
},
{
type: 'bar',
name: '评定预期估值',
xAxisIndex: 5,
itemStyle: {
borderColor: 'rgb(15, 63, 145)',
borderWidth: 3,
borderType: 'dashed', //虚线
color: '#fff'
},
barWidth: 24,
data: ['', '', '', '', '', list.qBarArr2[4]]
},
{
type: 'bar',
xAxisIndex: 5,
name: '预期分配金额',
itemStyle: {
borderColor: 'rgb(0, 145, 206)',
borderWidth: 3,
borderType: 'dashed', //虚线
color: '#fff'
},
barWidth: 24,
data: ['', '', '', '', '', list.qBarArr3[4]]
},
//第六
{
type: 'bar',
name: '预期认缴金额',
xAxisIndex: 6,
itemStyle: {
borderColor: 'rgb(186, 66, 68)',
borderWidth: 3,
borderType: 'dashed', //虚线
color: '#fff'
},
barWidth: 24,
data: ['', '', '', '', '', '', list.qBarArr1[5]]
},
{
type: 'bar',
name: '评定预期估值',
xAxisIndex: 6,
itemStyle: {
borderColor: 'rgb(15, 63, 145)',
borderWidth: 3,
borderType: 'dashed', //虚线
color: '#fff'
},
barWidth: 24,
data: ['', '', '', '', '', '', list.qBarArr2[5]]
},
{
type: 'bar',
xAxisIndex: 6,
name: '预期分配金额',
itemStyle: {
borderColor: 'rgb(0, 145, 206)',
borderWidth: 3,
borderType: 'dashed', //虚线
color: '#fff'
},
barWidth: 24,
data: ['', '', '', '', '', '', list.qBarArr3[5]]
},
{
name: '平行于y轴的趋势线',
type: 'line',
// data: [0],
markLine: {
itemStyle: {
//盒须图样式。
color: 'red', //boxplot图形的颜色。 默认从全局调色盘 option.color 获取颜色
//borderColor: 'blue', //boxplot图形的描边颜色。支持的颜色格式同 color，不支持回调函数。
// type: 'solid',
normal: {
lineStyle: {
width: 2,
type: 'dashed' //'dotted'虚线 'solid'实线
}
}
},
yAxisIndex: 1,
symbol: 'none', //去掉箭头
data: [
[
{ coord: [3, -300000] },
{ coord: [3, 500000] } //如何获取grid上侧最大值，目前是写死的
]
]
}
}
]
};