Article directory
Introduction to polar histogram
The polar coordinate histogram is a special two-dimensional coordinate chart that displays data in a columnar form based on polar coordinates.
In a polar histogram, the category axis corresponds to the angular axis, and the indicator axis corresponds to the radial axis. The advantage of this kind of graphics is that it can retain the advantages of the data change trend in the rectangular coordinate system, while displaying it in a more beautiful form.
However, it should be noted that polar histograms do not represent trends well and are more limited in the amount of data displayed than ordinary histograms.
Configuration steps
Echarts is a JavaScript-based open source visualization library that helps users quickly create various types of charts. Polar histogram is a chart type in Echarts, which can represent data as a histogram on a polar coordinate system.
The following is the detailed configuration process of using Echarts to create a polar histogram:
The configuration steps of this code are as follows:
- Create an HTML file and introduce the ECharts JavaScript file in the head, ie
<script src="echarts.min.js"></script>. - Create an element in the HTML file
<div>that displays the chart. The element has an ID ofmain600 pixels wide and 400 pixels high. - In
<script>the label, useecharts.initthe method to initialize the chart instance and assign it to a variablemyChart. - Create an
optionobject named that will be used to configure the chart's options. - In
optionthe object, set the title (title) to "Polar Coordinate Histogram". - Configure the angle axis (
angleAxis), set the type to value (value), and the starting angle is 0. - Configure the radius axis (
radiusAxis), set the minimum value to 0 and the maximum value to 80. - Configure the polar coordinate system (
polar), which is an empty object. - Configure Series (
series), contains an object used to configure the options for the histogram. - In the series object, set the type to histogram (
bar) and the coordinate system type to polar coordinate system (polar). - Configuration data (
data), contains a set of objects, each object represents a histogram data point. Each data point contains a value and a name. - Configure the label (
label), set the display label (show) totrue, the label position (position) to the right side (right), and the label content formatter (formatter) to{b}: {c}, which{b}represents the name of the data item and{c}represents the value of the data item. - Configure the element style (
itemStyle) and set the color of the histogram to red (red). - Use
myChart.setOption(option)the method to apply configuration options to a chart instance, rendering a polar histogram.
To sum up, the configuration steps of this code are mainly to create a polar coordinate histogram and configure it in detail, including title, angle axis, radius axis, polar coordinate system, series, data, label and primitive style. etc. settings.
Simple example
First of all, polar histogram is not the default chart type of ECharts, but we can use some tricks to implement polar label chart. Here is an HTML example of using Echarts to create a polar histogram:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: [
{
text: '极坐标柱状图',
}
],
angleAxis: {
type: 'value',
startAngle: 0,
},
radiusAxis: {
min: 0,
max: 80
},
polar: {
},
series: [{
type: 'bar',
coordinateSystem: 'polar',
data: [
{
value: 10, name: '一月'},
{
value: 20, name: '二月'},
{
value: 30, name: '三月'},
{
value: 40, name: '四月'},
{
value: 50, name: '五月'},
{
value: 60, name: '六月'},
],
label: {
show: true,
position: 'right',
formatter: '{b}: {c}'
},
itemStyle: {
color: 'red'
}
}],
};
myChart.setOption(option);
</script>
</body>
</html>
In the above code, we first introduced the ECharts library, and then created a div element for displaying charts in the HTML page. In the JavaScript part, we first initialized an ECharts instance, and then defined an option object, which defines various configurations of the chart.
In the option object, angleAxis defines the angle axis of polar coordinates, radiusAxis defines the radius axis, polar is the configuration related to polar coordinates, and series defines the data series. In the data series, type is 'bar' to draw a histogram, and coordinateSystem is set to 'polar' to use a polar coordinate system. data defines the data and name of each column, label defines the display method and format of the label, and itemStyle defines the color of the column.
Note: This code needs to download the ECharts library (echarts.min.js) first and place it in the corresponding location. You can download the latest version of the library file from the official website of ECharts.
