通过定时器实现简单的echarts动态圆弧

最新推荐文章于 2024-05-31 14:42:22 发布

十月雨眠

最新推荐文章于 2024-05-31 14:42:22 发布

阅读量696

点赞数 16

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_54818343/article/details/136337620

版权

本文详细描述了如何利用ECharts的renderItem函数创建动态圆弧图形，通过改变变量angle实现圆弧旋转，并配合定时器更新图表。作者展示了如何在ECharts中绘制多个圆弧、添加起始点标记以及处理窗口大小变化。

摘要由CSDN通过智能技术生成

1.思路很简单，通过echarts的renderItem渲染函数，绘制圆弧形状，同时将圆弧开始、结束位置用变量填写，通过定时器定时调整角度即可。

2.效果图

3.主要代码

//生成圆弧形状

series: [
                       {
                            type: 'custom',
                            coordinateSystem: 'none',
                            renderItem: (params, api) => {
                                return {
                                    type: 'arc',
                                    shape: {
                                        cx: api.getWidth() / 2,
                                        cy: api.getHeight() / 2,
                                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.8,
                                        startAngle: (355 + -angle) * Math.PI / 180,
                                        endAngle: (120 + -angle) * Math.PI / 180
                                    },
                                    style: {
                                        fill: 'transparent',
                                        stroke: 'rgba(21, 225, 253, 0.5)',
                                        lineWidth: 2.6
                                    },
                                    silent: true
                                }
                            },
                            data: [0]
                        },
】

定时器

setInterval(() => {
                    angle = angle + 2;
                    myChart.setOption(option, true);
                }, 100)

4.完整echarts

getEcharts() {
                let myChart = this.$echarts.init(document.getElementById("echarts"));
                let angle = 0; // 角度
                let dataValue = '动态echarts';
                var option = {
                    title: [
                        {
                            text: `{v|${dataValue}}{unit|}`,
                            x: 'center',
                            y: 'center',
                            textStyle: {
                                rich: {
                                    v: { fontSize: 16, color: '#28edf2' },
                                    unit: { fontSize: 16, color: '#28edf2' },
                                }
                            }
                        },
                    ],
                    series: [
                       /** 绘制外部圆弧-1  */
                       {
                            type: 'custom',
                            coordinateSystem: 'none',
                            renderItem: (params, api) => {
                                return {
                                    type: 'arc',
                                    shape: {
                                        cx: api.getWidth() / 2,
                                        cy: api.getHeight() / 2,
                                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.8,
                                        startAngle: (355 + -angle) * Math.PI / 180,
                                        endAngle: (120 + -angle) * Math.PI / 180
                                    },
                                    style: {
                                        fill: 'transparent',
                                        stroke: 'rgba(21, 225, 253, 0.5)',
                                        lineWidth: 2.6
                                    },
                                    silent: true
                                }
                            },
                            data: [0]
                        },
                        /** 绘制外部圆弧-2  */
                        {
                            type: 'custom',
                            coordinateSystem: 'none',
                            renderItem: (params, api) => {
                                return {
                                    type: 'arc',
                                    shape: {
                                        cx: api.getWidth() / 2,
                                        cy: api.getHeight() / 2,
                                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.8,
                                        startAngle: (175 + -angle) * Math.PI / 180,
                                        endAngle: (300 + -angle) * Math.PI / 180
                                    },
                                    style: {
                                        fill: 'transparent',
                                        stroke: 'rgba(21, 225, 253, 0.5)',
                                        lineWidth: 2.6
                                    },
                                    silent: true
                                }
                            },
                            data: [0]
                        },
                        /** 绘制外部圆弧-1-开始圆点  */
                        {
                            type: 'custom',
                            coordinateSystem: 'none',
                            renderItem: (params, api) => {
                                let x0 = api.getWidth() / 2;
                                let y0 = api.getHeight() / 2;
                                let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.8;
                                return {
                                    type: 'circle',
                                    shape: {
                                        /** 角度355° 外弧1开始角度 */
                                        cx: x0 + r * Math.cos((355 + -angle) * Math.PI / 180),
                                        cy: y0 + r * Math.sin((355 + -angle) * Math.PI / 180),
                                        r: 4
                                    },
                                    style: {
                                        fill: 'rgba(21, 225, 253, 0.5)',
                                        stroke: 'rgba(21, 225, 253, 0.5)'
                                    },
                                    silent: true
                                }
                            },
                            data: [0]
                        },
                        /** 绘制外部圆弧-2-开始圆点  */
                        {
                            type: 'custom',
                            coordinateSystem: 'none',
                            renderItem: (params, api) => {
                                let x0 = api.getWidth() / 2;
                                let y0 = api.getHeight() / 2;
                                let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.8;
                                return {
                                    type: 'circle',
                                    shape: {
                                        /** 角度175° 外弧2开始角度 */
                                        cx: x0 + r * Math.cos((175 + -angle) * Math.PI / 180),
                                        cy: y0 + r * Math.sin((175 + -angle) * Math.PI / 180),
                                        r: 4
                                    },
                                    style: {
                                        fill: 'rgba(21, 225, 253, 0.5)',
                                        stroke: 'rgba(21, 225, 253, 0.5)'
                                    },
                                    silent: true
                                }
                            },
                            data: [0]
                        },
                        /** 中心的刻度仪表盘 */
                        {
                            type: 'gauge',
                            center: ['50%', '50%'],
                            radius: '68.5%', // 错位调整此处
                            startAngle: 0,
                            endAngle: 360,
                            axisLine: { show: false },
                            splitLine: { show: false },
                            axisTick: {
                                splitNumber: 10,
                                length: '4%',
                                lineStyle: {
                                    color: 'rgba(21, 225, 253, 0.5)',
                                    width: 1.5
                                }
                            },
                            axisLabel: { show: false }
                        },
                    ]
                };

                setInterval(() => {
                    angle = angle + 2;
                    myChart.setOption(option, true);
                }, 100)
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            },