Carta pai ECharts (cincin): cara memaparkan perkadaran data dan perubahan struktur-tutorial js-php.cn

Carta pai ECharts (cincin): cara memaparkan perkadaran data dan perubahan struktur

ECharts carta pai (cincin): cara memaparkan perkadaran data dan perubahan struktur

ECharts ialah perpustakaan visualisasi data berasaskan JavaScript yang menyediakan pelbagai jenis carta, termasuk carta garis, carta bar dan carta serakan , peta , dsb. Antaranya, carta pai ialah jenis carta yang biasa digunakan yang boleh digunakan untuk memaparkan perkadaran dan perubahan struktur data. Artikel ini akan memperkenalkan cara menggunakan carta pai ECharts untuk memaparkan perkadaran data dan perubahan struktur serta memberikan contoh kod khusus.

1. Format data

Sebelum menggunakan carta pai ECharts, anda perlu menyediakan data dan menukar format data kepada format yang diperlukan oleh ECharts. Dalam carta pai, format data biasanya menggunakan kaedah berikut:

data:[
  {name:'数据1',value:100},
  {name:'数据2',value:200},
  {name:'数据3',value:300},
  {name:'数据4',value:400}
]

Salin selepas log masuk

di mana nama mewakili nama data dan nilai mewakili nilai data. Perlu diingatkan bahawa nilai dalam data secara amnya adalah jenis angka Jika ia adalah jenis rentetan, ia perlu ditukar menggunakan parseInt() atau parseFloat().

2. Carta pai asas

Berikut menunjukkan cara menggunakan ECharts untuk melukis carta pai asas. Mula-mula, anda perlu memperkenalkan pustaka dan tema ECharts, mencipta elemen DOM untuk memaparkan carta dan memulakan tika ECharts. Kemudian, tetapkan konfigurasi asas carta pai, termasuk tajuk, legenda, warna, dsb. Akhir sekali, data dihantar ke dalam carta pai untuk rendering.

Kod HTML:

<div id="pie1" style="width: 600px;height:400px;"></div>

Salin selepas log masuk

Kod JavaScript:

// 引入ECharts库和主题
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/theme/macarons.js"></script>

// 创建一个DOM元素用于显示图表
var chart1 = echarts.init(document.getElementById('pie1'),'macarons');

