Echarts饼图外围装饰两条线环绕效果

最新推荐文章于 2023-06-08 08:55:18 发布

Lucivita

最新推荐文章于 2023-06-08 08:55:18 发布

阅读量2.9k

点赞数

分类专栏： Web前端文章标签： echarts js 数据可视化

本文链接：https://blog.csdn.net/qq_41568313/article/details/119783754

版权

本文介绍如何使用Echarts库为饼图添加动态的外围装饰线条环绕效果，核心代码展示关键配置，帮助实现数据可视化的创新展现。

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

外面的两个圈效果是动态的

注释部分为核心代码

// let angle = 0;//角度
option = {
    backgroundColor: '#2c343c',

    title: {
        text: 'Customized Pie',
        left: 'center',
        top: 20,
        textStyle: {
            color: '#ccc'
        }
    },

    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },

    visualMap: {
        show: false,
        min: 80,
        max: 600,
        inRange: {
            colorLightness: [0, 1]
        }
    },
    series: [
        //  {
        //     name: "ring",
        //     type: 'custom',
        //     coordinateSystem: "none",
        //     renderItem: function(params, api) {
        //         return {
        //             type: 'arc',
        //             shape: {
        //                 cx: api.getWidth() / 2,
        //                 cy: api.getHeight() / 2,
        //                 r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.57,
        //                 startAngle: (0+angle) * Math.PI / 180,
        //                 endAngle: (90+angle) * Math.PI / 180
        //             },
        //             style: {
        //                 stroke: "#0CD3DB",
        //                 fill: "transparent",
        //                 lineWidth: 1.5
        //             },
        //