Echart饼图旋转
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="utf-8" />
6 <title>ECharts-基本线性图及其配置要求</title>
7 <!-- ECharts单文件引入 -->
8 <script src="https://files.cnblogs.com/files/zjsv587/echarts.js"></script>
9 </head>
10
11 <body>
12 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
13 <div >
14 <div id="box" style="height:400px;width: 800px;padding: 20px;border: 1px solid red;
15 id"></div>
16
17 </div>
18
19
20 </div>
21 <script>
22
23
24 windowAddMouseWheel();
25 function windowAddMouseWheel() {
26 var minAngle = 0;
27 var startAngle = 100;
28 var scrollFunc = function (e) {
29 e = e || window.event;
30 if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
31 if (e.wheelDelta > 0) { //当滑轮向上滚动时
32
33 startAngle+=20;
34 myChart.setOption(optio = {
35 series: [{
36 minAngle: 15, //最小角度
37 startAngle:startAngle//起始角度
38 }]
39 });
40 }
41 if (e.wheelDelta < 0) { //当滑轮向下滚动时
42 startAngle-=20;
43 myChart.setOption(optio = {
44 series: [{
45 minAngle: 15, //最小角度
46 startAngle:startAngle//起始角度
47 }]
48 });
49 }
50 } else if (e.detail) { //Firefox滑轮事件
51 if (e.detail> 0) { //当滑轮向上滚动时
52 startAngle+=20;
53 myChart.setOption(optio = {
54 series: [{
55 minAngle: 15, //最小角度
56 startAngle:startAngle//起始角度
57 }]
58 });
59 }
60 if (e.detail< 0) { //当滑轮向下滚动时
61 startAngle-=20;
62 myChart.setOption(optio = {
63 series: [{
64 minAngle: 15, //最小角度
65 startAngle:startAngle//起始角度
66 }]
67 });
68 }
69 }
70 };
71 //给div绑定滑轮滚动事件
72
73 var box = document.getElementById("box");
74 if (box.addEventListener) {
75 box.addEventListener('DOMMouseScroll', scrollFunc, false);
76 }
77 //滚动滑轮触发scrollFunc方法
78 box.onmousewheel = scrollFunc;
79 }
80
81
82
83 var myChart = echarts.init(document.getElementById("box"));
84 var option = {
85 title: {
86 text: '某站点用户访问来源',
87 subtext: '纯属虚构',
88 x: 'center'
89 },
90 tooltip: {
91 trigger: 'item',
92 formatter: "{a} <br/>{b} : {c} ({d}%)"
93 },
94 legend: {
95 orient: 'vertical',
96 left: 'left',
97 data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
98 },
99 series: [{
100 name: '访问来源',
101 type: 'pie',
102 radius: '55%',
103 minAngle: 15, //最小角度
104 //startAngle: startAngle, //起始角度
105 center: ['50%', '60%'],
106 data: [{
107 value: 335,
108 name: '直接访问'
109 },
110 {
111 value: 310,
112 name: '邮件营销'
113 },
114 {
115 value: 234,
116 name: '联盟广告'
117 },
118 {
119 value: 135,
120 name: '视频广告'
121 },
122 {
123 value: 1548,
124 name: '搜索引擎'
125 }
126 ],
127 itemStyle: {
128 emphasis: {
129 shadowBlur: 10,
130 shadowOffsetX: 0,
131 shadowColor: 'rgba(0, 0, 0, 0.9)'
132 }
133 }
134 }]
135 };
136
137 myChart.setOption(option);
138 </script>
139 </body>
140
141 </html>
Echart 的JS 可以选择自己下载，修改相应的位置即可。
Echart饼图旋转的更多相关文章
- 单击Echart饼图实现数据钻取
使用场景和需求: 第一层饼图显示党员党龄分布的情况. 点击某个党龄段,查看拥有该党龄段的党支部. 默认显示3个党支部,余下的党支部合并为其它,点击其它,查看余下的党支部. 点击某个党支部,返回第一层饼 ...
- Echart饼图、柱状图、折线图(pie、bar、line)加入点击事件
var myChart= echarts.init(document.getElementById('myChart')); myChart.on('click', function (param) ...
- echart 饼图数据为0不显示或者太小显示其他的解决办法
饼图数据为0或者太小显示如下,不美观 解决办法: 为0的去掉,小于0.005的累加起来 方法 function getsData(_rowData){ var rowData=JSON.parse(J ...
- echart 饼图图例legend支持滑动
ps: 以下针对option操作 文章目录 图例过多加上滚动条图例形状图例自定义显示图例过多加上滚动条 legend:{ top:'50', bottom:'50', type:'scroll',} ...
- 数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇
HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打 ...
- Echarts事件
Echart饼图.柱状图.折线图(pie.bar.line)添加点击事件发布日期:2014年08月10日 来源:PHP1.CN 点击:250638摘要:var myChart= echar ...
- HTML5 例子学习 HT 图形组件
HTML5 例子学习 HT 图形组件 HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心 ...
- Matplot相关(二)——统计图
Matplotlib:其能够支持所有的2D作图和部分3D作图.能通过交互环境做出印刷质量的图像. ————————缩写定义———————— import matplot.pyplot as plt — ...
- 【Android】自己定义View
翻译自:http://developer.android.com/training/custom-views/index.html 一)创建view类 一个设计良好的自己定义view与其它的类一样.它 ...
随机推荐
- Event Sourcing落地与意义
jsoncat:https://github.com/Snailclimb/jsoncat (仿 Spring Boot 但不同于 Spring Boot 的一个轻量级的 HTTP 框架) 高内聚低耦 ...
- linux开发各种I/O操作简析，以及select、poll、epoll机制的对比
作者:良知犹存 转载授权以及围观:欢迎添加微信公众号:羽林君 IO 概念区分 四个相关概念: 同步(Synchronous) 异步( Asynchronous) 阻塞( Blocking ) 非阻塞( ...
- POJ - 3376 Finding Palindromes（拓展kmp+trie）
传送门:POJ - 3376 题意:给你n个字符串,两两结合,问有多少个是回文的: 题解:这个题真的恶心,我直接经历了5种错误类型 : ) ... 因为卡内存,所以又把字典树改成了指针版本的. 字符串 ...
- 2019牛客暑期多校训练营（第四场）k题、j题
传送门 k题: 题意: 给你一串由数字构成的字符串,你从这个字符串中找子字符串使这个字符串是300的倍数 题解: 这道题和第三场的B题极其相似 首先可以把是三百的倍数分开,必须要是100和3的倍数 是 ...
- Educational Codeforces Round 89 (Rated for Div. 2)D. Two Divisors 线性筛质因子
题目链接:D:Two Divisors 题意: 给你n个数,对于每一个数vi,你需要找出来它的两个因子d1,d2.这两个因子要保证gcd(d1+d2,vi)==1.输出的时候输出两行,第一行输出每一个 ...
- python中is，== 和 in 的区别
python对象的三个基本要素:id(身份标识),type(数据类型)和value(值). is 运算符:判断的是对象间的唯一身份标识(id). == 运算符:判断的是对象间的value(值)是否相同 ...
- CF1466-C. Canine poetry
CF1466-C. Canine poetry 题意: 给出一个字符串,这个字符串里面可能会包含多个回文子字符串.现在你可以任意修改这个字符串中的任意一个字符任意次数,问你最少多少操作数之后这个字符串 ...
- 网络协议 & 协议体系结构模型
基本知识概述 网络协议是什么? 为进行网络中的数据交换,而建立的规则(约定),就称为网络协议 网络协议的三个组成要素? 语法:数据与控制信息的结构或格式 语义:发出何种控制信息,完成何种动作,作出何种 ...
- Linux系统诊断必备技能之二：日志查询常用命令详解
一.概述 日常运维工作中,排查线上环境问题,少不了去线上查日志.而使用什么命令,能快速准确地查到我们需要查找地日志信息,也是我们需要掌握的一项技能.下面介绍一下日常工作常用到的查看日志命令:tail, ...
- Leetcode（7）-反转整数
给定一个 32 位有符号整数,将整数中的数字进行反转. 示例 1: 输入: 123 输出: 321 示例 2: 输入: -123 输出: -321 示例 3: 输入: 120 输出: 21 注意: 假 ...