echarts设置tooltip的层级

echarts设置tooltip的层级
在这里插入图片描述
在这里插入图片描述

    tooltip: {
   
          trigger: "axis",
          extraCssText: 'z-index:3', // 修改层级
          borderColor: "rgba(0, 170, 255)",
        }, 

完整的option示例如下:

option = {
   
        tooltip: {
   
          trigger: "axis",
          extraCssText: 'z-index:3',
          axisPointer: {
   
            // 方法一
            type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
            shadowStyle: {
   
              color: "rgba(41, 95, 204, 0.2)",
            },
          },
          borderColor: "rgba(0, 170, 255)", // 边框颜色
          formatter: function (params) {
   
            return [
              "时间:" + params[0].name + ":00",
              "拥堵指数:" + params[0].value,
            ].join("<br/>");
          },
        }, // 坐标轴指示器配置
        textStyle: {
   
          color: "#333", // xy轴的提示文字颜色,不包含背景刻度线
        },
        color: ["#1492FF"],
        grid: {
   
          top: "20px",
          left: "50px",
          right: "20px",
          bottom: "25px",
        },
        xAxis: [
          {
   
            type: "category",
            data: this.chartsData.time,
            axisLine: {
   
              show: true,
              lineStyle: {
   
                color: "#004080",
                // width: 0,
                // type: "solid",
              }, // x轴线的颜色以及宽度
            },
            // axisLabel: {
   
            //   show: true,
            //   textStyle: {
   
            //     color: "rgba(255, 255, 255, 0.3)",
            //   }
            // }, // x轴文字的配置
            splitLine: {
   
              show: false,
              lineStyle: {
   }, // 分割线配置
            },
            axisTick: {
   
              show: false,
            }, // x轴的刻度线
          },
        ],
        yAxis: [
          {
   
            type: "value",
            max: 10,
            splitLine: {
   
              show: true,
              lineStyle: {
   
                color: "#333",
                opacity: 0.1,
              }, // 设置横向的线的颜色
            },
            axisLabel: {
   
              show: true,
              margin: 20,
              // textStyle: {
   
              //   color: "rgba(255, 255, 255, 0.3)",
              // }, // y轴的字体配置
            },

            splitArea: {
   
              show: true,
              areaStyle: {
   
                color: [
                  "rgb(0, 128, 0, .2)",
                  "rgb(153, 204, 0, .2)",
                  "rgb(255, 255, 0, .2)",
                  "rgb(255, 153, 0, .2)",
                  "rgb(255, 0, 0, .2)",
                ],
              },
            },
          },
        ],
        series: [
          {
   
            data: this.chartsData.roadNorm,
            type: "line",
            smooth: true,
            symbolSize: 0, // 设置圆点大小为 0,即不显示圆点
          },
        ],
      };

相关推荐

  1. 解决echarts在uniapp里tooltip,legend不能点击问题

    2024-01-12 00:20:02       20 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-12 00:20:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-12 00:20:02       101 阅读
  3. 在Django里面运行非项目文件

    2024-01-12 00:20:02       82 阅读
  4. Python语言-面向对象

    2024-01-12 00:20:02       91 阅读

热门阅读

  1. 基于51单片机的数字时钟系统设计

    2024-01-12 00:20:02       51 阅读
  2. ffmpeg 安装

    2024-01-12 00:20:02       56 阅读
  3. reset命令

    2024-01-12 00:20:02       55 阅读
  4. go中for range的坑以及解决方案

    2024-01-12 00:20:02       59 阅读
  5. 【源码阅读】交易池txs_list

    2024-01-12 00:20:02       39 阅读