js实现图形报表 ECharts插件
来源:互联网 发布:企业数据架构 编辑:程序博客网 时间:2024/06/15 07:59
ECharts是一个很强大的插件 可以实现很多强大的图形报表功能
下图是部分官方实例
使用方法也是非常简单
首先打开插件的官方网站
http://echarts.baidu.com/echarts2/doc/example.html
可以看到顶上有一个文档 点开里面的观测手册可以看到里面的使用方法 一下简单的试列
首先我下载的是echarts-2.2.7版本解压之后得到一个echarts-2.2.7文件夹
下面是代码
<!DOCTYPE html><html><head><title>图形报表</title></head><body><!-- 建立一个放图的div --> <div id="main" style="height:400px;"></div> <!-- 引入JS文件 --> <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>效果
0 0
- js实现图形报表 ECharts插件
- echarts报表javascript插件简介
- ASP.NET+JQuery+.Ashx实现+百度Echarts 实现动态柱状图数据图形报表的统计
- 解决echarts图形报表缓存问题
- [修改]js图形报表
- [修改]js图形报表
- js图形报表
- 报表绘图插件echarts使用教程
- JFreeChart实现图形报表
- C#+JQuery+.Ashx+百度Echarts 实现全国省市地图和饼状图动态数据图形报表的统计
- 百度Echarts 全国省市地图 动态数据图形报表
- echarts图形报表缓存问题(option数据缓存)
- jquery 图形报表插件jqplot 柱状图
- 十分给力jquery插件miniui框架整合java实现各种图形报表管理系统
- Web前端echarts插件的基础使用,创建报表组件。
- Js插件ECharts,HighCharts学习网址整理
- 百度Echarts图表JS插件的使用
- ECharts 一个很好用的JS插件
- ubuntu下j在安装ava环境
- 使用fn函数控制页面显示内容
- 回炉重造,第十二话:php数组遍历排序
- 事务及其特性
- 使用优盘装系统
- js实现图形报表 ECharts插件
- spring aop与事务配置
- 整型数据和字符串数据相互转化代码
- 安卓学习笔记——三
- 有趣的随机数
- java将string转化为int
- linux下常用linux c函数
- 解决Eclipse报errors running builder ‘javascript validator’ on project
- iOS Runtime常用示例总结