echarts使用 圖例改變和默認不選中


  最近可視化圖表的需求比較多,圖表基本上都在用echarts制作,簡單寫下比較常用的屬性

  1.示例圖效果:

     

title(標題)  toolbox(工具箱)  tooltip(提示)  lengend(圖例) dataZoom(數據縮放區域)  dataRange(值域)  grid(繪圖網絡)  axis(坐標軸)  line()

圖例(legend):(折線圖)

  實現初始某一項默認不選擇定且改變默認圖例的樣式,比如:

 

 

legend: {
  show: '',
  icon:"circle",  //更改圖列的默認樣式    (  'circle''rect''roundRect''triangle''diamond''pin''arrow')(全部的圖例類型改變)
  selected:{
    "全部":false  //圖例為‘全部’的一項默認置灰
  }
},
如果只想改某個圖例,可以
data: [{ name: '系列1', // 強制設置圖形為圓。 icon: 'circle', // 設置文本為紅色 textStyle: { color: 'red' } }]

ECharts 提供的標記類型包括

 'circle''rect''roundRect''triangle''diamond''pin''arrow'

也可以通過 'image://url' 設置為圖片,其中 url 為圖片的鏈接,或者 dataURI

可以通過 'path://' 將圖標設置為任意的矢量路徑。這種方式相比於使用圖片的方式,不用擔心因為縮放而產生鋸齒或模糊,而且可以設置為任意顏色。路徑圖形會自適應調整為合適的大小。路徑的格式參見 SVG PathData。可以從 Adobe Illustrator 等工具編輯導出。

圖例的點擊事件

mainChart.on('legendselectchanged', function(params) {
  let legends = params.selected;
  let selectedArr = toolObj.findKeys(legends);
  console.log(selectedArr)      //被選中的圖例數組
})

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM