Needs of some
Meet the needs of a developing project, is how to ensure echarts data shown on the diagram of at least a legend (that is, the last a legend can not become unselected state)
Below is a screen when the initial load
Do not want to appear to be illustrations are only a click Cancel leads the chart axes ugly
Reference
Before posting looked up some ideas:
- Useful Quxianjiuguo radio mode, but there is no way to see pieces of legend for displaying data in a chart in the same
- There are a legend for the last time, disable all click events legend
It is not a good solution, to find a code that can refer
var option = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
},
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:'联盟广告',
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];//只点击了一个图例，所以select_key里只有被选中的为false，
//对应的option.legend[0].selected[res]值就为true，
//即为高亮状态，其他的都取消显示，通俗的讲就成了单选模式
});
} else {
select_key.map(res => {
option.legend[0].selected[res] = false;//先让所有图例下的数据显示状态为false
});
option.legend[0].selected[params.name] = true;//再让你选中的那个图例的显示状态变为true
}
this.setOption(option)
});Analysis based on
The key code is the myChart.on ( 'legendselectchanged', function (params) {...} part, involved here was how to get the echarts legend click event, but after viewing the document did not write an example of how not to do? Okay, using the above sample code, we do not understand the variable code are printed analyze for example console.log ( 'params', params) and console.log ( 'option', option), after printing out official documents of shining a look it is clear a lot, I will make up later this screenshot.
Below that the code above means, select_key legend legend is selected key-value pairs corresponding to JSON, highlighting is false, cancellation is true (and here we highlight appreciated that the opposite is true), after entering the select_key if statement with a map in each element traversing such option.legend [0] .selected [res] boolean value select_key in the opposite value.
Here might be a bit around, option.legend [0] is selected in a key-value pair is json, highlighting true, the cancellation is false, and select_key performance results in the opposite.
Therefore, this code is to achieve the effect, when the legend are highlighted select_key = { 'a': false, 'b': false, 'c': false, 'd': false}, b click legend, this when select_key [ 'b'] = true, then entered else block, such as the above code written comment, a legend by the changing, then select_key = { 'a': true, 'b': false, 'c' : true, 'd': true}, this time there are two operations:
- Click again Legend b select_key = { 'a': true, 'b': true, 'c': true, 'd': true}, status legend states are not displayed at this time if the code into the code block, All illustrations state to the opposite value, so all four legend is selected chart shows four polyline
- Click other legends, such as c, after empathy into the else block, all states not to display, selected to give c reassigned to display the legend
solution
OK, here we see the top part of the code in the end what it means, so how should we need to realize the function it is interesting that Object.values (params.selected) returns a Boolean value legend selected state array , equivalent to the value of our reorganization of the value declared in the previous select_key, we need in this array, only a Boolean value false when the status display manually reassign true to (option.legend [0] .selected [params.name] = true;)
We did not talk much on the code
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){ //如果最后一个图例点击后select_key里的选中态会变为false，
//既有四个false，当有4个false的时候将最后选中的图例的实际显示值改为true
option.legend[0].selected[params.name] = true;
}
this.setOption(option)
});Bowen first to write summary statements may be a bit unclear, but please forgive me, welcome to discuss