Echarts简单案例

官网： http://echarts.baidu.com/index.html

文档：  http://echarts.baidu.com/echarts2/doc/doc.html

 

 1 <html>
 2 <head>
 3     <title>echart示例</title>   
 4     <script src="echarts-all.js" type="text/javascript"></script>
 5 </head>
 6 <body>
 7 <div id="main1" style="width:1000px;height:600px;border:1px solid #dddddd;margin:10px auto;"></div>
 8 <script type="text/javascript">
 9         // 基于准备好的dom，初始化echarts实例
10         var myChart1 = echarts.init(document.getElementById('main1'));
11         
12         // 指定图表的配置项和数据
13         option = {
14             title : {
15                 x: 'center',                 // 水平安放位置，默认为左对齐，可选为：
16                                    // 'center' ¦ 'left' ¦ 'right'
17                                    // ¦ {number}（x坐标，单位px）
18                 y: 'top', 
19                 text : '环形图',
20                 subtext : '1',
21                 itemGap : 0,
22                 textStyle : {
23                     fontSize: 24,
24                     fontWeight: 'bolder',
25                     color: '#333'
26                 },
27                 subtextStyle : {
28                     fontSize: 18,
29                     fontWeight: 'bolder',
30                     color: '#dddddd'
31                 }
32             },
33             tooltip: {
34                 trigger: 'item',
35                 formatter: "{a} <br/>{b}: {c} ({d}%)"
36             },
37             legend: {
38                 orient: 'vertical',
39                 x: 'left',
40                 data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
41             },
42             series: [
43                 {
44                     name:'访问来源',
45                     type:'pie',
46                     radius: ['50%', '70%'],
47                     avoidLabelOverlap: false,
48                     label: {
49                         normal: {
50                             show: false,
51                             position: 'center'
52                         },
53                         emphasis: {
54                             show: true,
55                             textStyle: {
56                                 fontSize: '30',
57                                 fontWeight: 'bold'
58                             }
59                         }
60                     },
61                     labelLine: {
62                         normal: {
63                             show: false
64                         }
65                     },
66                     data:[
67                         {value:335, name:'直接访问'},
68                         {value:310, name:'邮件营销'},
69                         {value:234, name:'联盟广告'},
70                         {value:135, name:'视频广告'},
71                         {value:1548, name:'搜索引擎'}
72                     ]
73                 }
74             ]
75         };
76 
77         // 使用刚指定的配置项和数据显示图表。
78         myChart1.setOption(option); 
79         myChart1.on('click',  function eConsole(param) {
80         //这个params可以获取你要的饼图中的当前点击的项的参数
81           alert(param.value+'-'+param.name+'-'+param.seriesName);
82         });
83         /*
84         
85 此外param参数包含的内容有：
86        param.seriesIndex：系列序号（series中当前图形是第几个图形第几个，从0开始计数）
87        param.dataIndex：数值序列（X轴上当前点是第几个点，从0开始计数）
88        param.seriesName：legend名称
89        param.name：X轴值
90        param.data：Y轴值
91        param.value：Y轴值
92        param.type：点击事件均为click        
93         
94         */
95     </script>
96 </body>
97 </html>

 

posted @ 2017-04-25 16:57  港城人民  阅读(546)  评论(0)  编辑  收藏  举报