Echarts

Echarts：https://echarts.apache.org/zh/option.html#dataZoom

1.Echarts鼠标悬浮时tooltip超出外层div显示不完整问题

https://blog.csdn.net/weixin_45850768/article/details/118667776?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-4-118667776-blog-75007378.235^v39^pc_relevant_3m_sort_dl_base3&spm=1001.2101.3001.4242.3&utm_relevant_index=7

https://blog.csdn.net/m0_74846596/article/details/131119783?spm=1001.2101.3001.6650.12&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-12-131119783-blog-131165786.235%5Ev39%5Epc_relevant_3m_sort_dl_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-12-131119783-blog-131165786.235%5Ev39%5Epc_relevant_3m_sort_dl_base3&utm_relevant_index=15

可以自己设置下鼠标悬浮时tooltip信息的显示位置，原理是上下不变，将上下位置用百分比写死，
左右根据鼠标当前位置判断一下，判断鼠标指针是在左边还有右边然后返回不同的结果。

position: function(point, params, dom, rect, size){
         //  size为当前窗口大小
         if((size.viewSize[0]/2)>=point[0]){
             //其中point为当前鼠标的位置
             return [point[0]+50,'10%'];
         }else{
             //其中point为当前鼠标的位置
             return [point[0]-200,'10%'];
         }
        }
        
tooltip: {
            //confine:true,
            appendToBody : true,
            trigger: "axis",
            position: function(point, params, dom, rect, size){
            //其中point为当前鼠标的位置
              //  size为当前窗口大小
              if((size.viewSize[0]/2)>=point[0]){
                //其中point为当前鼠标的位置
                return [point[0]+50,'10%'];
              }else{
                //其中point为当前鼠标的位置
                return [point[0]-200,'10%'];
              }
            },
            axisPointer: {
              // Use axis to trigger tooltip
              type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
            },
          },

2.echarts通过dataZoom，实现x轴和y轴放大缩小
https://blog.csdn.net/k912120/article/details/125421352

https://blog.csdn.net/weixin_43883951/article/details/128861972?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-1-128861972-blog-125421352.235^v39^pc_relevant_3m_sort_dl_base3&spm=1001.2101.3001.4242.2&utm_relevant_index=4

//change
          dataZoom:[{
            type: 'inside', // 放大和缩小
            yAxisIndex: [0],
          },
            {
              type: 'slider',//
              show: true,
              yAxisIndex: [0],
              left: '93%',
            }
          ],

3.获取option 里data的值：
/*var areadata=[];
      for (var i=0;i<option.series.length; ++i) {
        if(option.series[i].name=="area"){
          areadata=option.series[i].data;
        }
      }
      alert(areadata)*/
      

4.echarts tooltip显示不全的几种处理方式
https://blog.csdn.net/qq_52395343/article/details/131165786

5.在设置柱状图水平显示的时候,如果加入dataZoom的话,当拖动dataZoom到界面上只有一个柱子的时候,相邻的柱子也会显示,这个时候就出现了重叠现象.
https://github.com/apache/echarts/issues/5555

dataZoom: [
                    {
                        show: true,
                        yAxisIndex: 0,
                        filterMode: 'filter',
                        width: 20,
                        height: '80%',
                        showDataShadow: false,
                        left: '93%'
                    }
                ],