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文档,功夫不负有心人,终于解决了文字重叠展示不全等问题. 废话不多说 ...
随机推荐
- Java Junit 基础笔记
Junit 1. 概念 JUnit是一个Java语言的单元测试框架. 单元测试:单元测试(英语:Unit Testing)又称为模块测试, 是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工 ...
- ZOJ 17届校赛 Knuth-Morris-Pratt Algorithm( 水题)
In computer science, the Knuth-Morris-Pratt string searching algorithm (or KMP algorithm) searches f ...
- 如何学php少走弯路
我是自学php,而且是非计算机专业,算半路出家的.(工作了一段时间又自学编程) 1.一本好书至关重要.如果这本书的知识非常深入,那么还是不要看了.对初学者来说只能是打击.因为很多东西都看不懂.一本知识 ...
- GPA
原题: GPA Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
- MyEclipse junit测试问题initializationError
问题的情况如上. 问题的解决方法居然是:选中函数的整行,而不是只选中函数名,如下图选中运行junit测试. TestMySQL.testDriverMannager1Unrooted Testsini ...
- Spring的事件发布机制
一:Spring的事件发布 ApplicationContext提供了针对Bean的事件传播功能,其中的主角是publishEvent()方法,通过这个方法可以将事件通知给系统内的监听器(需实现App ...
- C#/.NET 使用 CommandLineParser 来标准化地解析命令行
CommandLineParser 是一款用于解析命令行参数的 NuGet 包.你只需要关注你的业务,而命令行解析只需要极少量的配置代码. 本文将介绍如何使用 CommandLineParser 高效 ...
- k8s dockerk个人学习(2)
部署nginx和应用 部署nginx时我们需要把nginx的配置文件那出来便于以后修改nginx的配置,放置nginx配置文件时我们用k8s的pv的存储方式来存放这些文件 1.安装nfs服务,在kub ...
- makefile，让编译更简单
陈皓 (CSDN) 概述—— 什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Windows的IDE都为你做了这个工作,但我觉得要作一个好的和professional的 ...
- hasura graphql-engine v1.0.0-alpha26 版本新功能
hasura 发布了graphql-engine v1.0.0-alpha26 版本,有一些破坏的变动,以及方便的新特性 破坏性变动 order_by 从 order_by: id_asc 为 ord ...