Echarts之折线图背景区域等级划分

背景区域等级划分"/>

Echarts之折线图背景区域等级划分

需求：

鼠标移入：

实现：

<template><div class="grade"><div id="grade-echart"></div><div class="legend-list"><div class="legend-item" v-for="(item, index) in legendList" :key="index"><spanclass="item-color":style="{ background: item.legendColor }"></span><span class="item-name">{{ item.legendName }}</span></div></div></div>
</template><script>
export default {data() {return {legendList: [{legendName: "一级",legendColor: "#66FFFF",},{legendName: "二级",legendColor: "#FC5A5A",},{legendName: "三级",legendColor: "#00EA9C",},{legendName: "四级",legendColor: "#F3D74A",},{legendName: "五级",legendColor: "#4F9EFD",},],};},methods: {initChart() {let colors = ["#66FFFF","#FC5A5A","#00EA9C","#F3D74A","#4F9EFD","#FF923F","#7662D6",];let normolColor = "#A0B2D3";let option = {color: ["#FF923F"],tooltip: {trigger: "axis",},grid: {left: "3%",right: "3%",top: "8%",bottom: "2%",containLabel: true,},xAxis: {type: "category",data: ["00.00","02:00","04:00","06:00","08:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","24:00",],axisLabel: {color: normolColor,fontSize: 16,},axisTick: {show: false,},axisLine: {show: false,},// boundaryGap: false, // type: "value" 设置boundaryGap: ["20%", "20%"], //type: "category" 设置},yAxis: {type: "value",axisLabel: {color: normolColor,fontSize: 16,},axisTick: {show: false,},axisLine: {show: false,},},series: [{data: [0.2, 2, 5, 4, 6, 9, 6.5, 5, 4.2, 3.6, 2.5, 1.6, 5],type: "line",// lineStyle: {//   color: "#FF923F", //折线颜色// },markArea: {silent: true,data: [[{yAxis: 0,itemStyle: {color: colors[0],},},{yAxis: 2,},],[{yAxis: 2,itemStyle: {color: colors[1],},},{yAxis: 4,},],[{yAxis: 4,itemStyle: {color: colors[2],},},{yAxis: 6,},],[{yAxis: 6,itemStyle: {color: colors[3],},},{yAxis: 8,},],[{yAxis: 8,itemStyle: {color: colors[4],},},{yAxis: 10,},],],},},],};let myChart = this.$echarts.init(document.getElementById("grade-echart"));myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});},},mounted() {this.initChart();},
};
</script><style lang="scss" scoped>
.grade {width: 700px;height: 380px;background: rgba(2, 15, 43, 0.7);#grade-echart {width: 700px;height: 350px;}.legend-list {width: 100%;display: flex;justify-content: center;color: #a0b2d3;.legend-item {margin: 0 15px;span {display: inline-block;}.item-color {width: 10px;height: 10px;margin-right: 5px;}}}
}
</style>

以上