TimeAxisWithMarker

by msbasanth

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="node_modules/echarts/dist/echarts.js"></script>
  </head>
  <body>
    <div id="main" style="width: 1800px; height: 250px"></div>

    <script>
      var dom = document.getElementById("main");
      var chart = echarts.init(dom, null, { renderer: "svg" });
      data = [
        {
          value: ["1997-07-1", 180],
        },
        {
          value: ["1998-07-1", 200],
        },
        {
          value: ["1999-07-1", 300],
        },
      ];
      var markLine1 = [];
      markLine1.push([
        {
          name: "start: ",
          type: "min",
          label: {
            formatter: "min",
            position: "min",
          },
        },
        {
          name: "end: ",
          type: "max",
        },
      ]);
      option = {
        grid: {
          width: "100%",
        },
        xAxis: {
          type: "time",
          axisTick: {
            show: false,
          },
          markLine: {
            data: [{ name: "average", type: "average", valueIndex: 0 }],
          },
          axisPointer: {
            show: true,
            type: "shadow",
            shadowStyle: {
              color: "rgba(55, 8, 8, 1)",
            },
          },
          axisLabel: {
            formatter: function (value) {
              return echarts.format.formatTime("yyyy-mm-dd", value);
            },
          },
          axisLine: {
            lineStyle: {
              color: "rgba(122, 122, 122, 0.8)",
              width: 8,
              type: "solid",
            },
          },
          markLine: {
            data: [
              [
                { name: "start", xAxis: 1998, yAxis: 0 },
                { name:...