ECharts-Kreisdiagramm (Ring): So zeigen Sie Datenanteile und Strukturänderungen an

ECharts Kreisdiagramm (Ring): So zeigen Sie Datenanteile und Strukturänderungen an

ECharts ist eine JavaScript-basierte Datenvisualisierungsbibliothek, die eine Vielzahl von Diagrammtypen bereitstellt, darunter Liniendiagramme, Balkendiagramme und Streudiagramme sowie Karten , usw. Unter diesen sind Kreisdiagramme ein häufig verwendeter Diagrammtyp, der zur Darstellung der Anteile und Strukturänderungen von Daten verwendet werden kann. In diesem Artikel wird erläutert, wie Sie ECharts-Kreisdiagramme verwenden, um Datenproportionen und Strukturänderungen anzuzeigen, und es werden spezifische Codebeispiele bereitgestellt.

1. Datenformat

Bevor Sie das Kreisdiagramm von ECharts verwenden, müssen Sie die Daten vorbereiten und das Datenformat in das von ECharts benötigte Format konvertieren. In einem Kreisdiagramm verwendet das Datenformat normalerweise die folgende Methode:

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

wobei Name für den Namen der Daten und Wert für den Wert der Daten steht. Es ist zu beachten, dass der Wert in den Daten im Allgemeinen vom numerischen Typ ist. Wenn es sich um einen Zeichenfolgentyp handelt, muss er mit parseInt() oder parseFloat() konvertiert werden.

2. Einfaches Kreisdiagramm

Im Folgenden wird gezeigt, wie Sie mit ECharts ein einfaches Kreisdiagramm zeichnen. Zunächst müssen Sie die ECharts-Bibliothek und das ECharts-Theme vorstellen, ein DOM-Element zur Anzeige des Diagramms erstellen und eine ECharts-Instanz initialisieren. Legen Sie dann die Grundkonfiguration des Kreisdiagramms fest, einschließlich Titel, Legende, Farbe usw. Schließlich werden die Daten zum Rendern an das Kreisdiagramm übergeben.

HTML-Code:

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

JavaScript-Code:

// 引入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);

Im obigen Code werden der Diagrammtitel, Datentipps, Legende, Kreisdiagrammradius, Daten usw. festgelegt. Die Wirkung des Kreisdiagramms ist wie folgt:

3 Kreisdiagramm Das Diagramm ist eine Variation des einfachen Kreisdiagramms, bei dem die Mitte des Kreisdiagramms ausgehöhlt ist, um eine Donut-förmige Figur zu bilden. In ECharts können Sie die innerRadius-Eigenschaft des Kreisdiagramms festlegen, um diesen Effekt zu erzielen. Das folgende Beispiel zeigt, wie man mit ECharts ein Donut-Kreisdiagramm zeichnet.

HTML-Code:

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

JavaScript-Code:

// 创建一个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);

Der obige Code ist fast derselbe wie der Code für das grundlegende Kreisdiagramm, außer dass die innerRadius-Eigenschaft in der Reihe festgelegt ist. Die Auswirkung dieses kreisförmigen Kreisdiagramms ist wie folgt:

Vier Datenstrukturänderungen

pie Neben der Darstellung des Datenanteils können Diagramme auch zur Darstellung von Änderungen in der Datenstruktur verwendet werden. In ECharts kann dieser Effekt durch Modifizieren und erneutes Rendern der Daten erreicht werden. Das folgende Beispiel zeigt, wie Daten in einem Kreisdiagramm verarbeitet werden, um die Auswirkungen von Änderungen in der Datenstruktur anzuzeigen.

HTML-Code:

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

JavaScript-Code:

// 数据源
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);
});

Im obigen Code definieren wir zwei Datenquellen data1 und data2, die jeweils zwei unterschiedliche Datenstrukturen darstellen. Im Kreisdiagramm wird ein Klickereignis eingerichtet. Wenn auf das Kreisdiagramm geklickt wird, wird es anhand des angeklickten Datennamens beurteilt. Wenn es sich bei dem Klick um Daten 1 in Daten1 handelt, werden die Daten in Legende und Reihe in Daten2 geändert Datenstruktur, andernfalls in die Datenstruktur data1 ändern. Rufen Sie abschließend die Methode setOption() auf, um das geänderte Diagramm erneut zu rendern. Die Auswirkung dieser Datenstrukturänderung ist in der folgenden Abbildung dargestellt:

Zusammenfassend dieser Artikel stellt die Verwendung von ECharts vor, zeichnet Kreisdiagramme und stellt spezifische Codebeispiele bereit. Neben einfachen Kreisdiagrammen und Ringkreisdiagrammen wird auch gezeigt, wie Daten in Kreisdiagrammen verarbeitet werden, um die Auswirkungen von Datenstrukturänderungen anzuzeigen. Der Leser kann entsprechende Änderungen und Optimierungen entsprechend seinen eigenen Bedürfnissen und Datenformaten vornehmen.

Das obige ist der detaillierte Inhalt vonECharts-Kreisdiagramm (Ring): So zeigen Sie Datenanteile und Strukturänderungen an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!