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

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

遇到值为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}`
        }, 

        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)
        },