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 可以选择自己下载，修改相应的位置即可。






            

            
posted @ 
2021-01-25 17:06 
爱之-♡信仰 
阅读(1201) 
评论(0) 
编辑 
收藏 
举报