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>
