先列舉一些常用的屬性:
legend: { //圖例,這里基本都是默認設置,就不一一列舉,echarts 官網很好找 type: "plain", //'plain':普通圖例。缺省就是普通圖例。'scroll':可滾動翻頁的圖例。當圖例數量較多時可以使用。 show: true, //是否顯示(隱藏和顯示)柱子的那個按鈕,默認true,如果不需要可以設置為false。如果沒有請忽略。 selectedMode: true, //圖例上的點擊事件,不寫默認true ,設置false為不能點擊 orient: 'horizontal',// orient 設置布局方式,默認水平布局,可選值:'horizontal'(水平) ¦ 'vertical'(垂直) data: ['預期', '實際', '假設'], // 需要個 series 中的 name 一致才會顯示 icon: "circle", //圖形部份的形狀,類型包括 "circle" ¦ "rect" ¦ "roundRect" ¦ "triangle" ¦ "diamond" | "pin" ¦ "arrow" ¦ "none" itemWidth: 15, //圖例文字旁邊圖形的寬高 itemHight: 2, itemGap: 40, // 設置間距 //bottom: "auto", // 默認在頂部,同理 top,right,left, padding都可以設置 //x: 'left', // x 設置水平安放位置,默認全圖居中,可選值:'center' ¦ 'left' ¦ 'right' ¦ {number}(x坐標,單位px) //y: 'top', // y 設置垂直安放位置,默認全圖頂端,可選值:'top' ¦ 'bottom' ¦ 'center' ¦ {number}(y坐標,單位px) }
再告訴你一個有意思的屬性:
legend = { //圖例,這里基本都是默認設置,就不一一列舉,echarts 官網很好找 show: false, // 不顯示組件自帶的圖例 selected = { // 每一項的變量 需要和 series 中一一對應 "案例一": true, // true 代表顯示 echarts 顯示該條數據,相當於 原裝圖例沒有被點擊的狀態 "案例二": true, "案例三": false, // false 代表顯示 echarts 不顯示該條數據,相當於 原裝圖例被點擊后(圖例置灰,數據隱藏)的狀態 } }
外部通過修改 true , false 就可以達到模擬原裝圖例的效果,並且還能做點其它事情,
使用案例:1.讓圖例的文字可以修改(修改圖例文字)。2.讓圖例響應一些其它事件