echarts ---- line：tooltop样式

效果图1 ↓

option1 ↓

{
        tooltip: {
          // trigger设置为item，则鼠标至上，只显示当前item的信息
          // trigger为axios,则hover时，会展示组的信息
          trigger: "item",
          formatter: "{a}(次)<br />{c}",
          backgroundColor: "#F0FFFC",
          borderColor: "#47D3B8",
          borderWidth: 1,
          padding: 6,
          textStyle: {
            color: "#47D3B8",
          },
          axisPointer: {
            type: "none",
          },
        },
        legend: {
          left: "50%",
          data: ["血压计", "血糖仪"],
          right: 25,
        },
        grid: {
          top: "15%",
          left: "8%",
          right: "0",
          bottom: "0",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          // 刻度字体颜色
          axisLabel: {
            color: "#19C0A0",
            rotate: 40
          },
          // x轴颜色
          axisLine: {
            lineStyle: {
              color: "#A7F3E5",
            },
          },
          // 去除刻度
          axisTick: {
            show: false,
          },
          // 网格线颜色
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#A7F3E5"],
              width: 1,
              type: "solid",
            },
          },
          // 去除竖向网格线
          splitLine: {
            show: false,
          },
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
        },
        yAxis: {
          type: "value",
          // 不从0开始
          scale: true,
          // 刻度字体颜色
          axisLabel: {
            color: "#19C0A0",
          },
          // y轴颜色
          axisLine: {
            lineStyle: {
              color: "#A7F3E5",
            },
          },
          // 去除刻度
          axisTick: {
            show: false,
          },
          // 网格线颜色
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#A7F3E5"],
              width: 1,
              type: "solid",
            },
          },
        },
        series: [
          {
            name: "血压计",
            type: "line",
            stack: "Total",
            itemStyle: {
              normal: {
                color: "#167DE3",
                lineStyle: {
                  color: "#167DE3",
                },
              },
            },
            data: [120, 132, 101, 134, 90, 230, 210, 220, 182, 191, 234, 290]
          },
          {
            name: "血糖仪",
            type: "line",
            stack: "Total",
            itemStyle: {
              normal: {
                color: "#DCE316",
                lineStyle: {
                  color: "#DCE316",
                },
              },
            },
            data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290]
          },
        ],
      };

效果图2 ↓

option2 ↓

{
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            lineStyle: {
              type: "dashed",
              color: "#48C3FF",
            },
          },
          backgroundColor: "#00156A",
          borderColor: "#48C3FF",
          borderWidth: 1,
          padding: 8,
          textStyle: {
            fontSize: 10,
            color: ["#48C3FF"],
          },
        },
        legend: {
          data: [
            {
              name: "门诊",
              icon: "rect",
            },
            {
              name: "住院",
              icon: "rect",
            },
          ],
          right: 10,
          itemWidth: 14,
          itemHeight: 6,
          itemStyle: {
            borderRadius: 10,
          },
          textStyle: {
            color: "#1CFFFF",
          },
        },
        grid: {
          // 包含网格线的区域
          show: true,
          top: "18%",
          left: 0,
          right: "3%",
          bottom: "4%",
          containLabel: true,
          borderColor: "transparent",
          backgroundColor: new this.$echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(78, 228, 108, 0.6)",
              },
              {
                offset: 1,
                color: "rgba(78, 228, 108, 0.07)",
              },
            ]
          ),
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: timeData,
          axisLabel: {
            color: "#009eba",
            fontSize: 8,
            rotate: 40,
          },
          axisLine: {
            lineStyle: {
              color: "#009eba",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#009eba",
            fontSize: 8,
          },
          axisLine: {
            show: false,
            splitLine: {
              show: false, //不显示网格线
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#48C3FF"],
              width: 0.4,
            },
          },
        },
        series: [
          {
            name: "门诊",
            type: "line",
            stack: "Total",
            data: mzData,
            color: "#48C3FF",
            symbol: "circle",
            symbolSize: 8,
          },
          {
            name: "住院",
            type: "line",
            stack: "Total",
            data: zyData,
            color: "#4EE46C",
            symbol: "circle",
            symbolSize: 8,
          },
        ],
      }