Echarts在线免费图表

 
            
const current = 68
// const endAngle = current / 100 * 360 + 90

const unit = 'kg';
option = {
  series: [
    {
      type: 'pie',
      clockWise: false,
      startAngle: 90,
      radius: ['60%', '90%'],
      data: [100],
      itemStyle: {
        color: '#eee'
      },
      animation: false
    },
    {
      type: 'pie',
      clockWise: false,
      startAngle: 90,
      // endAngle: endAngle,
      labelLine: {
        show: false
      },
      radius: ['60%', '90%'],
      data: [
        {
          value: current,
          label: {
            normal: {
              formatter: `{label|当前}\n{value|${current}}\n{unit|${unit}}`,
              position: 'center',
              show: true,
              textStyle: {
                fontSize: '20',
                fontWeight: 'normal',
                color: '#6FDCFF',
                lineHeight: 20,
                rich: {
                  label: {
                    fontSize: '12',
                    fontWeight: 'normal',
                    color: '#666'
                  },
                  value: {
                    fontSize: '20',
                    fontWeight: 'normal',
                    lineHeight: 40,
                    // padding: [25, 0, 25, 0],
                    color: '#333'
                  },
                  unit: {
                    fontSize: '14',
                    fontWeight: 'normal',
                    color: '#aaa',
                    padding: [0, 0, 0, 5]
                  }
                }
              }
            }
          },
          itemStyle: {
              // borderCap: 'round',
            normal: {
              color: '#f60',
              borderRadius: ['50%', '50%']
            }
          }
        },
        {
          value: 100 - current,
          itemStyle: {
            normal: {
              color: 'transparent',
              borderCap: 'round'
            }
          }
        }
      ]
    }
  ]
};