首先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. 6、tcp_wrapper

    iptables的链接跟踪表最大容量为/proc/sys/net/ipv4/ip_conntrack_max,链接碰到各种状态的超时后就会从表中删除. 所以解決方法一般有两个: (1) 加大 ip_c ...

  2. FI CO 常用表

    FI CO 常用表     最近写FICO的报表写得有点多,许多Table记不住,用F1查找又有点费事,不如把表单写下来,以后用到,直接在这上面找得了. 1,账目表主数据  SKA1  SKB1  S ...

  3. urllib模块中的方法

    urllib模块中的方法 1.urllib.urlopen(url[,data[,proxies]]) 打开一个url的方法,返回一个文件对象,然后可以进行类似文件对象的操作.本例试着打开google ...

  4. git界面里面复制粘贴

    git界面里常用的粘贴方法: 1.Insert键或者Fn+Insert键 2.右键或者shift+右键 Paste 粘贴 3.还有一些设置可以用,在git面板中(或者右键),点击option选项 这里 ...

  5. Codeforces 785 D. Anton and School - 2

    题目链接:http://codeforces.com/contest/785/problem/D 我们可以枚举分界点,易知分界点左边和右边分别有多少个左括号和右括号,为了不计算重复我们强制要求选择分界 ...

  6. docker+jenkins实现spring boot项目持续集成自动化部署

    一.首先jenkins与docker的安装参考下面链接   安装jenkins:  https://www.cnblogs.com/jescs/p/7644635.html   安装docker:ht ...

  7. 《深入理解JVM虚拟机》读书笔记

    前言:<深入理解JVM虚拟机>是JAVA的经典著作之一,因为内容更偏向底层,所以之前一直没有好好的阅读过.最近因为刚好有空,又有了新目标.所以打算和<构架师的12项修炼>一起看 ...

  8. Jmeter 老司机带你一小时学会Jmeter

    Jmeter的安装   官网下载地址:http://jmeter.apache.org/download_jmeter.cgi 作为Java应用,是需要JDK环境的,因此需要下载安装JAVA,并且作必 ...

  9. Mysql简单入门

    这两天比较懒,没有学习,这个是我问一个学java的小伙伴要的sql的总结资料,大体语句全在上面了,复制到博客上,以后忘记可以查看 #1命令行连接MySQLmsyql -u root -proot;#2 ...

  10. 大数据新手之路四：联合使用Flume和Kafka

    Ubuntu16.04+Kafka1.0.0+Flume1.8.0 1.目标 ①使用Flume作为Kafka的Producer: ②使用Kafka作为Flume的Sink: 其实以上两点是同一个事情在 ...