一、ECharts介绍 实现对统计数据的图形分析之前用过JFreeChar,但它是用纯java实现编码繁琐且效果不佳,后来又使用过Fusioncharts 报表工具,它是基于Flash的图表组件、以二、实现应用案例 下面就结合应用看看ECharts的使用 案例效果: 条形 ...
实现对统计数据的图形分析之前用过JFreeChar,但它是用纯java实现编码繁琐且效果不佳,后来又使用过Fusioncharts 报表工具,它是基于Flash的图表组件、以
下面就结合应用看看ECharts的使用
案例效果:
条形图
切换折线图
查看图形数据
1、环境搭建
下载echarts-2.2.2,官网地址:http://echarts.baidu.com/
将build\dist目录下的内容拷贝到项目中 如图所示:
2、在sell_char.html页面中引入文件
chart目录下存放了12种图形的js文件,可根据需要引入,这也是官方推荐的导入方式(模块化单文件引入)
<head><script src='/images/loading.gif' data-original="echarts/dist/echarts.js"></script><script src='/images/loading.gif' data-original="jquery/jquery-1.7.2.min.js"></script><script type="text/javascript"> $(function(){//jquery的文档就绪函数 // 路径配置 require.config({ paths: { echarts: 'echarts/dist' } }); require( [ 'echarts',//代指echarts设置的路径,即'echarts/dist' 'echarts/chart/bar', // 使用柱状图加载bar模块,引入bar.js 'echarts/chart/line'//加载折线图,引入line.js文件, 按需加载 ],function (ec) { var myChart = ec.init(document.getElementById('sell_data')); var option = { //配置选项,使用echarts的关键部分 ... } myChart.setOption(option); });</script></head><!-- 为ECharts准备一个具备大小的区域,必须指定高度 --><div id="sell_data" style="height:400px"></div>
原标题:使用ECharts实现数据图表分析
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。