// let xLabel = ['2021-12-17', '2021-12-18', '2021-12-19', '2021-12-20', '2021-12-21', '2021-12-22', '2021-12-23']
// let yData = [0.4, 0.6, 0.2258, 0.85, 0.5, 0.4]
let obj = {
xData: ['2021-12-17', '2021-12-18', '2021-12-19', '2021-12-20', '2021-12-21', '2021-12-22', '2021-12-23', , '2021-12-24', '2021-12-25', '2021-12-26', '2021-12-27', '2021-12-28', '2021-12-29'],
yData1: [0, 1.12, 2, 1, 2, {
value: 5,
itemStyle: {//折线点样式
color: 'rgba(243, 65, 65, 1)',
borderWidth: 0,
},
}, 2, 1, 2, 1, 0, -1, -2, -1, -2, -1],
yData2: [0, 1.12, 2, 1, 2, 1, 2, 1, 2, 1, 0, -1, -2, -1, -2, -1],
// yData2: [5.55, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5],//界限
// yData3: [-5, -5, -5, -5, -5, -5, -5, -5, -5, -5, -5, -5, -5, -5],//界限
yName1: "标准值",
yLabel: "相对误差(%)",
legendData1: "不合格",
legendData2: "合格",
}
let max = Math.max(...obj.yData2) + 1
let min = Math.min(...obj.yData2) - 1
max > 5 ? '' : max = 5
min < -5 ? '' : min = -5
let option = {
backgroundColor: 'black',
grid: {
top: '20%',
left: '15%',
right: '15%',
bottom: '20%',
// containLabel: true
},
tooltip: {
trigger: 'axis',
className: 'echartsTooltip',
backgroundColor: 'rgba(37, 209, 174, 0.5)',
borderWidth: 0,
textStyle: {
color: 'rgba(255, 255, 255, 1)',
fontFamily: 'DIN-Medium',
fontWeight: 500,
fontSize: 16,
// width: 20,
padding: 10,
margin: 0,
},
// extraCssText: "width: 30px;height: 20px;display:flex;justify-content: center;align-items: center;",
axisPointer: {
type: 'line',
lineStyle: {
type: 'solid',
color: 'rgba(255, 255, 255, 0)'
},
},
formatter: function (params) {
let htmlStr = ''
const param = params[0]
const value = param.value //y轴值
htmlStr += '<div style="width: 35px;height: 20px;display:flex;justify-content: center;align-items: center;">'
//文本
htmlStr += value
htmlStr += '</div>'
return htmlStr
},
},
legend: {
show: true,
top: '10%',
right: '10%',
selectedMode: false,//点击
itemWidth: 22, // 图例标记的图形宽度。
// itemGap: 20, // 图例每项之间的间隔。
itemHeight: 17, // 图例标记的图形高度。
icon: "triangle",
// color: ["rgba(243, 65, 65, 1)", "rgba(37, 209, 174, 1)"],
textStyle: {
color: 'rgba(180, 241, 241, 1)',
fontSize: 16,
padding: [0, 8, 0, 8]
},
data: [{
name: obj.legendData1,
itemStyle: {
color: "rgba(243, 65, 65, 1)",
}
}, {
name: obj.legendData2,
itemStyle: {
color: "rgba(37, 209, 174, 1)",
}
}]
},
xAxis: [{
// type: 'category',
boundaryGap: false,
axisLine: { //坐标轴轴线相关设置。数学上的x轴
show: true,
lineStyle: {
color: 'rgba(22, 118, 140, 1)'
},
},
axisTick: {
show: false // 不显示坐标轴刻度线
},
axisLabel: { //坐标轴刻度标签的相关设置
textStyle: {
color: 'rgba(180, 241, 241, 1)',
padding: 12,
fontSize: 16
},
formatter: function (data) {
return data
}
},
splitLine: {
show: false,
lineStyle: {
color: 'rgba(255, 255, 255, 0.2)'
},
},
data: obj.xData
}],
yAxis: [{
type: 'value',
name: obj.yLabel,
nameTextStyle: {
color: "rgba(180, 241, 241, 1)",
fontSize: 16,
padding: 10
},
max: max,
min: min,
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: 'rgba(22, 118, 140, 1)'
},
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(22, 118, 140, 1)"
}
},
axisLabel: {
show: true,
textStyle: {
color: 'rgba(180, 241, 241, 1)',
padding: 16
},
formatter: function (value) {
return value
}
},
axisTick: {
show: false,
},
}],
series: [{
// name: obj.yName1,
type: 'line',
showAllSymbol: true,
showSymbol: true,
symbol: 'triangle',
symbolSize: [24, 20],
smooth: true,//平滑
lineStyle: {
normal: {
width: 2,
color: "rgba(37, 209, 174, 1)", // 线条颜色
type: 'dashed',
},
// borderColor: 'rgba(0,0,0,.4)',
},
itemStyle: {//折线点样式
color: 'rgba(37, 209, 174, 1)',
borderWidth: 0,
},
tooltip: {
show: true
},
label: {
show: false,
},
markLine: {
data: [
{
yAxis: 5,
symbol: 'circle',
label: { show: false },
},
{
yAxis: -5,
symbol: 'circle',
label: { show: false },
},
],
label: {
normal: {
show: true,
position: 'right',
textStyle: {
color: 'black',//标注线终点文字颜色
fontSize: 20,
fontWeight: 800,
padding: [0, 0, 10, 0],//文字间距
}
},
},
lineStyle: {//标注线样式
normal: {
type: 'solid',
color: 'rgba(243, 65, 65, 1)',//标注线颜色
},
},
},
// areaStyle: { //区域填充样式
// normal: {
// color: 'rgba(250, 212, 95, 0.2)',
// //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
// // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// // offset: 0,
// // color: "rgba(0, 173, 216, 0.4)"
// // },
// // {
// // offset: 1,
// // color: "rgba(4, 125, 156, 0)"
// // }
// // ], false),
// shadowColor: 'rgba(25,163,223, 0)', //阴影颜色
// shadowBlur: 0 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
// }
// },
data: obj.yData1
},
{
name: obj.legendData1,
type: 'bar',
itemStyle: {
normal: {
color: 'rgba(243, 65, 65, 1)'
}
},
data: []
},
{
name: obj.legendData2,
type: 'bar',
itemStyle: {
normal: {
color: 'rgba(37, 209, 174, 1)'
}
},
data: []
},
]
};