折线echarts 配置项内容和展示

      option = {
        legend: {
          data: ["新用户", "访问用户", "累计用户"],
          left: 0,
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "#fff",
          borderRadius: 4,
          extraCssText: "box-shadow:0px 0px 10px 6px rgba(170,170,170,0.51); ",
          textStyle: {
            fontSize: 16,
            color: "#333",
          },
          formatter: function (params) {
            var value = params[0].name;
            return (
              "<div style='padding:10px 20px;display:flex;flex-direction: column;justify-content: center;align-items: center;'>" +
              "<span style='color:#333333;font-weight: 700';align-self: flex-end;>" +
              value +
              "</span>" +
              "<span style='color:#999999;align-self: flex-end;'>" +
              params[0].seriesName +
              ":" +
              "<span style='color:#078B54;padding-left:6px;'>" +
              params[0].value +
              "</span>" +
              "</span>" +
              "<span style='color:#999999';align-self: flex-end;>" +
              params[1].seriesName +
              ":" +
              "<span style='color:#0851A5;padding-left:6px'>" +
              params[1].value +
              "</span>" +
              "</span>" +
              "<span style='color:#999999';align-self: flex-end;>" +
              params[2].seriesName +
              ":" +
              "<span style='color:#E5622C;padding-left:6px'>" +
              params[2].value +
              "</span>" +
              "</span>" +
              "</div>"
            );
          },

          axisPointer: {
            lineStyle: {
              color: "#E1E1E1",
            },
          },
        },
        color: ["#078B54", "#F38027", "#0851A5"],
        grid: {
          left: 40,
          bottom: 30,
          right: 20,
          top: 60,
        },
        xAxis: {
          type: "category",
          data: [
            "09-04",
            "09-04",
            "09-04",
            "09-04",
            "09-04",
            "09-04",
            "09-04",
            "09-04",
            "09-04",
            "09-04",
            "09-04",
            "09-04",
            "09-04",
            "09-04",
            "09-04",
            "09-04",
            "09-04",
          ],
          axisLabel: {
            color: "#333333",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              // 设置x轴颜色
              color: "#EFF0F1",
            },
          },
        },
        yAxis: {
          type: "value",
          min: 0,
          axisLabel: {
            color: "#999999",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              // 设置x轴颜色
              color: "#EFF0F1",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#F5F5F5",
              type: "solid",
            },
          },
        },
        series: [
          {
            name: "新用户",
            data: [
              100, 20, 10, 30, 30, 100, 20, 10, 20, 40, 400, 20, 40, 40, 10, 10,
              10, 54, 7,
            ],
            type: "line",
            symbol: "circle",
            symbolSize: 8,
            smooth: 0.1,
            itemStyle: {
              borderWidth: 2,
              borderColor: "white",
            },
          },
          {
            name: "访问用户",
            data: [
              10, 20, 100, 301, 30, 30, 20, 10, 20, 40, 40, 10, 10, 10, 54, 70,
            ],
            type: "line",
            symbol: "circle",
            symbolSize: 8,
            smooth: 0.1,
            itemStyle: {
              borderWidth: 2,
              borderColor: "white",
            },
          },
          {
            name: "累计用户",
            data: [
              10, 20, 300, 30, 30, 300, 230, 10, 20, 40, 40, 20, 40, 40, 10, 10,
              10, 54, 70,
            ],
            type: "line",
            symbol: "circle",
            symbolSize: 8,
            smooth: 0.1,
            itemStyle: {
              borderWidth: 2,
              borderColor: "white",
            },
          },
        ],
      };