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与其它的类一样.它 ...
随机推荐
- SQL系列总结——基础篇（一）
数据库与表.列的关系其实就像是一个Excel工作薄(workbook)与Excel表格(sheet)以及表格中的列的关系一样.关系数据库中最基本的对象有3个:表.列.用户 基本的概念名词 ...
- go语言常见面试题
前言 从网上找了一些面试题,觉得有意思的我都记录下来,自己学习和大家一起学习吧. 有些初级的题目只放答案,一些值得探讨的问题我会写上我自己的分析过程,希望大家多多交流. 原文链接 选择题 1.[初级] ...
- .NET 微服务
前文传送门: 什么是云原生? 现代云原生设计理念 Microservices 微服务是构建现代应用程序的一种流行的体系结构样式,云原生系统拥抱微服务. 微服务是由一组(使用共享结构交互的.独立的小块服 ...
- 2019牛客暑期多校训练营（第一场）A Equivalent Prefixes
传送门 题意: 先输入一个n,代表两个数组里面都有n个数,然后让你从中找到一个p<=n,使其满足(1<=l<=r<=p<=n)可以让在(l,r)这个区间内在两个数组中的的 ...
- gym101002K. Inversions (FFT)
题意:给定一个仅含有AB的字母串 如果i有一个B j有一个A 且j>i 会对F(j-i)产生贡献 求出所有发Fi 题解:好像是很裸的FFT B的分布可以看作一个多项式 同理A也可以 然后把B的位 ...
- SQL Server 远程连接配置
打开sql server配置工具 SQL Server网络配置→SQLEXPRESS的协议→启用TCP/IP→右键属性→IP地址→IPALL端口修改为1433→重启SQL Server服务 https ...
- Chrome Switchs & Chrome Pref
Chrome Switchs: https://chromium.googlesource.com/chromium/src/+/master/chrome/common/chrome_switche ...
- 【luogu AT3957】[AGC023F] 01 on Tree
01 on Tree 题目链接:luogu AT3957 题目大意 有一棵根为 \(1\) 的树,每个节点有个值 \(0\) 或 \(1\). 然后每次你可以把一个没有父亲的点删除,然后把值放进一个数 ...
- Redis之哨兵机制(sentinel)——配置详解及原理介绍
说到Redis不得不提哨兵模式,那么究竟哨兵是什么意思?为什么要使用哨兵呢? 接下来一一为您讲解: 1.为什么要用到哨兵 哨兵(Sentinel)主要是为了解决在主从(master-slave)复制架 ...
- Leetcode（15）-三数之和
给定一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?找出所有满足条件且不重复的三元组. 注意:答案中不可以包含重复的三元组. ...