【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.展示热 ...
随机推荐
- DOM常用对象
一.select对象 HEML中的下拉列表 属性: 1.options 获得当前select下所有option 2.options[i] 获得当前select下i位置的option 3.selecte ...
- 创建ipadWEB应用程序到主屏幕
1.webkit内核中的一些私有的meta标签,这些 meta标签在开发webapp时起到非常重要的作用 (1)<meta content="width=device-width; i ...
- poj1379 Run Away
传送门:http://poj.org/problem?id=1379 [题解] 题目大意:求(0,0)->(X,Y)内的一个点,使得这个点到给定的n个点的最小距离最大. 模拟退火 一开始可以先把 ...
- 51nod 扔盘子
题目传送门 这道题一开始写了n方的算法 果不其然 它T了 所以就想想o(n)的算法 写不出来 就像sbzhq学习了一下 这道题啊 要维护一下从深度1到n每一段的最小值以及他的位置 然后就暴力搞一搞就o ...
- [bzoj1588][HNOI2002]营业额统计——splay
题目大意 你被要求编写一个数据结构,支援以下操作,操作在线. 插入一个元素 查询一个元素与之前插入元素的最小差值. 题解 一道模板题.我是写了一个pre和succ函数水过的.1A,比较高兴. 代码 # ...
- 阻塞DOM
DOM是解析后的HTML. 这些阻塞因素我们可以叫做 阻塞渲染的资源 ,例如 HTML.CSS(也包括web font)和 JavaScript. 请注意,图像是不会阻塞渲染的 ,所以如果有图像落在蓝 ...
- JS形参与实参问题
JavaScript的参数传递也都是采用值传递的方式进行传值. (1) 通过实参调用函数的时候,传入函数里的是实参的副本而不是实参,因此在函数里面修改参数值并不会对实参造成影响. 例如:将全局 ...
- 内置函数补充，__str__方法、__del__方法 和 __call__方法和元祖
一 .内置函数补充 1.isinstance函数: isinstance(obj,cls)检查obj是否是类 cls 的对象 使用该函数来判断一个函数的类型 2. issubclass(sub, su ...
- 解决:centos7.3 tomcat7启动巨慢问题
目前公司大部分服务器操作系统还是centos6.5,tomcat用的是7,平时基本上没什么问题,启动也比较快,但是,最近有部分项目服务器更新至centos7.3 ,有些机器启动tomcat的时候巨慢无 ...
- apt-get常用命令及工作原理
https://blog.csdn.net/mosquito_zm/article/details/63684608