Echarts学习笔记~

好久没更新了，之前都在忙找实习的事情，所以就停了一段时间，现在要重新加油啦~不可以偷懒~

这两天学习了Echarts的用法，实际来说，他的很多功能在echart的文档当中都写的很清楚了，我最开始学习的是地图的用法，然而，我没有加载地图，所以就给BUG了，所以如果要写关于地图类的数据表，一定要加载地图的信息，不要和我一样蠢……………….

今天第一个主要是写关于echarts加载json数据的学习笔记

---

先贴json数据

{    "month": [        "1月",        "2月",        "3月",        "4月",        "5月",        "6月"    ],    "num": [        234,        420,        135,        323,        543,        120    ]}

很简单的两组数据，一组是月份，一组是销量。
然后贴页面里面写的

// 先确定用于展示echart的标签块，我在body里写了一个div，并给他的id命名为mainvar dom = document.getElementById('main');var myChart = echarts.init(dom);//用jQuery当中的ajax来加载json数据，所以一定要引入jQuery文件$.ajax({    type: 'get',    url: '../data/1.json'}).done(function(data) {    // console.log()用于展示json文件里的数据    console.log(data);    // 设置数据    myChart.setOption({        title: {            text: '销量展示'        },        tooltip: {},        legend: {            data: ['销量']        },        // 在echarts文档中，xAxis里面展示的是data: ['1月份', '2月份'...]这样的数据，但是因为通过json文件检索，所以我们只需要写出x轴需要的数据即可        xAxis: {            data: data.month        },        yAxis: {},        series: [{            name: '销量',            type: 'bar',            data: data.num        }]    })})

所以用echarts插件来展示json文件也变得非常简单啦

然后有一个问题，我以前写json文件的时候是这样写的

[    {        "month" : "1月",        "num" : 234    },    {        "month" : "2月",        "num" : 420    },    {        "month" : "3月",        "num" : 135    },    {        "month" : "4月",        "num" : 323    },    {        "month" : "5月",        "num" : 543    },    {        "month" : "6月",        "num" : 120    }]

如果我用这样来展示json数据，页面当中就会什么都出不来，并且报错，这就很尴尬了。所以我就试了一下，用了一种比较愚蠢的方法实现了

var dom = document.getElementById('main');var myChart = echarts.init(dom);// monthArr 和 numArr两个数组，是我用来存放月份数据和销量额数据的var monthArr = [];var numArr = [];$.ajax({    type: 'get',    url: '../data/2.json'}).done(function(data) {    // 将月份数据和销售额数据都存入数据中，和上面的用法就会一样了    for(var i = 0; i < data.length; i++) {        monthArr.push(data[i].month);        numArr.push(data[i].num);    }    myChart.setOption({        title: {            text: '销量展示'        },        tooltip: {},        legend: {            data: ['销量']        },        xAxis: {            data: monthArr        },        yAxis: {},        series: [{            name: '销量',            type: 'bar',            data: numArr        }]    })})

但是这种用法有一个弊端就在于，setOption一定要写在ajax的成功函数里面，但是上一中方法当中，setOption就可以单独提出来。

另外补充一下，如果需要在页面当中加载多个图表，则需要定义多个图表，例如

var FirChart = echarts.init(document.getElementById(id名));var SecChart = echarts.init(document.getElementById(另一个id名));

然后你需要在style样式中，再添加关于这两个块的大小等。

echart已经基本掌握了，以后还有什么新用法就再更新吧~