Echarts饼图-今日进度-动态图

简介: 构建一个动态饼图,采用ECharts,背景为蓝色科技风,有星球转动效果。通过`echarts.init`初始化,设置图表尺寸和背景色,配置`option`对象含标题、颜色等。利用`series`定义渐变色并自定义渲染,通过`renderItem`绘制弧线和圆点。`getCirlPoint`函数计算坐标,`draw`函数更新角度实现动画。代码包括图表初始化、系列配置、动画逻辑等关键部分。完整代码可在链接处下载。

效果预览

本次实现的是一个饼图,蓝色科技背景色,星球转动效果 + 进度显示。

GIF 2024-6-21 16-20-50

实现思路

大致实现思路:

  1. 初始化 ECharts 实例: 使用 echarts.init 方法初始化图表,并将其绑定到页面上的一个元素。
  2. 定义样式和尺寸: 设置图表容器 .EChartBox 的宽度和高度,以及图表的背景色。
  3. 配置图表选项: 创建一个 option 对象,配置图表的标题、图例、提示框、颜色等。
  4. 设置标题: 使用 title 字段定义图表标题的样式和位置。
  5. 隐藏图例和提示框: 设置 legendtooltipfalse 或相应的配置以隐藏或自定义显示。
  6. 定义颜色数组: 使用 colors 数组定义图表使用的颜色。
  7. 创建渐变色: 定义 innerRingColor 对象来创建渐变色效果,这将应用于饼图的一部分。
  8. 配置系列(Series): 在 series 数组中定义多个系列,每个系列代表饼图的一部分或一个特定的视觉效果。
  9. 自定义渲染: 使用 renderItem 方法自定义绘制饼图的某些部分,例如绘制弧线和圆点。
  10. 计算圆上点的坐标: 实现 getCirlPoint 函数,根据圆心坐标、半径和角度计算圆上点的坐标。
  11. 实现动画效果: 创建 draw 函数来更新图表的角度 angle,使用 setInterval 定时调用 draw 函数来实现旋转动画。
  12. 设置图表选项: 使用 myChart.setOption 方法应用配置项到图表。
  13. 启动动画: 在页面加载完成后,首先调用 draw 函数一次,然后使用 setTimeout 延迟启动动画循环。
  14. 停止动画: 在动画不需要时,可以清除 setInterval 设置的定时器。

整体来看,代码实现了一个具有动画效果的图表,其中包含了多个自定义系列,用于展示不同类型的请假天数。图表的图例根据 series 中的 name 自动生成,并通过 legend 配置项进行样式设置。动画效果通过改变角度 angle 并重新设置图表选项来实现。

关键代码展示

在您提供的代码中,关键部分主要涉及 ECharts 图表的初始化、配置和动画效果的实现。以下是关键代码的总结:

1. 图表初始化

var myChart = echarts.init(document.getElementById('ECharts'));

2. 配置项设置

let option = {
   
   
    // ... 全局配置项,如标题、图例、提示框等
    series: [
        // ... 系列数据配置
    ]
};

3. 饼图系列配置

series: [
    {
   
   
        name: '',
        type: 'pie',
        // ... 其他饼图配置
        data: [
            // ... 数据项
        ],
        label: {
   
   
            // ... 标签配置
        },
    },
    // ... 其他系列配置
]

4. 自定义渲染函数 renderItem

{
   
   
    name: 'ring5',
    type: 'custom',
    coordinateSystem: 'none',
    renderItem: function (params, api) {
   
   
        // ... 绘制弧线或圆点的逻辑
    },
    data: [0],
},

5. 计算圆上点的坐标的辅助函数

function getCirlPoint(x0, y0, r, angle) {
   
   
    let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
    let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
    return {
   
   
        x: x1,
        y: y1,
    };
}

6. 动画效果实现

function draw() {
   
   
    angle = angle + 3; // 更新角度
    myChart.setOption(option, true); // 应用配置项更新图表
}

// 启动动画
draw();
setTimeout(function () {
   
   
    timerId = setInterval(function () {
   
   
        draw();
    }, 100);
}, 500);

7. 应用配置项到图表

myChart.setOption(option);

这些关键代码片段概述了如何使用 ECharts 创建一个带有动画效果的饼图。动画通过改变角度 angle 并重新设置图表选项来实现。自定义渲染函数 renderItem 允许开发者绘制自定义图形,如弧线和圆点。辅助函数 getCirlPoint 用于计算圆上点的坐标,这对于绘制弧线和圆点至关重要。

完整代码

点我下载完整

目录
相关文章
|
24天前
|
开发者 容器
Echarts饼图实现-今日进度-动态图
构建一个动态旋转的ECharts饼图,包括渐变色和动画效果。初始化ECharts实例,设置图表尺寸和背景,配置标题、颜色、系列数据及自定义渲染。利用`renderItem`绘制弧线和圆点,`getCirlPoint`计算坐标。通过`setInterval`和`draw`函数实现旋转动画。完整代码可在链接下载。
24 0
Echarts饼图实现-今日进度-动态图
|
19天前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
37 0
|
26天前
|
计算机视觉
Echarts饼图,自定义饼图图例的排列方式, formatter使用语法
Echarts饼图,自定义饼图图例的排列方式, formatter使用语法
|
26天前
|
数据可视化 JavaScript 前端开发
使用 ECharts 绘制3D饼图,立体效果华丽渲染!
使用 ECharts 绘制3D饼图,立体效果华丽渲染!
|
8月前
Echarts饼图之-玫瑰图数据交互
Echarts饼图之-玫瑰图数据交互
67 0
|
8月前
echarts饼图点击区块事件
echarts饼图点击区块事件
41 0
|
8月前
|
JSON 数据格式
Echarts饼图实现颜色渐变
Echarts饼图实现颜色渐变
260 0
|
8月前
ECharts 饼图指定颜色显示
ECharts 饼图指定颜色显示
117 0
|
19天前
|
数据可视化 JavaScript 前端开发
使用ECharts创建动态数据可视化图表
使用ECharts创建动态数据可视化图表
Echarts各类图表常用配置项说明,附示例代码
Echarts各类图表常用配置项说明,附示例代码

热门文章

最新文章