Как реализовать пользовательский рендеринг легенды Echarts в качестве раскрывающегося ящика? ⇐ Javascript

[Anonymous]

Pices Pices
относительно легенды в этой диаграмме (индекс отслеживания /CSI 300) и отмену ее в качестве избранного компонента, я хотел бы спросить, как это достигается с помощью конфигурации Echarts или API, или если можно использовать пользовательский рендерин. это. < /p>
Я искал через документацию по API и конфигурации, связанные с легендами, и, помимо того, что параметр форматера позволяет рендеринг HTML для лейблов Legends, я не нашел никаких других соответствующих интерфейсов или документации. Div. < /P>
Запрос на продукт для избранных компонентов div
запрос на продукт для диаграмм div < /p>
Не могли бы вы помочь указать, может ли этот тип рендеринга легенды быть достигнутым с помощью собственной конфигурации Echarts?// prettier-ignore
const rawData = [['2015/12/31', '3570.47', '3539.18', '-33.69', '-0.94%', '3538.35', '3580.6', '176963664', '25403106', '-'], ['2015/12/30', '3566.73', '3572.88', '9.14', '0.26%', '3538.11', '3573.68', '187889600', '26778766', '-']].reverse();
function calculateMA(dayCount, data) {
var result = [];
for (var i = 0, len = data.length; i < len; i++) {
if (i < dayCount) {
result.push('-');
continue;
}
var sum = 0;
for (var j = 0; j < dayCount; j++) {
sum += +data[1];
}
result.push(sum / dayCount);
}
return result;
}
const dates = rawData.map(function (item) {
return item[0];
});
const data = rawData.map(function (item) {
return [+item[1], +item[2], +item[5], +item[6]];
});
option = {
legend: {
data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'],
inactiveColor: '#777',
selected: {
// 选中'系列1'
'MA5': true,
'MA10': false,
'MA20': false,
'MA30': false,
},
selectorLabel:{
show:false,
},

// selectedMode:false, # 控制是否可以取消展示图例
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false,
type: 'cross',
lineStyle: {
color: '#376df4',
width: 2,
opacity: 1
}
}
},
xAxis: {
type: 'category',
data: dates,
axisLine: { lineStyle: { color: '#8392A5' } }
},
yAxis: {
scale: true,
axisLine: { lineStyle: { color: '#8392A5' } },
splitLine: { show: false }
},
grid: {
bottom: 80
},
dataZoom: [
{
textStyle: {
color: '#8392A5'
},
dataBackground: {
areaStyle: {
color: '#8392A5'
},
lineStyle: {
opacity: 0.8,
color: '#8392A5'
}
},
brushSelect: true
},
{
type: 'inside'
}
],
series: [
{
type: 'candlestick',
name: 'Day',
data: data,
itemStyle: {
color: '#FD1050',
color0: '#0CF49B',
borderColor: '#FD1050',
borderColor0: '#0CF49B'
}
},
{
name: 'MA5',
type: 'line',
data: calculateMA(5, data),
smooth: true,
showSymbol: false,
lineStyle: {
width: 1
}
},
{
name: 'MA10',
type: 'line',
data: calculateMA(10, data),
smooth: true,
showSymbol: false,
lineStyle: {
width: 1
}
},
{
name: 'MA20',
type: 'line',
data: calculateMA(20, data),
smooth: true,
showSymbol: false,
lineStyle: {
width: 1
}
},
{
name: 'MA30',
type: 'line',
data: calculateMA(30, data),
smooth: true,
showSymbol: false,
lineStyle: {
width: 1
}
}
]
};


Подробнее здесь: https://stackoverflow.com/questions/795 ... ection-box