【可视化大屏开发】11. 可视化大屏配置之静态图饼图2定制

饼图2-南丁格尔图引入html

一、需求

南丁格尔图（玫瑰图）引入html

二、代码实现

• 官网找到类似实例， 适当分析，并且引入到HTML页面中
• 根据需求定制图表

Examples - Apache ECharts

数据表示的形式，也让人觉得很美。
这种图叫极区图，也称南丁格尔玫瑰图.

数据可视之美 - 南丁格尔玫瑰图 - 知乎 (zhihu.com)

（1）在HTML找到第三列的第二个饼形图

（2）创建立即执行函数

// 饼形图2

(function() {

// 1. 实例化对象

  

// 2.指定配置

  

// 3. 把配置给实例对象

})();

（3）实例化对象
（4） 指定配置

// 饼形图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)  
      
})();

饼图2定制1-南丁格尔玫瑰图基础配置定制

一、需求

1. 需求1：颜色设置
2. 需求2：修改饼形图大小 ( series对象)
3. 需求3： 把饼形图的显示模式改为 半径模式
4. 需求4：修改位置为居中
5. 需求5：数据使用更换（series对象 里面 data对象）

二、代码实现

需求1：颜色设置
需求2：修改饼形图大小 ( series对象)
需求3： 把饼形图的显示模式改为 半径模式
需求4：修改位置为居中
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%'],  
  
            }  
        ]  
    };

需求5：数据使用更换（series对象 里面 data对象）

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: '湖北' }  
        ],

删除legend

饼图2定制2-优化配置

一、需求

1. 需求1：字体略小些 10 px ( series对象里面设置 )
2. 需求2：防止缩放的时候，引导线过长。引导线略短些 (series对象里面的 labelLine 对象设置 )
3. 需求3：浏览器缩放的时候，图表跟着自动适配。

二、代码实现

需求1：字体略小些 10 px ( series对象里面设置 )

饼图图形上的文本标签可以控制饼形图的文字的一些样式。 label 对象设置

// 饼图显示模式：半径模式  
roseType: "radius",  
// 居中显示  
center: ['50%', '50%'],  
// 文本标签控制饼形图文字的相关样式， 注意它是一个对象  
label: {  
    fontSize: 15,  
},

需求2：防止缩放的时候，引导线过长。引导线略短些 (series对象里面的 labelLine 对象设置 )

• 连接图表 12 px
• 连接文字 8 px

    // 文本标签控制饼形图文字的相关样式， 注意它是一个对象  
    label: {  
        fontSize: 15,  
    },  
    // 链接图形和文字的线条  
    labelLine: {  
        // length 链接图形的线条  
        length: 12,  
        // length2 链接文字的线条  
        length2: 8  
    },  
}

需求3：浏览器缩放的时候，图表跟着自动适配。

// 4. 让图表跟随屏幕自动的去适应  
window.addEventListener("resize", function() {  
    myChart.resize();  
});

可视化大屏项目参考链接

【可视化大屏开发】1.基础开发环境准备_pblh123的博客-CSDN博客
【可视化大屏开发】2.基础项目配置及大屏布局_pblh123的博客-CSDN博客
【可视化大屏开发】3.大屏配置之数字模块配置_pblh123的博客-CSDN博客
【可视化大屏开发】4.大屏配置之地球模块配置_pblh123的博客-CSDN博客
【可视化大屏开发】5.大屏配置之Echarts入门学习_pblh123的博客-CSDN博客
【可视化大屏开发】6.可视化大屏配置之静态图柱形图1定制_pblh123的博客-CSDN博客
【可视化大屏开发】7.可视化大屏配置之静态图条形图定制_pblh123的博客-CSDN博客
【可视化大屏开发】8. 可视化大屏配置之静态图折线图1定制_pblh123的博客-CSDN博客
【可视化大屏开发】9. 可视化大屏配置之静态图折线图2定制_pblh123的博客-CSDN博客
【可视化大屏开发】10. 可视化大屏配置之静态图饼图1定制_pblh123的博客-CSDN博客
【可视化大屏开发】11. 可视化大屏配置之静态图饼图2定制_pblh123的博客-CSDN博客
【可视化大屏开发】12. 可视化大屏配置之静态图中国地图定制_pblh123的博客-CSDN博客
【可视化大屏开发】13. 可视化大屏配置之打通前后端更新静态图数据_pblh123的博客-CSDN博客
【可视化大屏开发】14. Maven打包可视化大屏项目-发布jar包_pblh123的博客-CSDN博客
【可视化大屏开发】15.可视化大屏项目-网络访问静态数据无法更新问题修复_pblh123的博客-CSDN博客
【可视化大屏开发】16. 可视化大屏项目共性优化问题_pblh123的博客-CSDN博客
17.可视化大屏配置之代码整理资源-CSDN文库
可视化大屏项目动态数据样例资源-CSDN文库