【可视化大屏开发】10. 可视化大屏配置之静态图饼图1定制
饼图1引入到HTML页面中
一、需求
1、 将饼图1引入到HTML
- 官网找到类似实例, 适当分析,并且引入到HTML页面中
- 根据需求定制图表
二、代码实现
(1)到官方网站上找到相关案例
(2)到index.js里,创建一个立即执行函数
// 饼形图1
(function() {
// 1. 实例化对象
// 2.指定配置
// 3. 把配置给实例对象
})();
(3)实例化对象
找到mainbox里的第一个column里第三个单元格 panel pie
index.js
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".pie .chart"));
(4)指定配置
var option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
};
效果
饼图1定制1-图例组件定制
一、需求
- 修改图例组件在底部并且居中显示。
- 每个小图标的宽度和高度修改为 10px
- 修改图例组件的文字为 12px
二、代码实现
需求1:修改图例组件在底部并且居中显示。
(1)找到 legend,
// 2.指定配置
var option = {
tooltip: {
trigger: 'item'
},
legend: {
// 距离底部为0
bottom: '0%',
left: 'center'
},
需求2:每个小图标的宽度和高度修改为 10px
需求3:修改图例组件的文字为 12px
// 2.指定// 饼形图1
(function() {
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".pie .chart"));
// 2.指定配置
var option = {
tooltip: {
trigger: 'item'
},
legend: {
// 距离底部为0
bottom: '0%',
left: 'center',
// 小图标的宽度和高度
itemWidth: 10,
itemHeight: 10,
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: "12"
},
},
饼图1定制2-饼图图像大小修改
一、需求
- 修改水平居中 垂直居中
- 修改内圆半径和外圆半径为 [“40%”, “60%”],友情提示,带有直角坐标系的比如折线图柱状图是 grid修改图形大小,而我们饼形图是通过 radius 修改大小
- 不显示标签文字
- 不显示连接线
二、代码实现
需求1:修改水平居中 垂直居中
(1)找到series的位置
index.js
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
// 设置饼形图在容器中的位置
center: ["50%", "50%"],
}
]
需求2:修改内圆半径和外圆半径为 [“40%”, “60%”],友情提示,带有直角坐标系的比如折线图柱状图是 grid修改图形大小,而我们饼形图是通过 radius 修改大小
// 修改内圆半径和外圆半径为 百分比是相对于容器宽度来说的
radius: ["40%", "60%"],
需求3:不显示标签文字
label: {
// 不显示标签文字
show: false,
position: 'center'
},
需求4:不显示连接线
labelLine: {
//不显示连接线
show: false,
},
饼图1定制3-更换颜色及相关数据
一、需求
- 需求1:更换数据
- 需求2:修改series中的name为“年龄分布”
- 需求3: 更换颜色
- 需求4:让图表跟随屏幕自动的去适应
二、代码实现
需求1:更换数据
(1)找到 series
labelLine: {
//不显示连接线
show: false,
},
data: [
{ value: 1, name: "0年以下" },
{ value: 4, name: "1-3年" },
{ value: 2, name: "3-5年" },
{ value: 2, name: "5-10年" },
{ value: 1, name: "10年以上" }
],
// 设置饼形图在容器中的位置
center: ["50%", "50%"],
效果
需求2:修改series中的name为“工龄分布”
series: [
{
name: '工龄分布',
type: 'pie',
定制需求3: 更换颜色
data: [
{ value: 1, name: "0年以下" },
{ value: 4, name: "1-3年" },
{ value: 2, name: "3-5年" },
{ value: 2, name: "5-10年" },
{ value: 1, name: "10年以上" }
],
// 设置饼形图在容器中的位置
center: ["50%", "50%"],
// 更换颜色
color: ["#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab"],
}
定制需求4:让图表跟随屏幕自动的去适应
// 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文库