【可视化大屏开发】11. 可视化大屏配置之静态图饼图2定制
饼图2-南丁格尔图引入html
一、需求
南丁格尔图（玫瑰图）引入html
二、代码实现
- 官网找到类似实例， 适当分析，并且引入到HTML页面中
- 根据需求定制图表
数据表示的形式，也让人觉得很美。
这种图叫极区图，也称南丁格尔玫瑰图.
数据可视之美 - 南丁格尔玫瑰图 - 知乎 (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：颜色设置
- 需求2：修改饼形图大小 ( series对象)
- 需求3： 把饼形图的显示模式改为 半径模式
- 需求4：修改位置为居中
- 需求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：字体略小些 10 px ( series对象里面设置 )
- 需求2：防止缩放的时候，引导线过长。引导线略短些 (series对象里面的 labelLine 对象设置 )
- 需求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文库