易捷框架之EChart 的使用
需要用到百度的报表控件 ,总结如下:
1,先引入开发包,以及主题包:
<%@ include file="./common/echarts_header.jsp"%>
2,普通初始化图表,通过调用开发包
eCharts0 = ec;
myChart0 = eCharts0.init(document
.getElementById('share'),
'default');
myChart0.showLoading({
text : "图表数据正在努力加载..."
}
require([ 'echarts','echarts/chart/pie', // 使用饼图就加载pie模块,按需加载], DrawEChart0 //异步加载的回调函数绘制图表
);
3,设置option属性
//定义图表options
var options0 = {
title : {
text : "共享分布统计",
x : "center"
},
tooltip : {
show : false,
trigger : 'item',
formatter : "{a} <br/>{b} : {c} ({d}%)"
},
legend : {
orient : 'vertical',
x : 'left',
y : 'top'
},
toolbox : {
show : true },
calculable : false,
series : [ {
name : '共享类型',
type : 'pie',
radius : '60%',
center : [ '51%', '55%' ],
itemStyle : {
normal : {
label : {
position : 'outer',
formatter : function(
params) {
return params.name
+ ":"
+ params.value
+ "类("
+ (params.percent - 0)
.toFixed(0)
+ '%)'
}
},
labelLine : {
show : true
}
},
emphasis : {
label : {
show : true,
position : 'inner',
formatter : "{b}:{c}\n{d}%"
}
} },
} ]
}; }
其中:title:表示标题,
tooltip:提示框,
legend图例,
calculable可设置是否拖拽,
series设置数据(data类型也为数组类型)
到这就算是基本完事。。。。。
剩下的优化自行百度。。。。
易捷框架之EChart 的使用的更多相关文章
- 【FishFX】花式撩骚,打造TypeScript易用框架。
· 栗子入手 假设有以下foo数组,数组中每个对象都拥有id,name两个属性,现在需要查找id > 0的对象数量. const foo: Array<{ id: number, name ...
- 易捷支付完整业务流程的lr脚本编写
业务流程:1.注册2.登录3.重置支付密码4.下订单5.支付订单6.查看订单列表 通用md5.h代码如下: #ifndef MD5_H #define MD5_H #ifdef __alpha typ ...
- 如何编写轻量级 CSS 框架
Github 地址: https://github.com/nzbin/snack Demo 演示: https://nzbin.github.io/snack/ 前言 这篇文章我已经酝酿了半年之久, ...
- 详细说明php的4中开源框架(TP,CI,Laravel,Yii)
ThinkPHP简称TP,TP借鉴了Java思想,基于PHP5,充分利用了PHP5的特性,部署简单只需要一个入口文件,一起搞定,简单高效.中文文档齐全,入门超级简单.自带模板引擎,具有独特的数据验证和 ...
- 学习abp vnext框架到精简到我的Vop框架
学习目标 框架特点 基于.NET 5平台开发 模块化系统 极少依赖 极易扩展 ....... 框架目的 学习.NET 5平台 学习abp vnext 上图大部分功能已经实现,多数是参考(copy)ab ...
- 中国人工智能AI框架自主研发
中国人工智能AI框架自主研发 中国AI界争相构建AI开源框架的背后,技术和业务层面的考量因素当然重要,但也不应忽视国家层面的政策支持.对于AI基础设施的建设,中国政府在<新一代人工智能发展规划& ...
- 如何在ie6/ie7/ie8中实现iframe背景透明
最近做了一个项目,涉及到ie8iframe背景透明的问题,做了老半天,才把它搞定的,现在把我的经历贴出来和大家分享: 众所周知的根据W3C CSS 2.1 规范规定,''''background-co ...
- OpenStack黄金十年:我与OpenStack的故事
导读:从2010年到2020年,OpenStack项目整整走过了十个春夏秋冬.不管是OpenStack基金会,还是积极参与OpenStack社区的厂商.企业乃至开发者,想必都有肺腑之言想对OpenSt ...
- 【PCB】扫盲总结
1.PCB是什么 PCB( Printed Circuit Board),中文名称为印制电路板,又称印刷线路板,是重要的电子部件,是电子元器件的支撑体,是电子元器件电气连接的载体.由于它是采用电子印刷 ...
随机推荐
- BZOJ1229 USACO2008 Nov toy 玩具 【三分+贪心】*
BZOJ1229 USACO2008 Nov toy 玩具 Description 玩具 [Chen Hu, 2006] Bessie的生日快到了, 她希望用D (1 <= D <= 10 ...
- openresty 使用 log_by_lua 发送日志到 syslog-ng
1. 安装 opm get p0pr0ck5/lua-resty-logger-socket 2. 使用 location lua_by_lua_block log_by_lu ...
- SVN增加文件后,文件无法自动包括在项目中的原因
当增加文件后,不仅要提交所增加的文件,而且要把项目文件一并提交.不然就会出现其他人虽然能够获取新文件,但是文件不能自动加载到项目中的情况.
- bzoj 4552 [Tjoi2016&Heoi2016]排序——二分答案
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4552 二分答案,把 >= mid 的设成1.< mid 的设成0,之后排序就变成 ...
- bzoj 2395 [Balkan 2011]Timeismoney——最小乘积生成树
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2395 如果把 \( \sum t \) 作为 x 坐标,\( \sum c \) 作为 y ...
- 远程复制数据免登录 rsync 和 scp
一.备用机上(用于存放备份的机器) 和 目标机上(需要备份的服务器 ,如 246) 都需要安装 : yum install -y rsync 二.备用机上运行命令: -t rsa Generat ...
- Ubuntu下手动安装Nvidia显卡驱动
1. 下载最新版的nVidia驱动. http://www.nvidia.com/page/drivers.html 2.编辑blacklist.conf. sudo gedit /etc/modpr ...
- Eclipse导入工程后,XDoclet错误:Missing library: xdoclet-1.2.1.jar. Select the home directory for XDoclet
这几天在使用Open Health Tools的OpenXDS工程,在导入Eclipse后,出现下面的错误: 遂google之,在网上找到了答案.答案网址为http://blog.v-s-f.co.u ...
- C# WMP 视频播放
1. C#播放器控件常用的方法介绍 右击工具箱->选择项(I)... -> 显示"选择工具箱项" -> COM组件 -> Windows Media Pla ...
- 自增自减 a++,++a,a--,--a
1.自增(++)自减(--)运算符是一种特殊的算术运算符,在算术运算符中需要两个操作数来进行运算,而自增自减运算符是一个操作数. 实例: public class selfAddMinus{ publ ...