首页 > 其他分享 >echarts设置tooltip遇到值为0不展示的问题(已解决)

echarts设置tooltip遇到值为0不展示的问题(已解决)

时间:2024-08-05 10:41:30浏览次数:16  
标签:show color 值为 tooltip params rgba type echarts 255

echarts设置tooltip遇到值为0不展示的问题(已解决)

image-20240112112101454

遇到值为0时

 tooltip: {
          trigger: "axis",
          extraCssText: "z-index:3",
          axisPointer: {
            type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
            shadowStyle: {
              color: "rgba(41, 95, 204, 0.5)",
            },
          },
          borderColor: "rgba(0, 170, 255)", // 边框颜色
          formatter: `时间:{b}<br/>拥堵指数:{c}`
        }, 

image-20240112112555182

        tooltip: {
          trigger: "axis",
          extraCssText: "z-index:3",
          axisPointer: {
            type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
            shadowStyle: {
              color: "rgba(41, 95, 204, 0.5)",
            },
          },
          borderColor: "rgba(0, 170, 255)", // 边框颜色
          formatter: function (params) {
            return [
              "时间:" + params[0].name + ":00",
              "拥堵指数:" + [params[0].value ? params[0].value : "-"],
            ].join("<br/>");
          },
        }, 

完整代码如下:

   initChartsBox() {
      this.option = {
        tooltip: {
          trigger: "axis",
          extraCssText: "z-index:3",
          axisPointer: {
            // 方法一
            type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
            shadowStyle: {
              color: "rgba(41, 95, 204, 0.5)",
            },
          },
          borderColor: "rgba(0, 170, 255)", // 边框颜色
          // formatter: `时间:{b}:00<br/>拥堵指数:{c}`
          formatter: function (params) {
            return [
              "时间:" + params[0].name + ":00",
              "拥堵指数:" + [params[0].value ? 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)",
                  "rgb(153, 204, 0)",
                  "rgb(255, 255, 0)",
                  "rgb(255, 153, 0)",
                  "rgb(255, 0, 0)",
                ],
              },
            },
          },
        ],
        series: [
          {
            data: this.chartsData.roadNorm,
            type: "line",
            smooth: true,
            symbolSize: 0, // 设置圆点大小为 0,即不显示圆点
          },
        ],
      };
      this.myChart = this.$echarts.init(document.getElementById("chartsBox")); // 图标初始化
      this.myChart.setOption(this.option); // 渲染页面
      /* ECharts动态效果 */
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
    
    
    getChartsData(areaType, areaCode) {
      return new Promise((resolve, reject) => {
        // areaType:1 道路 2 区域
        get24HourAreaNorm({ areaType, areaCode }).then((res) => {
          if (res.code === 1) {
            this.chartsData = res.data;
            resolve();
          } else {
            reject();
          }
        });
      })
        .then(() => {
          if (this.chartsData) {
            this.initChartsBox();
          }
        })
        .catch((e) => {
          console.warn("Error", e);
        });
    },
        
        mounted() {
            this.getChartsData(areaType, areaCode)
        },

标签:show,color,值为,tooltip,params,rgba,type,echarts,255
From: https://www.cnblogs.com/ProgrammerMao-001/p/18342758

相关文章

  • echarts设置tooltip的层级
    echarts设置tooltip的层级tooltip:{trigger:"axis",extraCssText:'z-index:3',//修改层级borderColor:"rgba(0,170,255)",},完整的option示例如下:option={tooltip:{trig......
  • 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......
  • 合并数组操作:现有如下一个数组: int oldArr[]={1,3,4,5,0,0,6,6,0,5,4,7,6,7,0,5} 要求
    思路:确定出不为0的个数,这样可以开辟新数组;从旧的数组之中,取出内容,并将其赋给新开辟的数组。如果判断到0,就使用continue关键字。注意,合并成一个新的小数组后,i和j不能同步遍历,当continue跳过旧数组0的遍历后,j不跟随i++的增加而变化,而是把j++放程序的最下面,每遍历一个不为0的......
  • “postman请求JSON格式,Body内数据无法被idea后端接收,值为null“问题的解决方式
    问题描述:传递数据一切正常,但是:原因剖析:这是因为我们实体类里面属性的命名格式不符合驼峰命名,比如我这种“大写字母开头如CAD”/“一个小写字母+一个大写字母如aDddddd”都不行。解决方法:方法1:不推荐,不好用把自己实体类中的属性的名字都改成标准格式,要么是“全小写如id......
  • 利用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......
  • 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......