echarts draws multiple curves and multiple colors, configures and stores images, etc.

echarts draws multiple curves and multiple colors, configures and stores images, etc.

  bandChartOption = {
    
    
    toolbox: {
    
    
      feature: {
    
    
      //可存为图片
        saveAsImage: {
    
    }
      },
      // 调整图表位置，相当于position：absolute的right和top
      right: 90,
      top: 15
    },
    title: {
    
    
      text: 'Band Structure',
      left: 'center'
    },
    tooltip: {
    
    
      trigger: 'axis'
    },
    legend: {
    
    
      right: 10,
      bottom: 5,
      padding: [0, 40],
      type: 'scroll',
      data: []
    },
    dataZoom: [
      {
    
    
        type: 'inside',
        xAxisIndex: [0]
      },
      {
    
    
        type: 'inside',
        yAxisIndex: [0]
      }
    ],
    xAxis: {
    
    
      name: 'kPoints',
      nameLocation: 'center',
      nameTextStyle: {
    
    
        padding: [10, 0]
      },
      min: 0,
      max: 1,
      type: 'value',
      axisLine: {
    
     onZero: false },
      splitLine: {
    
    
        show: false
      }
    },
    yAxis: {
    
    
      name: 'E-Efermi(eV)',
      nameLocation: 'center',
      type: 'value',
      axisLine: {
    
     onZero: false }
    },
    series: []
  };


initChartData(): void {
    
    
// this.bandData ：{data: []} =[][]
const LINE_COLOR = [
  '#FF1F1F', '#3BFF3B', '#1B1BFF', '#F8F850', '#FF25FF', '#67FFFF', '#AF41F2', '#9F8B29', '#2B9B9E', '#FFC1CC',
  '#CACACA', '#B6416D', '#9B4324', '#E1B3E1', '#4F9E71', '#A4BA78', '#B17150', '#FF9665', '#FFD06D'
];
  const colorLength = this.bandData.data.length;
  this.bandChartOption.series = bands.map((band, index) => {
    
    
      return {
    
    
        name: `trace ${
      
      index}`,
        type: 'line',
        symbol: 'circle',
        symbolSize: 2,
        smooth: false,
        itemStyle: {
    
    
          color: LINE_COLOR[index % colorLength]
        },
        data: band.map((v, i) => {
    
    
          return a value you need;
        })

      };
    });
    this.bandChartOption.legend.data = this.bandChartOption.series.map(serie => serie.name);
    }