首先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. 理解ffmpeg中的pts，dts，time_base

    首先介绍下概念: PTS:Presentation Time Stamp.PTS主要用于度量解码后的视频帧什么时候被显示出来 DTS:Decode Time Stamp.DTS主要是标识读入内存中的b ...

  2. python,函数的基本用法

    一.函数 函数的概念:对功能或者动作的封装可以帮我们把一段公共的代码提取出来 语法如下 def 函数名(形参): 函数体 函数名(实参) # 函数名() def yue(): print(" ...

  3. MVC后台获取数据和插入数据的三种方式【二】

    MVC模式下,从前端获取数据返回后台,总共有三种形式.下面的代码示例将演示如何将数据返回到后端. 一.首先我们看看表单代码,注意input标签中name的值. <html> <hea ...

  4. 力扣（LeetCode） 20. 有效的括号

    给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合. 左括号必须以正确的顺序闭合. 注意空字符串可被认 ...

  5. 离线人脸识别C#类库分享 虹软2.0版本

    目前只封装了人脸检测部分的类库,供大家交流学习,肯定有问题,希望大家在阅读使用的时候及时反馈,谢谢!使用虹软技术开发完成 戳这里下载SDKgithub:https://github.com/dayAn ...

  6. jfinal集成cas单点认证实践

    本示例jfinal集成cas单点认证,采用获取到登录用户session信息后,在本地站点备份一份session信息,主要做以下几个步骤: 1.站点引入响应jar包: 2.在web.xml中配置对应过滤 ...

  7. Python splinter 环境搭建

    今天无意间看到了splinter. Splinter是一个使用Python开发的开源Web应用测试工具.它可以帮你实现自动浏览站点和与其进行交互. Splinter对已有的自动化工具(如:Seleni ...

  8. Advances in Single Cell Genomics to Study Brain Cell Types | 会议概览

    单细胞在脑科学方面的应用 Session 1: Deciphering the Cellular Landscape of the Brain Using Single Cell Transcript ...

  9. MapReduce处理气象数据

    老师:MissDu 提交作业 1. 用Python编写WordCount程序并提交任务 程序 WordCount 输入 一个包含大量单词的文本文件 输出 文件中每个单词及其出现次数(频数),并按照单 ...

  10. p1215

    一开始没用数组,没成功.后来确定用深搜后,用数组.出现一个不同的abc状态就记录下来,以免重复.一开始要倒的肯定是c杯,之后出现新状态要递归dfs3次.另外发现algorithm里的copy是原数组在 ...