ECharts折線圖設置Y軸label是否顯示及自定義X軸label

需求
因爲所展現的結果值是整數,而Y軸label隨鼠標上下移動時,label會顯示小數,所以想把label去掉,同時X軸座標點對應的label想用自定義的label(數值後加上單位)。
在這裏插入圖片描述
解決方法
查看ECharts官網API的座標軸屬性設置,可以通過yAxis.axisPointer.label設置實現需求。
:tooltip.axisPointer.type 設置爲 ‘cross’ 則默認顯示標籤,否則默認不顯示。
自己的圖表設置了tooltip.axisPointer.type 爲 ‘cross’,所以需要將label 的show改爲false。option設置如下:

color:['#1890ff'],
tooltip:{
    trigger:'axis',
    formatter: function(params){ // 自定義X軸座標點對應的label 
        return params[0].axisValue +
            "</br><div style='width: 12px; height:12px; border: 1px solid #1890ff; border-radius:6px; background-color: #1890ff;float: left; margin: 4px'></div>" +
            "<div style='float: left'> "+ params[0].seriesName +":"+ params[0].data[1] + "條" +"</div>";
    },
    axisPointer:{
        type:'cross',
        label:{
            background:'#6a7985',
        }
    }
},
		 ...
xAxis:[{
           type:"category",
           // data:_dateArr,
           axisLabel: {
               show: false
           },
           axisTick: {
               show: false
           },
           splitLine: {
               show: false
           },
           axisLine: {
               lineStyle: {
                   color: gridColor
               }
           }
       }],		 
yAxis:[{
          type:'value',
          splitNumber:2,
          minInterval: 1,
          axisLabel: {
              show: false
          },
          axisLine: {
              show: false
          },
          axisTick: {
              show: false
          },
          splitLine: {
              lineStyle: {
                  color: gridColor,
                  type: 'dashed'
              }
          },
          // Y軸上下移動的橫線不顯示數值
          axisPointer: {
              label: {
                  show: false
              }
          }
      }]

參考:
ECharts官網:https://echarts.baidu.com/option.html#yAxis.axisPointer.label

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章