echarts之双折线渐变图

vue3+echarts实现双折线渐变图

echarts中文官网：https://echarts.apache.org/examples/zh/index.html

效果图展示：
整体代码如下：

<template>
 	<div id="lineChart" style="width:100%;height:400px;"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted } from "vue";

// 横坐标data数据
const xData = [
  "05-01",
  "05-02",
  "05-03",
  "05-04",
  "05-05",
  "05-06",
  "05-07",
  "05-08",
  "05-09",
  "05-10",
  "05-11",
  "05-12",
  "05-13",
  "05-14",
  "05-15",
  "05-16",
  "05-17",
  "05-18",
  "05-19",
  "05-20",
];

// 双折线渐变图data数据
const lineData = [
  [
    782, 859, 578, 564, 615, 787, 623, 606, 750, 610, 703, 501, 675, 598, 721,
    550, 767, 600, 692, 987,
  ],
  [
    780, 589, 703, 510, 714, 503, 474, 621, 692, 512, 700, 876, 686, 780, 614,
    781, 489, 700, 621, 600,
  ],
];

onMounted(() => {
   const myLineChart = echarts.init(document.getElementById("lineChart"));

  const lineOption = {
    tooltip: {
      trigger: "axis",
      type: "line",
      axisPointer: {
        lineStyle: {
          color: "rgba(69, 173, 175, 1)",
        },
      },
      backgroundColor: "rgba(7,18,26, 1)",
      borderWidth: 0,
      textStyle: {
        color: "#fff",
        fontSize: 14,
      },
    },
    // 图例
    legend: {
      icon: "rect", // circle圆形;rect方形;roundRect圆角方形;triangle三角形;diamond菱形;pin定位点;arrow导航三角指针
      data: ["实际用量", "计划用量"],
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 15, // 间隔
      right: "50%",
      top: "8%",
      textStyle: {
        fontSize: 12,
        color: "#fff",
      },
    },
    // 图表位置
    grid: {
      left: "1%",
      right: "2%",
      top: "27%",
      bottom: "3%",
      containLabel: true, // 是否包含坐标刻度
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false, // 散点图的留白策略
        axisLine: {
          lineStyle: {
            color: "#415264",
            width: 2,
            type: "solid",
          },
        },
        axisLabel: {
          color: "#A6C6E1",
          fontSize: 12,
        },
        axisTick: {
          show: false,
        },
        data: xData,
      },
    ],
    yAxis: [
      {
        type: "value",
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "#284556",
          },
        },
        axisLabel: {
          //  改变y轴字体颜色和大小
          // formatter: '{value}间 ', //  给y轴添加单位
          color: "#9FA3A8",
          fontSize: 12,
        },
        splitLine: {
          lineStyle: {
            color: "#284556",
            type: "dashed",
          },
        },
      },
    ],
    series: [
      {
        name: "实际用量",
        type: "line",
        smooth: true, // 是否为平滑曲线
        lineStyle: {
          width: 2,
        },
        symbol: "circle",
        symbolSize: 5,
        showSymbol: false, // 是否显示数据点
        areaStyle: {
          // 设置渐变色
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(18,166,254,0.6)",
              },
              {
                offset: 0.8,
                color: "rgba(7,18,26,0.1)",
              },
            ],
            false
          ),
        },
        itemStyle: {
          color: "#12A6FE",
          borderWidth: 1,
        },
        data: lineData[0],
      },
      {
        name: "计划用量",
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          width: 2,
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(51,181,107,0.6)",
              },
              {
                offset: 0.8,
                color: "rgba(7,18,26,0.5)",
              },
            ],
            false
          ),
        },
        itemStyle: {
          color: "#33B56B",
          borderWidth: 1,
        },
        data: lineData[1],
      },
    ],
  };
  myLineChart.setOption(lineOption);
});
</script>

Genuine effort turns challenges into stepping stones for real growth.‌