码迷,mamicode.com
首页 > 其他好文 > 详细

ECharts-饼状图

时间:2019-11-03 20:10:44      阅读:79      评论:0      收藏:0      [点我收藏+]

标签:div   导入   ext   下载   tle   rgb   src   charset   document   

一:先在官网下载

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-饼状图

标签:div   导入   ext   下载   tle   rgb   src   charset   document   

原文地址:https://www.cnblogs.com/smartisn/p/11788480.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!