echarts 水球图

JunJiu0420

已于 2024-05-16 10:01:02 修改

阅读量275

点赞数 2

分类专栏： echarts 工作笔记文章标签： echarts

于 2024-05-15 17:33:59 首次发布

本文链接：https://blog.csdn.net/junjiu0420/article/details/138916689

版权

echarts 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

工作笔记

6 篇文章 0 订阅

订阅专栏

运行结果：

代码：


export function getWaterBallOptions() {
  return {
    series: [
      {
        type: 'liquidFill',
        radius: '80%',
        data: [0.2, 0.2, 0.2],
        color: ['rgba(64, 158, 255, 1)', 'rgba(64, 158, 255, 0.2956)', 'rgba(64, 158, 255, 0.1)'],//设置颜色系列
        label: {
          show: true,
          formatter: (params) => {
            const value = params.value * 1000;
            return `{value|${value}} {unit|万元}\n{extraText|期初资金余额}`;
          },
          rich: {
            value: {
              fontSize: 40,
              color: "#fff",

            },
            unit: {
              fontSize: 14,
              color: "#fff",
              padding: [0, 0, -10, -5]
            },
            extraText: {
              fontSize: 22,
              color: "#fff",
              padding: [0, 5] // 上、右、下、左的内边距
            }
          },
          fontSize: 30,
        },
        itemStyle: {
          shadowColor: 'rgba(0,0,0,0)'
        },
        backgroundStyle: {
          borderWidth: 4, //边框宽度
          borderColor: "rgba(64, 158, 255, 1)", //边框颜色
          color: "rgba(78, 165, 255, 0.25)", //背景色
        },
        outline: {
          show: false,
        },
      },
    ]
  }

}