012_图例
1. 圖例是圖表中對內容區元素的注釋、用不同形狀、顏色、文字等來標示不同數據列, 通過點擊對應數據列的標記, 可以顯示或隱藏該數據列。圖例雖然不是圖表中的主要信息、卻是了解圖表信息的鑰匙。
2. 圖例布局
2.1. 圖例一般放在圖表的右上角、也可以放在圖表的底部、同一頁面中的所有圖例位置保持一致, 可以橫排對齊也可以縱排對齊。還要綜合考慮整體的圖表空間是適合哪種擺放方式。
2.2. legend.type, 圖例的類型。可選值: 'plain'普通圖例, 缺省就是普通圖例; 'scroll'可滾動翻頁的圖例, 當圖例數量較多時可以使用。string類型。
2.3. legend.id , 組件ID。默認不指定。指定則可用于在option或者API中引用組件。string類型。
2.4. legend.show = true, 是否顯示圖例。boolean類型。
2.5. legend.left = 'auto', 圖例組件離容器左側的距離。left的值可以是像20這樣的具體像素值, 可以是像'20%'這樣相對于容器高寬的百分比, 也可以是'left', 'center', 'right'。string和number類型。
2.6. legend.top = 'auto', 圖例組件離容器上側的距離。top的值可以是像20這樣的具體像素值, 可以是像'20%'這樣相對于容器高寬的百分比, 也可以是'top', 'middle', 'bottom'。string和number類型。
2.7. legend.right = 'auto', 圖例組件離容器右側的距離。right的值可以是像20這樣的具體像素值, 可以是像'20%'這樣相對于容器高寬的百分比。默認自適應。string和number類型。
2.8. legend.bottom = 'auto', 圖例組件離容器下側的距離。bottom的值可以是像20這樣的具體像素值, 可以是像'20%'這樣相對于容器高寬的百分比。默認自適應。string和number類型。
2.9. legend.width = 'auto', 圖例組件的寬度。默認自適應。string和number類型。
2.10. legend.height = 'auto', 圖例組件的高度。默認自適應。string和number類型。
2.11. legend.orient = 'horizontal', 例列表的布局朝向。可選: 'horizontal'和'vertical'。string類型。
2.12. legend.borderColor = '#ccc', 圖例的邊框顏色。Color類型。
2.13. legend.borderWidth = 1, 圖例的邊框線寬。number類型。
2.14. legend.borderRadius, 圓角半徑, 單位px, 支持傳入數組分別指定4個圓角半徑。number或Array類型。如:
borderRadius: 5, // 統一設置四個角的圓角大小 borderRadius: [5, 5, 0, 0] // (順時針左上, 右上, 右下, 左下)2.15. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>圖例布局</title><!-- 引入echarts.js --><script type="text/javascript" src="echarts.js"></script></head><body><!-- 為ECharts準備一個具備大小(寬高)的DOM --><div id="top" style="width: 900px; height: 400px;"></div><div id="right" style="width: 900px; height: 400px;"></div><div id="bottom" style="width: 900px; height: 400px;"></div><script type="text/javascript">// 基于準備好的dom, 初始化echarts實例var mytopChart = echarts.init(document.getElementById('top'));var myrightChart = echarts.init(document.getElementById('right'));var mybottomChart = echarts.init(document.getElementById('bottom'));// 指定圖表的配置項和數據var option = {// 為圖表配置標題title: {text: '圖例布局'},// 配置提示信息tooltip: {},// 配置要在X軸顯示的項xAxis: {type: "category" // 類目},// 配置要在Y軸顯示的項yAxis: {},// 數據集dataset: {source: [ // 原數據。['product', '2020', '2021', '2022'],['Matcha Latte', 89.3, 95.8, 97.7],['Milk Tea', 92.1, 89.4, 83.1],['Cheese Cocoa', 94.4, 91.2, 92.5],['Walnut Brownie', 85.4, 76.9, 78.1]]},// 系列列表series: [ { type: 'bar' }, { type: 'bar' }, { type: 'bar' } ]};// 圖例組件var topLegend = {id: 'top',show: true,width: 300, // 寬高設置過大, 也還是包裹內容的大小height: 80,borderColor: 'red',borderWidth: 1,left: 'center',top: 'top',orient: 'horizontal'};option.legend = topLegend;option.title.text = '圖例布局在上方';// 使用剛指定的配置項和數據顯示圖表。mytopChart.setOption(option);// 圖例組件var rightLegend = {id: 'right',show: true,width: 80, // 寬高設置過大, 也還是包裹內容的大小height: 60,borderColor: 'red',borderWidth: 1,type: 'scroll',right: 10,top: 'middle',orient: 'vertical'};option.legend = rightLegend;option.title.text = '圖例布局在右邊';myrightChart.setOption(option);// 圖例組件var bottomLegend = {id: 'bottom',show: true,width: 300, // 寬高設置過大, 也還是包裹內容的大小height: 80,borderColor: 'red',borderWidth: 1,left: 'center',bottom: 10,orient: 'horizontal'};option.legend = bottomLegend;option.title.text = '圖例布局在下方';mybottomChart.setOption(option);</script></body> </html>2.16. 效果圖
3. 圖例樣式
3.1. legend.formatter, 用來格式化圖例文本, 支持字符串模板和回調函數兩種形式。string或Function類型。示例:
// 使用字符串模板, 模板變量為圖例名稱{name} formatter: 'Legend {name}' // 使用回調函數 formatter: function (name) {return 'Legend ' + name; }3.2. legend.icon, 圖例項的icon。string類型。ECharts提供的標記類型包括: 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'。可以通過'image://url'設置為圖片, 其中URL為圖片的鏈接, 或者dataURI。例如:
// URL為圖片鏈接 'image://http://xxx.xxx.xxx/a/b.png' // URL為dataURI 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'3.3. legend.backgroundColor = 'transparent', 圖例背景色, 默認透明。顏色可以使用RGB表示, 比如: 'rgb(128, 128, 128)', 如果想要加上alpha通道, 可以使用RGBA, 比如: 'rgba(128, 128, 128, 0.5)', 也可以使用十六進制格式, 比如: '#ccc'。Color類型。
3.4. legend.data, 圖例的數據數組。數組項通常為一個字符串, 每一項代表一個系列的name。圖例組件會自動根據對應系列的圖形標記(symbol)來繪制自己的顏色和標記, 特殊字符串''(空字符串)或者'\n'(換行字符串)用于圖例的換行。如果data沒有被指定, 會自動從當前系列中獲取。如果要設置單獨一項的樣式, 也可以把該項寫成配置項對象。此時必須使用name屬性對應表示系列的name。所有屬性:?{ name , icon , itemStyle , lineStyle , symbolRotate , textStyle }。示例:
data: [{name: '系列1',// 強制設置圖形為圓。icon: 'circle',// 設置文本為紅色textStyle: {color: 'red'} }]3.5. legend.textStyle.color = #333, 文字的顏色。Color類型。
3.6. legend.textStyle.fontStyle = 'normal', 文字字體的風格。可選: 'normal'、'italic'和'oblique'。string類型。
3.7. legend.textStyle.fontWeight = 'normal', 文字字體的粗細。可選: 'normal'、'bold'、'bolder'、'lighter'和100 | 200 | 300 | 400...。string和number類型。
3.8. legend.textStyle.fontFamily = 'sans-serif', 文字的字體系列。還可以是'serif', 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...。string類型。
3.9. legend.textStyle.fontSize = 12, 文字的字體大小。number類型。
3.10. legend.textStyle.lineHeight, 行高。number類型。
3.11. legend.textStyle.backgroundColor = 'transparent', 文字塊背景色。string和Object類型。可以使用顏色值, 例如：'#123234', 'red', 'rgba(0,23,11,0.3)'。也可以直接使用圖片, 當使用圖片的時候, 可以使用width或height指定高寬, 也可以不指定自適應。例如:
backgroundColor: {image: 'xxx/xxx.png'// 這里可以是圖片的 URL，// 或者圖片的 dataURI，// 或者 HTMLImageElement 對象，// 或者 HTMLCanvasElement 對象。 }3.12. legend.textStyle.borderColor, 文字塊邊框顏色。Color類型。
3.13. legend.textStyle.borderWidth, 文字塊邊框寬度。number類型。
3.14. legend.textStyle.borderType = 'solid', 文字塊邊框描邊類型。string、number和Array類型。可選: 'solid'、'dashed'和'dotted'。自v5.0.0開始, 也可以是number或者number數組, 用以指定線條的dash array, 配合borderDashOffset可實現更靈活的虛線效果。例如:
{borderType: [5, 10],borderDashOffset: 5 }3.15. legend.textStyle.borderDashOffset, 用于設置虛線的偏移量, 可搭配borderType指定dash array實現靈活的虛線效果。number類型。
3.16. legend.textStyle.borderRadius, 文字塊的圓角。number和Array類型。
3.17. legend.textStyle.padding, 文字塊的內邊距。number和Array類型。
- padding: [3, 4, 5, 6], 表示[上, 右, 下, 左]的邊距。
- padding: 4, 表示padding: [4, 4, 4, 4]。
- padding: [3, 4], 表示padding: [3, 4, 3, 4]。
3.18. legend.textStyle.shadowColor = 'transparent', 文字塊的背景陰影顏色。Color類型。
3.19. legend.textStyle.shadowBlur, 文字塊的背景陰影長度。number類型。
3.20. legend.textStyle.shadowOffsetX, 文字塊的背景陰影X偏移。number類型。
3.21. legend.textStyle.shadowOffsetY, 文字塊的背景陰影Y偏移。number類型。
3.22. legend.textStyle.width, 文本顯示寬度。number類型。
3.23. legend.textStyle.height, 文本顯示高度。number類型。
3.24. legend.textStyle.textBorderColor, 文字本身的描邊顏色。Color類型。
3.25. legend.textStyle.textBorderWidth, 文字本身的描邊寬度。number類型。
3.26. legend.textStyle.textBorderType = 'solid', 文字本身的描邊類型。number、string和Array類型。可選: 'solid'、'dashed'和'dotted'。自v5.0.0開始, 也可以是number或者number數組, 用以指定線條的dash array, 配合textBorderDashOffset可實現更靈活的虛線效果。例如:
{textBorderType: [5, 10],textBorderDashOffset: 5 }3.27. legend.textStyle.textBorderDashOffset, 用于設置虛線的偏移量, 可搭配textBorderType指定dash array實現靈活的虛線效果。number類型。
3.28. legend.textStyle.textShadowColor = 'transparent', 文字本身的陰影顏色。Color類型。
3.29. legend.textStyle.textShadowBlur, 文字本身的陰影長度。number類型。
3.30. legend.textStyle.textShadowOffsetX, 文字本身的陰影X偏移。number類型。
3.31. legend.textStyle.textShadowOffsetY, 文字本身的陰影Y偏移。number類型。
3.32. legend.textStyle.overflow = 'none', 文字超出寬度是否截斷或者換行。配置width時有效。string類型。可選值:
- 'truncate'截斷, 并在末尾顯示ellipsis配置的文本, 默認為...。
- 'break'換行。
- 'breakAll'換行, 跟'break'不同的是, 在英語等拉丁文中, 'breakAll'還會強制單詞內換行。
3.33. legend.textStyle. ellipsis = '...',在overflow配置為'truncate'的時候, 可以通過該屬性配置末尾顯示的文本。string類型。
3.34. legend.textStyle. rich, 在rich里面, 可以自定義富文本樣式。利用富文本樣式, 可以在標簽中做出非常豐富的效果。Object類型。
3.35. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>圖例樣式</title><!-- 引入echarts.js --><script type="text/javascript" src="echarts.js"></script></head><body><!-- 為ECharts準備一個具備大小(寬高)的DOM --><div id="main" style="width: 900px; height: 400px;"></div><script type="text/javascript">// 基于準備好的dom, 初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {// 為圖表配置標題title: {text: '圖例樣式'},// 配置提示信息tooltip: {},// 圖例組件legend: {formatter: function (name) {return name + '年';},backgroundColor: 'pink',textStyle: {fontSize: 16,lineHeight: 32,backgroundColor: 'rgba(4, 4, 4, 1)',borderColor: '#F00',borderWidth: 3,borderType: [5, 10],borderDashOffset: 5,borderRadius: 5,padding: 8},data: [{name: '2020', icon: 'circle',textStyle: {color: 'rgba(20, 231, 58, 1)',fontStyle: 'normal',fontWeight: 'normal',fontFamily: 'serif'}}, {name: '2021', icon: 'rect',textStyle: {color: 'rgba(20, 217, 231, 1)',fontStyle: 'italic',fontWeight: 'bold',fontFamily: 'monospace'}}, {name: '2022', icon: 'triangle',textStyle: {color: 'rgba(104, 20, 231, 1)',fontStyle: 'oblique',fontWeight: 'bolder',fontFamily: 'Courier New'}}]},// 配置要在X軸顯示的項xAxis: {type: "category" // 類目},// 配置要在Y軸顯示的項yAxis: {},// 數據集dataset: {source: [ // 原數據。['product', '2020', '2021', '2022'],['Matcha Latte', 89.3, 95.8, 97.7],['Milk Tea', 92.1, 89.4, 83.1],['Cheese Cocoa', 94.4, 91.2, 92.5],['Walnut Brownie', 85.4, 76.9, 78.1]]},// 系列列表series: [ { type: 'bar' }, { type: 'bar' }, { type: 'bar' } ]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body> </html>3.36. 效果圖
4. 圖例交互
4.1. 根據場景需要, 圖例可支持交互操作, 點擊控制顯示或隱藏對應的數據列。
4.2. legend.selected圖例選中狀態表。Object類型。示例:
selected: {// 選中'系列1''系列1': true,// 不選中'系列2''系列2': false }4.3. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>圖例選中狀態表</title><!-- 引入echarts.js --><script type="text/javascript" src="echarts.js"></script></head><body><!-- 為ECharts準備一個具備大小(寬高)的DOM --><div id="main" style="width: 900px; height: 400px;"></div><script type="text/javascript">// 基于準備好的dom, 初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {// 為圖表配置標題title: {text: '圖例選中狀態表'},// 配置提示信息tooltip: {},// 圖例組件legend: {selected: {'2020': true,'2021': true,'2022': false,}},// 配置要在X軸顯示的項xAxis: {type: "category" // 類目},// 配置要在Y軸顯示的項yAxis: {},// 數據集dataset: {source: [ // 原數據。['product', '2020', '2021', '2022'],['Matcha Latte', 89.3, 95.8, 97.7],['Milk Tea', 92.1, 89.4, 83.1],['Cheese Cocoa', 94.4, 91.2, 92.5],['Walnut Brownie', 85.4, 76.9, 78.1]]},// 系列列表series: [ { type: 'bar' }, { type: 'bar' }, { type: 'bar' } ]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body> </html>4.4. 效果圖
總結
