【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.展示热 ...
随机推荐
- System and method for parallel execution of memory transactions using multiple memory models, including SSO, TSO, PSO and RMO
A data processor supports the use of multiple memory models by computer programs. At a device extern ...
- ARM-Linux （临时，正式） 建立页表的比较【转】
转自:http://blog.csdn.net/edwardlulinux/article/details/38967521 版权声明:本文为博主原创文章,未经博主允许不得转载. 很久没有写博客了 ...
- Xcode升级到7之后 发现速度超级慢
Xcode升级到7之后 发现速度超级慢 转自:http://www.jianshu.com/p/608803eb1e12 解决方法,慢google了一下是由于插件造成饿,于是乎将Alcatraz安装的 ...
- 1.tornado实现高并发爬虫
from pyquery import PyQuery as pq from tornado import ioloop, gen, httpclient, queues from urllib.pa ...
- Selenium2+python自动化45-18种定位方法（find_elements）【转载】
前言 江湖传言,武林中流传八种定位,其中xpath是宝刀屠龙,css是倚天剑. 除了这八种,其实还有十种定位方法,眼看就快失传了,今天小编让失传已久的定位方法重出江湖! 一.十八种定位方法 前八种是大 ...
- dict的setdefault（学习bottle源代码）
在bottle的源代码中,看到如下一段话: sys.modules.setdefault('bottle', sys.modules['__main__']) 这段话,实际上就是dict类型的setd ...
- pipreqs------查找python项目依赖并生成requirements.txt
项目开发的时候,总是要搭建和部署环境,这时,就需要一个python第三方包的list,一般叫做requirements.txt.如果项目使用virtualenv环境,直接使用pip freeze即可, ...
- Cannot open include file: 'libxml/xpath.h': No such file or directory
在搭建scrapy爬虫框架时,通过pip安装lxml遇到了这个问题,我是用32位的windows搭建爬虫框架,python版本是2.7.12, 解决方案如下: 原因: 在网上各种找原因,有大神是说没安 ...
- ubuntu下执行ulimit返回“不允许的操作”，问题解决思路
在ubuntu下执行ulimit,希望修改允许的最大打开文件数,但返回“不允许的操作”. 使用ulimit -a查看当前配置 core file size (blocks, -c) 0 data se ...
- pycurl mac 安装报错Curl is configured to use SSL,
1.使用安装第三方插件的方式安装pycurl:pip3 install pycurl 报错提示如下: Curl is configured to use SSL, but we have not be ...