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. python-文件操作&模块&面向对象

    python 文件处理 li = [[']] for i in li: print(','.join(i)) # join字符串拼接 语文,数学,英语 100,122,123 从原文件末尾开始写入 # ...

  2. <BackTracking> permutation 254 47 60

    254. Factor Combinations class Solution { public List<List<Integer>> getFactors(int n) { ...

  3. 快速傅立叶变换（FFT）

    多项式 系数表示法 设\(f(x)\)为一个\(n-1\)次多项式,则 \(f(x)=\sum\limits_{i=0}^{n-1}a_i*x_i\) 其中\(a_i\)为\(f(x)\)的系数,用这 ...

  4. 编程计算2×3阶矩阵A和3×2阶矩阵B之积C。 矩阵相乘的基本方法是： 矩阵A的第i行的所有元素同矩阵B第j列的元素对应相乘， 并把相乘的结果相加，最终得到的值就是矩阵C的第i行第j列的值。 要求： (1)从键盘分别输入矩阵A和B， 输出乘积矩阵C (2) **输入提示信息为： 输入矩阵A之前提示："Input 2*3 matrix a:\n" 输入矩阵B之前提示

    编程计算2×3阶矩阵A和3×2阶矩阵B之积C. 矩阵相乘的基本方法是: 矩阵A的第i行的所有元素同矩阵B第j列的元素对应相乘, 并把相乘的结果相加,最终得到的值就是矩阵C的第i行第j列的值. 要求: ...

  5. Token认证，如何快速方便获取用户信息

    背景 我们有一个Web项目,这个项目提供了很多的Rest API.也做了权限控制,访问API的请求必须要带上事先认证后获取的Token才可以. 认证的话就在Filter中进行的,会获取请求的Token ...

  6. 构建Shiny应用

    构建Shiny应用 1.什么是Shiny? Shiny是一个R的应用包,帮助用户构建可交互的web应用.它可以结合HTML和CSS代码,以及R 语言的运算能力. 2.下载R Shiny 下载R包 in ...

  7. SQL Server 2014：为什么数据库里的表提示“单元格是只读的”，不能修改？该如何处理？

    出现以上这种情况,首先看一下这个字段的属性“标识规范”是不是选了“是”,自增属性下是不能修改的,属于只读.

  8. 2019.11.21 做OJ题的反思

    1.利用二分法查找数组元素(适用于有序数组) #include<stdio.h> int BinarySearch(int a[],int n,int key); ]; int main( ...

  9. 使用JWT作为Spring Security OAuth2的token存储

    序 Spring Security OAuth2的demo在前几篇文章中已经讲过了,在那些模式中使用的都是RemoteTokenService调用授权服务器来校验token,返回校验通过的用户信息供上 ...

  10. 休谟：《人性论》一书中提出的要重视"是"与"应该"的区别

    "价值"最初是经济学的范畴,指的是经济价值.商品价值.价值作的为一个哲学概念,首先大概是由18 世纪的英国哲学家休谟(David H ume,1711-1776)提出的.他于173 ...