ECharts-Kreisdiagramm: So zeigen Sie Datenproportionen an

Mit der weit verbreiteten Anwendung der Datenvisualisierung hat auch ECharts, eine hervorragende Visualisierungsbibliothek, immer mehr Aufmerksamkeit erhalten. Unter diesen werden Kreisdiagramme häufig zur Darstellung des Datenanteils verwendet. In diesem Artikel wird erläutert, wie Sie Kreisdiagramme von ECharts verwenden, um Datenanteile anzuzeigen, und es werden spezifische Codebeispiele bereitgestellt.

1. Grundkonzepte von ECharts-Kreisdiagrammen

Zunächst müssen wir die Grundkonzepte von Kreisdiagrammen verstehen. Kreisdiagramme werden häufig verwendet, um den Anteil der Daten darzustellen. Bestimmte Werte werden in Winkelgrößen umgewandelt und dann durch die Größe der Sektorfläche dargestellt. Die Größe jedes Sektors ist proportional zu seinem numerischen Wert.

2. So implementieren Sie ein ECharts-Kreisdiagramm

Um ECharts zum Zeichnen eines Kreisdiagramms zu verwenden, müssen Sie zunächst die ECharts-Bibliothek vorstellen und ein div-Tag mit einer bestimmten Größe erstellen, um das Kreisdiagramm anzuzeigen. Der spezifische Code lautet wie folgt:

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

Unter anderem wird das Style-Tag verwendet, um die Größe des div-Tags anzugeben, in dem sich das Kreisdiagramm befindet. Das Skript-Tag stellt die Mindestversion der ECharts-Bibliothek vor.

Dann müssen wir das Kreisdiagramm durch JavaScript-Code implementieren. Der spezifische Code lautet wie folgt:

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);

Im obigen Code verwenden wir zunächst die Methode echarts.init(), um die ECharts-Instanz zu initialisieren. Anschließend definieren wir eine JavaScript-Objektoption, die verschiedene Eigenschaften und Daten definiert, die im Kreisdiagramm benötigt werden. Schließlich verwenden wir die Methode setOption(), um dieses Optionsobjekt auf die ECharts-Instanz anzuwenden und so ein Kreisdiagramm zu generieren.

Im Einzelnen enthält das Optionsobjekt die folgenden Attribute:

1. Titel: wird zum Festlegen des Titels des Kreisdiagramms verwendet;
2. Tooltip: wird zum Festlegen der Eingabeaufforderungsinformationen verwendet, wenn die Maus schwebt;
3. Legende: wird zum Festlegen des verwendet Kreisbeschriftungen für jeden Sektorbereich im Diagramm;
4. Serien: werden zum Festlegen spezifischer Datenreihen im Kreisdiagramm verwendet, einschließlich Radius, Daten, Stil usw. 3. Stileinstellung des ECharts-Kreisdiagramms

Innen- und Außenradius

Passen Sie den Innen- und Außenradius des Kreisdiagramms an, indem Sie das Radiusattribut festlegen, um die Größe des Sektorbereichs zu steuern. Der folgende Code:

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'}
    ]
  }
]

1. Im obigen Code enthält das Radiusattribut ein Array, und die beiden Werte im Array stellen den Prozentsatz des Innen- bzw. Außenradius dar. In diesem Beispiel beträgt der Innenradius 50 % und der Außenradius 70 %.

Position der Legende

Passen Sie die Position und Richtung der Legende an, indem Sie die Attribute x, y und orient im Legendenattribut festlegen. Der folgende Code:

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

2. Im obigen Code legt das x-Attribut die horizontale Position der Legende nach links fest, das y-Attribut legt die vertikale Position der Legende auf die Mitte fest und das orient-Attribut legt die Richtung der Legende fest zur vertikalen Richtung.

Schatteneffekt

Durch Festlegen des Attributs „Hervorhebung“ im Attribut „itemStyle“ können Sie dem fächerförmigen Bereich Schatten und andere Effekte hinzufügen, um den visuellen Effekt des Kreisdiagramms zu verbessern. Der folgende Code:

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

3. Im obigen Code repräsentiert ShadowBlur den Unschärfegrad des Schattens, ShadowOffsetX und ShadowOffsetY den horizontalen und vertikalen Versatz des Schattens und ShadowColor die Farbe des Schattens.

4. Beispiel eines ECharts-Kreisdiagramms

Nachfolgend geben wir ein spezifisches ECharts-Kreisdiagrammbeispiel, das die oben genannten grundlegenden Daten und Stileinstellungen enthält. Der Code lautet wie folgt:

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

Dieses Kreisdiagramm enthält die folgenden Funktionen:

Fügen Sie eine Legende hinzu und passen Sie die Position der Legende an die obere linke Ecke an;

Fügen Sie ein Popup-Fenster hinzu, wenn die Maus darüber schwebt, und zeigen Sie es an der Prozentsatz;

Schatteneffekte hinzugefügt und Hervorhebungseffekte festgelegt, wenn die Maus darüber schwebt.
2. Das Obige ist eine Einführung in die grundlegende Implementierung von ECharts-Kreisdiagrammen und einige Beispiele für Stileinstellungen. Ich hoffe, dass die Leser durch diesen Artikel ein gewisses Verständnis für ECharts-Kreisdiagramme erlangen und diese in der tatsächlichen Entwicklung korrekt anwenden können.

Das obige ist der detaillierte Inhalt vonECharts-Kreisdiagramm: So zeigen Sie Datenproportionen an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!