彩色仪表盘

引入ECharts

import React, { useMemo } from 'react';

import Echart from 'echarts-for-react';

import 'echarts-liquidfill';

export default ({ value = 0, title }) => {

  const option = useMemo(() => {

    return {

   。。。代码块。。。

  }, [value]);

  return (

    <Echart

      option={option}

      notMerge={true}

      style={{

        width: '100%',

        height: '100%'

      }}

    />

  );

};

按照占比区分颜色：

const colorFormatOnChart = (value, max) => {
  if (value / max < 0.1) {
    return [
      [0.1, '#17D5F7'],
      [1, '#464646']
    ];
  } else if (value / max < 0.2) {
    return [
      [0.1, '#17D5F7'],
      [0.2, '#1BF0AC'],
      [1, '#464646']
    ];
  } else if (value / max < 0.3) {
    return [
      [0.1, '#17D5F7'],
      [0.2, '#1BF0AC'],
      [value / max, '#3ED25E'],
      [1, '#464646']
    ];
  } else if (value / max < 0.4) {
    return [
      [0.1, '#17D5F7'],
      [0.2, '#1BF0AC'],
      [0.3, '#3ED25E'],
      [value / max, '#A2DA2A'],
      [1, '#464646']
    ];
  } else if (value / max < 0.5) {
    return [
      [0.1, '#17D5F7'],
      [0.2, '#1BF0AC'],
      [0.3, '#3ED25E'],
      [0.4, '#A2DA2A'],
      [value / max, '#DBF743'],
      [1, '#464646']
    ];
  } else if (value / max < 0.6) {
    return [
      [0.1, '#17D5F7'],
      [0.2, '#1BF0AC'],
      [0.3, '#3ED25E'],
      [0.4, '#A2DA2A'],
      [0.5, '#DBF743'],
      [value / max, '#F4DE48'],
      [1, '#464646']
    ];
  } else if (value / max < 0.7) {
    return [
      [0.1, '#17D5F7'],
      [0.2, '#1BF0AC'],
      [0.3, '#3ED25E'],
      [0.4, '#A2DA2A'],
      [0.5, '#DBF743'],
      [0.6, '#F4DE48'],
      [value / max, '#F3B92F'],
      [1, '#464646']
    ];
  } else if (value / max < 0.8) {
    return [
      [0.1, '#17D5F7'],
      [0.2, '#1BF0AC'],
      [0.3, '#3ED25E'],
      [0.4, '#A2DA2A'],
      [0.5, '#DBF743'],
      [0.6, '#F4DE48'],
      [0.7, '#F3B92F'],
      [value / max, '#F5841F'],
      [1, '#464646']
    ];
  } else if (value / max < 0.9) {
    return [
      [0.1, '#17D5F7'],
      [0.2, '#1BF0AC'],
      [0.3, '#3ED25E'],
      [0.4, '#A2DA2A'],
      [0.5, '#DBF743'],
      [0.6, '#F4DE48'],
      [0.7, '#F3B92F'],
      [0.8, '#F3B92F'],
      [value / max, '#F5841F'],
      [1, '#464646']
    ];
  } else if (value / max >= 0.9) {
    return [
      [0.1, '#17D5F7'],
      [0.2, '#1BF0AC'],
      [0.3, '#3ED25E'],
      [0.4, '#A2DA2A'],
      [0.5, '#DBF743'],
      [0.6, '#F4DE48'],
      [0.7, '#F3B92F'],
      [0.8, '#F5841F'],
      [0.9, '#F15041'],
      [value / max, '#F12C2C'],
      [1, '#464646']
    ];
  }
};

 示例图：

 代码块

const value=80
const title="分辨率"
option = {
  // tooltip: {
  //   trigger: 'item'
  // },
  // legend: {
  //   top: '5%',
  //   left: 'center'
  // },
  series: [
        {
          name: '统计',
          type: 'gauge',
          splitNumber: 8, //刻度数量
          min: 0,
          max: 200,
          radius: '120%', //图表尺寸
          center: ['50%', '80%'],
          startAngle: 180, //刻度起始
          endAngle: 0, //刻度结束
          axisLine: {
            show: true,
            lineStyle: {
              width: 0,
              shadowBlur: 0,
              color: colorFormatOnChart(value, 100)
            }
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: 'auto',
              width: 4
            },
            length: 22,
            splitNumber: 2
          },
          splitLine: {
            show: false,
            length: 22,
            lineStyle: {
              color: 'auto'
            }
          },
          axisLabel: {
            show: false
          },
          pointer: {
            //仪表盘指针
            show: 0,
            length: '40%',
            width: 2
          },
          title: {
            show: true,
            offsetCenter: [0, '5%'], // x, y，单位px
            textStyle: {
              fontSize: 13,
              fontWeight: 400,
              fontFamily: 'Alibaba PuHuiTi',
              color: '#A5DAFF'
            }
          },
          detail: {
            borderColor: '#fff',
            shadowColor: '#fff', //默认透明
            shadowBlur: 2,
            offsetCenter: [0, '5%'], // x, y，单位px
            textStyle: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              color: '#fff',
              fontSize: 33,
              fontWeight: 'normal'
            },
            formatter: '{value}%\n\n'
          },
          data: [{ name: title, value }]
        },
        {
          name: '内部白色刻度',
          type: 'gauge',
          splitNumber: 8, //刻度数量
          min: 0,
          max: 100,
          radius: '100%', //图表尺寸
          center: ['50%', '80%'],
          startAngle: 180, //刻度起始
          endAngle: 0, //刻度结束
          axisLine: {
            show: true,
            lineStyle: {
              width: 0,
              shadowBlur: 0,
              color: [
                [0.2, '#fff'],
                [1, '#fff']
              ]
            }
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: 'auto',
              width: 1
            },
            length: 5,
            splitNumber: 2
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'auto',
              width: 1
            },
            length: 8,
            splitNumber: 10
          },
          axisLabel: {
            show: false
          },
          pointer: {
            //仪表盘指针
            show: false
          },
          title: {
            show: false
          },
          detail: {
            show: false
          },
          data: [{ name: '', value: 100 }]
        }
      ]
};

 通过：splitNumber，修改刻度数量