echarts增加全選功能

關(guān)鍵點:

  1. legend>selected需要增加全選: true,用來展示和控制選中狀態(tài)
  2. series中需要給全選按鈕造假數(shù)據(jù)塑猖,數(shù)據(jù)為空
  3. 注冊legendselectchanged事件霜大,寫全選邏輯

具體代碼如下:

import echarts from "echarts";

let myChart = echarts.init(document.getElementById('自定義的id'), "light");

let option = {
    backgroundColor: "#fff",
    tooltip: {
        trigger: 'axis',
        show: true,
    },
    legend: {
        show: true,
        icon: 'path://M467.106909 581.073455l-107.636364-108.311273a55.645091 55.645091 0 1 0-78.94109 78.475636l148.154181 149.085091a55.458909 55.458909 0 0 0 40.680728 16.663273 55.389091 55.389091 0 0 0 39.982545-17.966546l278.039273-298.426181a55.645091 55.645091 0 1 0-81.454546-75.869091L467.130182 581.073455zM139.636364 0h744.727272a139.636364 139.636364 0 0 1 139.636364 139.636364v744.727272a139.636364 139.636364 0 0 1-139.636364 139.636364H139.636364a139.636364 139.636364 0 0 1-139.636364-139.636364V139.636364a139.636364 139.636364 0 0 1 139.636364-139.636364z',
        top: 20,
        align: 'left',
        textStyle: {
            fontSize: 12,
            color: '#c8c8c8'
        },
        selected: {
          全選: true,//全選按鈕的展示
          A: true,
          B: true,
          C: true,
          D: true,
        },
    },
    grid: {
        left: '5%',
        right: '5%',
        top: '15%',
        bottom: '6%',
        containLabel: true
    },
    xAxis: {
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            interval: 0,
        },
        data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
    },
    yAxis: {
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false
        },
    },
    series: [
      {//全選按鈕的假數(shù)據(jù)
        name:'全選',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 13,
            lineStyle: {
                normal: {
                    width: 3,
                    shadowColor: 'rgba(155, 18, 184, .4)',
                    shadowBlur: 5,
                    shadowOffsetY: 20,
                    shadowOffsetX: 0,
                    color: '#fb7636',
                }
            },
            itemStyle: {
                color: '#00FFF0',
                borderColor: "#fff",
                borderWidth: 2,
            },

            data: []
        },{
        name:'A',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 13,
            lineStyle: {
                normal: {
                    width: 3,
                    shadowColor: 'rgba(155, 18, 184, .4)',
                    shadowBlur: 5,
                    shadowOffsetY: 20,
                    shadowOffsetX: 0,
                    color: '#fb7636',
                }
            },
            itemStyle: {
                color: '#fb7636',
                borderColor: "#fff",
                borderWidth: 2,
            },

            data: [5, 10, 41, 35, 51, 49, 62]
        },
        {
            name:'B',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 13,
            lineStyle: {
                normal: {
                    width: 3,
                    shadowColor: 'rgba(155, 18, 184, .4)',
                    shadowBlur: 5,
                    shadowOffsetY: 20,
                    shadowOffsetX: 0,
                    color: '#24b314',
                }
            },
            itemStyle: {
                color: '#24b314',
                borderColor: "#fff",
                borderWidth: 2,
            },

            data: [50, 20, 35, 20, 75, 30, 60]
        },
        {
            name:'C',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 13,
            lineStyle: {
                normal: {
                    width: 3,
                    shadowColor: 'rgba(155, 18, 184, .4)',
                    shadowBlur: 5,
                    shadowOffsetY: 20,
                    shadowOffsetX: 0,
                    color: '#027ad7',
                }
            },
            itemStyle: {
                color: '#027ad7',
                borderColor: "#fff",
                borderWidth: 2,
            },

            data: [15, 30, 15, 40, 55, 20, 40]
        },
        { 
            name:'D',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 13,
            lineStyle: {
                normal: {
                    width: 3,
                    shadowColor: 'rgba(155, 18, 184, .4)',
                    shadowBlur: 5,
                    shadowOffsetY: 20,
                    shadowOffsetX: 0,
                    color: '#8452e7',
                }
            },
            itemStyle: {
                color: '#8452e7',
                borderColor: "#fff",
                borderWidth: 2,
            },

            data: [5, 60, 20, 45, 15, 55, 25]
        },
    ]
};

 myChart.setOption(option)
