echart中餅狀圖的高亮顯示。

本文轉載自查看原文 2019-04-13 13:36 1793

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <!--jquery 根據自己的路徑引入或下載 -->
 7         <script src="js/jquery-1.9.1.min.js"></script>
 8         <style type="text/css">
 9             
10             #main{
11                 width:50vw;height:60vh;margin-left:2vw
12             }
13         </style>
14     </head>
15     <body>
16         
17             <div id="main"></div>
18         <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
19         <script type="text/javascript">
20         // 餅狀圖插件的部分內容
21         
22          var chart = echarts.init(document.getElementById('main'));
23           var optionbar = {
24                 color:['#df6c33','#018dfe'],//餅狀圖每部分的顏色
25                 tooltip: {
26                     trigger: 'item',
27                     // formatter: "{a} <br/>{b}: {c} ({d}%)",
28                     formatter: "{d}%",//鼠標滑過時候的顯示
29                     // show:false,
30                 },
31                 series: [{
32                     // name: '客戶',
33                     type: 'pie',
34                     radius: ['35%', '50%'],//控制餅狀圖的大小
35                     center: ['50%', '50%'],//控制餅狀圖所在的位置
36                     avoidLabelOverlap: true,
37                     
38                     label: {
39                         normal: {
40                             formatter: '{d}%' //自定義顯示格式(b:name, c:value, d:百分比
41                         },
42                         emphasis: {
43                             show: true,
44                             textStyle: {
45                                 fontSize: '10',//字體大小
46                                 // fontWeight: 'bold'
47                             }
48                         }
49                     },
50                     labelLine: {
51                         normal: {
52                             show: true
53                         }
54                     },
55                     data: [20,96]//后台請求到的數據直接復制即可
56                 }]
57             };
58     
59         
60            chart.setOption(optionbar)
61             //設置默認選中高亮部分
62             chart.dispatchAction({
63                 type: 'highlight',
64                 seriesIndex: 0,
65                 dataIndex: 0
66             });
67             chart.on('mouseover', function(e) {
68             //當檢測到鼠標懸停事件，取消默認選中高亮
69                 chart.dispatchAction({
70                     type: 'downplay',
71                     seriesIndex: 1,
72                     dataIndex: 0
73                 });
74             //高亮顯示懸停的那塊
75                 chart.dispatchAction({
76                     type: 'highlight',
77                     seriesIndex: 1,
78                     dataIndex: e.dataIndex
79                 });
80             });
81             //檢測鼠標移出后顯示之前默認高亮的那塊
82             chart.on('mouseout', function(e) {
83                 chart.dispatchAction({
84                     type: 'highlight',
85                     seriesIndex: 0,
86                     dataIndex: 0
87             }); });
88  
89  
90    
91 
92        
93            
94         </script>
95     </body>
96 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 echart餅狀圖的學習 echart餅狀圖直接顯示占比率關於echarts中的餅狀圖的label文字顯示過長的問題 echart 餅狀圖自定義樣式 echarts 餅狀圖legend數據顯示 echarts-餅狀圖默認選中高亮 vue中餅狀圖的使用 echarts餅圖默認狀態高亮顯示 python 餅狀圖 echarts 餅狀圖