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. luoguP3242 [HNOI2015]接水果

    题意 考虑整体二分. 考虑路径\((x,y)\)被路径\((u,v)\)包含需要满足什么条件: 设\(dfn_x\)表示\(x\)的\(dfs\)序,\(low_x=dfn_x+size_x-1\), ...

  2. Kafka为什么不支持读写分离得原因？-干货

    在 Kafka 中,出产者写入音讯.顾客读取音讯的操作都是与 leader 副本进行交互的,从 而结束的是一种主写主读的出产消费模型.数据库.Redis 等都具有主写主读的功用,与此同时还支撑主写从读 ...

  3. <DP> (高频)139 375 374 (DP hard)312

    139. Word Break 返回结果较为简单可用dp, 复杂用dfs class Solution { public boolean wordBreak(String s, List<Str ...

  4. CF-378 B.Semifinals

    题目意思:有n个参赛者,他们都需要参加两场半决赛.第一场半决赛的成绩依次是a1, a2, ..., an,分别对应第1-第n个人的成绩.第二场则是b1, b2, ..., bn.其中这两个序列都是以递 ...

  5. 面向对象软件构造 (Bertrand Meyer 著)

    Part A: The Issues 议题 第一章 软件品质 第二章 面向对象的标准 Part B: The Road To Object Orientation 通向面向对象之路 第三章 模块性 第 ...

  6. 不支持中国移动的N79频段，红米K30是假5G手机么？影响有多大？

    原文:https://mparticle.uc.cn/article.html?uc_param_str=frdnsnpfvecpntnwprdssskt&btifl=100&app= ...

  7. C#.Net 使用 JsonReader/JsonWriter 高性能解析/生成 Json 文档

    Swifter.Json 是由本人编写的高性能且多功能的 Json 解析库.下图是 Swifter.Json 与 .Net 平台上的其他 Json 库性能对比: 在 Swifter.Json 近期更新 ...

  8. java基础 Unsafe

    参考文章: https://tech.meituan.com/2019/02/14/talk-about-java-magic-class-unsafe.html

  9. 迷你版mybatis

    public class BootStrap { public static void start(){ MySqlSession sqlSession = new MySqlSession();// ...

  10. Program 3 – CS 344

    Program 3 – CS 344OverviewIn this assignment you will write your own shell in C, similar to bash. No ...