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

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

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

3、创建一个html页面

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

4、进行编码

  1. 首先在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>

echarts-------饼形图的更多相关文章

  1. asp.net MVC项目开发之统计图echarts饼形图（二）

    上面介绍了柱状图,只有js代码后台的传递等我们介绍完饼形图的使用过程在做介绍 有了柱状图的介绍,在使用饼形图,其实很容易了,上代码 1.首先加载网页时,需要用到的加载项和事件. //打开网页加载 $( ...

  2. ***百度统计图表Echarts的php实现类，支持柱形图、线形图、饼形图

    /** * 百度数据统计图表echart的PHP实现类 * * 原作者: * @author: chenliujin <liujin.chen@qq.com> * @since 2013- ...

  3. echarts 有关饼形图和map的使用技巧1(饼图)

    http://blog.csdn.net/yhn1121/article/details/52041742 先上个链接,百度无意间搜到的,写得比我全面,可以直接飞去看它: 之前写网页用过echarts ...

  4. ECharts之饼图和柱形图demo

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  5. 利用c#+jquery+echarts生成统计报表（附源代码）

    背景: 因为最近项目要生成报表,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.百度echarts简介请参考 http://echarts.baidu.com/ 虽然echarts功能强 ...

  6. 【重点突破】—— Echarts图表的介绍和使用

    前言:百度Echarts是一个基于Canvas的纯Javascript图表库,提供直观.生动.可交互.可个性化定制的数据可视化图表.官网地址:http://echarts.baidu.com/inde ...

  7. Echarts配置

    直接引入echarts 安装echarts项目依赖 cnpm install echarts --save //或者 cnpm i echarts -S   全局引入 我们安装完成之后,可以在 mai ...

  8. Echart饼形图和折线图的循环展示及选择展示

    需求:根据不同的入参调同一接口,循环展示一组饼形图或折线图: 主要问题:在于给定的数据格式不符合图表的配置项格式,需要拆分组装数据:首先默认展示几个图表,当选中一个类别,需要展示其中一个的时候,页面中 ...

  9. Echarts的食用方式

    写在前面: 最近项目中用到了Echarts做趋势图,博主通过万能的度娘研究了一下.Echarts字段的使用基本都写在代码注释里了,这是博主的第一篇博客,如果哪里写的不好望大家见谅,最后希望本篇博客对大 ...

  10. 一起来玩echarts系列（一）------箱线图的分析与绘制

    一.箱线图 Box-plot 箱线图一般被用作显示数据分散情况.具体是计算一组数据的中位数.25%分位数.75%分位数.上边界.下边界,来将数据从大到小排列,直观展示数据整体的分布情况. 大部分正常数 ...

随机推荐

  1. BZOJ 3673: 可持久化并查集（可持久化并查集+启发式合并）

    http://www.lydsy.com/JudgeOnline/problem.php?id=3673 题意: 思路: 可持久化数组可以用可持久化线段树来实现,并查集的查询操作和原来的一般并查集操作 ...

  2. oracle 新建用户

    create user username identified by password; grant dba to username; 授权 或 grant connect, resource to ...

  3. 用Github做一个静态网页(GithubPages)

    一.新建一个仓库(new). 二.命名Repository name为:(名字).github.io(一定要有.github.io). 三.勾选Initialize this repository w ...

  4. jQuery 的 prevObject

    1. prevObject jquery选择器在遍历的过程中都会找到一组元素(一个jQuery对象),然后jQuery会把这组元素推入到栈中.prevObject属性就指向这个对象栈中的前一个对象,而 ...

  5. 虹软人脸识别Android Sample Code

    AFR_FSDKInterface engine = new AFR_FSDKEngine(); //用来存放提取到的人脸信息, face_1 是注册的人脸,face_2 是要识别的人脸 AFR_FS ...

  6. js,java时间处理

    1.JS获取时间格式为“yyyy-MM-dd HH:mm:ss”的字符串 function getTimeStr(){ var myDate = new Date(); var year = myDa ...

  7. 2017-2018 ACM-ICPC, Asia Tsukuba Regional Contest

    2017-2018 ACM-ICPC, Asia Tsukuba Regional Contest A Secret of Chocolate Poles 思路:暴力枚举黑巧克力的个数和厚黑巧克力的个 ...

  8. AtCoder Beginner Contest 110 D - Factorization

    D - Factorization 思路:把相同的质因子看成相同的小球,求把这些小球放进n个盒子里的方案数. 代码: #pragma GCC optimize(2) #pragma GCC optim ...

  9. DirectX之顶点法线的计算

    首先要明白,顶点法线存在的原因:确定灯光照射到物体表面的角度.所以一提到顶点法线,肯定要进行与灯光相关的运算了. 下面是顶点法线的计算方式 假如 A.B.C三个顶点构成一个三角形,它们对应的顶点法线分 ...

  10. lua --- dofile、loadfile、require

    loadfile: 1>编译代码成中间码并且返回编译后的chunk作为一个函数,而不执行代码 2>在发生错误的情况下,不会抛出异常,但会返回nil和错误信息 3>运行一个文件多次的话 ...