ECharts-第一篇最简单的应用
1、简单演示一个饼状图
准备好echarts-all.js
2、编写页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts-all.js"></script>
<div id="pie1" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart1 = echarts.init(document.getElementById('pie1'));
option1 = {
title:{
text:'按类型统计',
top:'bottom',
left:'center',
textStyle:{
fontSize: 14,
fontWeight: '',
color: '#333'
},
},//标题
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)",
/*formatter:function(val){ //让series 中的文字进行换行
console.log(val);//查看val属性，可根据里边属性自定义内容
var content = var['name'];
return content;//返回可以含有html中标签
},*/ //自定义鼠标悬浮交互信息提示，鼠标放在饼状图上时触发事件
},//提示框，鼠标悬浮交互时的信息提示
legend: {
show: false,
orient: 'vertical',
x: 'left',
data: ['50%-学生', '25%-老师', '25%-家长']
},//图例属性，以饼状图为例，用来说明饼状图每个扇区，data与下边series中data相匹配
graphic:{
type:'text',
left:'center',
top:'center',
style:{
text:'用户统计\n'+'100', //使用“+”可以使每行文字居中
textAlign:'center',
font:'italic bolder 16px cursive',
fill:'#000',
width:30,
height:30
}
},//此例饼状图为圆环中心文字显示属性，这是一个原生图形元素组件，功能很多
series: [
{
name:'用户统计',//tooltip提示框中显示内容
type: 'pie',//图形类型，如饼状图，柱状图等
radius: ['35%', '65%'],//饼图的半径，数组的第一项是内半径，第二项是外半径。支持百分比，本例设置成环形图。具体可以看文档或改变其值试一试
//roseType:'area',是否显示成南丁格尔图，默认false
itemStyle: {
normal:{
label:{
show:true,
textStyle:{color:'#3c4858',fontSize:"18"},
formatter:function(val){ //让series 中的文字进行换行
return val.name.split("-").join("\n");}
},//饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。可以与itemStyle属性同级，具体看文档
labelLine:{
show:true,
lineStyle:{color:'#3c4858'}
}//线条颜色
},//基本样式
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',//鼠标放在区域边框颜色
textColor:'#000'
}//鼠标放在各个区域的样式
},
data: [
{value: 50, name: '50%-学生'},
{value: 25, name: '25%-老师'},
{value: 25, name: '25%-家长'},
],//数据，数据中其他属性，查阅文档
color: ['#51CEC6','#FFB703','#5FA0FA'],//各个区域颜色
},//数组中一个{}元素，一个图，以此可以做出环形图
],//系列列表
};
myChart1.setOption(option1);
</script>
</head>
</html>
3、在浏览器中打开页面
总结：echarts的使用
1》使用echarts.init(document.getElementById('pie1'));初始化一个ECharts显示位置html标签
2》编写自己的option
3》将加载到已经初始化的ECharts位置。
ECharts-第一篇最简单的应用的更多相关文章
- angularjs学习第四天笔记（第一篇：简单的表单验证）
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- VueRouter爬坑第一篇-简单实践
VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...
- 跟初学者学习IbatisNet第一篇
写在前面的话:我自己也是一个初学者,写这个专题只是为了对学过知识的巩固,如果有什么不对的地方,欢迎大家指正…………………… 第一篇就简单介绍一下什么是IbatisNet,然后写一个简单的Demo,在后 ...
- 简单的抓取淘宝关键字信息、图片的Python爬虫|Python3中级玩家：淘宝天猫商品搜索爬虫自动化工具（第一篇）
Python3中级玩家:淘宝天猫商品搜索爬虫自动化工具(第一篇) 淘宝改字段,Bugfix,查看https://github.com/hunterhug/taobaoscrapy.git 由于Gith ...
- spring 第一篇（1-1）：让java开发变得更简单(下)转
spring 第一篇(1-1):让java开发变得更简单(下) 这个波主虽然只发了几篇,但是写的很好 上面一篇文章写的很好,其中提及到了Spring的jdbcTemplate,templet方式我之前 ...
- （转） 史上最简单的 SpringCloud 教程 | 第一篇： 服务的注册与发现（Eureka）
一.spring cloud简介 spring cloud 为开发人员提供了快速构建分布式系统的一些工具,包括配置管理.服务发现.断路器.路由.微代理.事件总线.全局锁.决策竞选.分布式会话等等.它运 ...
- Golang学习-第一篇 Golang的简单介绍及Windows环境下安装、部署
序言 这是本人博客园第一篇文章,写的不到位之处,希望各位看客们谅解. 本人一直从事.NET的开发工作,最近在学习Golang,所以想着之前学习的过程中都没怎么好好的将学习过程记录下来.深感惋惜! 现在 ...
- redis 一百二十篇（简单介绍）之第一篇
前言 总结自己的redis,日常使用不是特别频繁,所以比较基础. 开篇 redis 是无关系型数据库,因为其实内存数据库,所以常常和他的竞争对手memcached对比,因为两者原理基础相似,存储方式也 ...
- Python爬虫小白入门（四）PhatomJS+Selenium第一篇
一.前言 在上一篇博文中,我们的爬虫面临着一个问题,在爬取Unsplash网站的时候,由于网站是下拉刷新,并没有分页.所以不能够通过页码获取页面的url来分别发送网络请求.我也尝试了其他方式,比如下拉 ...
- Three.js 第一篇：绘制一个静态的3D球体
第一篇就画一个球体吧 首先我们知道Three.js其实是一个3D的JS引擎,其中的强大之处就在于这个JS框架并不是依托于JQUERY来写的.那么,我们在写这一篇绘制3D球体的文章的时候,应该注意哪些地 ...
随机推荐
- 〇——什么是SHELL
在这段时间里中我们了解一下SHELL编程. 什么是shell shell是Linux的命令解释器,用于解释用户对操作系统的操作. 用shell解释的Linux命令有很多,可以通过cat/etc/she ...
- 用递归将嵌套的JSON对象遍历出来，转为二维数组 或一维数组
var map = new Array();//二维数组 var map2 = new Array();//一维数组 for (var i = 0; i < e.Data.length; i++ ...
- vi编辑器的快捷键汇总
光标控制命令 本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群: 281442983 (点击链接加入群:http://jq.qq.com/?_wv=1027& ...
- bzoj5099 [POI2018]Pionek 双指针
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=5099 题解 这道题做法似乎挺单一的. (一开始想了个假做法 向量和的长度等于所有向量在其方向上 ...
- pymongo操作mongo数据库的查操作
一: 数据结构 { "_id" : ObjectId("5de8a5b748a75a8d48b72bdc"), ", ", ", ...
- python-类对象的比较
#类对象的比较 class Person: def __init__(self,age,height): self.age=age self.height=height def __eq__(self ...
- Jdbc连接数据库基本步骤详解_java - JAVA
文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 Jdbc连接数据库的基本步骤,供大家参考,具体内容如下 package demo.jdbc; import java.s ...
- MySQL数据库3分组与单表、多表查询
目录 一.表操作的补充 1.1null 和 not null 1.2使用not null的时候 二.单表的操作(import) 2.1分组 2.1.1聚合函数 2.1.2group by 2.1.3h ...
- React Native 中 跨页面间通信解决方案之 react-native-event-bus
https://github.com/crazycodeboy/react-native-event-bus 用法: A页面和B页面中都有相同的列表,点击B页面中的收藏按钮,A页面会跟着更新 impo ...
- spring mvc 数据校验（bean实体注解实现）
spring mvc 数据校验 1.添加个jar (jar与一版本会冲突) <dependency> <groupId>com.fasterxml</groupId> ...