echarts 旋转饼图

最新推荐文章于 2024-07-02 15:41:40 发布
最新推荐文章于 2024-07-02 15:41:40 发布
阅读量4.4k 收藏 18
点赞数 3
文章标签： echarts javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Wendymwz/article/details/122565626
版权

在这里插入图片描述

var data = [],data2=[];
var trafficWay = [
    {
    name: '病假',
    value: 20
},{
    name: '事假',
    value: 1
},{
    name: '婚假',
    value: 30
},{
    name: '丧假',
    value: 40
},{
    name: '年休假',
    value: 40
}];
var color=['#2A8BFD','#BAFF7F','#00FAC1','#00CAFF','#FDE056','#4ED33C','#FF8A26','#FF5252','#9689FF','#CB00FF']
for (var i = 0; i < trafficWay.length; i++) {
    data.push({
        value: trafficWay[i].value,
        name: trafficWay[i].name,
        itemStyle: {
            normal: {
                borderWidth: 8,
                shadowBlur: 20,
                borderRadius:20,
                borderColor:color[i],
                shadowColor: color[i]
            }
        }
    }, {
        value: 5,
        name: '',
        itemStyle: {
            normal: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
                
            }
}
    });
    data2.push({
        value: trafficWay[i].value,
        name: trafficWay[i].name,
    },
    {
        value: 5,
        name: '',
        itemStyle: {
            normal: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0,
                opacity:0.2
                
            }
}
    }
    )
}

