Susun beberapa konfigurasi biasa echarts (dengan contoh kod)

Saya tidak akan membincangkan penggunaan asas echarts. Terdapat banyak tunjuk cara di tapak web rasmi, anda hanya boleh menyalin dan menampalnya. Di sini kami meringkaskan konfigurasi biasa pengarang dalam syarikat.

1. Dwi paksi Y

Apabila data anda mempunyai berbilang polyline, dan beberapa baris mempunyai data yang besar, dan beberapa baris mempunyai data yang sangat kecil, jika semuanya diletakkan pada satu Y Jika data dipaparkan pada paksi, sejumlah kecil data akan menjadi sangat hampir dengan .

Anda hanya perlu mengkonfigurasi options.yAxis, dan kemudian dalam options.series, mengkonfigurasi yAxisIndex untuk setiap data, 0 adalah kiri dan 1 adalah kanan.

options = {
    series: [
        {
            data: [...],
            type: "line",
            yAxisIndex: 0,
        },
        {
            data: [...],
            type: "line",
            yAxisIndex: 1,
        },
        ...
    ],
    yAxis: [
      {
        type: 'value',
        name: '',
        axisLabel: {
          formatter: '{value}',
        },
        alignTicks: true,
        axisLine: {
          show: true,
        },
      },
      {
        type: 'value',
        name: '',
        axisLabel: {
          formatter: '{value}',
        },
        alignTicks: true,
        axisLine: {
          show: true,
        },
      },
    ],
}

2. Kesan pemuatan

ecarta disertakan dengan pemuatan, yang boleh dipanggil semasa memuatkan data dan showLoading() apabila membatalkan pemuatan. hideLoading()

3.no-data placeholder

echarts tidak menyediakan sebarang no-data placeholder yang baik, jadi ia hanya boleh diubah suai dengan tajuk. Apabila tiada data, mula-mula kosongkan paksi-X dan paksi-Y secara manual, kemudian tambahkan tajuk apabila terdapat data, padamkan tajuk itu;

options = {
  title: {
    text: '此时间段暂无数据',
    textStyle: {
      color: 'black',
      fontWeight: 'normal',
      fontSize: 25,
    },
    left: '45%',
    top: '30%',
  },
};

4. Label dengan unit

Label lalai echarts tidak mempunyai unit, echarts menyediakan konfigurasi unit. Hanya konfigurasi tooltip.valueFormatter dalam setiap polyline siri.

Jika anda tidak berpuas hati dengan gaya paparan label, echarts juga membenarkan anda menyesuaikan html label pada masa ini masa, anda boleh menggunakan formatter Tambah unit di dalam html.

Konfigurasi adalah seperti berikut, tukar mengikut projek anda sendiri:

<br/>

Atas ialah kandungan terperinci Susun beberapa konfigurasi biasa echarts (dengan contoh kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!