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. layui的引用js踩坑

    前言: 今天因为项目需要,需要使用layui,因为本身不多的前端经验,以为layui的用法和其他的前端框架,例如jquery,bootstrap等等,只需要直接引入layui.js,和layui.cs ...

  2. 小测试整理（含T1 T2）

    这次测试规模较小,前两题也较水,但需要整理 T1(Jelly的男♂难题1): 从一个点出发,以四连通的方式扩散,可以走#,不能走o,走过的格子每单位时间会增加1点高度,问扩散完整间屋子需要的时间,以及 ...

  3. vscode配置编译运行调试C/C++文件-windows环境

    在windows环境下,编译运行小文件的C/C++环境 软件准备: vscode mingw64(官网下特别慢,可以在devc++安装软件里中找,放到全局变量中) 插件下载: Run Code C/C ...

  4. Shiro的基本使用

    目录 前言 Shiro的介绍 Shiro功能 补充 HelloWorld 依赖包: 示例代码 代码解析 对于shiro.ini: 对于ShiroDemo.java: 补充 一些概念 Realm 认证 ...

  5. 【django json.dumps 报错】 datetime.datetime is not JSON serializable

    django 中,json.dumps 无法直接转译 datetime 类型的值. 找了无数方法,找到一个最优.最简洁的解决办法: json.dumps(results, indent=4, sort ...

  6. 解决 ubuntu 开机卡死在输入密码界面 && 键盘鼠标失灵！!

    近期不知安装了什么package,导致 ubuntu 开机后键盘鼠标一直没法用,刚开始以为是 ubuntu 桌面环境崩溃了,后来发现系统能显示连接到网络.时间也在运行,那应该就是键盘鼠标失灵了. 网上 ...

  7. svg描边路径动画

    svg描边路径动画<pre><!DOCTYPE html><html> <head> <meta charset="UTF-8" ...

  8. .NET Core 学习笔记之 WebSocketsSample

    1. 服务端 代码如下: Program: using Microsoft.AspNetCore; using Microsoft.AspNetCore.Hosting; namespace WebS ...

  9. Codekicker.BBCode（BBCode 和 HTML 互转的插件）介绍

    项目地址:http://bbcode.codeplex.com/ 项目介绍: Codekicker.BBCode is a stable and performant BBCode-Parser fo ...

  10. 原创的离线版 Redis 教程，给力！

    嗯,你没看错,松哥又给大家送干货来了.这次是可以离线阅读的 PDF 版教程哦. 之前一直有小伙伴问我有没有 Redis 的电子书,老实说,有是有,但是公开给大家分享,其实有一点点风险,毕竟这都是有版权 ...