echarts 配置项内容和展示

       option = {
  cwl: "mmol/L",
  tooltip: {
    trigger: "item",
    formatter: function (param) {
      console.log(param, "param===");
      return `<span>${(param.value[1] * 1).toFixed(2)}ss<br>${param.seriesName
        }<span>`;
    },
  },
  legend: {
    orient: "horizontal",
    left: "center",
    bottom: "10",
    itemHeight: 6,
    itemWidth: 6,
    data: [
      {
        name: "严重\n偏低",
        icon: "circle",
        textStyle: {
          color: "#666",
        },
      },
      {
        name: "正常",
        icon: "circle",
        textStyle: {
          color: "#666",
        },
      },
      {
        name: "偏高",
        icon: "circle",
        textStyle: {
          color: "#666",
        },
      },
      {
        name: "严重\n偏高",
        icon: "circle",
        textStyle: {
          color: "#666",
        },
      },
    ],
    textStyle: {
      color: "rgba(0,0,0,.3)",
      fontSize: 10,
      fontWeight: 300,
      padding: [0, 1],
    },
    selectedMode: false,
  },
  // 内容距离边框
  grid: {
    top: "2%", // 等价于 y: '16%'
    left: "1%",
    right: "4%",
    bottom: "20%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    offset: 0,
    data: ["", "07/10", "07/11", "07/12", "07/13", "07/14", "07/15", "07/16"],

    axisLine: {
      lineStyle: {
        color: "#ccc",
      },
    },
    //  改变x轴字体颜色和大小
    axisLabel: {
      interval: 0,
      textStyle: {
        color: "#999999",
        fontSize: "10",
      },
    },
    //网格样式
    splitLine: {
      show: true,
      interval: "auto",
      lineStyle: {
        color: ["#ccc"],
        width: 1,
        type: "solid",
      },
    },
    axisTick: {
      show: false,
    },
  },
  yAxis: {
    type: "value",
    // name: "mmHg",

    minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
    // y轴颜色
    axisLine: {
      lineStyle: {
        color: "#ccc",
      },
    },
    //  改变y轴字体颜色和大小
    axisLabel: {
      formatter: "{value}", //  给y轴添加单位
      textStyle: {
        color: "#999999",
        fontSize: "12",
      },
    },
    // y轴线
    splitLine: {
      lineStyle: {
        color: "#ccc",
      },
    },
    axisTick: {
      show: false,
    },
  },
  series: [
    {
      name: "偏低",
      type: "scatter",
      data: [[1, 20]],
      symbol: "circle",
      symbolSize: 10,
      showAllSymbol: true,
      lineStyle: {
        //设置折线色颜色
        color: "#0BBFC6",
      },
      itemStyle: {
        //设置折线折点的颜色,
        normal: {
          color: "#0BBFC6",
          // label: { show: true }
        },
      },
      // emphasis: {
      //   label: {
      //     show: true,
      //     formatter: function (param) {
      //       return param.data[3];
      //     },
      //     position: "bottom",
      //   },
      // },
    },
    {
      name: "正常",
      type: "scatter",
      data: [[5, 60]],
      symbol: "circle",
      symbolSize: 10,
      showAllSymbol: true,
      lineStyle: {
        color: "#91D143",
      },
      itemStyle: {
        //设置折线折点的颜色,
        normal: {
          color: "#91D143",
          // label: { show: true }
        },
      },
      // emphasis: {
      //   label: {
      //     show: true,
      //     formatter: function (param) {
      //       return param.data[3];
      //     },
      //     position: "bottom",
      //   },
      // },
    },
    {
      name: "偏高",
      type: "scatter",
      data: [],
      symbol: "circle",
      symbolSize: 10,
      showAllSymbol: true,
      lineStyle: {
        color: "#FFD700",
      },
      itemStyle: {
        //设置折线折点的颜色,
        normal: {
          color: "#FFD700",
          // label: { show: true }
        },
      },
      // emphasis: {
      //   label: {
      //     show: true,
      //     formatter: function (param) {
      //       return param.data[3];
      //     },
      //     position: "bottom",
      //   },
      // },
    },
    {
      name: "严重\n偏高",
      type: "scatter",
      data: [],
      symbol: "circle",
      symbolSize: 10,
      showAllSymbol: true,
      lineStyle: {
        color: "#EC6700",
      },
      itemStyle: {
        //设置折线折点的颜色,
        normal: {
          color: "#EC6700",
          // label: { show: true }
        },
      },
      // emphasis: {
      //   label: {
      //     show: true,
      //     formatter: function (param) {
      //       return param.data[3];
      //     },
      //     position: "bottom",
      //   },
      // },
    },
  ],
};