前言：最近项目要大量使用echarts图表，为保证项目进度能够顺利进行，研究一下吧。

    Echarts图表主要通过传入的option对象来映射图表。
    官方示例如下：

    1. option = {
    3.   // 图例
    4.   legend: {
    5.     // data数组里面的字段要和series数组里面的name对应
    6.     // 源码应该是拿下标的字段和series的name属性值做对比
    7.     data: ['秀儿','大狗']
    8.   },
    9.   // X轴，
    10.   xAxis: {
    11.     /** 
    12.     type的注意事项
    13.     1. category是类目轴.竖着放X轴设为类目轴，横着放则y轴为类目轴，其他值value用于连续数据，time是时间
    14.         2. 如果xAxis.data有数据，type就算不写也会值默认改成'category'
    15.     3. 按照推理，如果yAxis.data有数据不就是两个类目轴了吗，那怎么渲染
    16.           经过试验，如果x和y轴对象都有data属性是错误渲染。。
    18.        所以：x和y轴只有一个类目轴，如果x轴是类目轴，yAxis.type值就应该是value。反之亦然
    19.     **/
    20.     type: 'category',
    21.     data: ['语文', '数学', '英语', '体育', '化学', '历史']
    22.   },
    23.   // y轴
    24.   yAxis: {
    25.     // category是类目轴，value用于连续数据，time是时间
    26.     type: 'category',
    27.     data: ['语文', '数学', '英语', '体育', '化学', '历史']
    28.   },
    30.   // 系列列表，
    31.   /**
    32.   series的注意事项
    33.       1.type：通过type来决定图表类型line bar pie
    34.       2.name：每个对象的name尽量写上，和类目轴的顺序保持一致，另外通用配置legend也会用到
    35.     3.data：其实就是二维坐标系中非类目轴的值
    36.     4.series数组中每一项都对应一个系列的数据
    38.     series.xxx.markPoint 图表标注
    39.     series.xxx.markLine 图表标线
    40.     serises.xxx.label 每个柱  数值显示
    41.     serises.xxx.barWidth 柱体的宽度
    42.     serises.xxx.emphasis 高亮的图形样式和标签样式/或者说鼠标悬停时
    43.     serises.xxx.itemStyle 每根柱的样式
    44.     serises.xxx.grid 控制边距
    45.   **/
    47.   series: [
    48.     {
    49.       // 数据
    50.       name: '秀儿',
    51.       type: 'bar',
    52.       data: [5, 20, 36, 10, 10, 20],
    54.       // 
    57.       // 每个柱数值显示
    58.       label: {
    59.         // 显示开关
    60.           show :true,
    61.         // 旋转角度 从 -90 度到 90 度。正值是逆时针。直接写数字
    62.         rotate: 20,
    63.            /**
    64.                 位置(值比较多用到再说吧)三种 
    65.                 1.语义声明=> top left等等
    66.                 2.像素值=>  position: [10, 10],
    67.                         3.百分比=>  position: ['50%', '50%']
    68.                 **/
    69.         position: 'top'
    70.       },
    72.          // 每根柱的样式
    73.       itemStyle:{
    74.         color: (params)=>{
    75.           let colorList = ['red'];
    76.           return colorList[params.dataIndex] || 'red';
    77.         }
    78.       },
    79.       // 控制边距　
    80.         grid: {
    81.             left: '0%',
    82.           right:'10%',
    83.           containLabel: true,
    84.         },
    86.       // 最大最小值的写法
    87.       markPoint: {
    88.           data:[
    89.           {
    90.             type: 'max', name: '最大值'
    91.           },
    92.           {
    93.             type: 'min', name: '最小值'
    94.           },
    95.         ]
    96.       },
    98.       // 平均值的写法
    99.       markLine: {
    100.           data: [
    101.           {
    102.               type: 'average', name: '平均值'
    103.           }
    104.         ]
    105.       }
    106.     },
    107.     {
    108.       name: '大狗',
    109.       type: 'bar',
    110.       data: [5, 20, 36, 10, 10, 20]
    111.     }
    112.   ]
    113. };