index.config.ts 1.75 KB
import type { EChartsOption } from 'echarts'

const value = 40 // 水球图数据源
export const defaultOption: EChartsOption = {
  series: [
    {
      type: 'liquidFill',
      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,
          },
        },
      },
    },
  ],
}