Echart折线图笔记

1. 满足功能显示多条折线图，折线图的横轴坐标可能不统一，就是x轴的这个值可能只有一条折现有，另外一条没有；解决方法：设置series的值，不给xAxis，和yAxis设置data,series格式如下：

   1. [
          {"name":"QYL11",
           "type":"line",
           "data":[["2021-03-31","5909.0"],
                   ["2021-04-01","5928.0"],
                   ["2021-04-02","5887.0"],
                   ["2021-04-03","5919.0"]],
           "endLabel":{ // 这个设置线条最后显示线条名称
               "show":true,
               'formatter': function () {
                          return 'QYL11';
                        }
                }
          },
          {"name":"QYL13",
           "type":"line",
           "data":[
               ["2021-03-31","4087.0"],
               ["2021-04-02","4143.0"],
               ["2021-04-03","4135.0"],
               ["2021-04-04","4070.0"]],
          "endLabel":{ // 这个设置线条最后显示线条名称
               "show":true,
               'formatter': function () {
                          return 'QYL11';
                        }
                }
          },

       

2. 动态添加折线的数据：利用legend的selected，一开始是利用series动态添加数据来显示和隐藏的，但是这样效果不如下面的好，因为每次都要监测原来的数据是否有，有就删除，或者需要从总数据里面进行查找还筛选，而且每次隐藏之后图表剩余的线条的颜色都会变了。

    legend:{
        show:false, // 是否显示图例
        data:['QYL11','QYL13'],
        selected:{'QYL11':true,'QYL13':false} //控制是否显示，动态的显示隐藏可以这样控制
    }

3. 因为自带的图例我不需要，我需要自己的图例来控制线条的显示和隐藏，所以隐藏了图例，但是线条表示的图例就没有说明了，所以需要在线条末端显示线条的图例明称，控制显示的方法：在series的数据项里面添加endLabel属性，并更改格式：

   endLabel: {
                     show: true,
                     formatter: function () {
                       return key;
                     }
       }

    

4. 其他的补充：

   toolbox: {
       show: true,
       itemSize: 20,
       feature: {  //工具栏的表格显示
         dataView: {
           show: true,
           readOnly: true,
           optionToContent: (opt: any) => {
             const dom = document.getElementsByClassName("chart");
            ·····
             return table;
           }
         },
         dataZoom: {},
         saveAsImage: {},
         restore: {}
       }
     },

   tooltip: { //悬浮图标显示设置
       trigger: "axis",
       triggerOn: "mousemove|click",
       enterable: true,
       className: "echart-tooltip",
       axisPointer: {
         type: "cross"
       },
       formatter: (params: any) => {
        ····
         return ``;
       }
     },