【Echarts】echarts渐变色平滑折线图，端点虚线标注

echarts渐变色平滑折线图，端点虚线标注

echarts随意一个示例代码
直接点击上方链接↑↑↑将此段代码↓↓↓放到echarts的示例代码编辑框里：

let dataList5 = {
  total: "123",
  list: [
    { name: "00:00", value: 333, value1: 123 },
    { name: "02:00", value: 144, value1: 23 },
    { name: "04:00", value: 444, value1: 13 },
    { name: "06:00", value: 244, value1: 143 },
    { name: "08:00", value: 555, value1: 173 },
    { name: "10:00", value: 777, value1: 113 },
    { name: "12:00", value: 600, value1: 183 },
    { name: "14:00", value: 800, value1: 123 },
    { name: "16:00", value1: 123 },
    { name: "18:00", value1: 1213 },
    { name: "20:00", value1: 123 },
    { name: "24:00", value1: 123 },
  ],
};
const xList = dataList5.list.map((item) => {
  return item.name;
});
this.xList5 = xList
const vList = dataList5.list.filter((item) => {
  if (item.value !== undefined) {
    let it = {};
    it.value = item.value;
    return it;
  }
});
vList[vList.length - 1].itemStyle = {
  // symbol: "../../../assets/imgs/echarts/line_chart_point.png",
  color: "#FAFF0F",
  shadowBlur: 5,
  shadowColor: "#FAFF0F",
  borderColor: "#fff",
  borderWidth: 3,
};
vList[vList.length - 1].symbol = "circle"
vList[vList.length - 1].symbolSize = 20
const v1List = dataList5.list.map((item) => {
  return item.value1;
});
option = {
  title: {
    text: "",
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "5%",
    top: "11%",
    containLabel: true,
  },
  legend: {
    data: [
      {
        name: "今天 ",
      },
      "昨天 ",
    ],
    show: true,
    right: 117,
    itemWidth: 80,
    itemHeight: 15,
    textStyle: {
      color: "#9DCFD6",
      fontSize: 40,
    },
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: xList,
    offset: 20,
    axisLabel: {
      interval:0,
      color: "#9A9A9A", //刻度颜色
      fontSize: 40, //刻度大小
    },
    axisTick: { show: false },
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(0, 255, 255, 0.58)",
        width: 1,
        type: "solid",
      },
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: "#03272C",
      },
    },
  },
  yAxis: {
    type: "value",
    axisTick: { show: false },
    axisLabel: {
      color: "#9A9A9A", //刻度颜色
      fontSize: 40, //刻度大小
    },
    axisLine: {
      show: false,
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: "#03272C",
      },
    },
  },
  tooltip: {
    trigger: "axis",
    backgroundColor: "rgba(13, 118, 93, 0.5)",
    borderColor: "#fff",
    textStyle: { color: "#fff" },
    axisPointer: {
      type: "none",
      shadowStyle: {
        color: "#0953482b",
      },
    },
  },
  series: [
    {
      name: "今天 ",
      type: "line",
      smooth: true,
      z: 2,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
          { offset: 0, color: "#faff0f60" },
          { offset: 0.16, color: "#0bffff70" },
          { offset: 1, color: "#0bffff70" },
        ]),
        opacity: 0.2,
      },
      itemStyle: {
        color: "rgba(141, 253, 239, 1)",
        width: 12,
      },
      markLine: {
        symbol: ['none', 'none'],
        label: { show: false },
        lineStyle: {width: 2, color: '#FAFF0F' },
        data: [{ xAxis: vList.length - 1 }]
      },
      lineStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          1,
          0,
          [
            { offset: 0, color: "#0BFFFF" },
            { offset: 0.8, color: "#0BFFFF" },
            { offset: 1, color: "#FAFF0F" },
          ],
          false
        ),
        width: 8,
        opacity: 1,
      },
      symbol: "circle",
      symbolSize: 10,
      data: vList,
    },

    {
      name: "昨天 ",
      type: "line",
      smooth: true,
      z: 1,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 1, color: "#285513" },
          { offset: 0, color: "#0000" },
        ]),
        opacity: 0.2,
      },
      itemStyle: {
          color: "#382F00",
          width: 12,
      },
      symbol: "none",
      lineStyle: {
        color: "#382F00",
        width: 8,
        opacity: 1,
      },
      data: v1List,
    },
  ],
};