Echarts绘制Tree树图的涟漪效果effectScatter

1. 问题描述

Echarts绘制图表是支持涟漪效果的，但是搜了材料，有地图、折线图、散点图等，不支持树图。

本文方法实现了一种可以任意Echarts图的涟漪效果

2. 效果展示

将树图的一级节点全部加上涟漪效果：如下

 3. 解决思路

3.1 找出问题

Echarts配置项中明确支持涟漪效果的图表，不支持其他图表

 3.2 创新

领导说了，效果我就想要那种，画不出来滚蛋！

叠加！叠加！叠加

4. 解决过程

4.1 绘制树图

这个简单可以参考官网Examples - Apache ECharts

 如图，原始图像

4.2 绘制xy图--类似棋盘

xAxis: [{
          data:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          }
        }],
        yAxis: [{
          data:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          }
        }],

        这里绘制的是30*30棋盘，如果棋盘的点和你想绘制闪烁点的位置对应不上，可以绘制40*40,50*50......加大像素点密度

4.3 点点对应

        在绘制的过程中，将splitLine、axisLabel、axisLine、axisTick都设置为true，方便点点对应，如下图：下图是最开始的10*10，对应不上，后改为30*30

         一般还有一个问题树图和xy图没叠加到一起，需要设置grid，grid应该也是两个，本实例中只写了一个，默认对应代码写在上面的xy图，即调整xy图的grid去适配树图。

xy图的data如下

data:[{value:[2,15],symbolSize:12},{value:[11,0],symbolSize:8},{value:[11,2],symbolSize:8},{value:[11,4],symbolSize:8},{value:[11,6],symbolSize:8},{value:[11,8],symbolSize:8},{value:[11,12],symbolSize:8},{value:[11,16],symbolSize:8},{value:[11,19],symbolSize:8},{value:[11,23],symbolSize:8},{value:[11,26],symbolSize:8},{value:[11,30],symbolSize:8}],

这种方法解决了任何图像实现涟漪效果的叠加

4.4 总体代码

const data = {
        name: 'Buoy',
        children: [
          {
            name: 'CTD',
            children: [
              {
                name: 'temperature',
                value: 60
              },
              {
                name: 'pressure',
                value: 60
              },
              {
                name: 'salinity',
                value: 60
              },
            ]
          },
          {
            name: 'ADCP',
            children: [
              {
                name: 'velocityU',
                value: 60
              },
              {
                name: 'velocityV',
                value: 60
              },
              {
                name: 'velocityW',
                value: 60
              }
            ]
          },
          {
            name: 'Nitrate',
            children: [
              {
                name: 'nitrate',
                value: 120
              }
            ]
          },
          {
            name: 'Triplet',
            children: [
              {
                name: 'FDOM',
                value: 1
              },
              {
                name: 'chlorophyll',
                value: 1
              },
              {
                name: 'turbidity',
                value: 1
              }
            ]
          },{
            name:'PAR',
            children:[
              {
                name:'par',
                value: 1
              }
            ]
          },{
            name:'Meteorological',
            children:[
              {
                name:'airTemperature',
                value: 1
              },{
                name:'atmosphere',
                value: 1
              },{
                name:'windSpeed',
                value: 1
              },{
                name:'windDirection',
                value: 1
              }
 
            ]
          },{
            name:' AtmosphericPressure',
            children:[{
              name:'atmospheric pressure',
              value:1
              }
            ]
          },{
            name:'Methane',
            //value:1,
            children:[{
              name:'methane',
              value:5
              }
            ]
          },{
            name:'Carbon Dioxide',
            //value:1,
            children:[{
              name:'carbon dioxide',
              value:1
              }
            ]
          },{
            name:'Dissolved Oxygen',
            //value:1,
            children:[{
              name:'dissolved oxygen',
              value:60
              }
            ]
          },
          {
            name:'pH',
            //value:1,
            children:[{
              name:'pH',
              value:10
              }
            ]
          }
        ],
      }
 
 
      const option = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        grid:{
          top: '8%',
          left: '5%',
          right: '12%',
          height: '87%'
        },
        xAxis: [{
          data:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          }
        }],
        yAxis: [{
          data:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          }
        }],
        series: [
          {
            type: 'tree',
            data: [data],
            left: '10%',
            right: '40%',
            top: '3%',
            bottom: '3%',
            symbolSize:6,
            
            label: {
              position: 'left',
              
              verticalAlign: 'middle',
              align: 'right',
              fontSize: 12,
              fontWeight: 300,
              color: '#32ffc7',
              
            },
            leaves: {
              label: {
                position: 'right',
                rotate: 0,
                verticalAlign: 'middle',
                padding:[2,2,2,2],
                lineHeight:15,
                align: 'left',
                color: '#fff',
                formatter: '{b}: {c}',
                distance: 20,
              },
              itemStyle: {
                color: '#12c9f6',
                borderWidth: 10,
                borderColor: '#FFFFFF',
                borderType: 'solid'
              }
            },
            animationDurationUpdate: 750,
            emphasis: {
              focus: 'descendant'
            },
            expandAndCollapse:true,
            animationDuration:550,
          },
 
          {
            type:'effectScatter',
            data:[{value:[2,15],symbolSize:12},{value:[11,0],symbolSize:8},{value:[11,2],symbolSize:8},{value:[11,4],symbolSize:8},{value:[11,6],symbolSize:8},{value:[11,8],symbolSize:8},{value:[11,12],symbolSize:8},{value:[11,16],symbolSize:8},{value:[11,19],symbolSize:8},{value:[11,23],symbolSize:8},{value:[11,26],symbolSize:8},{value:[11,30],symbolSize:8}],
            showEffectOn: 'render',
            rippleEffect: {
              // 波纹的绘制方式,可选'stroke'和'fill'
              brushType: 'fill',
              number:3,
              scale:3
 
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: '#16D762',
                shadowBlur: 30,
                shadowColor: '#16D762'
              }
            },
            zlevel:1
          }
 
 
 
        ]
      };