关于echart的简单理解

最近在项目中需要使用echarts。这不，就着手来学习来了。其实，初学echart.js似乎感觉到有些迷茫。一大堆的对象函数的，而且对象的键和值都是什么什么的看不懂。但当深入了解后，也并没有想像之中的那么难。
先拿官方的demo来做介绍吧。同时，我也先贴下官方的代码。而有，我会在代码里做写一些注释。由于官方的代码没有过多的注释。所以，在学习起来似乎有些困难。

import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
//不多说，重点肯定是在下面的option的这个大对象中
var option;

option = {
  title: {
    text: 'Stacked Line' //标题，想必大家都清楚
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: { //重点还是在这儿，xAxis 理解为X轴
  	//其实，这儿还有一个比较好玩的东东，我们可以试着把X,Y里面的对象属性互换一下
  	//可以发现，X,Y的内容相换了一下
  	//其实，type: 'category'可以理解为是X轴里的分类，我们试想一下，见下面（一）
    type: 'category', //注意一下，这个value值是固定的。
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    //data就是分类的一些名字，比如我图例中的 一月、二月、三月
  },
  yAxis: {  //对应的，这个就是Y轴理解为X轴
  	//而对应的值一般是不在这儿定义的，Y轴主要就是先定义一个它的分类属性
  	//值是在下面的 series 的对象中定义的。
    type: 'value'
  },
  series: [
 //就是具体的Y里在里面的值了。
 //需要注意的是，因为是一个坐标系，所以值可能会有很多
 //特别是多个分类套娃的时候，
 //比如我刚说的，一月、二月、三月
 //一月（销量、进货量、损耗数量 ）
 //二月（销量、进货量、损耗数量 ）
 //三月（销量、进货量、损耗数量 ）
 //那么，这种情况下，series 它就会是一个数组，里面就是一个一个的小对象，
 //而对像里面，就定义每个小分类的内容了
 //如下官方的代码
 //name 的属性值，代表销量这些
 //type 就是线型 （在这个案例中为固定值）
 //stack 在这个案例中也是固定值
 //data就是每月的数据，是一个数组 有几个大分类就有几个元素
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};
option && myChart.setOption(option);

（图一）

//x轴就是 type: 'category'
//y轴就是  type: 'value'
//那么，如果我们把这两个象的值互换呢 
//其实，也就成了下面的（图二）

（图二）

大概也就是这么个意思，还有一个需要明白下，echart.js里面的属性都是通用的。也就是说，对于官方给出的案例，我们都可以随意拿来套用和修改（当然，这在不违反当局法律的前提下）。
好了，就先说这么多。学到更多的东西后再补充。