需求:
鼠标移入:
实现:
<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">
<span
class="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>
以上