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文档,功夫不负有心人,终于解决了文字重叠展示不全等问题. 废话不多说 ...
随机推荐
- NBUT 1225 NEW RDSP MODE I 2010辽宁省赛
Time limit 1000 ms Memory limit 131072 kB Little A has became fascinated with the game Dota recent ...
- IPM
#if 0 void xyp2ipmp(cv::Mat& xyp, cv::Mat& ipmp, cv::Mat& xylim, Size& sz){ //xylimi ...
- [LeetCode&Python] Problem 832. Flipping an Image
Given a binary matrix A, we want to flip the image horizontally, then invert it, and return the resu ...
- HDU - 2475：Box（splay维护森林）
There are N boxes on the ground, which are labeled by numbers from 1 to N. The boxes are magical, th ...
- Linux系统部署Web项目
首先,需要有java环境和tomcat服务器,至于这个怎么安装,可以参考:云服务器 java+tomcat 部署与配置 项目部署 有两个大步骤: Step1 将已经写好的web项目打包成war包,在I ...
- 将基于 .NET Framework 的 WPF 项目迁移到基于 .NET Core 3
在 Connect(); 2018 大会上,微软发布了 .NET Core 3 Preview,以及基于 .NET Core 3 的 WPF:同时还发布了 Visual Studio 2019 预览版 ...
- Cocos2d-x 2.2.3 使用NDK配置编译环境
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/wwj_748/article/details/30072379 Cocos2d-x 2.2.3 使用 ...
- nyoj 光棍的yy
655-光棍的yy 内存限制:64MB 时间限制:1000ms Special Judge: Noaccepted:2 submit:3 题目描述: yy经常遇见一个奇怪的事情,每当他看时间的时候总会 ...
- Vuejs项目的Webpack2构建优化
最近在做的项目因为相对较大(打包有100多个chunk),在build构建的时候速度一直上不去,甚是烦恼.由于用的是vue-cli的webpack2模板,一开始并没有想着要对其进行优化,一直觉得是we ...
- java 环境变量与安装目录
JDK安装完成后有如下文件夹 bin:存放JDK的各种工具命令,如javac.java等命令. jre:运行java程序所必须的JRE环境 lib:JDK工具命令的实际执行程序,如tools.jar中 ...