echart 绘制水波纹球

mini秀

已于 2023-10-30 09:39:42 修改

阅读量657

点赞数

分类专栏： echarts 文章标签： echarts

于 2023-10-10 16:23:18 首次发布

本文链接：https://blog.csdn.net/weixin_44088179/article/details/133376468

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最终效果
在这里插入图片描述
代码部分

<template>
  <div>
    <div id="charts" style="width:200px;height:200px"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  mounted() {
    this.getInit()
  },
  methods: {
    getInit() {
      let option = {
        series: [
          {
            type: 'liquidFill',
            shape: 'circle',
            radius: '80%',
            center: ['50%', '50%'],
            data: [0.6, 0.5, 0.4],
            // 球体配置
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 2,
                borderColor: '#3dfff6',
                shadowBlur: 20,
                shadowColor: '#12786f'
              }
            },
            color: ['rgba(50, 255, 238, .6)', 'rgba(154, 255, 247, .6)'],
            backgroundStyle: {
              color: 'transparent',
            },

            label: {
              show: true,
              textStyle: {
                color: '#12786f',
                insideColor: '#12786f',
                fontSize: 28
              }
            },
            label: {
              show: true,
              textStyle: {
                color: '#12786f',
                insideColor: '#12786f',
                fontSize: 40
              },
              formatter: params => {
                return `${(params.value * 100).toFixed(0)}%\n {a|百分比}`
              },
              rich: {
                a: {
                  fontSize: 24,
                }
              }
            }
          },
        ]
      }
      this.$echarts.init(document.getElementById('charts')).setOption(option);
    }
  }
}
</script>