// 设置饼图的基本配置
var option1 = {
  title: {
    text: '基本饼图示例',
    subtext: '数据来自Demo',
    x: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b}: {c} ({d}%)"
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data:['数据1','数据2','数据3','数据4']
  },
  series: [
    {
      name:'饼图',
      type:'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: false,
          position: 'center'
        },
        emphasis: {
          show: true,
          textStyle: {
            fontSize: '30',
            fontWeight: 'bold'
          }
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data:[
        {value:100, name:'数据1'},
        {value:200, name:'数据2'},
        {value:300, name:'数据3'},
        {value:400, name:'数据4'}
      ],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

// 将数据传入到饼图中进行渲染
chart1.setOption(option1);

Salin selepas log masuk

Dalam kod di atas, tajuk carta, petua data, legenda, jejari carta pai, data, dll. ditetapkan. Kesan carta pai adalah seperti yang ditunjukkan di bawah:

Carta pai ECharts (cincin): cara memaparkan perkadaran data dan perubahan struktur

3 Pai Carta ialah variasi carta pai asas di mana bahagian tengah carta pai dilubangkan untuk membentuk angka berbentuk donat. Dalam ECharts, anda boleh menetapkan sifat innerradius carta pai untuk mencapai kesan ini. Contoh di bawah menunjukkan cara melukis carta pai donat menggunakan ECharts.

Kod HTML:

<div id="pie2" style="width: 600px;height:400px;"></div>

Salin selepas log masuk

Kod JavaScript:

// 创建一个DOM元素用于显示图表
var chart2 = echarts.init(document.getElementById('pie2'),'macarons');

// 设置饼图的基本配置
var option2 = {
  title: {
    text: '环形饼图示例',
    subtext: '数据来自Demo',
    x: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b}: {c} ({d}%)"
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data:['数据1','数据2','数据3','数据4']
  },
  series: [
    {
      name:'饼图',
      type:'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: false,
          position: 'center'
        },
        emphasis: {
          show: true,
          textStyle: {
            fontSize: '30',
            fontWeight: 'bold'
          }
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data:[
        {value:100, name:'数据1'},
        {value:200, name:'数据2'},
        {value:300, name:'数据3'},
        {value:400, name:'数据4'}
      ],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      // 设置内半径
      innerRadius:'50%'
    }
  ]
};

// 将数据传入到饼图中进行渲染
chart2.setOption(option2);

Salin selepas log masuk

Kod di atas hampir sama dengan kod untuk carta pai asas, kecuali sifat innerRadius ditetapkan dalam siri. Kesan carta pai bulat ini adalah seperti yang ditunjukkan di bawah:

Carta pai ECharts (cincin): cara memaparkan perkadaran data dan perubahan struktur

Empat perubahan struktur data

pai Selain menunjukkan perkadaran data, graf juga boleh digunakan untuk menunjukkan perubahan dalam struktur data. Dalam ECharts, kesan ini boleh dicapai dengan mengubah suai dan memaparkan semula data. Contoh berikut menunjukkan cara mengendalikan data dalam carta pai untuk memaparkan kesan perubahan dalam struktur data.

Kod HTML:

<div id="pie3" style="width: 600px;height:400px;"></div>

Salin selepas log masuk

Kod JavaScript:

// 数据源
var data1 = [
  {value:100, name:'数据1'},
  {value:200, name:'数据2'},
  {value:300, name:'数据3'},
  {value:400, name:'数据4'}
];
var data2 = [
  {value:450, name:'数据5'},
  {value:250, name:'数据6'},
  {value:200, name:'数据7'},
  {value:150, name:'数据8'}
];

// 创建一个DOM元素用于显示图表
var chart3 = echarts.init(document.getElementById('pie3'),'macarons');

// 设置饼图的基本配置
var option3 = {
  title: {
    text: '数据结构变化示例',
    subtext: '数据来自Demo',
    x: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b}: {c} ({d}%)"
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data:['数据1','数据2','数据3','数据4']
  },
  series: [
    {
      name:'饼图',
      type:'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: false,
          position: 'center'
        },
        emphasis: {
          show: true,
          textStyle: {
            fontSize: '30',
            fontWeight: 'bold'
          }
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data:data1,
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      innerRadius:'50%'
    }
  ]
};

// 将数据1传入到饼图中进行渲染
chart3.setOption(option3);

// 点击事件
chart3.on('click', function (params) {
  // alert(params.name);
  if(params.name=='数据1'){
    option3.legend.data = ['数据5','数据6','数据7','数据8'];
    option3.series[0].data = data2;
  }else{
    option3.legend.data = ['数据1','数据2','数据3','数据4'];
    option3.series[0].data = data1;
  }
  chart3.setOption(option3);
});

Salin selepas log masuk

Dalam kod di atas, kami mentakrifkan dua sumber data data1 dan data2, yang masing-masing mewakili dua struktur data yang berbeza. Peristiwa klik disediakan dalam carta pai Apabila carta pai diklik, ia akan dinilai berdasarkan nama data yang diklik Jika klik adalah data 1 dalam data1, data dalam legenda dan siri akan diubah suai menjadi data2 struktur data, sebaliknya Ubah suai menjadi struktur data1 data. Akhir sekali, panggil kaedah setOption() untuk memaparkan semula carta yang diubah suai. Kesan perubahan struktur data ini ditunjukkan dalam rajah di bawah:

Carta pai ECharts (cincin): cara memaparkan perkadaran data dan perubahan struktur

Ringkasnya, artikel ini memperkenalkan cara menggunakan ECharts melukis carta pai dan menyediakan contoh kod khusus. Selain carta pai asas dan carta pai cincin, ia juga menunjukkan cara mengendalikan data dalam carta pai untuk memaparkan kesan perubahan struktur data. Pembaca boleh membuat pengubahsuaian dan pengoptimuman yang sepadan mengikut keperluan dan format data mereka sendiri.

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