js实现图形报表 ECharts插件

ECharts是一个很强大的插件可以实现很多强大的图形报表功能

下图是部分官方实例

使用方法也是非常简单

首先打开插件的官方网站

http://echarts.baidu.com/echarts2/doc/example.html

可以看到顶上有一个文档点开里面的观测手册可以看到里面的使用方法一下简单的试列

首先我下载的是echarts-2.2.7版本解压之后得到一个echarts-2.2.7文件夹

下面是代码

[html] view plaincopy

<!DOCTYPE html>
<html>
<head>
<title>图形报表</title>
</head>
<body>
<div id="main" style="height:400px;"></div>
<script src="echarts-2.2.7/build/dist/echarts.js"></script>
<script type="text/javascript">
//配置路径
require.config({
paths: {
echarts: 'echarts-2.2.7/build/dist'
}
});
//开始使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
</html>

效果

js实现图形报表 ECharts插件相关推荐

体检管理系统——图形报表ECharts
ECharts缩写来自Enterprise Charts,商业级数据图表,是百度的一个开源的使用 JavaScript实现的数据可视化工具,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览 ...
百度ECharts图形报表的介绍以及应用案例理解
图形报表ECharts 一.Echarts简介 ECharts缩写来自Enterprise Charts,商业级数据图表,是apache的一个开源的使用 JavaScript实现的数据可视化工具,可以 ...
java+ElementUI前后端分离旅游项目第七天权限管理和图形报表
权限控制.图形报表 1:掌握Spring Security实现认证的过程 2:掌握Spring Security实现授权的过程 3:了解Echarts 4:掌握Echarts实现会员数量折线图的实现过 ...
echarts图形报表缓存问题(option数据缓存)
这几天我在工作中用到了echarts开发报表.每次查询出来的数据都是新的,但是echart展现的图形报表却还是之前的数据.网上找了搜索了很多次也没能解决,后面加了技术群才解决的. 我开始已经确定是报表 ...
SmartBi各类图形及其echarts的js代码
SmartBi各类图形及其echarts的js代码一:柱图 1:普通柱图 {"color": ["#62a9ff"],"grid": {& ...
Highcharts实现图形报表（我主要实现javaweb开发的图形报表）
官网网址:https://www.hcharts.cn/ 中文版的(参考起来方便,你懂的.):http://www.mamicode.com/info-detail-446038.html 网上已经有 ...
java报表技术-图形报表
目录 JFreechart 简介入门案例 Highcharts 简介下载安装入门案例准备页面统计各部门人数(柱状图) 月份入职人数统计(折线图) 员工地方来源统计(可下钻的饼状图) Echa ...
基于java的ECharts插件使用
基于java的ECharts插件使用该文章主要适合ECharts入门级别,主要介绍的是圆饼图,柱形图,树形关系图,更多图形可以到官方网站进行查看学习链接: ECharts. 效果图展示圆饼图柱形 ...
基于jquery框架，用gvChart处理后台数据制作图形报表
首先,介绍下gvChart: gvChart是一个利用Google Chart Tools来创建交互式图表(Charts)的jQuery插件.可创建的图表类型有Area.Line.Bar.Column ...

js实现图形报表 ECharts插件

js实现图形报表 ECharts插件相关推荐

最新文章

热门文章