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

pblh123

已于 2023-07-02 14:35:25 修改

阅读量719

点赞数

分类专栏：可视化大屏文章标签： javascript 前端开发语言

于 2023-07-01 17:41:07 首次发布

本文链接：https://blog.csdn.net/pblh123/article/details/131492956

版权

可视化大屏专栏收录该内容

18 篇文章 23 订阅

订阅专栏

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

饼图1引入到HTML页面中
- 一、需求
- 二、代码实现
饼图1定制1-图例组件定制
- 一、需求
- 二、代码实现
饼图1定制2-饼图图像大小修改
- 一、需求
- 二、代码实现
饼图1定制3-更换颜色及相关数据

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

刷新代码后，缩放浏览器检查

可视化大屏项目参考链接

pblh123

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【可视化大屏开发】10. 可视化大屏配置之静态图饼图1定制

Echarts, 饼图，自适应缩放
复制链接

扫一扫

专栏目录