echarts-------饼形图 - superStar1213

echarts-------饼形图

首先echarts是一个可以提供给用户体验效果更好的一个图形界面， Canvas 类库 ZRender。

1、下载echarts的js，可以在官方网址进行下载echarts.min.js

2、将下载下来的echarts.min.js放到新建一个js文件夹

3、创建一个html页面

项目文件摆放路径如图所示

4、进行编码

首先在html中引入echarts.min.js
1. 　　<script src="js/echarts.min.js"/>

　　2.设置一个存放饼形图的DOM，需要设置DOM的width，height，这样echarts就不需要设置了,需要echarts重新设置

1. 　　<div id="main" style="width : 1000px ; height : 400 px ;"/>

　　3.初始化echarts，创建echarts的实例

1. 　　var myecharts=echarts.init(document.getElementById("main"));

　　4.设置数据项和图标

　　　　　 1.　　var option={...}(见代码)

　　5.将数据项和图标显示到饼形图上

　　　　　　1.　　myecharts.setOption(option);

表现形式见下图，鼠标点击会出现效果

代码见下

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>echars map</title>
<!-- 引入echarts.js的js -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 创建一个DOM -->
<div id="div" style="width:1000px;height:400px;"></div>
 <script type="text/javascript">
 //获取DOM
 var myecharts=echarts.init(document.getElementById("div"));
 var option=({
     title:{
         text:'饼形图',//主标题文本，支持\n换行
         subtext: 'from United Nations, Total population, both sexes combined, as of 1 July (thousands)',//副文本
            sublink : 'http://esa.un.org/wpp/Excel-Data/population.htm',//副文本链接
         left:'center',//离容器左侧的距离
         top:'top'//距离容器上测的距离
     },
     backgroundColor: '#2c343c',//背景颜色
     textStyle: {
                 color: 'rgba(255, 255, 255, 0.3)'//文字的颜色
             },
     series : [
         {
             name: '访问来源',
             type: 'pie',//每个系列，通过type决定自己的系列型号
             radius: '55%',
             data:[
                 {value:400, name:'搜索引擎'},
                 {value:335, name:'直接访问'},
                 {value:310, name:'邮件营销'},
                 {value:274, name:'联盟广告'},
                 {value:235, name:'视频广告'}
             ],
             roseType: 'angle',

             itemStyle: {//图形样式 normal，emphasis
                 emphasis: {
                     shadowBlur: 200,
                     shadowColor: 'rgba(0, 0, 0, 0.5)'
                 }
             },
             label: {//饼形图上的文本标签
                 normal: {
                     textStyle: {
                         color: 'rgba(255, 255, 255, 0.3)'
                     }
                 }
             },
             labelLine: {//标签的视觉引导线
                 normal: {
                     lineStyle: {
                         color: 'rgba(255, 255, 255, 0.3)'
                     }
                 }
             }

         }
     ]
 });
 myecharts.setOption(option);
 </script>
<!-- 
1.引入echarts.min.js
2.准备DOM
3.初始化echars实例
4.准备数据项
5.调用setOption方法将数据和图标显示在图表上
 -->
</body>
</html>

posted on 2017-05-25 14:43 superStar1213 阅读(3781) 评论(0) 编辑收藏举报

刷新页面返回顶部