你的位置:首页 > 软件开发 > Java > 使用ECharts实现数据图表分析

使用ECharts实现数据图表分析

发布时间:2015-05-30 12:00:37
一、ECharts介绍  实现对统计数据的图形分析之前用过JFreeChar,但它是用纯java实现编码繁琐且效果不佳,后来又使用过Fusioncharts 报表工具,它是基于Flash的图表组件、以二、实现应用案例  下面就结合应用看看ECharts的使用  案例效果:  条形 ...

使用ECharts实现数据图表分析

一、ECharts介绍

  实现对统计数据的图形分析之前用过JFreeChar,但它是用纯java实现编码繁琐且效果不佳,后来又使用过Fusioncharts 报表工具,它是基于Flash的图表组件、以

二、实现应用案例

  下面就结合应用看看ECharts的使用

  案例效果:

  条形图

 使用ECharts实现数据图表分析

  切换折线图

 使用ECharts实现数据图表分析

   查看图形数据

 使用ECharts实现数据图表分析

三、如何使用ECharts

1、环境搭建

  下载echarts-2.2.2,官网地址:http://echarts.baidu.com/

 使用ECharts实现数据图表分析

  将build\dist目录下的内容拷贝到项目中 如图所示:

 使用ECharts实现数据图表分析

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 (#换成@)。

可能感兴趣文章

我的浏览记录