水滴图

最新推荐文章于 2024-04-26 16:25:45 发布

狠φ简单

最新推荐文章于 2024-04-26 16:25:45 发布

阅读量154

点赞数 1

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

本文链接：https://blog.csdn.net/ruthlessSimple/article/details/112177724

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

需要引进

<script src="./js/echarts.min.js"></script>
<script src="./js/echarts-liquidfill.min.js"></script>

直接上代码

shuidi(id, color, data) {
      let water = echarts.init(document.getElementById(id))
      let option = {
          series: [{
              type: 'liquidFill',
              radius: '60%',
              data: [data], //datat
              center: ['50%', '60%'],
              outline: {
                  show: false,
              },
              backgroundStyle: {
                  borderColor: 'transparent',
                  borderWidth: 1,
                  shadowColor: 'rgba(0, 0, 0, 0.4)',
                  shadowBlur: 20,
                  color: "#084b8a"
              },
              itemStyle: {
                  normal: {
                      color: color
                  }
              },
              label: {
                  normal: {
                      position: ['50%', '30%'],
                      color: "#fff",
                      textStyle: {
                          fontSize: 30,
                      }
                  }
              }
          }]
      };
      water.setOption(option)
  },
},