在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ echarts圖例legend 限制最少顯示一個圖例

echarts圖例legend 限制最少顯示一個圖例

遇到一個需求,就是如何保證echarts圖表里至少顯示一個圖例的數(shù)據(jù)(也就是最后一個圖例不能變成unselected的狀態(tài))
下圖是最初加載時的畫面

clipboard.png
不想出現(xiàn)圖例都被點擊取消導致圖表只有一個坐標軸,太丑了

clipboard.png
在發(fā)帖前查閱了一些思路:

  • 有用單選模式曲線救國的,但是就沒有辦法看到多條圖例的數(shù)據(jù)在同一個圖表里顯示
  • 有圖例為最后一個的時候,禁用所有圖例的點擊事件

都不是能夠很好的解決,找到一個可以參考的代碼


var option = {
    title: {
        text: '折線圖堆疊'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['郵件營銷','聯(lián)盟廣告','視頻廣告','直接訪問','搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'郵件營銷',
            type:'line',
            stack: '總量',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'聯(lián)盟廣告',
            type:'line',
            stack: '總量',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'視頻廣告',
            type:'line',
            stack: '總量',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'直接訪問',
            type:'line',
            stack: '總量',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'搜索引擎',
            type:'line',
            stack: '總量',
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};
myChart.setOption(option);
myChart.on('legendselectchanged', function (params) {
    let option = this.getOption();
    let select_key = Object.keys(params.selected);
    if (!params.selected[params.name]) {
        select_key.map(res => {
            option.legend[0].selected[res] = !params.selected[res];
        });
    } else {
        select_key.map(res => {
            option.legend[0].selected[res] = false;
        });
        option.legend[0].selected[params.name] = true;
    }
    this.setOption(option)
});

輸入到http://echarts.baidu.com/exam... 的代碼框里可以看到效果,基本上算是手動多選切換成了單選,但是成單選后就無法多選,所以我想問有沒有什么方法可以實現(xiàn)需求,或者獲取最后一個圖例的對象后,只禁用該對象的點擊事件

回答
編輯回答
痞性
2017年10月9日 20:24
編輯回答
護她命

自己解決了,下附解決思路及部分代碼。
思路:當選擇最后一個圖例的時候,將其selected的值改為true就可以了,之前附的參考代碼改一改就實現(xiàn)了
代碼如下:

myChart.on('legendselectchanged', function (params) {
        let option = this.getOption();
        let select_key = Object.keys(params.selected);
        let select_value = Object.values(params.selected);
        console.log('select_value',select_value,'length',select_value.length)
        var n = 0;
        select_value.map(res => {
            if(!res){
                n++;
            }
        });
        console.log('n',n)
        if( n ==select_value.length){
            option.legend[0].selected[params.name] = true;
        }
                            
        this.setOption(option)
});

完美解決,回頭再整理博客

2017年12月29日 03:11