Echarts画饼状图 

 1 <html>
 2 <head>
 3     <meta name="viewport" content="width=device-width" />
 4     <title>饼状图</title>
 5     @*echarts画图必须要引用的*@
 6     <script src="~/Scripts/echarts.min.js"></script>
 7 </head>
 8 <body>
 9     @* 画图要用的空间 *@
10        <div id="divEcharts" style="width:800px;height:600px;"></div>
11 </body>
12 </html>
13 <script type="text/javascript">
14 
15     option = {
16         tooltip: {  //悬浮时提示的信息
17             trigger: 'item',
18             formatter: "{a} <br/>{b}: {c} ({d}%)" //提示的格式
19         },
20         legend: {  //图例
21             orient: 'vertical',  //方位 vertical垂直的
22             x: 'left',
23             data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']  //数据
24         },
25         series: [
26             {
27                 name: '访问来源',
28                 type: 'pie', //图的类型 pie饼状图
29                 radius: ['50%', '70%'],  //图标的范围
30                 avoidLabelOverlap: false,
31                 label: { //图中心的标注
32                     normal: {
33                         show: false,
34                         position: 'center'
35                     },
36                     emphasis: {
37                         show: true,
38                         textStyle: {
39                             fontSize: '30',
40                             fontWeight: 'bold'
41                         }
42                     }
43                 },
44                 labelLine: {
45                     normal: {
46                         show: false
47                     }
48                 },
49                 data: [ //要画的数据
50                     { value: 335, name: '直接访问' },
51                     { value: 310, name: '邮件营销' },
52                     { value: 234, name: '联盟广告' },
53                     { value: 135, name: '视频广告' },
54                     { value: 1548, name: '搜索引擎' }
55                 ]
56             }
57         ]
58     };
59 
60 
61     //初始化echarts实例
62     var myChart = echarts.init(document.getElementById('divEcharts'));
63     //使用制定的配置项和数据显示图表
64     myChart.setOption(option);
65 
66 </script>

 

posted @ 2019-05-09 10:51  无~道  阅读(238)  评论(0)    收藏  举报