ECharts之饼图和柱形图demo
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>渠道分析</title>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/jquery-2.2.4.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM 饼形图 -->
<div id="main" style="width: 600px; height: 400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title : {
text : '充值渠道分析',
x : 'center'
},
tooltip : {
trigger : 'item',
formatter : "{a} <br />{b} : {c} ({d}%)"
},
legend : {
orient : 'vertical',
x : 'left',
data : []
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [ {
name : '',
type : 'pie',
radius : '55%',
center : [ '50%', '60%' ],
data : []
} ]
});
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var names = []; //类别数组
var nums = []; //数量数组
var array = [];
$.ajax({
type : "post",
url : "/api/payment/showEChartsData",
data : {},
cache : false, //禁用缓存
dataType : "json",
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
for (var i = 0; i < result.length; i++) {
names.push(result[i].channelName); //挨个取出类别并填入类别数组
}
for (var i = 0; i < result.length; i++) {
nums.push(result[i].num); //挨个取出销量并填入销量数组
}
for (var i = 0; i < result.length; i++) {
var map ={};
map.name = result[i].channelName;
map.value = result[i].num;
array[i]=map;
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
legend : {
data : names
},
series : {
// 根据名字对应到相应的系列
name : ['数量'],
data : array
}
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>渠道分析</title>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/jquery-2.2.4.js"></script>
</head>
<body>
<div id="main" style="width: 600px; height: 400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
title : {
text : '充值渠道分析'
},
tooltip : {},
legend : {
data : [ '数量' ]
},
xAxis : {
data : []
},
yAxis : {},
series : [ {
name : '数量',
type : 'bar',
data : []
} ]
});
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var names = []; //类别数组（实际用来盛放X轴坐标值）
var nums = []; //销量数组（实际用来盛放Y坐标值）
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "/api/payment/showEChartsData", //请求发送到TestServlet处
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
for (var i = 0; i < result.length; i++) {
names.push(result[i].channelName); //挨个取出类别并填入类别数组
}
for (var i = 0; i < result.length; i++) {
nums.push(result[i].num); //挨个取出销量并填入销量数组
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis : {
data : names
},
series : [ {
// 根据名字对应到相应的系列
name : '数量',
data : nums
} ]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
</script>
</body>
</html>
ECharts之饼图和柱形图demo的更多相关文章
- echarts标准饼图(一)——基本配置demo
echarts标准饼图解读共分为四部分, 一.基本配置demo 二.标题(title)配置 三.提示框(tooltip)配置 四.图例(legend)配置 五.系列列表(series )配置 下面是一 ...
- ECharts 环形饼图 动态获取json数据
ECharts 环形饼图 动态获取json数据 效果图如下: 一.html部分 <div id="secondPieChart" style="width:100 ...
- echarts中饼图显示百分比
通过echarts制作饼图,需要通过鼠标移动到对应的扇形才能才看数值和百分比. 解决这个问题参考的是将鼠标移动到扇形上的显示方法: tooltip : { trigger: ' ...
- Qt+ECharts开发笔记（四）：ECharts的饼图介绍、基础使用和Qt封装百分比图Demo
前言 前一篇介绍了横向柱图图.本篇将介绍基础饼图使用,并将其封装一层Qt. 本篇的demo使用隐藏js代码的方式,实现了一个饼图的基本交互方式,并预留了Qt模块对外的基础接口. Demo演示 ...
- Echarts 使用asp.net +ashx+ajax 实现 饼图、柱形图后台交互
向上效果图 前端code /* * ------------------------------------------------------------------ * module-inform ...
- 关于echarts的一些基本使用demo
最近发现一个很好用的一个前端控件echarts,效果非常不错,兼容ie8+以上等主流浏览器.可以使用它制作报表,地图示意图等,可用其实现一系列强大的功能. 其基于html5 Canvas,是一个纯Ja ...
- echarts标准饼图解读(一)——提示框（tooltip）配置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- High-speed Charting Control--MFC绘制图表（折线图、饼图、柱形图）控件
原文地址:https://www.codeproject.com/articles/14075/high-speed-charting-control 本文翻译在CodeProject上的介绍(主要还 ...
- Echarts 解决饼图文字过长重叠的问题
之前在网上查找了很多关于解决饼图文字描述过长导致重叠的问题,找了很多一直没有一个合适的解决方案,最后自己只能花时间研究echarts文档,功夫不负有心人,终于解决了文字重叠展示不全等问题. 废话不多说 ...
随机推荐
- Ubuntu下安装、卸载notepad++
Ubuntu下的安装方法: sudo add-apt-repository ppa:notepadqq-team/notepadqq sudo apt-get update sudo apt-get ...
- 阿里云Linux CentOS 7 Docker部署使用gogs搭建自己的git服务器
一.前言 Git是目前优秀和流行的源代码管理工具.而GitHub是一个面向开源及私有软件项目的托管云平台,但开源免费,私有收费.而公司出于商业化等目的需要搭建自己的源代码托管服务器.通过网上了解Gog ...
- SWIFT中计算两个日期间隔多少小时
SWIFT中如何计算两个日期间隔多少个小时,其实几句代码就可以搞定了,Very Easy,在Playground内输入以下代码 var date1 = "2015-06-26 8:15:10 ...
- 《TensorFlow实战》读书笔记(完结)
1 TensorFlow基础 ---1.1TensorFlow概要 TensorFlow使用数据流图进行计算,一次编写,各处运行. ---1.2 TensorFlow编程模型简介 TensorFlow ...
- TensorBoard 实践 1
从新查看图的时候,删除旧的logs/下面的文件 tf.scalar_summary('loss',self.loss) AttributeError: 'module' object has no a ...
- Struts2访问ServletAPI的三种方式
web应用中需要访问的ServletAPI,通常只有HttpServletRequest,HttpSession,ServletContext三个,这三个接口分别代表jsp内置对象中的request, ...
- HDU 4638 树状数组 想法题
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4638 解题思路: 题意为询问一段区间里的数能组成多少段连续的数.先考虑从左往右一个数一个数添加,考虑当 ...
- 使用systemd严格保证启动顺序
需求: 服务B要在服务A之后启动,且由于存在强内在依赖关系,B必须在A完成初始化之后才能被启动. 解决方法: 首先使用systemd,service脚本需要配置服务B要after服务A. 其次,A服务 ...
- Javascript Array 方法整理
Javascript Array 方法整理 Javascript 数组相关方法 说明 大多数其它编程语言不允许改变数组大小,越界访问索引会报错,但是 javascript不会报错,不过不建议直接修改a ...
- VSCODE includePath 中使用系统中的变量
使用 ${env.ENVNAME} 这样只需要在 系统中加一个系统变量就可以. https://github.com/Microsoft/vscode-cpptools/issues/697