Um contêiner de gráfico para echarts, usando grade para armazenar vários gráficos de linha e configurar a ligação do eixo x

renderizações

parâmetros de configuração

// prettier-ignore
const data = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];
const dateList = data.map(function (item) {
    
    
  return item[0];
});
const valueList = data.map(function (item) {
    
    
  return item[1];
});
option = {
    
    
  // Make gradient line here
  visualMap: [
    {
    
    
      show: false,
      type: 'continuous',
      seriesIndex: 0,
      min: 0,
      max: 400
    },
    {
    
    
      show: false,
      type: 'continuous',
      seriesIndex: 1,
      dimension: 0,
      min: 0,
      max: dateList.length - 1
    }
  ],
  title: [
    {
    
    
      left: 'center',
      text: 'Gradient along the y axis'
    },
    {
    
    
      top: '55%',
      left: 'center',
      text: 'Gradient along the x axis'
    }
  ],
  tooltip: {
    
    
    trigger: 'axis',
    axisPointer: {
    
    
      type: 'cross',
      animation: false,
      label: {
    
    
        backgroundColor: '#ccc',
        borderColor: '#aaa',
        borderWidth: 1,
        shadowBlur: 0,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        color: '#222'
      }
    },
  },
  xAxis: [
    {
    
    
      data: dateList
    },
    {
    
    
      data: dateList,
      gridIndex: 1
    }
  ],
  yAxis: [
    {
    
    },
    {
    
    
      gridIndex: 1
    }
  ],
  grid: [
    {
    
    
      bottom: '60%'
    },
    {
    
    
      top: '60%'
    }
  ],
  series: [
    {
    
    
      type: 'line',
      showSymbol: false,
      data: valueList
    },
    {
    
    
      type: 'line',
      showSymbol: false,
      data: valueList,
      xAxisIndex: 1,
      yAxisIndex: 1
    }
  ]
};

explicação do código

1. title: O objeto de configuração do componente de título, usado para definir o título do gráfico. Entre eles, texto atributo é usado para definir o texto do título e lefto atributo é usado para definir a posição horizontal do título.

2. tooltip: O objeto de configuração do componente de dica de ferramenta, que é usado para exibir a dica de ferramenta quando o mouse passa sobre ela. Entre eles trigger, o atributo é usado para definir o tipo de trigger (aqui, ele é exibido quando o mouse está passando) e axisPointero atributo é usado para definir o estilo e o efeito de animação do indicador do eixo.

3. legend: O objeto de configuração do componente de legenda, que é usado para exibir os nomes e os símbolos correspondentes de cada série de dados no gráfico. Dentre eles, datao atributo é utilizado para definir o conteúdo da legenda, e lefto atributo é utilizado para definir a posição horizontal da legenda.

4. toolbox: O objeto de configuração do componente da caixa de ferramentas, que é usado para fornecer alguns botões de operação comuns. Entre eles, featureo atributo contém vários subitens, como dataZoom(zoom de dados), restore(redefinir) e saveAsImage(salvar como imagem).

5. axisPointer: A configuração pública global do indicador do eixo de coordenadas. Isso é usado para vincular os indicadores dos dois eixos de coordenadas.

6. dataZoom: O objeto de configuração do componente de zoom da área de dados, usado para controlar o estado de zoom da área de dados. Entre eles show, o atributo é usado para definir se a barra de zoom deve ser exibida, realtimeo atributo é usado para definir se deve ativar a função de zoom em tempo real starte endo atributo é usado para definir o intervalo de zoom padrão e xAxisIndexo atributo é usado para especificar qual eixo aplicar zoom.

7. grid: Configurações relacionadas da grade de desenho no sistema de coordenadas cartesianas. Ele contém dois objetos, correspondentes às partes superior e inferior da grade, lefte rightas heightpropriedades são usadas para controlar a posição e o tamanho da grade.

8. xAxis: Configurações relacionadas do eixo horizontal no sistema de coordenadas cartesianas. Ele contém dois objetos, correspondentes ao eixo horizontal das partes superior e inferior, typeo atributo é usado para definir o tipo de eixo (aqui é o tipo de categoria), o boundaryGapatributo é usado para controlar se deve deixar em branco em ambos os lados dos dados , e axisLineo atributo é usado para controlar se Exibir o eixo de coordenadas, dataa propriedade é usada para definir o conteúdo do rótulo de escala do eixo e positiona propriedade é usada para controlar a posição do eixo de coordenadas.

9. yAxis: Configurações relacionadas do eixo vertical no sistema de coordenadas cartesianas. Contém dois objetos, correspondentes ao eixo vertical das partes superior e inferior, namea propriedade é usada para definir o nome do eixo de coordenadas, typea propriedade é usada para definir o tipo do eixo de coordenadas (tipo numérico aqui), maxa propriedade é usado para definir o valor máximo do eixo de coordenadas, e gridIndexa propriedade Usado para controlar a qual grade esse eixo pertence.

10. series: O objeto de configuração da série de dados, usado para descrever o tipo, nome, estilo, etc. de cada série de dados. Ele contém dois objetos, correspondentes a duas séries de dados (aqui está um gráfico de linha), nameo atributo é usado para definir o nome da série de dados, typeo atributo é usado para definir o tipo de série de dados xAxisIndexe yAxisIndexo atributo é usado para especificar o eixo de coordenadas ao qual a série de dados pertence. symbolSizeOs atributos são usados ​​para controlar o tamanho do símbolo do ponto de dados datae os atributos são usados ​​para definir os dados.

Links Relacionados

link de amostra

Configuração do parâmetro de grade