首页 > 其他分享 >echarts设置tooltip的层级

echarts设置tooltip的层级

时间:2024-08-05 10:41:15浏览次数:15  
标签:层级 show color tooltip rgb true echarts 255

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,即不显示圆点
          },
        ],
      };

标签:层级,show,color,tooltip,rgb,true,echarts,255
From: https://www.cnblogs.com/ProgrammerMao-001/p/18342757

相关文章

  • ECharts与数据可视化:如何高效使用JavaScript实现复杂图表
    ECharts与数据可视化:如何高效使用JavaScript实现复杂图表大家好,我是微赚淘客系统3.0的小编,是个冬天不穿秋裤,天冷也要风度的程序猿!在现代网页开发中,数据可视化已成为展示复杂数据的关键手段。ECharts是一个强大的JavaScript图表库,可以帮助开发者轻松实现各种复杂的图表。本文......
  • 从数据爬取到可视化展示:Flask框架与ECharts深度解析
    目录......
  • 给echarts图表线条、数据点和区域设置颜色
    letmyChart=echarts.init(document.getElementById("chartmainCop"));//获取当前干部的各项评分constallIndicators=Object.keys(this.dialogEacherTable[0]).filter(key=>key!=="CadreID"&&key!=="x......
  • 6.key的层级结构
    redis的key允许多个单词形成层级结构,多个单词之间用:隔开,格式如下:项目名:业务名:类型:id这个格式并非固定的,可以根据自己的需求来删除或添加词条。例如:taobao:user:1taobao:product:1如果value是一个java对象,例如一个user对象,则可以将其序列化为json字符串后存储:ta......
  • 利用Echarts构建词云
    使用第三方库echarts-wordcloud,该库在echarts的基础上,实现词云的构建安装npmiechartsnpmiecharts-wordcloud按需引入import*asechartsfrom'echarts';import'echarts-wordcloud';基本配置{series:[{type:'wordCloud',//字体大小范围12p......
  • 封装Echarts组件
    构建配置文件,按需引入相关组件//echarts.config.js//*需要哪些组件和配置,请在import时手动添加。import*asechartsfrom'echarts/core';//引入用到的图表import{BarChart,PieChart}from'echarts/charts';//引入提示框、数据集等组件import{DataZoomCo......
  • ISO26262 Part 2 之 不同层级的影响分析
    1.目的在安全生命周期开始时,应进行相关项层面的影响分析,以确定相关项是全新开发,或是对现有相关项修改,还是对现有相关项的使用环境进行修改。而,如果涉及到对现有要素的复用,则需要进行要素层面的影响分析;2.相关项层面的影响分析2.1Case1如果是全新开发,则需要按照......
  • el-table数据中特殊字符tooltip换行展示并且列表中超出显示省略号
     <el-table-column prop="baMsg" label="描述信息">             <template slot-scope="scope">                <el-tooltip class="item" effect="dark" placement="top-start">           ......
  • echarts 地图 geojson 街道级别获取
    echarts地图geojson街道级别获取最近开发遇到需求是要制作echarts地图,原本制作echarts地图也并不难,但是偏偏我要制作街道级别的地图,难就难在如何获取geojson的数据。获取渠道目前遇到的最多的获取geojson的方法是通过阿里的地理工具去获取,https://datav.aliyun.com/por......
  • 基于北京市空气质量影响因素研究系统【城市可换爬虫获取、LSTM、Flask、Echarts、MySQ
    文章目录==有需要本项目的代码或文档以及全部资源,或者部署调试可以私信博主==研究背景国内外研究现状研究目的研究意义关键技术理论介绍数据采集数据分析与大屏设计大屏相关性分析LSTM模型训练系统集成展示总结每文一语有需要本项目的代码或文档以及全部资源,或者部......