Echarts网格颜色渐变 + 折线图折线发光高亮效果

最新推荐文章于 2024-11-15 15:03:47 发布

码农Davi

最新推荐文章于 2024-11-15 15:03:47 发布

阅读量3.5k

点赞数 4

分类专栏： Echarts图表

本文链接：https://blog.youkuaiyun.com/weixin_45906632/article/details/109679291

版权

Echarts图表专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用ECharts库创建带有折线发光高亮和网格颜色渐变效果的图表。通过设置lineStyle和areaStyle属性，详细展示了配置阴影、渐变颜色等细节，以实现美观的视觉呈现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

series:里面定义

折线发光高亮的效果

   lineStyle: {
              shadowColor: "#5cfbff", //透明的颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              opacity: 1, //透明度
              shadowBlur: 8, //阴影大小
              type: "solid", //实线
              width: 2,
            },

网格颜色的渐变

   areaStyle: {
              normal: {
                //前四个参数代表位置 左下右上，暗青色到亮青色，
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(12,180,250, 1)" }, //从上往下的渐变
                  { offset: 1, color: "rgba(63, 208, 249, 0)" },
                ]),
              },
            },

附上封住代码

<template>
  <div id="linechart" />
</template>
<script>
import echarts from "echarts";

export default {
  props: ["id"],
  data() {
    return {
      charts: "",
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart("linechart");
    });
  },
  methods: {
    initChart(id) {
      this.charts = echarts.init(document.getElementById(id), "blue");
      this.charts.setOption({
        color: ["#00D8FF"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          y: "bottom",
          itemGap: 30,
          itemWidth: 30,
          itemHeight: 10,
          textStyle: {
            fontSize: 13, //字体大小
            color: "rgb(142, 199, 220)", //字体颜色
          },
        },
        calculable: true,

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "06:00",
              "09:00",
              "12:00",
              "15:00",
              "18:00",
              "21:00",
              "24:00",
            ],
            axisLabel: {
              show: true,
              textStyle: {
                color: ["rgb(142, 199, 220)"],
              },
            },
            axisLine: {
              lineStyle: {
                color: "#023c7a",
                width: 1,
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value} °C",
            },
            splitLine: {
              lineStyle: {
                color: "#023c7a",
                width: 1,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#023c7a",
                width: 1,
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: ["rgb(142, 199, 220)"],
              },
            },
          },
        ],
        series: [
          {
            symbolSize: 0, //折线点的大小

            type: "line",
            data: [6000, 4000, 8000, 10000, 4000, 2000, 4000, 2000, 6000],
            areaStyle: {
              normal: {
                //前四个参数代表位置 左下右上，暗青色到亮青色，
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(12,180,250, 1)" }, //从上往下的渐变
                  { offset: 1, color: "rgba(63, 208, 249, 0)" },
                ]),
              },
            },

            lineStyle: {
              shadowColor: "#5cfbff", //透明的颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              opacity: 1, //透明度
              shadowBlur: 8, //阴影大小
              type: "solid", //实线
              width: 2,
            },
          },
        ],
      });
    },
  },
};
</script>

效果图

在这里插入图片描述