代码:
const option = {
title: {
text: "板坯成分分析",
top: "2%",
left: "center",
textStyle: {
color: "#fff",
fontSize: "1rem",
},
},
xAxis: {
type: "category",
boundaryGap: false,
data: [
"c",
"si",
"mn",
"p",
"s",
"nb",
"v",
"ti",
"mo",
"cu",
"n",
"R2DT",
"FDT",
"CT",
"均热",
"预热",
"加热1",
"加热2",
"缓冷",
"快冷",
],
axisLabel: {
interval: 0, //强制显示文字
rotate: 30,
show: true,
textStyle: {
color: "#fff",
fontSize: 10,
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
yAxis: {
type: "value",
show: false,
axisLabel: {
formatter: "{value} W",
},
max: 1200,
axisPointer: {
snap: true,
},
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
},
},
series: [
{
name: "",
type: "line",
smooth: false,
// prettier-ignore
data: [800, 50, 0, 260, 270, 300, 550, 500, 400, 390, 180, 390, 400, 500, 600, 750, 800, 700, 600, 400],
itemStyle: {
normal: {
color: "#c8cc8e",
borderColor: "#c8cc8e", //拐点边框颜色
borderWidth: 2, //拐点边框大小
},
},
lineStyle: {
color: "#c8cc8e",
},
markArea: {
itemStyle: {
color: "rgba(255, 173, 177, 0.4)",
},
//当前为
data: [
[
{
// name: "Morning Peak",
x: "0%",
},
{
x: "0%",
},
],
],
},
markLine: {
data: [
{
// type: "max",
name: "Avg",
yAxis: 1100,
label: {
position: "end",
formatter: "3α",
},
itemStyle: {
normal: {
color: "#999993",
borderColor: "#999993", //拐点边框颜色
borderWidth: 2, //拐点边框大小
},
},
lineStyle: {
color: "#999993",
},
},
{
// type: "median",
name: "Avg",
yAxis: 700,
label: {
position: "end",
formatter: "μ",
},
itemStyle: {
normal: {
color: "#999993",
borderColor: "#999993", //拐点边框颜色
borderWidth: 2, //拐点边框大小
},
},
lineStyle: {
color: "#999993",
},
},
{
// type: "value",
name: "Avg",
yAxis: 300,
label: {
position: "end",
formatter: "-3α",
},
itemStyle: {
normal: {
color: "#999993",
borderColor: "#999993", //拐点边框颜色
borderWidth: 2, //拐点边框大小
},
},
lineStyle: {
color: "#999993",
},
},
],
},
},
],
};
const peak = [
"c",
"si",
"mn",
"p",
"s",
"nb",
"v",
"ti",
"mo",
"cu",
"n",
"R2DT",
"FDT",
"CT",
"均热",
"预热",
"加热1",
"加热2",
"缓冷",
"快冷",
];
//计算每个线段X轴百分比
const itemRatio = 80 / (option.xAxis.data.length - 1);
peak.map((peak) => {
//当前所选位置的索引
let peakIndex = option.xAxis.data.indexOf(peak);
//设置起始位置，要把开始的百分之10加上
let xStart = 10 + itemRatio * peakIndex;
option.series[0].markArea.data.push([
{
name: "",
//减掉长度的一半为中心点左侧
x: xStart - itemRatio / 4 + "%",
yAxis: parseInt("300"),
itemStyle: {
color: "rgba(50, 163, 182, 0.16)",
borderColor: "#1f70a7",
borderWidth: 2,
borderType: "solid",
},
},
{
//加上长度的一半为中心点右侧
x: xStart + itemRatio / 4 + "%",
yAxis: parseInt("1100"),
},
]);
});
myChart.setOption(option);
