echarts 旋转饼图

最新推荐文章于 2024-04-22 10:38:57 发布
最新推荐文章于 2024-04-22 10:38:57 发布
阅读量4.1k 收藏 16
点赞数 3
文章标签： echarts javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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);
依古比古*
关注
  • 3
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echartstitle旋转_echarts实时旋转饼图效果特效
weixin_36274355的博客
01-14 971
option = {backgroundColor: '#142468',title:{//text: '实时旋转饼图'},series: [{type: 'pie',zlevel: 1,silent: true,/*radius饼图的半径。可以为如下类型：number：直接指定外半径值。string：例如，'20%'，表示外半径为可视区尺寸(容器高宽中较小一项)的 20% 长度。Array.：数...
ECharts之 饼图 Pie -- 旋转动画
weixin_48863037的博客
01-26 4699
echarts 之 Pie – 旋转动画 在vue中的template <div class="pie-chart-wra"> <div ref="PieChart" :style="{ width: '100%', height: height }"></div> </div>
旋转的echarts饼图
liuxi_happy的博客
08-23 432
【代码】旋转的echarts饼图。
Echarts实现3D饼图
最新发布
qq_45787691的博客
04-22 886
echarts实现3D饼图
ECharts之 饼图 外圈Pie -- 旋转动画
Yuli_love_dance的博客
05-18 1102
【代码】ECharts之 饼图 外圈Pie -- 旋转动画。
解决数据更新时，echarts图旋转问题
weixin_46322789的博客
05-06 2453
解决数据更新时，echarts图旋转问题
echarts 3d饼图资源
05-12
echarts 3d饼图资源
echarts 3D饼图组件
09-26
直接引入传入数据即可使用。 import PieChart3D from "@/components/PieChart3D" values={[ { name: "整租", value: 3, color: [5, 140, 198, 1] }, { name: "散租", value: 2, color: [255, 137, 0, 1] } ...
echarts复合饼图，堆叠柱状图
12-08
echarts复合饼图（没有边线），堆叠柱状图，柱状图
echarts 多饼图
10-23
Echarts 多饼图
Java Script Echarts动态饼图
03-29
柱状图、饼图比例展示，根据年份自动变化，饼图柱状图相互切换。
echarts开发的自动旋转map3D下钻和柱图地图
09-18
代码分析见：https://lockdatav.blog.csdn.net/article/details/120369570 1.地图运行，需要通过ajax加载map中的geojson地理数据，必须使用http协议web服务或上传至服务器访问; 2.目录说明 ├─index.html ........默认启动页 ├─map ........geojson地理数据 │ ├─chongqing.json ........重庆市地理数据 │ ├─city........各区县地理数据 ├─js ........JS封装库 │ ├─app.js ........下钻核心库，具体见文件注释
解决echarts中饼图标签重叠的问题
12-17
饼图中的series有个avoidLabelOverlap属性， avoidLabelOverlap:是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。 当avoidLabelOverlap设置为false时会出现...
echarts X轴旋转30°
三妹的博客
05-06 4462
上代码： xAxis: { type: 'category', axisLabel: { rotate: 30, // 旋转30度 show: true, //这行代码控制着坐标轴x轴的文字是否显示 textSt...
echart柱状图标签旋转数据准备（前端/后端）
i5858588的博客
03-28 395
echart是我们经常使用的页面展示插件，漂亮精美。页面是靠数据驱动的。以柱状图标签旋转为例，介绍一下生成数据的思路。数据对应关系如图。
echarts 中旋转提示框 ‘tooltip‘
u_ndefine_d的博客
08-04 1823
找了很多文章，最后还是在官方文档中找到了答案（在此记录一下）： 旋转 ‘tooltip’ 提示框，只需要设置 extraCssText: 'transform:rotate(90deg)', 如下图： 官网中：
echarts饼图自动动画_echarts实时旋转饼图效果特效
weixin_35323111的博客
01-16 3817
option = {backgroundColor: '#142468',title:{//text: '实时旋转饼图'},series: [{type: 'pie',zlevel: 1,silent: true,/*radius饼图的半径。可以为如下类型：number：直接指定外半径值。string：例如，'20%'，表示外半径为可视区尺寸(容器高宽中较小一项)的 20% 长度。Array.：数...
echarts 饼图
热门推荐
weixin_43931625的博客
10-31 2万+
echarts 饼图
echarts给饼图添加旋转动画
04-09
可以使用echarts中的"animation"属性来为饼图添加旋转动画，示例代码如下: ``` var option = { series: [{ type: 'pie', data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ], animation: true, // 开启动画 animationType: 'spin' // 使用旋转动画 }] }; ``` 希望能够帮助到你！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值