echarts中提示框的樣式調整

• 第一種方法：利用tooltip 里面的配置項 默認就會有寫顯示

• 第二種方法：利用formattet回調函數 返回我們想要顯示的信息

• formatter : function (params) {
      var value = (params.value + '').split('.');
      value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,')
      + '.' + value[1];
      return params.seriesName + '<br/>' + params.name + ' : ' + value;
  }
  
  參數有：params, ticket, callback
  可以打印看一下，其中有沒有自己需要的信息，如果沒有就需要單獨設置
  
  

• 第三種方法：有時候可能echarts中提示的信息有很多，樣式可能靠左邊對齊，也可能居中對齊，前兩種的方法就解決不了，需要第三種,可以把需要的值包裹在一個標簽里面，然后給這個標簽設置樣式，整體的return出來，也可以添加一個類，單獨的設置樣式；eg： 讓提示信息居中

• formatter:function(params){
        return (  '<div style = "text-align:center">' +  '功率 ' + ':' + one + '<br/>' + '轉速' + ':' + two + '<br/>' + '時間' + ':' + params.value[2] + '(h)')  + '</div>';
  }

   

   

• 第四種方法：簡單粗暴，在實例化這個echarts容器上，增加樣式

•  <echart-line style="height: 500px; text-align:left" id="powerTimeReport" options="powerTimeReportOptions" ></echart-line>

   

• 因為提示框本質上也是一個div，會繼承父類的樣式，利用這個特性也可以修改提示框的樣式