易捷框架之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),中文名称为印制电路板,又称印刷线路板,是重要的电子部件,是电子元器件的支撑体,是电子元器件电气连接的载体.由于它是采用电子印刷 ...
随机推荐
- POJ2728 Desert King 【最优比率生成树】
POJ2728 Desert King Description David the Great has just become the king of a desert country. To win ...
- JavaWeb向浏览器返回一个音频流
浏览器直接播放音频文件,1是直接访问一个html的音频文件,,2 是返回一个Java音频流给浏览器解析. 下面实现一个java的wav文件音频流,可以直接播放音频文件 package org.lib. ...
- piwik docker 安装
备注: 生产环境使用docker-compose 1. 安装docker && docker-compose 此处略过 2. 下载docker-compose 的文件 h ...
- “VT-x is not available. (VERR_VMX_NO_VMX)” in VirtualBox
Sometimes you can get “VT-x is not available. (VERR_VMX_NO_VMX)” error if you are trying to start x6 ...
- Nomad 了解
Introduction to Nomad Welcome to the intro guide to Nomad! This guide is the best place to start wit ...
- windows 2016 dockerfile 以及简单使用
Docker 引擎包含用于自动创建容器映像的工具. 尽管可以使用 docker commit 命令手动创建容器映像,然而采用自动映像创建过程可获得许多好处,其中包括: 将容器映像存储为代码. 可出于维 ...
- 怎么安装Docker CE 17( Centos 7)
Docker CE for Centos 7 yum install -y yum-utils device-mapper-persistent-data lvm2 yum-config-manage ...
- 常用 Git 命令使用教程
下面整理一下自己在开发过程中经常使用到的 Git 命令.使用 GUI 工具的同学,也可以对照起来看看. Git 配置 1. 在安装完成 Git 后,开始正式使用前,是需要有一些全局设置的,如用户名.邮 ...
- Request.UrlReferrer详解
使用前需要进行判断: if (Request != null && Request.UrlReferrer != null && Request.UrlReferrer ...
- 快速创建yii2 RESTful api的小记
1.复制backend的应用到同级目录,改名叫api 2.然后就是配置项修改,common和api目录下的 common下: bootstrap.php最后添加一行配置 api/config/main ...