const payload = {
id: 'left-bottom-1',
title: ['未闭合', '已闭合','闭合率'],
color: [
'rgba(43, 139, 248, 0.97)',
'rgba(18, 196, 254, 0.97)',
'rgba(16, 233, 220, 0.97)',
'rgba(17, 220, 151, 0.97)',
],
wordNum: 3,
data: {
data1: ['10', '19', '68', '210','125'],
data2: ['20', '22', '174', '25','77'],
x: ['砼拌和站', '水稳拌和站', '沥青拌和站', '沥青拌和站','智能压浆'],
total1: 197,
total2: 197,
},
};
const data1 = payload.data.data1;
const data2 = payload.data.data2;
const x = payload.data.x;
const wordNum = payload.wordNum;
const formatter = (params, wordNum) => {
if (!wordNum) return params;
let newParamsName = '';
const paramsNameNumber = params.length;
const provideNumber = wordNum;
const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (let p = 0; p < rowNumber; p++) {
let tempStr = '';
const start = p * provideNumber;
const end = start + provideNumber;
if (p === rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + '\n';
}
newParamsName += tempStr;
}
} else {
newParamsName = params;
}
return newParamsName;
};
option = {
grid: {
left: 15,
right: 15,
bottom: 2,
top: 45,
containLabel: true,
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(9, 30, 60, 0.6)',
extraCssText: 'box-shadow: 0 0 8px rgba(0, 128, 255, 0.27) inset;',
borderWidth: 0,
confine: false,
appendToBody: true,
textStyle: {
color: '#fff',
fontSize: 10,
},
},
legend: {
width: window.innerWidth < 1600 ? '100%' : '60%',
icon: 'rect',
top: 7,
itemWidth: 12,
itemHeight: 12,
textStyle: {
color: 'rgba(23, 26, 29, 1)',
fontSize: 14,
},
align: 'left',
},
xAxis: {
data: x,
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: 'rgba(126, 134, 142, 0.5)',
width: 0.8,
}
},
axisLabel: {
interval: 0,
rotate: 0,
color: 'rgba(23, 26, 29, 1)',
fontSize: 14,
// formatter(params) {
// return formatter(params, wordNum);
// },
},
},
yAxis: [
{
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: 'rgba(255, 129, 109, 0.1)',
width: 1, //这里是为了突出显示加上的
},
},
axisLabel: {
color: 'rgba(23, 26, 29, 1)',
fontSize: 14,
},
splitArea: {
areaStyle: {
color: 'rgba(255,255,255,.5)',
},
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(126, 134, 142, 0.24)',
type:'dotted'
}
},
// splitLine: {
// show: true,
// lineStyle: {
// color: 'rgba(255, 129, 109, 0.1)',
// width: 0.5,
// type: 'dashed',
// },
// },
},
{
type: "value",
nameTextStyle: {
color: "rgba(185, 185, 185, 1)"
},
max:100,
position: "right",
axisLine: {
show:false,
},
splitLine: {
show: false,
},
axisTick:{
show:false,
},
axisLabel: {
show: true,
formatter: "{value} %", //右侧Y轴文字显示
textStyle: {
color: 'rgba(23, 26, 29, 1)',
fontSize: 14,
}
},
}
],
series: [
{
name: payload.title[0],
type: 'pictorialBar',
barGap: '-20%',
symbol: 'path://M18,3 L46,3 78,68 18,68 46,3 z',
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(184, 143, 255, 1)',
},
{
offset: 1,
color: 'rgba(184, 143, 255, 0.10)',
},
],
global: false, // 缺省为 false
},
},
emphasis: {
itemStyle: {
opacity: 1,
},
},
data: data1,
},
{
name: payload.title[1],
type: 'pictorialBar',
barGap: '-20%',
symbol: 'path://M18,3 L46,3 78,68 18,68 46,3 z',
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(255, 213, 77, 1)',
},
{
offset: 1,
color: 'rgba(255, 213, 77, 0.10)',
},
],
global: false, // 缺省为 false
},
},
emphasis: {
itemStyle: {
opacity: 1,
},
},
data: data2,
},
{
name: payload.title[2],
type: 'line',
smooth: true,
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
lineStyle: {
color: ' rgba(146, 217, 67, 1)',
width: 2,
},
symbol: 'circle',
symbolSize: 6,
itemStyle: {
color: 'rgba(146, 217, 67, 1)',
},
z: 13,
areaStyle: {
origin: 50,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(146, 217, 67, 0.12)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(146, 217, 67, 0)' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
},
data: [60, 45, 70, 24, 66],
},
],
};