折线图示例

image.png

var xData = [];
for (var i = 1; i < 13; i++) {
xData.push(`2021-${i}`);
}
var yData = [29, 65, 131, 18, 50, 58, 58, 67, 34, 123, 112, 99];
yData = yData.map((d) => {
    return {
      value: d,
      itemStyle: {
        borderColor: "#16D998",
        color: "#fff",
        borderWidth: 2,
      },
      label: {
        show: true,
        position: "top",
        lineHeight: 20,
        borderRadius: 5,
        backgroundColor: "rgba(255,255,255,.9)",
        borderColor: "#ccc",
        borderWidth: "1",
        padding: [5, 15, 4],
        color: "#000000",
        fontSize: 14,
        fontWeight: "normal",
      },
    };
    // #16D998
});
option = {
    emphasis:{
        focus:"none",
        label: {
            show: false,
            position: "top",
            lineHeight: 20,
            borderRadius: 5,
            backgroundColor: "rgba(255,255,255,.9)",
            borderColor: "#16D998",
            borderWidth: "1",
            padding: [5, 15, 4],
            color: "#16D998",
            fontSize: 14,
            fontWeight: "normal",
          },
    },
    grid: {
      top: "15%",
      left: "5%",
      right: "5%",
      bottom: "15%",
    },
    xAxis: {
                name:"月份",
      type: "category",
                axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "solid",
                        color:"#F0F0F0"
        },
      },
      data: xData,
    },
    yAxis: {
                name:"访问量",
      type: "value",
      min: 0,
      // splitNumber: 3,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "solid",
                        color:"#F0F0F0"
        },
      },
    },
    series: [
      {
        type: "line",
        showAllSymbol: true,
        symbol: "circle",
        symbolSize: 10,
        lineStyle: {
          normal: {
            color: "#16D998",
            width: 2,
          },
        },
        tooltip: {
          show: false,
        },
        areaStyle: {
          normal: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              type: "linear",
              global: false,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(22, 217, 152, 0.8)",
                },
                {
                  offset: 1,
                  color: "rgba(255,255,255,0.3)",
                },
              ],
            },
          },
        },
        data: yData,
      },
    ],
  };