易捷框架之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),中文名称为印制电路板,又称印刷线路板,是重要的电子部件,是电子元器件的支撑体,是电子元器件电气连接的载体.由于它是采用电子印刷 ...
随机推荐
- BZOJ2131 免费的馅饼【线段树优化DP】
Input 第一行是用空格隔开的二个正整数,分别给出了舞台的宽度W(1到10^8之间)和馅饼的个数n(1到10^5). 接下来n行,每一行给出了一块馅饼的信息.由三个正整数组成,分别表示了每个馅饼落到 ...
- BZOJ1816 Cqoi2010 扑克牌【二分答案】
BZOJ1816 Cqoi2010 扑克牌 Description 你有n种牌,第i种牌的数目为ci.另外有一种特殊的牌:joker,它的数目是m.你可以用每种牌各一张来组成一套牌,也可以用一张jok ...
- Luogu1155 NOIP2008 双栈排序 【二分图染色】【模拟】
Luogu1155 NOIP2008 双栈排序 题目描述 Tom最近在研究一个有趣的排序问题.如图所示,通过 2个栈 S1 和 S2 ,Tom希望借助以下 44 种操作实现将输入序列升序排序. 操作 ...
- CaptureMouse/CaptureStylus 可能会失败
在 WPF 中,如果我们要做拖动效果,通常会调用一下 CaptureMouse/CaptureStylus 以便当鼠标或手指离开控件的时候依然能够响应 Move 和 Up 事件.不知有没有注意到这两个 ...
- 关于MySQL 通用查询日志和慢查询日志分析
MySQL中的日志包括:错误日志.二进制日志.通用查询日志.慢查询日志等等.这里主要介绍下比较常用的两个功能:通用查询日志和慢查询日志. 1)通用查询日志:记录建立的客户端连接和执行的语句. 2)慢查 ...
- riotjs 简单使用&&browserify 构建
项目地址: http://riotjs.com/ 备注: 为了简单使用了 browserify 进行构建 1. 项目结构 ├── app.css ├── gulpfile.js ├── index.h ...
- webpack extract-text-webpack-plugin
备注: 提炼上面引用的css 1. 插件配置 const path = require("path"); const extracttextplugin = require( ...
- laravel的学习历程
首要,表明态度:PHP是世界上最佳的言语.(梗) laravel说是php将来,形似不假. 最开端触摸的是thinkphp,格外喜爱她的分层,文档格外完全,阅读起来没任何妨碍. 比较laravel,我 ...
- ‘close’ was not declared in this scope(转)
‘close’ was not declared in this scope 没有包含头文件 unistd.h 造成的. 加上' #include <unistd.h>
- Java API 操作 Mongodb
本次测试环境使用一台ip为 192.168.2.23 的虚拟机 一.依赖 <dependency> <groupId>org.mongodb</groupId> & ...