javascript - How to implement custom rendering of ECharts legend as a drop-down selection box? - Stack Overflow

admin管理员组

文章数量:1389981

Product Request Pic Regarding the legend in this chart (Tracking Index / CSI 300) and rendering it as a Select component, I would like to ask how this is achieved through ECharts' configuration or API, or if a custom render can be used to render it.

I couldn't find a way to do custom rendering for the legend in the official documentation, so I am asking for some guidance on this.

I have searched through the legend-related API and configuration documentation, and besides finding that the formatter parameter allows HTML rendering for legend labels, I haven't found any other relevant interfaces or documentation.

Additionally, I have seen similar needs in other PC-side website renders and noticed that the Select Legend isn't rendered together with ECharts DIV.

Product Request Pic for Select Components DIV Product Request Pic for Charts Div

Could you help specify whether this type of legend rendering can be achieved through ECharts' own configuration, or if it's necessary to define a custom component to handle this part of the rendering?

// 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[i - j][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
      }
    }
  ]
};

本文标签： javascriptHow to implement custom rendering of ECharts legend as a dropdown selection boxStack Overflow