// 處理legend點擊事件
  //增加全選功能
  myChart.on("legendselectchanged", e => {
    let name = e.name;
    let allSelect = "全選";
    if (name === allSelect) {
      //全選的點擊事件
      for (let key in e.selected) {
        option.legend.selected[key] = e.selected[allSelect];
      }
    } else {
      //普通多選框的點擊事件
      option.legend.selected[name] = e.selected[name];
      if (e.selected.name == false) {
        // 當(dāng)前選中設(shè)置為false時
        option.legend.selected[allSelect] = false;
      } else {
        // 當(dāng)前選中設(shè)置為true時
        let arr = Object.values(e.selected).splice(1);
        let flag = arr.every(currentValue => {
          return currentValue == true;
        });
        option.legend.selected[allSelect] = flag;
      }
    }
    myChart.setOption(option,);
  });

效果圖:


image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子昙衅,更是在濱河造成了極大的恐慌纵东,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,817評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件处嫌,死亡現(xiàn)場離奇詭異栅贴,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)熏迹,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評論 3 385
  • 文/潘曉璐 我一進(jìn)店門檐薯,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人注暗,你說我怎么就攤上這事坛缕。” “怎么了友存?”我有些...
    開封第一講書人閱讀 157,354評論 0 348
  • 文/不壞的土叔 我叫張陵祷膳,是天一觀的道長。 經(jīng)常有香客問我屡立,道長直晨,這世上最難降的妖魔是什么搀军? 我笑而不...
    開封第一講書人閱讀 56,498評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮勇皇,結(jié)果婚禮上罩句,老公的妹妹穿的比我還像新娘。我一直安慰自己敛摘,他們只是感情好门烂,可當(dāng)我...
    茶點故事閱讀 65,600評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著兄淫,像睡著了一般屯远。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上捕虽,一...
    開封第一講書人閱讀 49,829評論 1 290
  • 那天慨丐,我揣著相機(jī)與錄音,去河邊找鬼泄私。 笑死房揭,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的晌端。 我是一名探鬼主播捅暴,決...
    沈念sama閱讀 38,979評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼咧纠!你這毒婦竟也來了蓬痒?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,722評論 0 266
  • 序言:老撾萬榮一對情侶失蹤惧盹,失蹤者是張志新(化名)和其女友劉穎乳幸,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體钧椰,經(jīng)...
    沈念sama閱讀 44,189評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡粹断,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,519評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了嫡霞。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片瓶埋。...
    茶點故事閱讀 38,654評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖诊沪,靈堂內(nèi)的尸體忽然破棺而出养筒,到底是詐尸還是另有隱情,我是刑警寧澤端姚,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布晕粪,位于F島的核電站,受9級特大地震影響渐裸,放射性物質(zhì)發(fā)生泄漏巫湘。R本人自食惡果不足惜装悲,卻給世界環(huán)境...
    茶點故事閱讀 39,940評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望尚氛。 院中可真熱鬧诀诊,春花似錦、人聲如沸阅嘶。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽讯柔。三九已至抡蛙,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間磷杏,已是汗流浹背溜畅。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留极祸,地道東北人。 一個月前我還...
    沈念sama閱讀 46,382評論 2 360
  • 正文 我出身青樓怠晴,卻偏偏與公主長得像遥金,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子蒜田,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,543評論 2 349

推薦閱讀更多精彩內(nèi)容