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

echarts设置tooltip遇到值为0不展示的问题(已解决)_第1张图片

遇到值为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}
拥堵指数:{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("
"); }, },

完整代码如下:echarts设置tooltip遇到值为0不展示的问题(已解决)_第2张图片

   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
拥堵指数:{c}` formatter: function (params) { return [ "时间:" + params[0].name + ":00", "拥堵指数:" + [params[0].value ? params[0].value : "-"], ].join("
"); }, }, // 坐标轴指示器配置 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) },

你可能感兴趣的:(echarts,后台管理系统,echarts,javascript,前端)