Susun beberapa konfigurasi biasa echarts (dengan contoh kod)

藏色散人

Lepaskan： 2023-04-18 15:27:03

ke hadapan

1475 orang telah melayarinya

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 .

Susun beberapa konfigurasi biasa echarts (dengan contoh kod)

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: &#39;value&#39;,
        name: &#39;&#39;,
        axisLabel: {
          formatter: &#39;{value}&#39;,
        },
        alignTicks: true,
        axisLine: {
          show: true,
        },
      },
      {
        type: &#39;value&#39;,
        name: &#39;&#39;,
        axisLabel: {
          formatter: &#39;{value}&#39;,
        },
        alignTicks: true,
        axisLine: {
          show: true,
        },
      },
    ],
}

Salin selepas log masuk

2. Kesan pemuatan

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

Susun beberapa konfigurasi biasa echarts (dengan contoh kod)

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;

Susun beberapa konfigurasi biasa echarts (dengan contoh kod)

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

Salin selepas log masuk

4. Label dengan unit

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

Susun beberapa konfigurasi biasa echarts (dengan contoh kod)

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/>

Salin selepas log masuk

Susun beberapa konfigurasi biasa echarts (dengan contoh kod)

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!