yongxu-web/src/pages/DataBoard/areaDeviceData.tsx

import React, { useEffect, useRef } from 'react';
import styles from './areaDeviceData.less';
import * as echarts from 'echarts';

/**
 * 地区设备数量统计
 * @constructor
 */
const AreaDeviceData: React.FC = () => {
  const chartRef: any = useRef();

  const xData = ['济南', '菏泽', '聊城', '青岛', '潍坊'];
  const yData = [120, 1230, 425, 767, 1000];

  useEffect(() => {
    const myChart = echarts.init(chartRef.current);
    const options = {
      // backgroundColor: '#061326',
      grid: {
        top: '25%',
        left: '-5%',
        bottom: '5%',
        right: '5%',
        containLabel: true,
      },
      tooltip: {
        show: true,
      },
      animation: false,
      xAxis: [
        {
          type: 'category',
          data: xData,
          axisTick: {
            alignWithLabel: true,
          },
          nameTextStyle: {
            color: '#82b0ec',
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#82b0ec',
            },
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
            },
            margin: 30,
          },
        },
      ],
      yAxis: [
        {
          show: false,
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#fff',
            },
          },
          splitLine: {
            lineStyle: {
              color: '#0c2c5a',
            },
          },
          axisLine: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: '',
          type: 'pictorialBar',
          symbolSize: [40, 10],
          symbolOffset: [0, -6], // 上部椭圆
          symbolPosition: 'end',
          z: 12,
          // "barWidth": "0",
          label: {
            normal: {
              show: true,
              position: 'top',
              // "formatter": "{c}%"
              fontSize: 15,
              fontWeight: 'bold',
              color: '#34DCFF',
            },
          },
          color: '#2DB1EF',
          data: yData,
        },
        {
          name: '',
          type: 'pictorialBar',
          symbolSize: [40, 10],
          symbolOffset: [0, 7], // 下部椭圆
          // "barWidth": "20",
          z: 12,
          color: '#2DB1EF',
          data: yData,
        },
        {
          name: '',
          type: 'pictorialBar',
          symbolSize: function (d: number) {
            return d > 0 ? [50, 15] : [0, 0];
          },
          symbolOffset: [0, 12], // 下部内环
          z: 10,
          itemStyle: {
            normal: {
              color: 'transparent',
              borderColor: '#2EA9E5',
              borderType: 'solid',
              borderWidth: 1,
            },
          },
          data: yData,
        },
        {
          name: '',
          type: 'pictorialBar',
          symbolSize: [70, 20],
          symbolOffset: [0, 18], // 下部外环
          z: 10,
          itemStyle: {
            normal: {
              color: 'transparent',
              borderColor: '#19465D',
              borderType: 'solid',
              borderWidth: 2,
            },
          },
          data: yData,
        },
        {
          type: 'bar',
          //silent: true,
          barWidth: '40',
          barGap: '10%', // Make series be overlap
          barCateGoryGap: '10%',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
                {
                  offset: 0,
                  color: '#38B2E6',
                },
                {
                  offset: 1,
                  color: '#0B3147',
                },
              ]),
              opacity: 0.8,
            },
          },
          data: yData,
        },
      ],
    };

    myChart.setOption(options, true);

    // 组件卸载
    return () => {
      myChart.dispose();
    };
  }, []);

  return (
    <div className={styles.container}>
      <div ref={chartRef} className={styles.areaData} />
    </div>
  );
};
export default AreaDeviceData;