首先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. File类文件的常见操作

    boolean exists() 判断文件或者目录是否存在 boolean isFile()  判断是否是文件 boolean isDirectory() 判断是否是目录 String getPath ...

  2. 2017"百度之星"程序设计大赛 - 初赛（A） 01，05，06

    小C的倍数问题    Time Limit: 2000/1000 MS (Java/Others)  Memory Limit: 32768/32768 K (Java/Others) Problem ...

  3. mac的终端怎么退出git:(master)

    今天在终端误操作,在主目录下执行git init命令,结果杯具了, 总是出现这个提示. 各种搜索解决方案,终于退出了. 方法如下: 删掉.git目录: rm -rf ~/.git

  4. eclipse里安装SVN插件的两种方式

    eclipse里安装SVN插件,一般来说,有两种方式: 直接下载SVN插件,将其解压到eclipse的对应目录里 使用eclipse 里Help菜单的“Install New Software”,通过 ...

  5. django认证系统 Authentication

    Django自带一个用户认证系统,用于处理用户账户.群组.许可和基于cookie的用户会话. Django的认证系统包含了身份验证和权限管理两部分.简单地说,身份验证用于核实某个用户是否合法,权限管理 ...

  6. 力扣（LeetCode）13. 罗马数字转整数

    罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写做 II ,即为两个并 ...

  7. Android 用虹软SDK做人脸识别

    人脸识别第三方sdk比较多,但是大多都是收费的或者限制次数什么的,虹软的效果还不错,全免费也不需要联网 V1.2版本使用和快速集成:https://www.jianshu.com/p/8dee89ec ...

  8. Spring的AOP配置文件和注解实例解析

    1.1           Spring的AOP配置文件和注解实例解析 AOP它利用一种称为"横切"的技术,将那些与核心业务无关,却为业务模块所共同调用的逻辑或责任封装起来,便于减 ...

  9. Android接入微信SDK之一：发起微信授权登录

    1.重要的事情首先说! 包名.应用签名.app id 三者都必须和在腾讯上申请的一致!!!否则将不能成功. 包名:就是在腾讯上申请的包名 应用签名:使用微信官网提供的<签名生成工具>(这个 ...

  10. nodejs使用log4js记录日志

    log4j是java里面最好用的日志记录插件,在.net上面也有移植log4j.net.同样也移植到了nodejs里面,多的不说,把自测通过的代码粘出来吧. var log4js = require( ...