Home >Web Front-end >JS Tutorial >How to use funnel rose chart to display data proportion and conversion rate in ECharts
How to use funnel rose chart to display data proportion and conversion rate in ECharts
- 王林Original
- 2023-12-18 08:10:101398browse
How to use the funnel rose chart to display data proportion and conversion rate in ECharts
Overview:
The funnel rose chart is a commonly used data visualization chart. It can clearly display the proportion of data and conversion rate. In ECharts, we can easily achieve the display effect of funnel rose chart through simple data processing and configuration. This article will introduce how to use the funnel rose chart in ECharts to display data proportion and conversion rate, and provide corresponding code examples.
Step 1: Prepare data
First, we need to prepare the data to be displayed. Suppose we have the following data:
var data = [
{ value: 100, name: '阶段1' },
{ value: 80, name: '阶段2' },
{ value: 60, name: '阶段3' },
{ value: 40, name: '阶段4' },
{ value: 20, name: '阶段5' }
];Among them, value represents the amount of data in each stage, and name represents the name of each stage.
Step 2: Configure the chart
Next, we need to configure the style and properties of the funnel rose chart. The following is a simple configuration example:
var option = {
series: [
{
name: '漏斗玫瑰图',
type: 'pie',
radius: ['40%', '55%'],
center: ['50%', '50%'],
roseType: 'radius',
label: {
show: false
},
emphasis: {
label: {
show: true
}
},
data: data
}
]
};The key points in the configuration include:
- type specifies the chart type as 'pie', which is a pie chart.
- radius sets the inner and outer radius of the pie chart, represented here by an array. ['40%', '55%'] means that the inner radius is 40% and the outer radius is 55%.
- center sets the center point position of the pie chart, represented here by an array. ['50%', '50%'] means at the center of the canvas.
- roseType sets the pie chart type to 'radius', which represents a funnel rose chart.
- data sets the data source of the pie chart. The data prepared above is used here.
Step 3: Draw the chart
Finally, we need to draw the chart through the ECharts instance. In the HTML page, we create a script tag containing the following code:
var myChart = echarts.init(document.getElementById('chart'));
myChart.setOption(option);In the above code, we use the document.getElementById('chart') method to obtain the container div used to display the chart in the HTML page. And pass it to the echarts.init() method to create an ECharts instance. Then, we call the setOption() method to set configuration items for the instance.
To sum up, through the above three steps, we can use the funnel rose chart to display the proportion of data and conversion rate in ECharts. The complete code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>漏斗玫瑰图</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>
<script>
var data = [
{ value: 100, name: '阶段1' },
{ value: 80, name: '阶段2' },
{ value: 60, name: '阶段3' },
{ value: 40, name: '阶段4' },
{ value: 20, name: '阶段5' }
];
var option = {
series: [
{
name: '漏斗玫瑰图',
type: 'pie',
radius: ['40%', '55%'],
center: ['50%', '50%'],
roseType: 'radius',
label: {
show: false
},
emphasis: {
label: {
show: true
}
},
data: data
}
]
};
var myChart = echarts.init(document.getElementById('chart'));
myChart.setOption(option);
</script>
</body>
</html>Through the above code, run the HTML page in the browser, and you will be able to see a chart called "Funnel Rose Chart", showing the proportion of data and conversion rate .
Conclusion:
This article introduces how to use the funnel rose chart to display the proportion and conversion rate of data in ECharts. Through simple data processing and configuration, we can easily achieve the display effect of funnel rose chart. I hope that readers can understand the basic ECharts usage skills through this article, and apply and expand them in actual data visualization projects.
The above is the detailed content of How to use funnel rose chart to display data proportion and conversion rate in ECharts. For more information, please follow other related articles on the PHP Chinese website!