echarts版本：4.8.0
效果圖：

實(shí)現(xiàn)：

<template><divid="chart"style="width: 480px; height: 650px; background: #020f2b"></div> </template><script> export default {data() {return {};},created() {},mounted() {this.initChart();},methods: {initChart() {var maxHeight = "65"; //最大高度/堤壩高度let markline = ["62", "57", "50", "0"]; //設(shè)計(jì)水位，汛限水位，當(dāng)前水位，校核水位let normalColor = "#CBDDFF";let option = {xAxis: {type: "category",data: [""],axisTick: { show: false },axisLabel: {fontSize: 16,color: normalColor,},axisLine: {lineStyle: {color: "#FFF",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: "#FFF",width: 1,},},axisTick: { show: false },axisLabel: {fontSize: 16,color: normalColor,},splitLine: {show: false,lineStyle: {color: "#FFF",type: "dotted",opacity: 0.02,width: 1,},},splitNumber: 5,},grid: {top: "20%",right: "20%",left: "3%",bottom: "12%",containLabel: true,},graphic: {elements: [{type: "image",right: "3%",top: "18%",z: 5,bounding: "raw",origin: [0, 0],style: {image: require("../images/reservoir.png"),width: 130,height: 460,},},{type: "text",right: 0,top: "10%",right: "5%",z: 5,style: {text: "堤壩高度：" + maxHeight + "m",fill: "#FFF",fontSize: 16,},},],},series: [{type: "bar",data: [markline[2]],barCategoryGap: "-100%",itemStyle: {color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#0493df" },{ offset: 1, color: "#0345a3" },]),},markLine: {silent: true, //鼠標(biāo)移入高亮 true不高亮data: [{label: {position: "middle",fontSize: 18,formatter: "{c}m",color: "#FF0",},name: "設(shè)計(jì)洪水位",yAxis: markline[0],lineStyle: { type: "solid", color: "#FF0", width: 1 },},{label: {position: "middle",fontSize: 18,formatter: "{c}m",color: "#FF473A",},name: "汛限水位",yAxis: markline[1],lineStyle: { type: "solid", color: "#FF473A", width: 1 },},{label: {position: "middle",fontSize: 18,formatter: "{c}m",color: "#1106df",},name: "當(dāng)前水位",yAxis: markline[2],lineStyle: { type: "solid", color: "#1106df", width: 1 },},{label: {position: "insideMiddleBottom",fontSize: 18,formatter: "{c}m",color: "#FFF",},name: "校核洪水位",yAxis: markline[3],lineStyle: { type: "solid", color: "#FFF", width: 1 },},],},},],};let myChart = this.$echarts.init(document.getElementById("chart"));myChart.setOption(option);window.addEventListener("resize", () => {myChart.resize();});},} }; </script>

附圖片：

以上

總結(jié)

以上是生活随笔為你收集整理的Echarts之水库水位的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。