code:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Echars|饼状图|轮循|水平翻转</title>

</head>

<body>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>

  <script src="https://echarts.baidu.com/examples/vendors/echarts/echarts.min.js"></script>

  <!-- demo -->

  <div id="demo" style="width: 600px;height:300px;background:#eee"></div>

  <div class="num">

    <span>直接访问</span>

    <br>

    <span></span>

  </div>

  <!-- script -->

  <script>

    var yDataList = [{

        value: ,

        name: '直接访问'

      },

      {

        value: ,

        name: '邮件营销'

      },

      {

        value: ,

        name: '联盟广告'

      },

      {

        value: ,

        name: '视频广告'

      },

      {

        value: ,

        name: '搜索引擎'

      }

    ];

    var option = {

      title: {

        text: '某站点用户访问来源',

        subtext: '纯属虚构',

        x: 'center'

      },

      tooltip: {

        trigger: 'item',

        formatter: "{a} <br/>{b} : {c} ({d}%)"

      },

      legend: {

        orient: 'vertical',

        left: 'left',

        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']

      },

      series: [{

        name: '访问来源',

        type: 'pie',

        radius: ['50%', '70%'],

        center: ['50%', '60%'],

        data: yDataList,

        itemStyle: {

          emphasis: {

            shadowBlur: ,

            shadowOffsetX: ,

            shadowColor: 'rgba(0, 0, 0, 0.5)'

          }

        }

      }]

    };

    var index = -;

    var timer = null;

    var myChart = echarts.init(document.getElementById('demo'))

    myChart.setOption(option)

    myChart.on("mouseover", (e) => {

      loopStop(e.dataIndex)

    });

    this.myChart.on("mouseout", () => {

      loopStart()

    });

    loopStart()

    function loopStart() {

      clearInterval(timer)

      timer = setInterval(() => {

        myChart.dispatchAction({

          type: "downplay",

          dataIndex: index

        });

        index++

        if (index >= yDataList.length) {

          index =

        }

        myChart.dispatchAction({

          type: "highlight",

          dataIndex: index

        });

      }, );

    }

    function loopStop(i) {

      clearInterval(timer)

      myChart.dispatchAction({

        type: "downplay",

        dataIndex: index

      });

      index = i

      myChart.dispatchAction({

        type: "highlight",

        dataIndex: i

      });

    }

  </script>

  <style>

    .num {

      position: absolute;

      left: 271px;

      top: 170px;

      text-align: center;

      animation: rotate 2s linear infinite;

    }

    /* @keyframes circling{

      from{

        transform:rotate(0deg);

      }

      to{

        transform:rotate(360deg);

      }

    } */

    @keyframes rotate {

      % {

        opacity: ;

        transform: rotate(0deg);

        transform: rotateY(0deg);

        ;

      }

      % {

        opacity: ;

        transform: rotateY(360deg);

      }

      % {

        opacity: ;

        transform: rotateY(360deg);

      }

    }

  </style>

</body>

</html>

