<div id="sssqtb" class="sssqtb"></div>
// 水位示意图
initChart() {
var maxHeight = "250"; //最大高度/堤坝高度
let markline = ["170", "120", "70", "0"]; //设计水位，汛限水位，当前水位，校核水位
let normalColor = "#CBDDFF";
let option = {
xAxis: {
type: "category",
data: ["", "", "", "", "", "", ""],
boundaryGap: false,
axisTick: { show: false },
axisLabel: {
// show: false, // 设置为 false 可以隐藏 x 轴的数据
fontSize: 16,
color: normalColor,
},
axisLine: {
lineStyle: {
color: "#48BCFF",
width: 1,
},
},
splitLine: {
lineStyle: {
color: "#FFF",
},
},
},
yAxis: {
nameTextStyle: {
fontSize: 16,
color: normalColor,
},
max: maxHeight,
min: 0,
boundaryGap: [1, 1],
type: "value",
axisLine: {
show: true,
lineStyle: {
color: "#48BCFF",
width: 1,
},
},
axisTick: { show: false },
axisLabel: {
fontSize: 14,
color: "#ffffff",
},
splitLine: {
show: false,
lineStyle: {
color: "#FFF",
type: "dotted",
opacity: 0.02,
width: 1,
},
},
splitNumber: 5,
},
grid: {
top: "18%",
right: "20%",
left: "3%",
bottom: "0",
containLabel: true,
},
graphic: {
elements: [
{
type: "image",
right: "3%",
top: "18%",
z: 5,
bounding: "raw",
origin: [0, 0],
style: {
image: require("../../../../assets/images/drawMap/mapIndex/reservoir.png"),
width: 80,
height: 140,
},
},
{
type: "text",
right: 0,
top: "10%",
right: "5%",
z: 5,
style: {
text: "堤坝高度：" + maxHeight + "m",
fill: "#FFF",
fontSize: 12,
},
},
],
},
series: [
{
type: "line",
data: [55, 70, 55, 70, 60,70,40],
// barCategoryGap: "-100%",
// 区域
areaStyle: {
color: '#48BCFF',
opacity: 0.5
},
smooth: true,// 平滑
symbolSize: 0, // 设置小圆点的大小
// 线颜色
lineStyle: {
normal: {
color: '#48BCFF',
width: 1,
// type: 'dashed'
}
},
// itemStyle: {
// color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: "#0493df" },
// { offset: 1, color: "#48BCFF" },
// ]),
// },
markLine: {
silent: true, //鼠标移入高亮 true不高亮
symbol: ['none', 'none'],
data: [
{
label: {
position: "middle",
fontSize: 12,
formatter: "{b}{c}m",
color: "#FF473A",
},
name: "校核水位",
yAxis: markline[0],
lineStyle: { type: "solid", color: "#FF473A ", width: 1, type: 'dashed', },
},
{
label: {
position: "middle",
fontSize: 12,
formatter: "{b}{c}m",
color: "#FF0",
},
name: "汛限水位",
yAxis: markline[1],
lineStyle: { type: "solid", color: "#FF0", width: 1, type: 'dashed', },
},
{
label: {
position: "middle",
fontSize: 12,
formatter: "{b}{c}m",
color: "#48BCFF",
},
name: "当前水位",
yAxis: markline[2],
lineStyle: { type: "solid", color: "#48BCFF ", width: 1, type: 'dashed', },
},
// {
// label: {
// position: "insideMiddleBottom",
// fontSize: 12,
// formatter: "{b}{c}m",
// color: "#FFF",
// },
// name: "校核洪水位",
// yAxis: markline[3],
// lineStyle: { type: "solid", color: "#FFF", width: 1 },
// },
],
},
},
],
};
let myChart = this.$echarts.init(document.getElementById("sssqtb"));
myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
});
},
