【Echarts】百度Echarts的使用入门+两个简单的小例子+心得
Echarts对于展示结果，有一个很好的表达方式。
1.首先，在官网将js下载到本地，引用到页面上
这里是在开发环境，所以下载最后源代码这个
managerResult.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="description" content="">
<meta name="keywords" content="">
<title>Echarts图表统计结果</title>
<link rel="stylesheet" type="text/css" href="../quest/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<div class="row">
<input type="hidden" name='allNum' value="${allNum}"/>
<input type="hidden" name='listNum' value="${listNum}"/>
<textarea style="display: none;" name="condition">${condition}</textarea>
<textarea style="display: none;" name="questOptions">${questOptions}</textarea>
<div id="mainPie" style="width: 800px;height:400px;"></div>
<div id="mainBar" style="width: 1000px;height:600px;"></div>
</div>
</div>
</body>
<script type="text/javascript" src="/resources/bootstrap-3.3.5-dist/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/resources/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src= "../quest/js/echarts.js"></script>
<script type="text/javascript" src= "../quest/js/managerResult.js"></script>
</html>
页面中分别为 柱状图和 饼状图 放置了两个div作为容器
2.managerResult.js
步骤就3步
1》var myChartBar = echarts.init(document.getElementById('mainBar')); 获取容器
2》配置option
3》myChartBar.setOption(optionBar); 初始化图表进行展示
$(document).ready(function(){
//获取饼状图容器 并 初始化echarts实例
var myChartPie = echarts.init(document.getElementById('mainPie'));
//饼状图 配置
var optionPie = {
title : {//标题
text: '问卷统计调查结果',
subtext: '多条件组合',
x:'center'
},
tooltip : {//光标在上显示信息
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)",
backgroundColor : '#986c11',
},
toolbox: {//工具按钮
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel']
},
restore : {show: true},
saveAsImage : {show: true}
}
},
legend: {//图例
orient: 'vertical',
left: 'left' ,
data: ['统计项','未统计项']
},
series : [//系列列表 图表类型+数据源
{
name: '问卷统计',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'统计项'},
{value:310, name:'未统计项'}
],
itemStyle: {
emphasis: {
shadowBlur: 100,
shadowOffsetX: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
normal: {
show: true,
position: 'outside',
formatter :'{a}\n{b} : {c} ({d}%)',
textStyle:{
fontSize : 2,
fontStyle : 'normal'
}
},
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChartPie.setOption(optionPie);
//获取饼状图容器 并 初始化echarts实例
var myChartBar = echarts.init(document.getElementById('mainBar'));
//柱状图配置
var optionBar = {
title:{
show : true,
text : '多条件分量统计',
x:'center'
},
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
grid: {//网格配置
show : true,
left: '3%',
right: '15%',
bottom: '3%',
shadowBlur : 10,
containLabel: true
},
xAxis : [
{
name : '筛选条件类目',
type : 'category',
data : [
{
value: '周一',
textStyle: {
fontSize: 4,
baseline : 'middle',
}
}, 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
},
axisLabel :{
rotate : 50
}
}
],
yAxis : [
{
name : '统计人数',
type : 'value'
}
],
series : [
{
name:'问卷人数',
type:'bar',
barWidth: '30%',
label: {
normal: {
show: true,
position: 'top',
formatter :'{b} : {c}',
textStyle:{
fontSize : 2,
fontStyle : 'normal'
}
}
},
data:[10, 52, 200, 334, 390, 330, 220]
}
]
};
myChartBar.setOption(optionBar);
});
**********************************************************************如果想动态从后台获取数据的话，往下看***************************************************************
***********************************************************************************************************************************************************************************
先看看js中，ajax从后台获取的数据，赋值给图表的data即可
4》带有ajax的Echarts 实例化过程
var condition = $("textarea[name='condition']").text();
var questOptions = $("textarea[name='questOptions']").text();
//全局变量，便于给图表赋值
var XData;//X轴类目
var VData;//实际数据
//ajax从后台获取数据给全局变量
$.ajax({url:"/questionnaire/barDate.jhtml",
type:"get",
async:false,
traditional:false,
data:{questOptions:questOptions,condition:condition},
success:function(data){
//后台拼接组装好的json数据传给前台这里，直接转化一下根据键名获取键值，赋值给全局变量
XData = JSON.parse(data).X;
VData = JSON.parse(data).V;
}
});
//获取饼状图容器 并 初始化echarts实例
var myChartBar = echarts.init(document.getElementById('mainBar'));
//柱状图配置
var optionBar = {
title:{
show : true,
text : '多条件分量统计',
x:'center'
},
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
grid: {//网格配置
show : true,
left: '3%',
right: '15%',
bottom: '15%',
shadowBlur : 10,
containLabel: true
},
xAxis : [
{
name : '筛选条件类目',
type : 'category',
data : XData,
axisTick: {
alignWithLabel: true
},
axisLabel :{
rotate : 50
}
}
],
yAxis : [
{
name : '统计人数',
type : 'value'
}
],
series : [
{
name:'问卷人数',
type:'bar',
barWidth: '30%',
label: {
normal: {
show: true,
position: 'top',
formatter :'{b} : {c}',
textStyle:{
fontSize : 2,
fontStyle : 'normal'
}
}
},
data:VData
}
]
};
myChartBar.setOption(optionBar);
5》后台部分代码【只看json数据 组装部分】
@RequestMapping(value= "/barDate" ,produces = "text/html;charset=UTF-8")
@ResponseBody
public String barDate(HttpServletRequest request,String condition,String questOptions) throws UnsupportedEncodingException{ //勾选项
questOptions = questOptions.replaceAll("category=", "");
String [] questArr = questOptions.equals("")? new String[0]:questOptions.split(";");
//填空题
Map<String,Object> mapList = doMap(condition);
System.out.println("勾选项："+questArr); JSONObject jsonObject = new JSONObject();
JSONArray array1 = new JSONArray();
JSONArray array2 = new JSONArray();
Map<String,Object> newList = new HashMap<String, Object>();
//填空题
mapList.forEach((key,value)->{
boolean flag = false;
if(value != null){
if(key.contains("Arr")){
String newKey = key.substring(0,key.lastIndexOf("Arr"));
if(key.contains("age")){
Date[] date = (Date[]) value;
if(date[0] != null && date[1] != null){
array1.add("年龄段:"+date[0]+"-"+date[1]);
flag = true;
}else if(date[0] != null || date[1] != null){
array1.add("年龄:"+date[0] == null ? date[1] : date[0]);
flag = true;
}
}else{
Double [] v = (Double[]) value;
if(v[0] != null && v[1] != null){
array1.add(newKey+"段:"+v[0]+"-"+v[1]);
flag = true;
}else if(v[0] != null || v[1] != null){
array1.add(newKey+":"+v[0] == null ? v[1] : v[0]);
flag = true;
}
}
}
if(key.contains("userName")){
array1.add("姓名:"+value);
flag = true;
}
if(key.contains("sex")){
array1.add("性别:"+value);
flag = true;
}
if(key.contains("memopause")){
array1.add("是否绝经:"+value);
flag = true;
} if(flag){
newList.put(key, value);
List<Questionnaire> list = questionnaireService.findQuests(newList, new String[0]);
newList.clear();
array2.add(list.size());
flag = false;
} }
});
//获取资源文件中键值对
ResourceBundle bundle = ResourceBundle.getBundle("quest"); if(questArr.length >0){
for (String string : questArr) {
array1.add(bundle.getString(string));
List<Questionnaire> list = questionnaireService.findQuests(newList, string);
array2.add(list.size());
}
}
jsonObject.put("X", array1);//键名为 X
jsonObject.put("V", array2);//键名为 V return jsonObject.toString();
}
JSONArray array1 = new JSONArray();用来存储X轴类目名
JSONArray array2 = new JSONArray();用来存储实际一一对应的数据
6》看看图示的结果
心得：
只要根据官方提供的dome和API，就能根据你想要在Echarst上展示什么东西，就认真的在API里面找，一定可以查找到！！认真观看API！！！
【Echarts】百度Echarts的使用入门+两个简单的小例子+心得的更多相关文章
- 【Pthon入门学习】多级菜单小例子
menu_list = { '北京':{ '昌平':{ '回龙观':{ '和谐家园':{}, '矩阵小区':{}, '北店家园':{} }, '沙河':{ '北街家园1区':{}, '北街家园2区': ...
- java入门---简介&简单输出小例子&开发前准备
Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计语言和Java平台的总称.由James Gosling和同事们共同研发,并在1995年正式推出.J ...
- dubbo入门和springboot集成dubbo小例子
从零开始搭建springboot-dubbo的例子 Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,以及 SOA 服务治理方案 一. Dubbo的简单介绍 1. ...
- WPF仿百度Echarts人口迁移图
GitHub地址:https://github.com/ptddqr/wpf-echarts-map/tree/master 关于大名鼎鼎的百度Echarts我就不多说了 不了解的朋友直接看官方的例子 ...
- C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计
在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界 ...
- 数据视化Echarts+百度地图API实现市县区级下钻
开始 这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是 ...
- 使用百度Echarts制作力导向图
最近项目需求制作一个力导向图来展示企业的画像等关系信息,故想到了百度Echarts的关系图,在这使用Echarts3.0版本来实现.先上效果图,再看代吗 哎,本来想整个工程扔出来,发现好像没地方上传附 ...
- 百度echarts可以做什么
百度echarts可以做什么 一.总结 一句话总结:可视化做的很好,各种图都有.而且支持动态数据. 二.百度eCharts体验 前言 从昨天开始给项目里添加一些图表对比功能,上一个项目里使用的是Hig ...
- react项目结合echarts,百度地图实现热力图
一.最近在一个react项目(antd pro)中需要展示一个热力地图.需求是: 1.热力地图可缩放: 2.鼠标点击可以展示该点地理坐标,及热力值. 3.初始化时候自适应展示所有的热力点. 4.展示热 ...
随机推荐
- 重新认识REST
大家对REST的认识? 谈到REST大家的第一印象就是通过http协议的GET,POST,DELETE,PUT方法实现对url资源的CRUD(创建.读取.更新和删除)操作.比如http://www.a ...
- 类的 propert，classmethod，ataticmethod 方法 与 多态
一 .property 将一个类的函数定义成特性以后,对象再去使用的时候obj.name,根本无法察觉自己的name是执行了一个函数 然后计算出来的,这种特性的使用方式遵循了统一访问的原则 egon. ...
- linux下检测可用串口并使用minicom打开
目前使用minicom作为串口软件.但使用过程中,有一点感觉不方便的地方,就是我需要使用多个串口,当使用的不是串口0时,就要手动修改minicom的配置. 于是考虑实现脚本,自动列出当前串口,选择后调 ...
- 【bzoj3227】红黑树
神TM的红黑树,其实本质上应该还是一种树dp的问题…… 一开始想了一个比较裸的树dp,后来发现还有更强的做法. 每个前端黑节点是看作一个物品,然后这就是很典型的树形dp的问题. 不过可以这么考虑,考虑 ...
- ipad/iphone中的前端调试
需要在ipad上调试代码, 经过一番搜索(多在google搜到的), 稍微整理下 : ). 1. Settings -> Safari -> Advanced/Developer -> ...
- 搜索引擎--范例：新浪微博API获取最近的微博--statuses/public_timeline
新浪微博平台跟新浪SAE一样,都是一个字“坑”,好了,不再吐槽,直入主题 1:直接登录新浪,添加网站,就直接添加我们在新浪SAE上创建的应用即可 2:填写信息,ICP备案信息号填写sinaapp.co ...
- Selenium2+python自动化58-读取Excel数据（xlrd）【转载】
前言 当登录的账号有多个的时候,我们一般用excel存放测试数据,本节课介绍,python读取excel方法,并保存为字典格式. 一.环境准备 1.先安装xlrd模块,打开cmd,输入pip inst ...
- JAVA集合操作的利器:CollectionUtils
使用 CollectionUtils 中四个方法之一执行集合操作.这四种分别是 union(),intersection();disjunction(); subtract(); 下列例子就是演示了如 ...
- 文件的上传（TCP）
问题描述:将本地文件上传(需将文件名一起上传)至指定服务器,服务器将上传的文件保存至指定路径下并文件名添加前缀 "Downlod_原文件名". 思路: 客户端需要一个输入流来读取本 ...
- 34、Django实战第34天：退出登录
编辑users.view.spy ... from django.contrib.auth import authenticate, login, logout from django.http im ...