Carta pai ECharts: cara memaparkan perkadaran data

Dengan aplikasi visualisasi data yang meluas, ECharts, perpustakaan visualisasi yang sangat baik, juga telah mendapat lebih banyak perhatian. Antaranya, carta pai digunakan secara meluas untuk memaparkan perkadaran data. Artikel ini akan memperkenalkan cara menggunakan carta pai ECharts untuk memaparkan perkadaran data dan memberikan contoh kod khusus.

1. Konsep asas carta pai ECharts

Pertama sekali, kita perlu memahami konsep asas carta pai. Carta pai sering digunakan untuk mewakili perkadaran data Nilai khusus ditukar kepada saiz sudut, dan kemudian diwakili oleh saiz kawasan sektor. Saiz setiap sektor adalah berkadar dengan nilai berangkanya.

2. Bagaimana untuk melaksanakan carta pai ECharts

Untuk menggunakan ECharts untuk melukis carta pai, anda perlu terlebih dahulu memperkenalkan perpustakaan ECharts dan mencipta tag div dengan saiz yang ditentukan untuk memaparkan carta pai. Kod khusus adalah seperti berikut:

<style type="text/css">
  #myChart {
    width: 400px;
    height: 400px;
  }
</style>
<div id="myChart"></div>
<script src="echarts.min.js"></script>

Antaranya, tag gaya digunakan untuk menentukan saiz tag div di mana carta pai berada. Teg skrip memperkenalkan versi min pustaka ECharts.

Kemudian, kita perlu melaksanakan carta pai melalui kod JavaScript. Kod khusus adalah seperti berikut:

var myChart = echarts.init(document.getElementById('myChart'));

var option = {
  title: {
    text: '饼图示例',
    left: 'center'
  },
  tooltip: {},
  legend: {
    data:['数据1', '数据2', '数据3']
  },
  series: [
    {
      name:'数据占比',
      type:'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data:[
        {value:335, name:'数据1'},
        {value:310, name:'数据2'},
        {value:234, name:'数据3'}
      ],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

myChart.setOption(option);

Dalam kod di atas, kami mula-mula menggunakan kaedah echarts.init() untuk memulakan tika ECharts. Kemudian, kami mentakrifkan pilihan objek JavaScript, yang mentakrifkan pelbagai sifat dan data yang diperlukan dalam carta pai. Akhir sekali, kami menggunakan kaedah setOption() untuk menggunakan objek pilihan ini pada contoh ECharts untuk menjana carta pai.

Secara khusus, objek pilihan mengandungi atribut berikut:

1. tajuk: digunakan untuk menetapkan tajuk carta pai
2. petua alat: digunakan untuk menetapkan maklumat segera apabila tetikus terapung; Label pai untuk setiap kawasan sektor dalam carta
3. siri: digunakan untuk menetapkan siri data tertentu dalam carta pai, termasuk jejari, data, gaya, dsb.
4. 3. Tetapan gaya carta pai ECharts

Selain paparan data asas, carta pai ECharts juga menyediakan pelbagai pilihan tetapan gaya, dan gaya carta pai yang berbeza boleh dicapai dengan mengubah suai atribut yang sepadan.

Jejari dalam dan luar

1. Laraskan jejari dalam dan luar carta pai dengan menetapkan atribut jejari untuk mengawal saiz kawasan berbentuk kipas. Kod berikut:

series: [
  {
    type: 'pie',
    radius: ['50%', '70%'],
    data: [
      {value: 335, name: '数据1'},
      {value: 310, name: '数据2'},
      {value: 234, name: '数据3'},
      {value: 135, name: '数据4'},
      {value: 1548, name: '数据5'}
    ]
  }
]

Dalam kod di atas, atribut jejari mengandungi tatasusunan, dan dua nilai dalam tatasusunan masing-masing mewakili peratusan jejari dalam dan luar. Dalam contoh ini, jejari dalam ialah 50% dan jejari luar ialah 70%.

Kedudukan legenda

2. Laraskan kedudukan dan arah legenda dengan menetapkan atribut x, y dan orientasi dalam atribut legenda. Kod berikut:

legend: {
  x: 'left',
  y: 'center',
  orient: 'vertical',
  data: ['数据1', '数据2', '数据3', '数据4', '数据5']
}

Dalam kod di atas, atribut x menetapkan kedudukan mendatar legenda ke kiri, atribut y menetapkan kedudukan menegak legenda ke tengah, dan atribut orient menetapkan arah legenda ke arah menegak.

Kesan bayangan

3. Dengan menetapkan atribut penekanan dalam atribut itemStyle, anda boleh menambah bayang-bayang dan kesan lain pada kawasan berbentuk kipas untuk meningkatkan kesan visual carta pai. Kod berikut:

itemStyle: {
  emphasis: {
    shadowBlur: 10,
    shadowOffsetX: 0,
    shadowColor: 'rgba(0, 0, 0, 0.5)'
  }
}

Dalam kod di atas, shadowBlur mewakili tahap kabur bayang-bayang, shadowOffsetX dan shadowOffsetY mewakili offset mendatar dan menegak bayang-bayang, dan shadowColor mewakili warna bayang-bayang.

4. Contoh carta pai ECharts

Di bawah, kami memberikan contoh carta pai ECharts, yang mengandungi data asas dan tetapan gaya yang dinyatakan di atas. Kodnya adalah seperti berikut:

<style type="text/css">
  #myChart {
    width: 400px;
    height: 400px;
  }
</style>
<div id="myChart"></div>
<script src="echarts.min.js"></script>
<script>
  var myChart = echarts.init(document.getElementById('myChart'));
  var option = {
    title: {
      text: '饼图示例',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 10,
      top: 20,
      data:['数据1', '数据2', '数据3', '数据4', '数据5']
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: ['40%', '60%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '30',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data:[
          {value:335, name:'数据1'},
          {value:310, name:'数据2'},
          {value:234, name:'数据3'},
          {value:135, name:'数据4'},
          {value:1548, name:'数据5'}
        ]
      }
    ]
  };
  myChart.setOption(option);
</script>

Carta pai ini termasuk ciri-ciri berikut:

Tambahkan legenda dan laraskan kedudukan legenda ke penjuru kiri sebelah atas

1. Tambah tetingkap timbul apabila tetikus melayang, dan paparan peratusan;
2. Menambah kesan bayang-bayang dan menetapkan kesan sorotan apabila tetikus melayang.
3. Di atas adalah pengenalan kepada pelaksanaan asas carta pai ECharts dan beberapa contoh tetapan gaya Saya harap pembaca dapat memahami carta pai ECharts melalui artikel ini dan dapat mengaplikasikannya dengan betul dalam pembangunan sebenar.

Atas ialah kandungan terperinci Carta pai ECharts: cara memaparkan perkadaran data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!