let color = ["#fce348"]; // 线条颜色
let visualMap = [];
var mothName = ["2023.05", "2023.06", "2023.07", "2023.08", "2023.09", "2023.10"]; // name值 例:["1月","2月","3月","4月","5月"]
var echartData = [[30, 15, 90, 70, 60, 19]]; // value值 例:[[0,0,0,0,0],[0,0,0,0,0]]
let legendItem = ["飞机"]; // 图例项目 例:["飞机","汽车"]
let danWei = ""; // 单位
let upColor = ["#000000", "#FF3D3D", "#3271E2"];//超出标准线折线图的颜色
let region = [50, 80];//区域值
color.map((item, index) => {
visualMap.push({
type: "piecewise",
show: false,
dimension: 1,
seriesIndex: index,
pieces: [
{
gt: region[1],
color: upColor[1], //偏高
},
{
gte: region[0],
lte: region[1],
color: upColor[0], //正常
},
{
lt: region[0],
color: upColor[2],//偏低
},
],
outOfRange: {
// 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
color: color[index],
},
});
});
const seriesfun = (data, legend, color) => {
let statistics = new Array()
for (let i = 0; i < data.length; i++) {
let stiac = {
name: legend[i],
type: "line",
// symbol: "circle", // 默认空心圆
smooth: false, //是否平滑
showSymbol: true, // 是否默认展示圆点
symbolSize: 6, //设定实心点的大小
label: {
show: true, // 线条折点处显示值
position: 'top',
formatter: function (params) {
let geV;
if (region[1] > params.value && params.value >= region[0]) {
geV = params.value + "正常区域"
} else if (params.value >= region[1]) {
geV = params.value + "偏高区域"
} else {
geV = params.value + "偏低区域"
}
return geV
}
},
zlevel: 3,
//标记线
markLine: {
silent: true,
lineStyle: {
color: "red",
},
data: [
{
yAxis: region[0],
},
{
yAxis: region[1],
},
],
},
data: data[i],
}
statistics.push(stiac)
}
return statistics
}
option = {
backgroundColor: "#fff",
title: {
show: true,//是否显示标题，默认显示，可以不设置
text: "项目-白细胞",//图表标题文本内容
textStyle: {//标题内容的样式
color: 'rgb(0, 0, 0,1)',
fontStyle: 'normal',//lic主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
fontWeight: "bolder",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
fontFamily: "san-serif",//主题文字字体，默认微软雅黑
fontSize: 18//主题文字字体大小，默认为18px
},
left: "center",//。
top: "20px",//
// right: "auto",//
// bottom: "auto",
},
//超出标准线颜色
visualMap: visualMap,
color: color,
legend: {
center: true, // 对齐方式
top: "13%", // 头部距离
left: "center",
data: legendItem,
itemWidth: 15,
itemHeight: 10,
itemGap: 30,
// icon: "circle", // rect 矩形 circle 圆点 line 线条 triangle三角形 roundRect 圆角矩形 arrow 箭头
textStyle: {
color: "rgb(0, 0, 0,1)",
fontSize: "16",
}
},
// calculable: true,
tooltip: {
trigger: "axis",
formatter: function (params) {
let html = "";
params.forEach(v => {
html += `<div style="color: #666;font-size: 14px;line-height: 24px">
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]
};"></span>
${v.seriesName} ${v.name}
<span style="color:${color[v.componentIndex]
};font-weight:700;font-size: 18px">${v.value}</span>
${danWei}`;
});
return html;
},
extraCssText:
"background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;"
},
grid: {
top: "25%",
right: "5%",
left: "10%",
bottom: "20%"
},
xAxis: [
{
type: "category",
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
type: "solid",
color: "rgb(0, 0, 0,1)"
}
},
// X轴上的 字体样式
axisLabel: {
inside: false,
// rotate: 30,
color: "rgb(0, 0, 0,0.8)", // x轴颜色
fontWeight: "normal",
fontSize: "16",
lineHeight: 22
},
data: mothName
}
],
yAxis: [
{
type: "value",
name: "",
axisLabel: {
color: "rgb(0, 0, 0,0.8)",
fontSize: "14",
},
// 单位
nameTextStyle: {
color: "rgba(255, 255, 255,0.7)",
fontSize: "14",
lineHeight: 40,
padding: [0, -1040, -10, 0] // 上右下左与原位置距离
},
splitLine: {
show: true, // 是否显示 Y轴线条
lineStyle: {
type: "solid", // solid实线 dashed虚线
color: "rgb(0, 0, 0,0.3)"
}
},
axisLine: {
show: false, // 是否显示 Y轴刻度线条
lineStyle: {
type: "dashed",
color: "rgb(47, 105, 212);"
}
},
axisTick: {
show: false
},
}
],
series: seriesfun(echartData, legendItem, color)
};