Echarts报表初体验
来源:互联网 发布:linux net snmp使用 编辑:程序博客网 时间:2024/06/04 18:08
ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。
支持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表,同时提供标题,详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件,支持多图表、组件的联动和混搭展现。
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script></head><body><!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)"},legend: {orient: 'vertical',x: 'left',data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']},series: [ { name:'访问来源', type:'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, textStyle: { fontSize: '30', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body></html>效果图
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <!--<script type="text/javascript" src="${ctxPath}/resources/js/echarts.min.js"></script> --> <script src="echarts.min.js"></script></head><body><!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '交易报告(借款分析)' }, tooltip: {}, legend: { data:['借款笔数'] }, xAxis: { data: ["2012","2013","2014","2015","2016"] }, yAxis: {}, series: [{ name: '借款笔数', type: 'bar', data: [2000, 4500, 6000,5000,3000] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body></html>
效果图
如上是Echarts报表的两个小demo,还有很多很棒的报表,以后用到了可以再深入研究,Echarts报表是一个纯js的开源图表库,方便好用,最关键的是免费的哦
0 0
- Echarts报表初体验
- ECharts初体验
- Echarts入门之初体验
- 水晶报表初体验
- 水晶报表使用初体验
- ActiveReports 报表控件 初体验
- ECharts:企业报表工具
- eCharts制作数据报表
- ECharts制作报表模板
- Echarts报表动态加载
- echarts动态报表
- Echarts集装报表
- echarts报表展示
- 24、echarts做报表
- Echarts报表动态加载
- 阳光厨房报表改echarts
- 【报表神器】——ECharts
- 润乾集算报表集成百度ECharts
- Android 创建Library Project(库项目)与引用操作
- Android学习笔记-Android与HTML+JS交互
- html选择器
- 第一个实际模块成总结
- HTML5 表单属性
- Echarts报表初体验
- Clone KVM with virt-clone
- 开源利器
- LeetCode Algorithms #102 <Binary Tree Level Order Traversal>
- 编程技巧 - 关联+Block
- 欢迎使用CSDN-markdown编辑器
- 初试Android的MVP框架
- CocoaPods使用详解
- 一、go语言基础流程控制,语法,反射特性--go语言笔记