echarts-------饼形图
首先echarts是一个可以提供给用户体验效果更好的一个图形界面， Canvas 类库 ZRender。
1、下载echarts的js，可以在官方网址进行下载echarts.min.js
2、将下载下来的echarts.min.js放到新建一个js文件夹
3、创建一个html页面
项目文件摆放路径如图所示
4、进行编码
- 首先在html中引入echarts.min.js
- <script src="js/echarts.min.js"/>
2.设置一个存放饼形图的DOM，需要设置DOM的width，height，这样echarts就不需要设置了,需要echarts重新设置
- <div id="main" style="width : 1000px ; height : 400 px ;"/>
3.初始化echarts，创建echarts的实例
- 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-------饼形图的更多相关文章
- asp.net MVC项目开发之统计图echarts饼形图（二）
上面介绍了柱状图,只有js代码后台的传递等我们介绍完饼形图的使用过程在做介绍 有了柱状图的介绍,在使用饼形图,其实很容易了,上代码 1.首先加载网页时,需要用到的加载项和事件. //打开网页加载 $( ...
- ***百度统计图表Echarts的php实现类，支持柱形图、线形图、饼形图
/** * 百度数据统计图表echart的PHP实现类 * * 原作者: * @author: chenliujin <liujin.chen@qq.com> * @since 2013- ...
- echarts 有关饼形图和map的使用技巧1(饼图)
http://blog.csdn.net/yhn1121/article/details/52041742 先上个链接,百度无意间搜到的,写得比我全面,可以直接飞去看它: 之前写网页用过echarts ...
- ECharts之饼图和柱形图demo
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 利用c#+jquery+echarts生成统计报表（附源代码）
背景: 因为最近项目要生成报表,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.百度echarts简介请参考 http://echarts.baidu.com/ 虽然echarts功能强 ...
- 【重点突破】—— Echarts图表的介绍和使用
前言:百度Echarts是一个基于Canvas的纯Javascript图表库,提供直观.生动.可交互.可个性化定制的数据可视化图表.官网地址:http://echarts.baidu.com/inde ...
- Echarts配置
直接引入echarts 安装echarts项目依赖 cnpm install echarts --save //或者 cnpm i echarts -S 全局引入 我们安装完成之后,可以在 mai ...
- Echart饼形图和折线图的循环展示及选择展示
需求:根据不同的入参调同一接口,循环展示一组饼形图或折线图: 主要问题:在于给定的数据格式不符合图表的配置项格式,需要拆分组装数据:首先默认展示几个图表,当选中一个类别,需要展示其中一个的时候,页面中 ...
- Echarts的食用方式
写在前面: 最近项目中用到了Echarts做趋势图,博主通过万能的度娘研究了一下.Echarts字段的使用基本都写在代码注释里了,这是博主的第一篇博客,如果哪里写的不好望大家见谅,最后希望本篇博客对大 ...
- 一起来玩echarts系列（一）------箱线图的分析与绘制
一.箱线图 Box-plot 箱线图一般被用作显示数据分散情况.具体是计算一组数据的中位数.25%分位数.75%分位数.上边界.下边界,来将数据从大到小排列,直观展示数据整体的分布情况. 大部分正常数 ...
随机推荐
- 【BZOJ 5125】小Q的书架
Problem Description 小 \(Q\) 有 \(n\) 本书,每本书有一个独一无二的编号,现在它们正零乱地在地上排成了一排. 小 \(Q\) 希望把这一排书分成恰好 \(k\) 段,使 ...
- 【译】第22节---Fluent API - EntityTypeConfiguration类
原文:http://www.entityframeworktutorial.net/code-first/entitytypeconfiguration-class.aspx 在我们开始使用Fluen ...
- Perl中命令行参数以及打开管道文件
打开管道文件 Linux提供了管道机制,可以方便应用程序之间的数据传递.在Perl中,扣开和使用管道可采用如下形式的open函数: open(Filehandle,”丨 CMD”); 其中 ...
- 当面试官问你GET和POST区别的时候,请这么回答.......
文章内容转载于微信公众号WebTechGarden 一.GET和POST的'普通'区别 GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二. 最直观的区别就 ...
- JaveWeb 公司项目（2）----- 类模态窗口显示DIV并将DIV放置在屏幕正中间
上一篇博客写的是通过隐藏显示进行div的替换,接下来需要在原有的div前添加一个div,进行表单的提交,需要将div放置在正中间,然后类似C#中的模态窗口,在进行完新弹出的div操作之后,才可以进行下 ...
- 【log4net】配置文件解释
ASP.NET MVC 1.web.config: <configSections> <section name="log4net" type="log ...
- 学大数据是先学java还是先学python?
大数据的发展趋势日渐明显,但是进入这个领域的门槛不小,除了要有心理准备,其次就是要付诸实际行动中去学习. 学习方法有很多,在没有基础的前提下,自学是因人而异是有难度.其次是大数据目前的工作方向主要是三 ...
- 力扣（LeetCode） 217. 存在重复元素
给定一个整数数组,判断是否存在重复元素. 如果任何值在数组中出现至少两次,函数返回 true.如果数组中每个元素都不相同,则返回 false. 示例 1: 输入: [1,2,3,1] 输出: true ...
- vue生命周期钩子
转载自:https://segmentfault.com/a/1190000008010666?utm_source=tag-newest https://segmentfault.com/a/119 ...
- 牛客OI周赛4-提高组 A K小生成树(kmst)
K小生成树(kmst) 思路: 暴力+并查集 枚举边的子集,用并查集判断两个点联不联通 代码: #include<bits/stdc++.h> using namespace std; # ...