Echarts citation and examples of use of water wave diagrams

This is the 10th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Similar to the use of water wave diagrams below. Is mainly the use of normal water wave figure and accomplish the main code using the radial gradient new echarts. Graphic. RadialGradient to reset the background color of the water wave figure

Echarts-liquidfill: ^2.0.6

npm install echarts-liquidfill
Copy the code

2, in the use of page introduction

import 'echarts-liquidfill'
Copy the code

3. Use cases

rectifyChart(id, data) {
      let wavesColor = [], radiusColor = []
        wavesColor = [{
          type: 'linear'.x: 0.y: 0.x2: 1.y2: 1.colorStops: [{offset: 0.color: '#54ca3c' },
            { offset: 1.color: '#2EC7CF' },
          ],
        }]
        radiusColor = [
          { offset: 0.color: '#54ca3c' },
          { offset: 1.color: '#2EC7CF'},]var dom = document.getElementById(id)
      var myChart = echarts.init(dom);
      var value = data / 100;
      var valueText = data + The '%'
      var option = {
        title: {
          show: true.text: valueText,
          x: 'center'.y: '35%'.itemGap: 0.textStyle: {
            fontSize: 20.fontWeight: 'bold'.lineHeight: 30.color: '#fff'}},polar: {
          radius: ['85%'.'83%'].center: ['50%'.'50%'],},angleAxis: {
          max: 100.clockwise: false.axisLine: {
            show: false,},axisTick: {
            show: false,},axisLabel: {
            show: false,},splitLine: {
            show: false,}},radiusAxis: {
          type: 'category'.show: true.axisLabel: {
            show: false,},axisLine: {
            show: false,},axisTick: {
            show: false,}},series: [{type: 'liquidFill'.radius: '78.1%'.center: ['50%'.'50%'].color: wavesColor,
            data: [value, value], // The number of data represents the number of waves
            backgroundStyle: {
              borderWidth: 0.borderColor: 'rgba (55, 211, 255, 0.42)'.color: 'rgba(12, 41, 49, 0)',},label: {
              normal: {
                formatter: ' ',}},outline: {
              show: false,}}, {name: ' '.type: 'bar'.roundCap: true.z: 2.barWidth: 12.showBackground: false.backgroundStyle: {
              color: '#15181e',},data: [100].coordinateSystem: 'polar'.itemStyle: {
              normal: {
                color:
                  new echarts.graphic.LinearGradient(0.0.0.5.1, radiusColor),
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
Copy the code

The second with a radial gradient color background

Do the main code is below the radial gradient, using the new echarts. Graphic. RadialGradient to reset the background color of the water wave figure

backgroundStyle: {
              borderWidth: 0.// borderColor: 'RGBA (55, 211, 255, 0.42)',
              color: new echarts.graphic.RadialGradient(0.5.0.5.0.5[{offset: 0.color: 'RGB (24,43,99)'}, {offset: 0.5.color: 'RGB (24,43,99)'}, {offset: 1.color: baColor}]
                  ),
            },
Copy the code

rectifyChart(id, data) {
      let wavesColor = [], radiusColor = [],baColor=' '
      if (id === 'notRectificationOvertime') {
        wavesColor = [{
          type: 'linear'.x: 0.y: 0.x2: 1.y2: 1.colorStops: [{offset: 0.color: '#EB3B5A' },
            { offset: 1.color: '#FE9C5A' },
          ],
          
        }]
        radiusColor = [
          { offset: 0.color: '#EB3B5A' },
          { offset: 1.color: '#FE9C5A' },
        ]
        baColor='rgba(254, 156, 90,.5)'
      } else if (id === 'notRectification') {
        wavesColor = [{
          type: 'linear'.x: 0.y: 0.x2: 0.y2: 1.colorStops: [{offset: 0.color: '#FA8231' },
            { offset: 1.color: '#FFD14C' },
          ],
        }]
        radiusColor = [
          { offset: 0.color: '#FA8231' },
          { offset: 1.color: '#FFD14C' },
        ]
        baColor='rgba(255, 209, 76,.5)'
      } else if (id === 'RectificationOvertime') {
        wavesColor = [{
          type: 'linear'.x: 0.y: 0.x2: 1.y2: 1.colorStops: [{offset: 0.color: '#395CFE' },
            { offset: 1.color: '#2EC7CF' },
          ],
        }]
        radiusColor = [
          { offset: 0.color: '#395CFE' },
          { offset: 1.color: '#2EC7CF' },
        ]
        baColor='rgba(46, 199, 207,.5)'
      }else if (id === 'RectificationTimely') {
        wavesColor = [{
          type: 'linear'.x: 0.y: 0.x2: 1.y2: 1.colorStops: [{offset: 0.color: '#54ca3c' },
            { offset: 1.color: '#2EC7CF' },
          ],
        }]
        radiusColor = [
          { offset: 0.color: '#54ca3c' },
          { offset: 1.color: '#2EC7CF' },
        ]
        baColor='rgba(84, 202, 60,.5)'
      }
      var dom = document.getElementById(id)
      var myChart = echarts.init(dom);
      var value = data / 100;
      var valueText = data + The '%'
      var option = {
        title: {
          show: true.text: valueText,
          x: 'center'.y: 'center'.itemGap: 0.textStyle: {
            fontSize: 18.fontWeight: 'bold'.lineHeight: 30.color: '#fff'}},polar: {
          radius: ['85%'.'83%'].center: ['50%'.'50%'],},angleAxis: {
          max: 100.clockwise: false.axisLine: {
            show: false,},axisTick: {
            show: false,},axisLabel: {
            show: false,},splitLine: {
            show: false,}},radiusAxis: {
          type: 'category'.show: true.axisLabel: {
            show: false,},axisLine: {
            show: false,},axisTick: {
            show: false,}},series: [{type: 'liquidFill'.radius: '78.1%'.center: ['50%'.'50%'].color: wavesColor,
            data: [value, value], // The number of data represents the number of waves
            backgroundStyle: {
              borderWidth: 0.// borderColor: 'RGBA (55, 211, 255, 0.42)',
              color: new echarts.graphic.RadialGradient(0.5.0.5.0.5[{offset: 0.color: 'RGB (24,43,99)'}, {offset: 0.5.color: 'RGB (24,43,99)'}, {offset: 1.color: baColor}]
                  ),
            },
            label: {
              normal: {
                formatter: ' ',}},outline: {
              show:false}, {},name: ' '.type: 'bar'.roundCap: true.z: 2.// barWidth: 12,
            showBackground: false.backgroundStyle: {
              color: '#15181e',},data: [100].coordinateSystem: 'polar'.itemStyle: {
              normal: {
                / / color: new echarts. Graphic. That LinearGradient (0, 0, 0.5, 1, radiusColor),
                color:'RGB (24,43,99)',},},},],}; myChart.setOption(option); },Copy the code