Cara menggunakan carta bertindan untuk memaparkan data dalam ECharts

ECharts ialah perpustakaan visualisasi yang sangat popular yang menyediakan pelbagai jenis carta, termasuk carta garisan, carta bar, carta serakan, carta pai dan banyak lagi. Carta bertindan ialah salah satu jenis carta yang sangat praktikal yang boleh membantu kami menggabungkan nilai daripada data yang berbeza bersama-sama mengikut peraturan tertentu dan memaparkan saiz dan arah aliran relatifnya secara visual. Artikel ini akan memperkenalkan cara menggunakan carta bertindan untuk memaparkan data dalam ECharts dan memberikan contoh kod khusus.

1. Pra-pengetahuan

Sebelum menggunakan ECharts untuk membuat carta bertindan, kita perlu menguasai beberapa pra-pengetahuan:

• Format data: Format data carta bertindan dalam ECharts ialah tatasusunan dua dimensi, di mana setiap elemen mewakili data Kumpulan, yang terdiri daripada tatasusunan dan rentetan. Tatasusunan mewakili nilai setiap titik data, dan rentetan mewakili nama siri data.
• Penggunaan ECharts: Carta bertindan dalam ECharts boleh menunjukkan perhubungan relatif beberapa siri data dengan menyusunnya bersama-sama. Apabila menggunakan jenis carta ini, anda perlu tahu cara menggunakan ECharts untuk mencipta contoh carta, menetapkan parameter carta dan melukis graf.

2. Kod pelaksanaan

Berikut ialah contoh kod yang diperlukan untuk melukis carta bertindan menggunakan ECharts:

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
  title: {
    text: '堆叠区域图'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '邮件营销',
      type: 'line',
      stack: '总量',
      areaStyle: {},
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '联盟广告',
      type: 'line',
      stack: '总量',
      areaStyle: {},
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '视频广告',
      type: 'line',
      stack: '总量',
      areaStyle: {},
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '直接访问',
      type: 'line',
      stack: '总量',
      areaStyle: {},
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: '搜索引擎',
      type: 'line',
      stack: '总量',
      label: {
        normal: {
          show: true,
          position: 'top'
        }
      },
      areaStyle: {},
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

Dalam kod di atas, kami mencipta contoh ECharts dan menggunakan kaedah init untuk Ikat pada elemen halaman HTML yang ditentukan. Kami kemudiannya menentukan objek yang dipanggil option yang mengandungi semua pilihan konfigurasi dan data untuk carta. Pilihan konfigurasi ini termasuk tajuk carta, petua alat, legenda, kawasan plot, bar alat, paksi, siri data dan banyak lagi. Makna khusus dan penggunaan pilihan konfigurasi ini boleh dilihat dalam dokumentasi rasmi ECharts. init 方法将其绑定到 HTML 页面的指定元素上。然后，我们定义了一个名为 option 的对象，其中包含了图表的所有配置选项和数据。这些配置选项包括图表的标题、提示框、图例、绘图区域、工具栏、坐标轴、数据系列等等。关于这些配置选项的具体含义和用法，可以在 ECharts 官方文档中查看。

注意，在数据系列的定义中，我们设置了 stack 属性，表示将该系列的数据堆叠在之前所有系列的数据上面。这样，就可以将不同数据的数值按照一定规则组合在一起，展示出它们的相对大小和趋势。

最后，我们使用 setOption

Perhatikan bahawa dalam takrifan siri data, kami menetapkan atribut tindanan, yang bermaksud bahawa data siri ini akan disusun di atas data semua siri sebelumnya. Dengan cara ini, nilai daripada data yang berbeza boleh digabungkan bersama mengikut peraturan tertentu untuk menunjukkan saiz dan arah aliran relatifnya.

Akhir sekali, kami menggunakan kaedah setOption untuk menggunakan pilihan konfigurasi pada contoh ECharts untuk melukis carta bertindan.

3. Ringkasan🎜🎜Dalam artikel ini, kami memperkenalkan cara menggunakan carta bertindan untuk memaparkan data dalam ECharts, yang melibatkan prapengetahuan seperti format data dan penggunaan ECharts. Kami juga menyediakan contoh pelaksanaan kod khusus, yang merangkumi langkah-langkah seperti mencipta tika ECharts, menetapkan parameter carta dan melukis grafik. Jika anda ingin mengetahui lebih lanjut tentang penggunaan dan contoh ECharts, sila rujuk dokumentasi rasmi dan amalkan lebih lanjut. 🎜

Atas ialah kandungan terperinci Cara menggunakan carta bertindan untuk memaparkan data dalam ECharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!