echart中饼状图的高亮显示。 

 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>

 

posted @ 2019-04-13 13:36  无所谓。。。  阅读(3847)  评论(0)    收藏  举报