let angle = 0;//角度，用来做简单的动画效果的
option = {
    backgroundColor:"#061740",
    color : color,
    legend:{
        right:'10%',
        top:'40%',
        icon:'rect',
        itemWidth:15,
        itemHeight:15,
        textStyle:{
            color:'#ffffff',
        }
    },
    series: [ 
        {//外线1
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
                return {
                    type: 'arc',
                    shape: {
                        cx: api.getWidth() / 3,
                        cy: api.getHeight() / 2,
                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
                        startAngle: (0+angle) * Math.PI / 180,
                        endAngle: (90+angle) * Math.PI / 180
                    },
                    style: {
                        stroke: '#4EE9E6',
                        fill: "transparent",
                        lineWidth: 1.5
                    },
                    silent: true
                };
            },
            data: [0]
        }, 
        {//内线1
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
                return {
                    type: 'arc',
                    shape: {
                        cx: api.getWidth() / 3,
                        cy: api.getHeight() / 2,
                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
                        startAngle: (180+angle) * Math.PI / 180,
                        endAngle: (270+angle) * Math.PI / 180
                    },
                    style: {
                        stroke: "#4EE9E6",
                        fill: "transparent",
                        lineWidth: 1.5
                    },
                    silent: true
                };
            },
            data: [0]
        },
        {//外线2
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
                return {
                    type: 'arc',
                    shape: {
                        cx: api.getWidth() / 3,
                        cy: api.getHeight() / 2,
                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                        startAngle: (270+-angle) * Math.PI / 180,
                        endAngle: (40+-angle) * Math.PI / 180
                    },
                    style: {
                        stroke: "#4EE9E6",
                        fill: "transparent",
                        lineWidth: 1.5
                    },
                    silent: true
                };
            },
            data: [0]
        }, 
        {//外线2
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
                return {
                    type: 'arc',
                    shape: {
                        cx: api.getWidth() / 3,
                        cy: api.getHeight() / 2,
                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                        startAngle: (90+-angle) * Math.PI / 180,
                        endAngle: (220+-angle) * Math.PI / 180
                    },
                    style: {
                        stroke: "#4EE9E6",
                        fill: "transparent",
                        lineWidth: 1.5
                    },
                    silent: true
                };
            },
            data: [0]
        },
        {//绿点1
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
                let x0 = api.getWidth() / 3;
                let y0 = api.getHeight() / 2;
                let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
                let point = getCirlPoint(x0, y0, r, (90+-angle))
                return {
                    type: 'circle',
                    shape: {
                        cx: point.x,
                        cy: point.y,
                        r: 4
                    },
                    style: {
                        stroke: "#66FFFF",//粉
                        fill: "#66FFFF"
                    },
                    silent: true
                };
            },
            data: [0]
        },
        {//绿点2
            name: "ring5",  //绿点
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
                let x0 = api.getWidth() / 3;
                let y0 = api.getHeight() / 2;
                let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
                let point = getCirlPoint(x0, y0, r, (270+-angle))
                return {
                    type: 'circle',
                    shape: {
                        cx: point.x,
                        cy: point.y,
                        r: 4
                    },
                    style: {
                        stroke: "#66FFFF",//粉
                        fill: "#66FFFF"
                    },
                    silent: true
                };
            },
            data: [0]
        }, 
        {//绿点3
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
                let x0 = api.getWidth() / 3;
                let y0 = api.getHeight() / 2;
                let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6;
                let point = getCirlPoint(x0, y0, r, (90+angle))
                return {
                    type: 'circle',
                    shape: {
                        cx: point.x,
                        cy: point.y,
                        r: 4
                    },
                    style: {
                        stroke: "#66FFFF",//粉
                        fill: "#66FFFF"
                    },
                    silent: true
                };
            },
            data: [0]
        },
         {//绿点4
            name: "ring5",  //绿点
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
                let x0 = api.getWidth() / 3;
                let y0 = api.getHeight() / 2;
                let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6;
                let point = getCirlPoint(x0, y0, r, (270+angle))
                return {
                    type: 'circle',
                    shape: {
                        cx: point.x,
                        cy: point.y,
                        r: 4
                    },
                    style: {
                        stroke: "#66FFFF",//粉
                        fill: "#66FFFF"
                    },
                    silent: true
                };
            },
            data: [0]
        }, 
        {
            name: '',
            type: 'pie',
            clockWise: false,
            radius: ['98%', '95%'],
            hoverAnimation: false,
            center:['33.33%','50%'],
            top:"center",
            itemStyle: {
                normal:{
                    label: {
                        show:false
                    }
                }
            },
            data:data
        },
        {
          type: 'pie',
          top:"center",
          startAngle:90,
          clockwise:false,
          center:['33.33%','50%'],
          legendHoverLink:false,
          hoverAnimation: false,
          radius: ['94%', '55%'],
          itemStyle: {
            opacity:0.15
          },
          label: {
            show: false,
            position: 'center'
          },
          labelLine: {
            show: false
          },
          data:data2
        },
        {
            name: '',
            type: 'pie',
            clockWise: false,
            center:['33.33%','50%'],
            radius: ['39%', '38%'],
            hoverAnimation: false,
            top:"center",
            itemStyle: {
                normal:{
                    label: {
                        show:false
                    }
                }
            },
            data:data
        },
    ]
};

//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
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
    }
}

function draw(){
    angle = angle+3
    myChart.setOption(option, true)
   //window.requestAnimationFrame(draw);
}

