ECharts-饼状图

Posted smartisn

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ECharts-饼状图相关的知识，希望对你有一定的参考价值。

一：先在官网下载

https://www.echartsjs.com/zh/download.html

然后再建立工程，导入这两个包：

技术图片

 

 写代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>ECharts</title>
 6     <!-- 引入 echarts.js -->
 7     <!-- 这里是加载刚下好的echarts.min.js，注意路径 -->
 8     <script src="echarts.min.js"></script>
 9 </head>
10 <body>
11     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
12     <div id="main" style="width: 1000px;height:600px;"></div>
13     <script type="text/javascript">
14         // 基于准备好的dom，初始化echarts实例
15         var myChart = echarts.init(document.getElementById(‘main‘));
16         var option={
17             backgroundColor: ‘#2c343c‘,
18             textStyle: {
19                         color: ‘rgba(255, 255, 255, 0.3)‘
20                     },
21             series : [
22                 {
23                     name: ‘访问来源‘,
24                     type: ‘pie‘,
25                     radius: ‘55%‘,
26                     data:[
27                         {value:400, name:‘搜索引擎‘},
28                         {value:335, name:‘直接访问‘},
29                         {value:310, name:‘邮件营销‘},
30                         {value:274, name:‘联盟广告‘},
31                         {value:235, name:‘视频广告‘}
32                     ],
33                     roseType: ‘angle‘,
34                     itemStyle: {
35                         emphasis: {
36                             shadowBlur: 200,
37                             shadowColor: ‘rgba(0, 0, 0, 0.5)‘
38                         }
39                     },
40                     label: {
41                         normal: {
42                             textStyle: {
43                                 color: ‘rgba(255, 255, 255, 0.3)‘
44                             }
45                         }
46                     },
47                     labelLine: {
48                        normal: {
49                             lineStyle: {
50                                 color: ‘rgba(255, 255, 255, 0.3)‘
51                             }
52                         }
53                     }
54                 }
55             ]
56         }
57        // 使用刚指定的配置项和数据显示图表。
58         myChart.setOption(option);
59     </script>
60 </body>
61 </html>

 

以上是关于ECharts-饼状图的主要内容，如果未能解决你的问题，请参考以下文章

如何获取echarts点击饼状图

echarts饼状图的属性（浅认知）

Echarts作图之饼状图联动

echarts中柱体的颜色，饼状图的颜色设置、、、

echarts.js饼状图之间的间隔怎么设置

怎样将itemstyle写在echarts饼状图的data域中