Echarts报表

[if !supportLists]1、        [endif]引入 ECharts 文件（head部分）

<script

src="js/echarts.min.js"></script>

[if !supportLists]2、        [endif]为 ECharts 准备一个具备大小（宽高）的 DOM（body部分）

<div id="main"

style="width: 600px;height:400px;"></div>

[if !supportLists]3、        [endif]通过echarts.init 方法初始化一个 echarts 实例（创建<script type="text/javascript">）

通过echarts.init方法初始化一个echarts实例

基于准备好的dom，初始化实例

var mycharts =

echarts.init(document.getElementById("main"));

通过setOption 方法生成图

Var  option:{ 指定的图标配置和数据     }

将配置项设置到echarts实例中

mycharts.setOption(option);

ajax访问数据，并加载echarts里面的图表

[if !supportLists]1、        [endif]创建函数

function loadBar() {  ajax获取数据           }

[if !supportLists]2、        [endif]发送ajax请求，获取数据

$.ajax({

Type:”get”,

url:” js/data.json”,

success:function(result){

   varnameArr = []; //数据名

   vardataArr = []; //数据值

   //获取返回的数据中的result名称对应的数组

var resultList = result.result;

// 遍历数组，得到每个对象的用户名和年龄

for (var i = 0; i < resultList.length;

i++) {

                               nameArr.push(resultList[i].userName);

                               dataArr.push(resultList[i].userAge);

}

//基于准备好的dom，初始化echarts实例

var mycharts =echarts.init(document.getElementById("main"));

   //指定图表的配置项和数据

   Varoption={echarts表格的数据和格式}

   //将配置项设置到echarts实例中

   mycharts.setOption(option);

})