echarts 图表展示 练习一 （基础页面加载数据）

1.下载echarts.zip包

  当然你选择哪个都行只要能下载下来。

2. 解压查看内部构建 build 文件夹

我们需要这里的东西

当然里面也有其他东西你也需要看看比如doc

3.这一步比较关键 

是在jsp页面加载echarts所需框架，否者echarts就不能使用了

     3.1首先将build文件夹拷贝到eclispe项目下

然后加载echarts.js文件就在构建文件夹下  build/dist/echarts.js 

例如：

<script type="text/javascript" src="${path}/js/echarts/build/dist/echarts.js"></script>

    3.2 为模块加载器配置echarts和所需图表的路径 ，也是在build文件夹下dist文件夹

例如：

<!-- 为模块加载器配置echarts和所需图表的路径  -->
<script type="text/javascript">
require.config({
paths : {
echarts : '${path}/js/echarts/build/dist'
}
});
</script>

4. 使用 echarts

首先在body里面加上一个div用来展示图表

如：<div id="main" style="height: 400px"></div>

由于option数据的配置比较多放在下面展示

<!-- 使用 -->
<script type="text/javascript">

            //这一步记得一定要选择，每一种图表都有对应的模块 如：line是线标 ， bar 是 柱状表 ，或者一次添加多个 就可以相互转换了。但是单一的话最好选择一种
require([ 'echarts', 'echarts/chart/bar','echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
], function(ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));

var option = json数据按照一定规则和格式赋值给option；

// 为echarts对象加载数据 
myChart.setOption(option);
});
</script>

5. option 数据的配置

可以直接拷贝赋值给option看看效果

var option = {
title : {  //标题
text : '测试数据',
subtext : 'subtext'
},
toolbox: { //工具
       show : true,
       feature : {
        mark : {show: true},  //辅助线
           dataView : {show: true, readOnly: false}, //纯数据展示
           magicType: {show: true, type: ['line', 'bar']},  // 图表之间切换 
           restore : {show: true},  //刷新
           saveAsImage : {show: true}  // 保存为图片
       }
   },
legend : { // 图例配置
padding : 5, // 图例内边距，单位px，默认上下左右内边距为5
itemGap : 10, // Legend各个item之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔
data : [ 'ios', 'android' ]
},
tooltip : { // 气泡提示配置
trigger : 'item', // 触发类型，默认数据触发，可选为：'axis'
},
xAxis : [ // 直角坐标系中横轴数组
{
type : 'category', // 坐标轴类型，横轴默认为类目轴，数值轴则参考yAxis说明
data : [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]
} ],
yAxis : [ // 直角坐标系中纵轴数组
{
type : 'value', // 坐标轴类型，纵轴默认为数值轴，类目轴则参考xAxis说明
boundaryGap : [ 0.1, 0.1 ], // 坐标轴两端空白策略，数组内数值代表百分比
splitNumber : 4
// 数值轴用，分割段数，默认为5
} ],
series : [
{
name : 'ios', // 系列名称
type : 'line', // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
data : [ 112, 23, 45, 56, 233, 343, 454, 89, 343, 123,
45, 123 ]
},
{
name : 'android', // 系列名称
type : 'line', // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
data : [ 45, 123, 145, 526, 233, 343, 44, 829, 33, 123,
45, 13 ]
} ]
};