echars 饼状图 轮循 水平翻转的更多相关文章

  1. C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计

    在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界 ...

  2. [BOT]自己动手实现android 饼状图，PieGraphView，附源码解析

    本文要介绍的是一个参照手机支付宝app里面记账本功能里的"饼状图"实现的控件.通常app中可能的数据展示控件有柱状图,折线图,饼状图等,如果需要一个包含多种View控件的库,那么 ...

  3. highcharts饼状图使用案例

    在公司由于需要对订单数据进行分析,故使用到了highcharts工具 <block name="Js"> <script type="text/java ...

  4. arcgis api for flex之专题图制作（饼状图，柱状图等）

    最近公司给我一个任务,就是利用arcgis api for flex实现在地图上点(业务数据)直接显示饼状图以及柱状图的专题图制作,而不是通过点击点显示气泡窗口的形式来实现,这个公司已经实现了. 经过 ...

  5. 用CAShapeLayer实现一个简单的饼状图（PieView）

    自己写了一个简单的PieView,demo在这里:https://github.com/Phelthas/LXMPieView 效果如图: 参考了https://github.com/kevinzho ...

  6. ECharts学习（2）--饼状图之南丁格尔图

    1.上一篇中讲了如何绘制一个简单的柱状图,这次要画的是饼图,饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目.因为不在直角坐标系上,所 ...

  7. Android开源图表之树状图和饼状图的官方示例的整理

    最近由于工作需要,所以就在github上搜了下关于chart的三方框架 官方地址https://github.com/PhilJay/MPAndroidChart 由于工作需要我这里整理了一份Ecli ...

  8. AngularJS in Action读书笔记5(实战篇)——在directive中引入D3饼状图显示

    前言: "宁肯像种子一样等待  也不愿像疲惫的陀螺  旋转得那样勉强" 这是前几天在查资料无意间看到的一位园友的签名,看完后又读了两遍,觉得很有味道.后来一寻根究底才知这是出资大诗 ...

  9. jqPlot图表插件学习之饼状图和环状图

    一.准备工作 官网下载(笔者选择的是jquery.jqplot.1.0.8r1250.zip这个版本) 然后读者需要根据自己的情况新建一个项目并且按照如下的方式加载对应的js和css(因为笔者在VS2 ...

随机推荐

  1. java自定义词典使用Hanlp

    一开始按照网上的方法在配置文件加入自定义的词典不行,不知道是什么问题,这里给出链接,有兴趣的自己尝试:https://my.oschina.net/u/3793864/blog/3073171 说一下 ...

  2. matlab练习程序（贝塞尔曲线）

    下面三个公式分别是一次.二次和三次贝塞尔曲线公式: 通用的贝塞尔曲线公式如下: 可以看出,系数是由一个杨辉三角组成的. 这里的一次或者二次三次由控制点个数来决定,次数等于控制点个数-1. 实现的效果如 ...

  3. 【LGR-060】洛谷10月月赛 I div.1&div.2

    Preface 一边打一边写作文打的像shit,T2失智严重特判错了233 Orz Div1 Rank2的foreverlastnig聚聚,顺便说一句显然Luogu的比赛质量比以往显著提高了啊 以下题 ...

  4. Paper | Squeeze-and-Excitation Networks

    目录 1. 故事 2. SENet 2.1 概况 2.2 具体 3. 实验 本文的贡献点在于:通过显式建模特征注意力机制,达到了很好的效果.这是以往被默认隐式学习的操作.并且注意,此时建模出来的注意力 ...

  5. UE4中使用RenderDoc截帧

    RenderDoc(src,doc,ue4 doc,ue4文档)是一个独立的开源图形调试器,通过采集和检查GPU上运行的单个帧,来定位图形bug和优化性能 RenderDoc支持任何在Win7.Win ...

  6. 集成Azure DevOps Server(TFS) 与微软Teams

    1.概述 Microsoft Teams是Office 365中团队协作的中心.将团队的所有聊天.会议.文件和应用程序放在一个位置.软件开发团队可以在一个专门的协作中心中即时访问他们所需的所有内容,T ...

  7. Windows Azure Virtual Machine (39) 清除Linux挖矿病毒

    <Windows Azure Platform 系列文章目录> 1.之前客户遇到了Azure Linux CPU 100%,症状如下: 2.SSH登录到Linux,查看crontab,有从 ...

  8. golang中，slice的几个易混淆点

    slice在golang中是最常用的类型,一般可以把它作为数组使用,但是比数组要高效呀.不过,我感觉这个东西用的不好坑太多了.还是需要了解下他底层的实现 slice的结构定义 type slice s ...

  9. Windows 下MongoDB复制集配置

    1.下载服务.https://www.mongodb.com/   点击products 下拉第二列MongoDB server  选择 4.0.6 2.下载下来后 有限管理员运行 一路安装,可以不用 ...

  10. Vue 拖拽组件 vuedraggable 和 vue-dragging

    一.描述 之前用 vue 写过一个在线的多二维码生成服务,体验地址:https://postbird.gitee.io/vue-online-qrcode/ 后面发现二维码多了之后有时候想要排序,需要 ...