[Development of large visual screen] 11. Customization of static graph pie chart 2 for large visual screen configuration
Pie Chart 2 - Introduction of Nightingale Chart to HTML
1. Demand
Nightingale diagram (rose diagram) introduced into html
2. Code implementation
- Find similar examples on the official website, analyze them properly, and introduce them into HTML pages
- Customize the chart according to your needs
The form of data representation is also very beautiful.
This kind of diagram is called the polar region diagram, also known as the Nightingale rose diagram.
The beauty of data visualization - Nightingale rose diagram - Zhihu (zhihu.com)
(1) Find the second pie chart in the third column in HTML
(2) Create an immediate execution function
// 饼形图2
(function() {
// 1. 实例化对象
// 2.指定配置
// 3. 把配置给实例对象
})();
(3) Instantiate the object
(4) Specify the configuration
// 饼形图2-南丁格尔玫瑰图
(function() {
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".pie2 .chart"));
// 2.指定配置
var option = {
legend: {
top: 'bottom'
},
toolbox: {
show: true,
feature: {
mark: {
show: true },
dataView: {
show: true, readOnly: false },
restore: {
show: true },
saveAsImage: {
show: true }
}
},
series: [
{
name: 'Nightingale Chart',
type: 'pie',
radius: [50, 250],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [
{
value: 40, name: 'rose 1' },
{
value: 38, name: 'rose 2' },
{
value: 32, name: 'rose 3' },
{
value: 30, name: 'rose 4' },
{
value: 28, name: 'rose 5' },
{
value: 26, name: 'rose 6' },
{
value: 22, name: 'rose 7' },
{
value: 18, name: 'rose 8' }
]
}
]
};
// 3. 把配置给实例对象
myChart.setOption(option)
})();
Pie Chart 2 Customization 1-Nightingale Rose Chart Basic Configuration Customization
1. Demand
- Requirement 1: Color Settings
- Requirement 2: Modify the size of the pie chart (series object)
- Requirement 3: Change the display mode of the pie chart to radius mode
- Requirement 4: Modify the position to be centered
- Requirement 5: Data usage replacement (data object in series object)
2. Code implementation
Requirement 1: Color setting
Requirement 2: Modify the size of the pie chart (series object)
Requirement 3: Change the display mode of the pie chart to radius mode
Requirement 4: Modify the position to center
index.js
// 2.指定配置
var option = {
legend: {
top: 'bottom'
},
series: [
{
name: 'Nightingale Chart',
type: 'pie',
itemStyle: {
borderRadius: 8
},
data: [
{
value: 40, name: 'rose 1' },
{
value: 38, name: 'rose 2' },
{
value: 32, name: 'rose 3' },
{
value: 30, name: 'rose 4' },
{
value: 28, name: 'rose 5' },
{
value: 26, name: 'rose 6' },
{
value: 22, name: 'rose 7' },
{
value: 18, name: 'rose 8' }
],
// 自定义颜色
color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9','#1d9dff'],
// 修改饼图大小
radius: ['10%', '70%'],
// 饼图显示模式：半径模式
roseType: "radius",
// 居中显示
center: ['50%', '50%'],
}
]
};
Requirement 5: Data usage replacement (data object in series object)
series: [
{
name: 'Nightingale Chart',
type: 'pie',
itemStyle: {
borderRadius: 8
},
data: [
{
value: 20, name: '云南' },
{
value: 26, name: '北京' },
{
value: 24, name: '山东' },
{
value: 25, name: '河北' },
{
value: 20, name: '江苏' },
{
value: 25, name: '浙江' },
{
value: 30, name: '四川' },
{
value: 42, name: '湖北' }
],
delete legend
Pie Chart 2 Customization 2 - Optimal Configuration
1. Demand
- Requirement 1: The font is slightly smaller by 10 px (set in the series object)
- Requirement 2: Prevent the guide line from being too long when zooming. The guide line is slightly shorter (set by the labelLine object in the series object)
- Requirement 3: When the browser is zoomed, the chart will automatically adapt.
2. Code implementation
Requirement 1: The font is slightly smaller by 10 px (set in the series object)
The text label on the pie chart graph can control some styles of the text of the pie chart. label object settings
// 饼图显示模式：半径模式
roseType: "radius",
// 居中显示
center: ['50%', '50%'],
// 文本标签控制饼形图文字的相关样式， 注意它是一个对象
label: {
fontSize: 15,
},
Requirement 2: Prevent the guide line from being too long when zooming. The guide line is slightly shorter (set by the labelLine object in the series object)
- Connection chart 12 px
- link text 8 px
// 文本标签控制饼形图文字的相关样式， 注意它是一个对象
label: {
fontSize: 15,
},
// 链接图形和文字的线条
labelLine: {
// length 链接图形的线条
length: 12,
// length2 链接文字的线条
length2: 8
},
}
Requirement 3: When the browser is zoomed, the chart will automatically adapt.
// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function() {
myChart.resize();
});
Visual large screen project reference link
[Visual large-screen development] 1. Basic development environment preparation_pblh123's blog-CSDN blog
[Visual large-screen development] 2. Basic project configuration and large-screen layout_pblh123's blog-CSDN blog
[Visual large-screen development] 3. Big Digital module configuration for screen configuration_pblh123's blog-CSDN blog
[Visualized large-screen development] 4. Earth module configuration for large-screen configuration_pblh123's blog-CSDN blog
[Visualized large-screen development] 5. Getting started with Echarts for large-screen configuration _pblh123's Blog-CSDN Blog
[Visualized Large Screen Development] 6. Static Column Chart 1 Customization of Visualized
Large Screen Configuration Graph customization_pblh123's blog-CSDN blog
[Visual large screen development] 8. Static line graph 1 customization of large visual screen configuration_pblh123's blog-CSDN blog
[Visual large screen development] 9. Static large visual screen configuration Line Chart 2 Customization_pblh123's Blog-CSDN Blog
[Visualized Large Screen Development] 10. Static Pie Chart 1 Customization of Visualized Large Screen Configuration_pblh123's Blog-CSDN Blog
[Visualized Large Screen Development] 11. Visualized Large Screen Configuration Static Pie Chart 2 Customization_pblh123's Blog-CSDN Blog
[Visualized Large Screen Development] 12. Visualized Large Screen Configuration Static Map Customization of China_pblh123's Blog-CSDN Blog
[Visualized Large Screen Development] 13. Visualized Large Screen Configuration to get through the front and rear ends to update the static image
data
[Visual large screen development] 15. Visual large screen project - network access static data cannot be updated problem repair_pblh123's blog-CSDN blog [
Visual large screen development] 16. Visual large screen project common optimization issues_pblh123's blog-CSDN blog
17. Code finishing resources for visual large screen configuration - CSDN library
Visual large screen project dynamic data sample resources - CSDN library