index.config.ts 1.67 KB
const value = 40 // 水球图数据源
export const defaultOption = {
  series: [
    {
      type: 'liquidFill',
      shape: 'rect', // 设置水球图形状
      radius: '90%',
      data: [
        value / 100,
        {
          value: (value - 10) / 100,
          direction: 'left',
        },
      ],
      backgroundStyle: {
        borderWidth: 1,
        color: 'transparent', // 这里设置背景色
      },
      label: {
        color: '#27e5f1',
        insideColor: '#f7e8c1',
        left: '50%',
        top: '40%',
        textAlign: 'center',
        fontSize: 20,
        fontWeight: '600',
        textBorderColor: 'rgba(0, 0, 0, 0)',
        textShadowColor: '#000',
        textShadowBlur: '0',
        textShadowOffsetX: 0,
        textShadowOffsetY: 1,
      },
      color: [{
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [{
          offset: 0,
          color: ['#324791'], // 这里设置水球波动 0% 处的颜色
        }, {
          offset: 1,
          color: ['#449090'], // 这里设置水球波动 100% 处的颜色
        }],
        global: false,
      }],
      outline: {
        show: true,
        borderDistance: 1,
        itemStyle: {
          borderWidth: 0,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
              offset: 0, color: '#0b2355', // 这里设置水球外边框 0% 处的颜色
            }, {
              offset: 1, color: '#195b9d', // 这里设置水球外边框 100% 处的颜色
            }],
            global: false,
          },
        },
      },
    },
  ],
}