最近可視化圖表的需求比較多,圖表基本上都在用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) //被選中的圖例數組
})