setInterval(function() {
    //用setInterval做动画感觉有问题
    draw()
}, 100);
依古比古*
关注
Echarts控制饼图或者圆环自定义旋转
weixin_51480428的博客
09-03 1142
Echarts控制饼图或者圆环自定义旋转。
Echarts饼图-实现资源对比+旋转动画
最新发布
weixin_59287025的博客
08-16 701
本次实现的是一个饼图，外圈两个圆，转动效果 + 资源对比显示。
饼状图（可转动）
07-31
1.饼状比例图； 2.可以旋转，并根据停止位置，自动微调； 3.自动根据设置比例分布
旋转的echarts饼图
liuxi_happy的博客
08-23 597
【代码】旋转的echarts饼图。
ECharts之 饼图 外圈Pie -- 旋转动画
Yuli_love_dance的博客
05-18 1481
【代码】ECharts之 饼图 外圈Pie -- 旋转动画。
echarts 3d饼图资源
05-12
3D 饼图是 ECharts 提供的一种扩展的图表类型，它在传统二维饼图的基础上增加了第三个维度，使数据可视化更具有立体感和深度，有助于用户从多个角度理解和解析数据。3D 饼图在呈现多组数据比例关系时特别有用，因为...
基于echarts制作饼图动画
qq_45752346的博客
01-18 852
【代码】基于echarts制作饼图动画。
echarts饼图自动动画_echarts实时旋转饼图效果特效
weixin_35323111的博客
01-16 4065
option = {backgroundColor: '#142468',title:{//text: '实时旋转饼图'},series: [{type: 'pie',zlevel: 1,silent: true,/*radius饼图的半径。可以为如下类型：number：直接指定外半径值。string：例如，'20%'，表示外半径为可视区尺寸(容器高宽中较小一项)的 20% 长度。Array.：数...
Echarts饼图(荧光旋转效果)
No_Name_Cao_Ni_Mei的博客
05-31 2017
整体来看，代码实现了一个具有动画效果的图表，其中包含了多个自定义系列，用于展示不同类型的请假天数。本次实现的是一个饼图，蓝色科技背景色，星球转动效果 + 荧光显示。配置项进行样式设置。动画效果通过改变角度。// 初始化 ECharts 图表。并重新设置图表选项来实现。// ... 其他颜色值];// ... 其他系列配置项。// ... 其他样式设置。// ... 其他数据项。// ... 全局配置项。// ... 其他配置项。
echarts实现3d饼图，带3d旋转效果
qq_41672186的博客
07-02 921
【代码】echarts实现3d饼图，带旋转效果。
Java Script Echarts动态饼图
03-29
柱状图、饼图比例展示，根据年份自动变化，饼图柱状图相互切换。
echarts开发的自动旋转map3D下钻和柱图地图
09-18
代码分析见：https://lockdatav.blog.youkuaiyun.com/article/details/120369570 1.地图运行，需要通过ajax加载map中的geojson地理数据，必须使用http协议web服务或上传至服务器访问; 2.目录说明 ├─index.html ........默认启动页 ├─map ........geojson地理数据 │ ├─chongqing.json ........重庆市地理数据 │ ├─city........各区县地理数据 ├─js ........JS封装库 │ ├─app.js ........下钻核心库，具体见文件注释
ECharts之 饼图 Pie -- 旋转动画
weixin_48863037的博客
01-26 5523
echarts 之 Pie – 旋转动画 在vue中的template <div class="pie-chart-wra"> <div ref="PieChart" :style="{ width: '100%', height: height }"></div> </div>
echarts饼图动态旋转效果
weixin_38233449的博客
06-21 3049
echarts饼图可旋转效果
echarts图表旋转
weixin_43765747的博客
12-22 4853
可以在div上设置旋转角度，这里我们设置角度为-15° -moz-transform:rotate(-15deg); -webkit-transform:rotate(-15deg); -o-transform:rotate(-15deg); transform:rotate(-15deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 旋转前 旋转后 ...
vue3.0 使用echarts与echarts-gl 实现可旋转，可放大3D饼图
qq_39186695的博客
01-17 5228
3、js中引入echarts。1、安装echarts。
多层饼图（球形饼图）+ 圆点在圆的边缘上拖尾旋转
初竹殇的博客
04-29 764
HTML布局： <div class="partyCompositionChat"> <div class="wh-100" id="academicCompositionChat"></div>//两层饼图放进echarts里绘制，wh-100 是宽高百分百 <div class="partyCompositionCircular"> <canvas id="canvas" width="100" height="100"/><.
echartstitle旋转_echarts实时旋转饼图效果特效
weixin_36274355的博客
01-14 1072
option = {backgroundColor: '#142468',title:{//text: '实时旋转饼图'},series: [{type: 'pie',zlevel: 1,silent: true,/*radius饼图的半径。可以为如下类型：number：直接指定外半径值。string：例如，'20%'，表示外半径为可视区尺寸(容器高宽中较小一项)的 20% 长度。Array.：数...
echarts中对整个图形旋转90°（实现div旋转90度）
热门推荐
qq_44687755的博客
08-03 1万+
现有需求，绘制如下图1 图1 实现方法是，先绘制图2 图2 对div旋转90度即可 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.j...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值