const dataZoomEndValue = 4;
const Xdata = [
"省农信社",
"农业银行",
"建设银行",
"工商银行",
"苏州银行",
"邮储银行",
"江苏银行",
"交通银行",
"中国银行",
"南京银行",
"光大银行",
"兴业银行",
"招商银行",
"民生银行",
"中信银行",
"宁波银行",
]
const fp_key = ["最短制卡时间(分钟)", "平均制卡时间(分钟)"]
// 左侧数据
const LF_val= [
0.2, 0.25, 0.2, 0.32, 0.67, 0.2, 0.18, 0.47, 0.55, 0.68, 0.8, 0.83,
1.02, 1.28, 1.45, 3,
]
// 右侧数据
const TS_val= [
1.64, 2.15, 1.97, 1.78, 1.92, 3.36, 1.73, 2.02, 2.53, 1.57, 6.57, 4.25,
3.18, 9.28, 3.57, 3.83,
]
option = {
legend: {
data: fp_key,
top: "1%",
right: "center",
textStyle: {
color: "#000",
},
itemWidth: 16,
itemHeight: 10,
},
tooltip: {
show: true,
trigger: "item",
backgroundColor: "#051144",
borderColor: "#1e74a0",
textStyle: {
color: "#000",
},
formatter: "{b}<br />{a}: {c}分钟",
axisPointer: {
// type: "shadow",
},
},
grid: [
{
// 左侧边框
show: false,
left: "3%",
top: "13%",
bottom: "8%",
containLabel: false,
width: "40%",
},
{
// 中间文字边框
show: false,
left: "51%",
bottom: "8%",
top: "14%",
containLabel: false,
width: "20%",
},
{
// 右侧边框
show: false,
right: "3%",
// left: '95%',
top: "13%",
bottom: "8%",
containLabel: false,
width: "40%",
},
],
dataZoom: [
{
show: false,
type: "slider",
yAxisIndex: [0, 1], // 这里是从X轴的0刻度开始
startValue: 0, // 数据窗口范围的起始数值
endValue: dataZoomEndValue, // 数据窗口范围的结束数值(一次性展示几个)
},
{
show: false,
type: "slider",
yAxisIndex: [1, 2], // 这里是从X轴的0刻度开始
startValue: 0, // 数据窗口范围的起始数值
endValue: dataZoomEndValue, // 数据窗口范围的结束数值(一次性展示几个)
// start: 1, // 默认为0
// end: 100, // 默认为100
// type: 'slider',
// maxValueSpan: 3, // 显示数据的条数(默认显示10个)
// yAxisIndex: [0],
// handleSize: 0, // 滑动条的 左右2个滑动条的大小
// height: '80%', // 组件高度
// left: 600, // 左边的距离
// right: 8, // 右边的距离
// bottom: 10, // 上边边的距离
// borderColor: '#0e426c',
// fillerColor: "#1b579e", //滑动块的颜色
// fillerColor: '#1890ff', // 滑动块的颜色
// backgroundColor: '#0e426c', // 两边未选中的滑动条区域的颜色
// showDataShadow: false, // 是否显示数据阴影 默认auto
// showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
// realtime: true, // 是否实时更新
// filterMode: 'filter',
// yAxisIndex: [0, 1], // 控制的y轴
// brushSelect: false // 刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）
},
],
xAxis: [
{
gridIndex: 0,
type: "value",
triggerEvent: true,
// 翻转
inverse: true,
axisLine: {
show: false,
lineStyle: {
color: "#BDD8FB",
},
},
axisTick: {
show: false,
},
position: "top",
axisLabel: {
show: false,
textStyle: {
color: "#BDD8FB",
fontSize: 12,
},
},
splitLine: {
show: false,
},
},
{
gridIndex: 1,
show: false,
},
{
gridIndex: 2,
type: "value",
axisLine: {
show: false,
lineStyle: {
color: "#BDD8FB",
},
},
axisTick: {
show: false,
},
position: "top",
axisLabel: {
show: false,
color: "#BDD8FB",
fontSize: 12,
},
splitLine: {
show: false,
},
},
],
yAxis: [
{
gridIndex: 0,
type: "category",
inverse: true,
position: "right",
axisLine: {
show: false,
lineStyle: {
width: 1,
color: "#B2D3E4",
},
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
textStyle: {
color: "#BDD8FB",
fontSize: 14,
},
},
data: Xdata,
},
{
gridIndex: 1,
type: "category",
inverse: true,
position: "left",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: "#BDD8FB",
fontSize: 14,
},
},
data: Xdata.map((value) => {
return {
value: value,
textStyle: {
color: "#000",
align: "center",
top: "center",
},
};
}),
},
{
gridIndex: 2,
type: "category",
inverse: true,
position: "left",
axisLine: {
show: false,
lineStyle: {
width: 1,
color: "#B2D3E4",
},
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
textStyle: {
color: "#BDD8FB",
fontSize: 14,
},
},
data: Xdata,
},
],
series: [
// 左边
{
name: fp_key[0],
type: "bar",
stack: "one",
realtimeSort: false,
barGap: 10,
barWidth: 15,
xAxisIndex: 0,
yAxisIndex: 0,
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
borderRadius: [0, 0, 0, 0],
},
label: {
show: true,
position: "left",
textStyle: {
color: "#efdf79",
fontSize: 14,
align: "right",
},
emphasis: {
show: true,
position: "left",
offset: [0, 0],
textStyle: {
color: "#FFCB58",
fontSize: 14,
},
},
},
itemStyle: {
color: {
type: "linear",
x: 0, // 右
y: 0, // 下
x2: 1, // 左
y2: 0, // 上
colorStops: [
{
offset: 0.1,
color: "#d28b45", // 0% 处的颜色
},
{
offset: 1,
color: "#f6b25a", // 100% 处的颜色
},
],
global: false, //设置为false 使得渐变色不受全局影响
},
borderRadius: [0, 0, 0, 0], // 设置圆角半径
},
// 左侧数据
data: LF_val,
},
// 右边
{
name:fp_key[1],
stack: "right",
type: "bar",
realtimeSort: false,
barGap: 10,
barWidth: 15,
xAxisIndex: 2,
yAxisIndex: 2,
showBackground: false,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
borderRadius: [0, 0, 0, 0],
},
// markPoint: { // 设置最大值和最小值
// data: [
// {
// type: "max",
// name: "我是最大值",
// },
// {
// type: "min",
// name: "我是最小值",
// },
// ],
// },
markLine: {
// 设置平均线
lineStyle: {
color: "#7e6f5f",
width: "2",
},
symbol: "none",
label: {
show: true,
position: "insideEndTop",
color: "#000",
formatter: "5分钟指标线",
},
data: [
{
xAxis: 5,
name: "5分钟指标线",
},
],
},
label: {
show: true,
position: "right",
textStyle: {
color: "#d78f7c",
fontSize: 14,
},
emphasis: {
show: true,
position: "right",
offset: [0, 0],
textStyle: {
color: "#2EBAFF",
fontSize: 14,
},
},
},
itemStyle: {
color: {
type: "linear",
x: 1, // 右
y: 0, // 下
x2: 0, // 左
y2: 0, // 上
colorStops: [
{
offset: 0.1,
color: "#1552cc ", // 0% 处的颜色
},
{
offset: 1,
color: "#3e8bfe", // 100% 处的颜色
},
],
},
borderRadius: [0, 0, 0, 0], // 设置圆角半径,
},
// 右侧数据
data: TS_val,
},
],
};