首先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. python3 session cookie

    session是保存在服务器中的,而cookies是保存在客户端中的.服务器通过session id来跟踪客户,而对于客户端而言,session id是保存在cookies中的,所以只要把cookie ...

  2. layui upload 后台获取不到值

    后台获取不到值方法一: <script> layui.use('upload', function () { var upload = layui.upload; //执行实例 var u ...

  3. RN 上传文件到以及上传文件到七牛云（初步）

    本文将介绍: 如何使用原生 Javascript 上传文件 如何使用七牛云 SDK 上传文件到七牛云 在 App 中文件上传是一个非常重要的需求,但是翻遍 React Naitve 的官方文档没有发现 ...

  4. javascript 获得以秒计的视频时长

    <!DOCTYPE html> <html> <body> <h3>演示如何访问 VIDEO 元素</h3> <video id=&q ...

  5. python的json模块的dumps，loads，dump，load方法介绍

    dumps和loads方法都在内存中转换, dump和load的方法会多一个步骤,dump是把序列化后的字符串写到一个文件中,而load是从一个文件中读取字符串 将列表转为字符串 >>&g ...

  6. HP惠普笔记本安装VirtualBox后 不能选择64bit的系统

    之前在台式机上安装VirtualBox,一切OK,能够安装64位的任何版本iso包今天在hp笔记本上安装,安装VirtualBox完毕后,只能选择32位的iso版本. 而我目前只有一个linux64b ...

  7. Eclipse调试DEBUG时快速查看某个变量的值的快捷键、快速跳转到某行的快捷键

    Eclipse调试DEBUG时快速查看某个变量的值的快捷键 Ctrl + Shift + i

  8. Eclipse添加EGIT方法

    1. 安装EGIT, 其中一个方法: 2. 新建javaweb项目,测试git的使用. l  File > Team > Share Project 选择GIT 如何选择不了,则选择创建c ...

  9. webpack初识

    1.什么是Webpack WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等) ...

  10. mint18.3 升级linux-libc-dev_4.4.0-102.132 导致外接显示屏无法旋转，设置分辨率

    —————————————————— 补记: 虽然修改之后能旋转,重启还是不行,而且修改显示,经常卡死.还是在第二天早上重装了. 吸取教训,尽量不apt dist-upgrade,不升级内核. 这只是 ...