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命名为main
var 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已经基本掌握了，以后还有什么新用法就再更新吧~