28. Echarts actual combat: an echarts containing a water wave chart and a rounded ring chart (similar to a dashboard), with some annotations

Echarts actual combat: an echarts containing a water wave chart, a rounded ring chart (similar to a dashboard), with some annotations

dynamic picture:

Static image:

Full code:

<template>
  <div class="contain">
    <el-button type="text" @click="handleOpen">点击打开</el-button>

    <el-dialog title="查看" :visible.sync="dialogVisible" width="400px" :before-close="handleClose">
      <div class="daily-box">
        <div class="daily-top">
          <div class="daily-top-left">
            <div id="score"></div>
          </div>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill'
export default {
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    // 弹窗关闭
    handleClose() {
      this.dialogVisible = false
    },
    handleOpen() {
      this.dialogVisible = true
      this.$nextTick(function() {
        this.drawScore('score')
      })
    },
    // 传入div的ID
    drawScore(id) {
      // 数据
      const score = 89
      // const dataValArray = 0.72
      this.charts = echarts.init(document.getElementById(id))
      this.charts.setOption({
        backgroundColor: '#489FFF', // 设置无背景色
        title: {
          text: '精神压力评分',
          textStyle: {
            color: '#FFF',
            fontSize: 14
          },
          subtext: score,
          subtextStyle: {
            color: '#fff',
            fontSize: 40
          },
          itemGap: 35, // 主副标题距离
          left: 'center',
          top: 'top',
          padding: 75
        },
        angleAxis: {
          max: 100, // 满分
          clockwise: false, // 逆时针
          // 隐藏刻度线
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        radiusAxis: {
          type: 'category',
          // 隐藏刻度线
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        polar: {
          center: ['50%', '50%'],
          radius: '140%' // 图形大小
        },
        series: [{
          // 圆角环形图
          type: 'bar',
          data: [{
            value: score,
            itemStyle: {
              normal: {
                color: '#fff'
              }
            }
          }],
          coordinateSystem: 'polar',
          roundCap: true,
          barWidth: 5,
          barGap: '-100%', // 两环重叠
          z: 2
        }, {
          // 起始点的圆点
          name: 'Line 1',
          type: 'pie',
          startAngle: 270,
          clockWise: true,
          radius: ['66%', '66%'], // 控制圆环大小的
          itemStyle: {
            normal: {
              label: {
                show: true
              },
              labelLine: {
                show: false
              }
            }
          },
          hoverAnimation: false,
          data: [{
            name: '',
            value: 0,
            // 起始点的大小
            label: {
              position: 'inside',
              backgroundColor: '#fff',
              width: 1,
              height: 1,
              borderRadius: 50,
              padding: 5
            }
          }]
        },
        // 虚线那一圈
        {
          name: 'decorationTwo',
          type: 'pie',
          color: ['#fff', 'rgba(255,255,255,0)'],
          center: ['50%', '50%'],
          radius: ['60%', '59%'],
          hoverAnimation: false,
          lable: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: new Array(200).fill(1).map(() => {
            return {
              name: '',
              value: 100
            }
          })
        },
        // 水波求
        {
          type: 'liquidFill',
          data: [(score / 100)],
          backgroundStyle: { // 背景样式
            borderWidth: 5,
            color: 'rgba(0,0,0,0)', // 水球未到的背景颜色
            opacity: 0 // 水球未到的背景颜色的透明度
          },
          outline: { // 外边线样式
            show: false // 是否显示外边线
          },
          // color: ['rgba(0,0,0,0)', '#A0C1FF', 'rgba(0,0,0,0)'],
          itemStyle: {
            color: '#A0C1FF',
            shadowBlur: 0, // 波浪的阴影范围
            opacity: 0.64	// 透明度
          },
          label: {
            show: false
          }
        }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.daily-box {

  .daily-top {
    width: 100%;
    display: flex;

    .daily-top-left {
      border-radius: 8px;
      flex: 1;
      // background: linear-gradient(#489FFF, #558FFA);
      background: linear-gradient(#489FFF, #489FFF);
      color: #fff;
      margin-right: 20px;

      #score {
        width: 90%;
        margin: auto;
        height: 220px;
      }
    }

    .daily-top-right {
      flex: 1;

      #condition {
        width: 90%;
        margin: auto;
        height: 220px;
      }
    }
  }
}
</style>